├── .eslintignore ├── .eslintrc.cjs ├── .github └── workflows │ ├── gh-pages.yml │ ├── release.yml │ └── test.yml ├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── .releaserc.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── src ├── app.d.ts ├── app.html ├── lib │ ├── CodeMirror.svelte │ ├── index.ts │ └── util.ts ├── routes │ ├── +layout.svelte │ ├── +layout.ts │ ├── +page.svelte │ ├── _util │ │ └── code.ts │ ├── css │ │ └── +page.svelte │ ├── html │ │ └── +page.svelte │ ├── javascript │ │ └── +page.svelte │ └── typescript │ │ └── +page.svelte └── styles.css ├── static └── .nojekyll ├── svelte.config.js ├── tsconfig.json └── vite.config.ts /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /build 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | ignorePatterns: ["*.cjs"], 4 | extends: ["eslint:recommended", "plugin:svelte/recommended", "plugin:@typescript-eslint/recommended", "prettier"], 5 | plugins: ["@typescript-eslint"], 6 | parser: "@typescript-eslint/parser", 7 | parserOptions: { 8 | sourceType: "module", 9 | ecmaVersion: 2020, 10 | extraFileExtensions: [".svelte"], 11 | }, 12 | overrides: [ 13 | { 14 | files: ["*.svelte"], 15 | parser: "svelte-eslint-parser", 16 | parserOptions: { 17 | parser: "@typescript-eslint/parser", 18 | }, 19 | }, 20 | ], 21 | env: { 22 | browser: true, 23 | es2017: true, 24 | node: true, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /.github/workflows/gh-pages.yml: -------------------------------------------------------------------------------- 1 | name: Deploy Github Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: write 10 | 11 | jobs: 12 | build-and-deploy: 13 | concurrency: ci-${{ github.ref }} 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Checkout 17 | uses: actions/checkout@v3 18 | 19 | - name: Use Node.js v20.x 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: 20.x 23 | 24 | - name: Install dependencies 25 | run: npm ci 26 | 27 | - name: Build pages 28 | run: npm run build 29 | 30 | - name: Deploy 31 | uses: JamesIves/github-pages-deploy-action@v4.3.3 32 | with: 33 | branch: gh-pages 34 | folder: build 35 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - alpha 8 | - beta 9 | - next 10 | 11 | jobs: 12 | release: 13 | name: 🚀 Release 14 | runs-on: ubuntu-latest 15 | steps: 16 | - name: Check out code 17 | uses: actions/checkout@v3 18 | with: 19 | fetch-depth: 0 20 | 21 | - name: Use Node.js v20.x 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: 20.x 25 | 26 | - name: Install dependencies 27 | run: npm ci 28 | 29 | - name: Run unit tests 30 | run: npm test 31 | env: 32 | CI: true 33 | 34 | - name: Build and publish release 35 | run: npm run release 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 39 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Unit Tests 2 | 3 | on: [push, pull_request] 4 | 5 | jobs: 6 | test: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [18.x, 20.x] 12 | 13 | steps: 14 | - uses: actions/checkout@v2 15 | 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | 21 | - name: Install dependencies 22 | run: npm ci 23 | 24 | - name: Run unit tests 25 | run: npm test 26 | env: 27 | CI: true 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /build 5 | /.svelte-kit 6 | /package 7 | .env 8 | .env.* 9 | !.env.example 10 | *.zip 11 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | *.md 10 | 11 | # Ignore files for PNPM, NPM and YARN 12 | pnpm-lock.yaml 13 | package-lock.json 14 | yarn.lock 15 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 4, 3 | "trailingComma": "es5", 4 | "printWidth": 120, 5 | "overrides": [{ "files": "*.{json,html}", "options": { "tabWidth": 2 } }] 6 | } 7 | -------------------------------------------------------------------------------- /.releaserc.yml: -------------------------------------------------------------------------------- 1 | branches: 2 | - "+([0-9])?(.{+([0-9]),x}).x" 3 | - main 4 | - next 5 | - next-major 6 | - name: beta 7 | prerelease: true 8 | - name: alpha 9 | prerelease: true 10 | 11 | plugins: 12 | - "@semantic-release/commit-analyzer" 13 | - "@semantic-release/release-notes-generator" 14 | - "@semantic-release/changelog" 15 | - "@semantic-release/npm" 16 | - - "@semantic-release/git" 17 | - assets: ["CHANGELOG.md"] 18 | message: "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}" 19 | - - "@semantic-release/github" 20 | - assets: 21 | - path: "svelte-codemirror-editor.zip" 22 | name: "svelte-codemirror-editor-v${nextRelease.version}.zip" 23 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.4.1](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.4.0...v1.4.1) (2024-09-05) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * allow svelte 5 ([82e58ba](https://github.com/touchifyapp/svelte-codemirror-editor/commit/82e58baaffb3f372858bae51fbb455bfd2f3ba6e)) 7 | * upgrade to sveltekit 2 ([3044f77](https://github.com/touchifyapp/svelte-codemirror-editor/commit/3044f77ad180da7c6fcad85db811c748df9f92b3)) 8 | 9 | # [1.4.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.3.0...v1.4.0) (2024-05-06) 10 | 11 | 12 | ### Features 13 | 14 | * expose editorview on reconfigure via emit ([408a222](https://github.com/touchifyapp/svelte-codemirror-editor/commit/408a222fe13baecf095265c0756ca6d8bdcd7b87)) 15 | 16 | # [1.3.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.2.0...v1.3.0) (2024-02-27) 17 | 18 | 19 | ### Bug Fixes 20 | 21 | * use same event dispatcher ([409cae6](https://github.com/touchifyapp/svelte-codemirror-editor/commit/409cae6ceaae267ad92001708cba155be45b8c98)) 22 | 23 | 24 | ### Features 25 | 26 | * dispatch event 'ready' when editorview initialized ([b400ecf](https://github.com/touchifyapp/svelte-codemirror-editor/commit/b400ecf7867e7b59769ad26eb9eeb2ddd0184ce3)) 27 | 28 | # [1.2.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.1.0...v1.2.0) (2023-11-27) 29 | 30 | 31 | ### Bug Fixes 32 | 33 | * adjust eslint to new plugin ([184d2a6](https://github.com/touchifyapp/svelte-codemirror-editor/commit/184d2a64867affbb94c014ba7abeef064a84c761)) 34 | * allow svelte 4 ([92c99e4](https://github.com/touchifyapp/svelte-codemirror-editor/commit/92c99e4c06d249744474165696410df4ba07f886)) 35 | * use new package structure ([fbb4a2a](https://github.com/touchifyapp/svelte-codemirror-editor/commit/fbb4a2a20146fb51bf8bdbc5246e12a680e2810d)), closes [#25](https://github.com/touchifyapp/svelte-codemirror-editor/issues/25) 36 | 37 | 38 | ### Features 39 | 40 | * allow to disable debounce ([86e3bc6](https://github.com/touchifyapp/svelte-codemirror-editor/commit/86e3bc616d5d10ad50f26acda7079d0605a8ba8d)), closes [#24](https://github.com/touchifyapp/svelte-codemirror-editor/issues/24) [#9](https://github.com/touchifyapp/svelte-codemirror-editor/issues/9) 41 | 42 | # [1.1.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.0.0...v1.1.0) (2022-08-30) 43 | 44 | 45 | ### Features 46 | 47 | * add lineWrapping option ([99d331f](https://github.com/touchifyapp/svelte-codemirror-editor/commit/99d331f3ef58f8d9ce09b024c116dd16d33b2b8f)), closes [#1](https://github.com/touchifyapp/svelte-codemirror-editor/issues/1) 48 | 49 | # 1.0.0 (2022-06-17) 50 | 51 | 52 | ### Features 53 | 54 | * initial implementation ([cd518d8](https://github.com/touchifyapp/svelte-codemirror-editor/commit/cd518d885cd9ba8f260e237dedd329cb92957616)) 55 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2022 Touchify 2 | 3 | 4 | Permission is hereby granted, free of charge, to any person 5 | obtaining a copy of this software and associated documentation 6 | files (the "Software"), to deal in the Software without restriction, 7 | including without limitation the rights to use, copy, modify, merge, 8 | publish, distribute, sublicense, and/or sell copies of the Software, 9 | and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 20 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR 21 | ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 22 | CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 23 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-codemirror-editor 2 | 3 | [![License](https://img.shields.io/badge/license-MIT-green.svg)](http://opensource.org/licenses/MIT) 4 | [![NPM version](https://img.shields.io/npm/v/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor) 5 | [![NPM download](https://img.shields.io/npm/dm/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor) 6 | [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 7 | 8 | A svelte component to create a [CodeMirror 6](https://codemirror.net/6/) editor. 9 | 10 | ## Installation 11 | 12 | ```bash 13 | npm install svelte-codemirror-editor 14 | ``` 15 | 16 | ## Usage 17 | 18 | To use `svelte-codemirror-editor`, you need to import the package and use it as any `Svelte` component. 19 | 20 | ```svelte 21 | 27 | 28 | 29 | ``` 30 | 31 | ## Properties 32 | 33 | | Property | Type | Description | Default value | 34 | | ------------- | ----------------- | -------------------------------------------------------------------- | ------------- | 35 | | `value` | `string` | The value that will be displayed and edited in the CodeMirror editor | `""` | 36 | | `basic` | `boolean` | Whether to use CodeMirror `basicSetup` extensions. | `true` | 37 | | `lang` | `LanguageSupport` | The language extension that will parse and highlight the value. | `undefined` | 38 | | `theme` | `Extension` | The theme extension to customize the appearence of the editor. | `undefined` | 39 | | `extensions` | `Extension[]` | Additional extensions to inject in the editor. | `[]` | 40 | | `useTab` | `boolean` | Whether to use the `Tab` shortcut to handle indentation. | `true` | 41 | | `tabSize` | `number` | The number of space of an indentation level. | `2` | 42 | | `editable` | `boolean` | Whether to make the editor editable or not. | `true` | 43 | | `readonly` | `boolean` | Whether to make the editor readonly or not. | `false` | 44 | | `lineWrapping`| `boolean` | Whether to wrap lines in the editor or not. | `false` | 45 | | `placeholder` | `string` | A placeholder to include when value is empty. | `undefined` | 46 | | `nodebounce` | `boolean` | Whether to stop debouncing value updates. | `false` | 47 | | `styles` | `ThemeSpec` | In-place theme configuration. _See exemple below_. | `undefined` | 48 | 49 | ## Events 50 | 51 | | Event | Type | Description | 52 | | -------- | ------------ | ------------------------------------------------------------------------------- | 53 | | `change` | `string` | Trigger when the code changes. | 54 | | `ready` | `EditorView` | Trigger when the editor is ready. Allows to retrieve the `EditorView` instance. | 55 | 56 | ## Usage with vite / svelte-kit 57 | 58 | If you try to use this component with `vite` or `svelte-kit`, you have to disable dependency optimization for `codemirror` and all its extensions. 59 | 60 | ```javascript 61 | // vite.config.js 62 | const config = { 63 | //... 64 | optimizeDeps: { 65 | exclude: ["svelte-codemirror-editor", "codemirror", "@codemirror/language-javascript" /* ... */], 66 | }, 67 | //... 68 | } 69 | ``` 70 | 71 | ## Exemples 72 | 73 | ### Basic usage 74 | 75 | ```svelte 76 | 82 | 83 | 84 | ``` 85 | 86 | ### Custom theme 87 | 88 | ```svelte 89 | 96 | 97 | 98 | ``` 99 | 100 | ### Custom styles 101 | 102 | ```svelte 103 | 109 | 110 | 121 | ``` 122 | 123 | ### Get EditorView instance 124 | 125 | ```svelte 126 | 130 | 131 | view = e.detail} /> 132 | ``` 133 | 134 | ## License 135 | 136 | [MIT](LICENSE) 137 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-codemirror-editor", 3 | "description": "A svelte component to create a CodeMirror 6+ editor", 4 | "version": "0.0.0-development", 5 | "type": "module", 6 | "license": "MIT", 7 | "svelte": "./dist/index.js", 8 | "author": { 9 | "name": "Touchify", 10 | "email": "dev@touchify.io", 11 | "url": "https://touchify.io" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/touchifyapp/svelte-codemirror-editor" 16 | }, 17 | "files": [ 18 | "dist" 19 | ], 20 | "exports": { 21 | ".": { 22 | "types": "./dist/index.d.ts", 23 | "svelte": "./dist/index.js", 24 | "default": "./dist/index.js" 25 | } 26 | }, 27 | "scripts": { 28 | "dev": "vite dev", 29 | "build": "vite build", 30 | "package": "svelte-package", 31 | "preview": "vite preview", 32 | "test": "npm run lint && npm run check", 33 | "check": "svelte-check --tsconfig ./tsconfig.json", 34 | "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", 35 | "lint": "prettier --check . && eslint .", 36 | "format": "prettier --write .", 37 | "release": "npm run package && npm run release:zip && semantic-release", 38 | "release:zip": "zip -r svelte-codemirror-editor.zip LICENSE README.md package.json dist" 39 | }, 40 | "peerDependencies": { 41 | "codemirror": "^6.0.0", 42 | "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0" 43 | }, 44 | "devDependencies": { 45 | "@codemirror/lang-css": "^6.0.0", 46 | "@codemirror/lang-html": "^6.0.0", 47 | "@codemirror/lang-javascript": "^6.0.0", 48 | "@codemirror/theme-one-dark": "^6.0.0", 49 | "@semantic-release/changelog": "^6.0.1", 50 | "@semantic-release/commit-analyzer": "^11.1.0", 51 | "@semantic-release/git": "^10.0.1", 52 | "@semantic-release/github": "^9.2.3", 53 | "@semantic-release/npm": "^11.0.1", 54 | "@sveltejs/adapter-static": "^3.0.0", 55 | "@sveltejs/kit": "^2.0.0", 56 | "@sveltejs/package": "^2.2.3", 57 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 58 | "@typescript-eslint/eslint-plugin": "^6.12.0", 59 | "@typescript-eslint/parser": "^6.12.0", 60 | "codemirror": "^6.0.0", 61 | "eslint": "^8.54.0", 62 | "eslint-config-prettier": "^9.0.0", 63 | "eslint-plugin-svelte": "^2.35.1", 64 | "prettier": "^3.1.0", 65 | "prettier-plugin-svelte": "^3.1.2", 66 | "semantic-release": "^22.0.8", 67 | "svelte": "^4.2.7", 68 | "svelte-check": "^3.6.2", 69 | "tslib": "^2.6.2", 70 | "typescript": "^5.3.2", 71 | "vite": "^5.0.0" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | // See https://kit.svelte.dev/docs/types#app 4 | // for information about these interfaces 5 | declare namespace App { 6 | // interface Locals {} 7 | // interface Platform {} 8 | // interface Session {} 9 | // interface Stuff {} 10 | } 11 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |
%sveltekit.body%
10 | 11 | 12 | -------------------------------------------------------------------------------- /src/lib/CodeMirror.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 159 | 160 | {#if is_browser} 161 |
162 | {:else} 163 |
164 |
165 | 168 | 169 | 
{value}
170 |
171 | {/if} 172 | 173 | 227 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as default, type ThemeSpec, type StyleSpec } from "./CodeMirror.svelte"; 2 | -------------------------------------------------------------------------------- /src/lib/util.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias */ 2 | 3 | /** 4 | * Reduce calls to the passed function. 5 | * 6 | * @param func - Function to debounce. 7 | * @param threshold - The delay to avoid recalling the function. 8 | * @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold. 9 | */ 10 | export function debounce any>(func: T, threshold: number, execAsap = false): T { 11 | let timeout: any; 12 | 13 | return function debounced(this: any, ...args: any[]): any { 14 | const self = this; 15 | 16 | if (timeout) clearTimeout(timeout); 17 | else if (execAsap) func.apply(self, args); 18 | 19 | timeout = setTimeout(delayed, threshold || 100); 20 | 21 | function delayed(): void { 22 | if (!execAsap) func.apply(self, args); 23 | timeout = null; 24 | } 25 | } as T; 26 | } 27 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | svelte-codemirror-editor 18 | 19 | 20 |
21 |
22 |

svelte-codemirror-editor

23 |
24 | 25 | 32 | 33 |
34 | 35 |
36 |
37 | 38 | 142 | -------------------------------------------------------------------------------- /src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 67 | 68 |
69 | 70 | 71 |
72 |
Basic setup
73 |
74 |
75 | 76 | 77 |
78 |
79 | 80 | 81 |
82 |
83 | 84 | 85 |
86 |
87 | 88 | 89 |
90 |
91 | 92 | 93 |
94 |
95 | 96 |
Tab
97 |
98 |
99 | 100 | 101 |
102 |
103 | 104 | 105 |
106 |
107 | 108 |
Language
109 |
110 |
111 | 112 | 117 |
118 |
119 | 120 |
Theme
121 |
122 |
123 | 124 | 129 |
130 |
131 |
132 |
133 | 134 | 190 | -------------------------------------------------------------------------------- /src/routes/_util/code.ts: -------------------------------------------------------------------------------- 1 | export const javascriptValue = (): string => `/** 2 | * Reduce calls to the passed function. 3 | * 4 | * @param func - Function to debounce. 5 | * @param threshold - The delay to avoid recalling the function. 6 | * @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold. 7 | */ 8 | export function debounce(func, threshold, execAsap = false) { 9 | let timeout; 10 | 11 | return function debounced(...args) { 12 | const self = this; 13 | 14 | if (timeout) clearTimeout(timeout); 15 | else if (execAsap) func.apply(self, args); 16 | 17 | timeout = setTimeout(delayed, threshold || 100); 18 | 19 | function delayed() { 20 | if (!execAsap) func.apply(self, args); 21 | timeout = null; 22 | } 23 | }; 24 | }`; 25 | 26 | export const typescriptValue = (): string => `/** 27 | * Reduce calls to the passed function. 28 | * 29 | * @param func - Function to debounce. 30 | * @param threshold - The delay to avoid recalling the function. 31 | * @param execAsap - If true, the Function is called at the start of the threshold, otherwise the Function is called at the end of the threshold. 32 | */ 33 | export function debounce any>(func: T, threshold: number, execAsap = false): T { 34 | let timeout: any; 35 | 36 | return function debounced(...args: any[]): any { 37 | const self = this; 38 | 39 | if (timeout) clearTimeout(timeout); 40 | else if (execAsap) func.apply(self, args); 41 | 42 | timeout = setTimeout(delayed, threshold || 100); 43 | 44 | function delayed(): void { 45 | if (!execAsap) func.apply(self, args); 46 | timeout = null; 47 | } 48 | } as T; 49 | }`; 50 | 51 | export const htmlValue = (): string => ` 52 | 53 | 54 | 55 | 56 | 70 | 71 | 72 |

Hello world!

73 |
74 |

Welcome on Codemirror

75 |
76 | 102 | 103 | `; 104 | 105 | export const cssValue = (): string => `html { 106 | font-family: sans-serif; 107 | } 108 | 109 | h1 { 110 | text-align: center; 111 | margin-bottom: 3rem; 112 | } 113 | 114 | main { 115 | margin: 2rem 0; 116 | }`; 117 | -------------------------------------------------------------------------------- /src/routes/css/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/routes/html/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/routes/javascript/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/routes/typescript/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | } 4 | 5 | html, 6 | body { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | * { 12 | padding: 0; 13 | margin: 0; 14 | box-sizing: border-box; 15 | } 16 | 17 | .editor, 18 | .editor .cm-editor { 19 | height: 100%; 20 | } 21 | 22 | input, 23 | select { 24 | outline: none; 25 | } 26 | -------------------------------------------------------------------------------- /static/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/touchifyapp/svelte-codemirror-editor/39a6247dec8f79e199a9d92814b9f673690a1ce6/static/.nojekyll -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; 2 | import adapter from "@sveltejs/adapter-static"; 3 | 4 | /** @type {import("@sveltejs/kit").Config} */ 5 | const config = { 6 | preprocess: vitePreprocess(), 7 | 8 | kit: { 9 | adapter: adapter({ 10 | pages: "build", 11 | assets: "build", 12 | fallback: undefined, 13 | }), 14 | 15 | paths: { 16 | base: "/svelte-codemirror-editor", 17 | }, 18 | }, 19 | }; 20 | 21 | export default config; 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | import type { UserConfig } from "vite"; 3 | 4 | const config: UserConfig = { 5 | plugins: [sveltekit()], 6 | 7 | optimizeDeps: { 8 | exclude: ["codemirror"], 9 | }, 10 | }; 11 | 12 | export default config; 13 | --------------------------------------------------------------------------------