├── static └── .nojekyll ├── .npmrc ├── src ├── routes │ ├── +layout.ts │ ├── css │ │ └── +page.svelte │ ├── html │ │ └── +page.svelte │ ├── javascript │ │ └── +page.svelte │ ├── typescript │ │ └── +page.svelte │ ├── _util │ │ └── code.ts │ ├── +layout.svelte │ └── +page.svelte ├── lib │ ├── index.ts │ ├── util.ts │ └── CodeMirror.svelte ├── app.html ├── app.d.ts └── styles.css ├── .gitignore ├── .prettierignore ├── prettier.config.js ├── vite.config.ts ├── tsconfig.json ├── svelte.config.js ├── .releaserc.yml ├── .eslintrc.cjs ├── .github └── workflows │ ├── test.yml │ ├── gh-pages.yml │ └── release.yml ├── LICENSE ├── eslint.config.js ├── package.json ├── CHANGELOG.md └── README.md /static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /src/routes/+layout.ts: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as default } from "./CodeMirror.svelte"; 2 | export type * from "./CodeMirror.svelte"; 3 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("prettier").Config} */ 2 | const config = { 3 | tabWidth: 4, 4 | trailingComma: "es5", 5 | printWidth: 120, 6 | overrides: [{ files: "*.{json,html}", options: { tabWidth: 2 } }], 7 | }; 8 | 9 | export default config; 10 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | %sveltekit.head% 7 | 8 | 9 |

%sveltekit.body%

10 | 11 | 12 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/routes/css/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /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/routes/html/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/routes/javascript/+page.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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/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: [20.x, 22.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: Prepare svelte-kit 25 | run: npx svelte-kit sync 26 | 27 | - name: Run unit tests 28 | run: npm test 29 | env: 30 | CI: true 31 | -------------------------------------------------------------------------------- /.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 v22.x 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: 22.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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: Prepare svelte-kit 30 | run: npx svelte-kit sync 31 | 32 | - name: Run unit tests 33 | run: npm test 34 | env: 35 | CI: true 36 | 37 | - name: Build and publish release 38 | run: npm run release 39 | env: 40 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 41 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 42 | -------------------------------------------------------------------------------- /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. -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import prettier from "eslint-config-prettier"; 2 | import { includeIgnoreFile } from "@eslint/compat"; 3 | import js from "@eslint/js"; 4 | import svelte from "eslint-plugin-svelte"; 5 | import globals from "globals"; 6 | import { fileURLToPath } from "node:url"; 7 | import ts from "typescript-eslint"; 8 | import svelteConfig from "./svelte.config.js"; 9 | 10 | const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url)); 11 | 12 | export default ts.config( 13 | includeIgnoreFile(gitignorePath), 14 | js.configs.recommended, 15 | ...ts.configs.recommended, 16 | ...svelte.configs.recommended, 17 | prettier, 18 | ...svelte.configs.prettier, 19 | { 20 | languageOptions: { 21 | globals: { ...globals.browser, ...globals.node }, 22 | }, 23 | rules: { 24 | // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects. 25 | // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors 26 | "no-undef": "off", 27 | }, 28 | }, 29 | { 30 | files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"], 31 | languageOptions: { 32 | parserOptions: { 33 | projectService: true, 34 | extraFileExtensions: [".svelte"], 35 | parser: ts.parser, 36 | svelteConfig, 37 | }, 38 | }, 39 | } 40 | ); 41 | -------------------------------------------------------------------------------- /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": "^5.0.0" 43 | }, 44 | "devDependencies": { 45 | "@codemirror/lang-css": "^6.3.1", 46 | "@codemirror/lang-html": "^6.4.9", 47 | "@codemirror/lang-javascript": "^6.2.4", 48 | "@codemirror/theme-one-dark": "^6.1.3", 49 | "@eslint/compat": "^1.3.2", 50 | "@eslint/js": "^9.35.0", 51 | "@semantic-release/changelog": "^6.0.3", 52 | "@semantic-release/commit-analyzer": "^13.0.1", 53 | "@semantic-release/git": "^10.0.1", 54 | "@semantic-release/github": "^11.0.5", 55 | "@semantic-release/npm": "^12.0.2", 56 | "@sveltejs/adapter-static": "^3.0.9", 57 | "@sveltejs/kit": "^2.37.1", 58 | "@sveltejs/package": "^2.5.0", 59 | "@sveltejs/vite-plugin-svelte": "^6.1.4", 60 | "codemirror": "^6.0.2", 61 | "eslint": "^9.18.0", 62 | "eslint-config-prettier": "^10.1.8", 63 | "eslint-plugin-svelte": "^3.12.2", 64 | "globals": "^16.3.0", 65 | "prettier": "^3.6.2", 66 | "prettier-plugin-svelte": "^3.4.0", 67 | "semantic-release": "^24.2.7", 68 | "svelte": "^5.38.7", 69 | "svelte-check": "^4.3.1", 70 | "tslib": "^2.8.1", 71 | "typescript": "^5.9.2", 72 | "typescript-eslint": "^8.43.0", 73 | "vite": "^7.1.5" 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # [2.1.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v2.0.0...v2.1.0) (2025-10-10) 2 | 3 | 4 | ### Features 5 | 6 | * add keybindings property to register custom keymap handler ([cc7a8d5](https://github.com/touchifyapp/svelte-codemirror-editor/commit/cc7a8d5ac78d0f2a914d4497ea1509113e44fa89)) 7 | 8 | # [2.0.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.4.2...v2.0.0) (2025-09-08) 9 | 10 | 11 | ### Features 12 | 13 | * upgrade to Svelte 5 ([1eb7f59](https://github.com/touchifyapp/svelte-codemirror-editor/commit/1eb7f595e148e823986489876b31ac7743b39bb0)) 14 | 15 | 16 | ### BREAKING CHANGES 17 | 18 | * drop compatibility with Svelte v3 and v4 19 | 20 | ## [1.4.2](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.4.1...v1.4.2) (2025-09-08) 21 | 22 | 23 | ### Bug Fixes 24 | 25 | * self closing tag to avoid warnings ([1d21c2c](https://github.com/touchifyapp/svelte-codemirror-editor/commit/1d21c2c2ff2243dc705f86d21cd3608bad12fa6c)) 26 | 27 | ## [1.4.1](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.4.0...v1.4.1) (2024-09-05) 28 | 29 | 30 | ### Bug Fixes 31 | 32 | * allow svelte 5 ([82e58ba](https://github.com/touchifyapp/svelte-codemirror-editor/commit/82e58baaffb3f372858bae51fbb455bfd2f3ba6e)) 33 | * upgrade to sveltekit 2 ([3044f77](https://github.com/touchifyapp/svelte-codemirror-editor/commit/3044f77ad180da7c6fcad85db811c748df9f92b3)) 34 | 35 | # [1.4.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.3.0...v1.4.0) (2024-05-06) 36 | 37 | 38 | ### Features 39 | 40 | * expose editorview on reconfigure via emit ([408a222](https://github.com/touchifyapp/svelte-codemirror-editor/commit/408a222fe13baecf095265c0756ca6d8bdcd7b87)) 41 | 42 | # [1.3.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.2.0...v1.3.0) (2024-02-27) 43 | 44 | 45 | ### Bug Fixes 46 | 47 | * use same event dispatcher ([409cae6](https://github.com/touchifyapp/svelte-codemirror-editor/commit/409cae6ceaae267ad92001708cba155be45b8c98)) 48 | 49 | 50 | ### Features 51 | 52 | * dispatch event 'ready' when editorview initialized ([b400ecf](https://github.com/touchifyapp/svelte-codemirror-editor/commit/b400ecf7867e7b59769ad26eb9eeb2ddd0184ce3)) 53 | 54 | # [1.2.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.1.0...v1.2.0) (2023-11-27) 55 | 56 | 57 | ### Bug Fixes 58 | 59 | * adjust eslint to new plugin ([184d2a6](https://github.com/touchifyapp/svelte-codemirror-editor/commit/184d2a64867affbb94c014ba7abeef064a84c761)) 60 | * allow svelte 4 ([92c99e4](https://github.com/touchifyapp/svelte-codemirror-editor/commit/92c99e4c06d249744474165696410df4ba07f886)) 61 | * 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) 62 | 63 | 64 | ### Features 65 | 66 | * 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) 67 | 68 | # [1.1.0](https://github.com/touchifyapp/svelte-codemirror-editor/compare/v1.0.0...v1.1.0) (2022-08-30) 69 | 70 | 71 | ### Features 72 | 73 | * add lineWrapping option ([99d331f](https://github.com/touchifyapp/svelte-codemirror-editor/commit/99d331f3ef58f8d9ce09b024c116dd16d33b2b8f)), closes [#1](https://github.com/touchifyapp/svelte-codemirror-editor/issues/1) 74 | 75 | # 1.0.0 (2022-06-17) 76 | 77 | 78 | ### Features 79 | 80 | * initial implementation ([cd518d8](https://github.com/touchifyapp/svelte-codemirror-editor/commit/cd518d885cd9ba8f260e237dedd329cb92957616)) 81 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | svelte-codemirror-editor 18 | 19 | 20 |

21 | 24 | 25 | 32 | 33 |

34 | 35 |

36 |

37 | 38 | 142 | -------------------------------------------------------------------------------- /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 | ## Compatibility Matrix 11 | 12 | | svelte-codemirror-editor version | svelte version | 13 | |----------------------------------|----------------| 14 | | v1.x | v3, v4, v5 | 15 | | v2.x | v5 *(runes)* | 16 | 17 | ## Installation 18 | 19 | ```bash 20 | npm install svelte-codemirror-editor 21 | ``` 22 | 23 | ## Usage 24 | 25 | To use `svelte-codemirror-editor`, you need to import the package and use it as any `Svelte` component. 26 | 27 | ```svelte 28 | 34 | 35 | 36 | ``` 37 | 38 | ## Properties 39 | 40 | | Property | Type | Description | Default value | 41 | | ---------------------- | --------------------- | --------------------------------------------------------------------- | ------------- | 42 | | `value` | `string` | The value that will be displayed and edited in the CodeMirror editor. | `""` | 43 | | `class` | `ClassValue` | Class value to add additional css classes to CodeMirror editor. | `""` | 44 | | `lang` | `LanguageSupport` | The language extension that will parse and highlight the value. | `undefined` | 45 | | `theme` | `Extension` | The theme extension to customize the appearence of the editor. | `undefined` | 46 | | `extensions` | `Extension[]` | Additional extensions to inject in the editor. | `[]` | 47 | | `keybinding` | `KeyBinding[]` | Additional keybindings to register. | `[]` | 48 | | `allowMultiSelect` | `boolean` | Whether to allow multi-selecting text. | `true` | 49 | | `useTab` | `boolean` | Whether to use the `Tab` shortcut to handle indentation. | `true` | 50 | | `tabSize` | `number` | The number of space of an indentation level. | `2` | 51 | | `editable` | `boolean` | Whether to make the editor editable or not. | `true` | 52 | | `readonly` | `boolean` | Whether to make the editor readonly or not. | `false` | 53 | | `lineWrapping` | `boolean` | Whether to wrap lines in the editor or not. | `false` | 54 | | `lineNumbers` | `boolean` | Whether to show line numbers or not. | `true` | 55 | | `highlight` | `object` | Hightlighting options. | `{}` | 56 | | `history` | `boolean` \| `object` | Enable/Disable and/or configure history. | `true` | 57 | | `foldGutter` | `boolean` \| `object` | Enable/disable and/or configure fold gutter. | `true` | 58 | | `drawSelection` | `boolean` \| `object` | Enable/disable and/or configure draw selection. | `true` | 59 | | `dropCursor` | `boolean` | Whether to show the drop cursor. | `true` | 60 | | `indentOnInput` | `boolean` | Whether to indent on input. | `true` | 61 | | `syntaxHighlighting` | `boolean` \| `object` | Enable/disable and/or configure syntax highlighting. | `true` | 62 | | `bracketMatching` | `boolean` \| `object` | Enable/disable and/or configure bracket matching. | `true` | 63 | | `closeBrackets` | `boolean` | Whether to close brackets automatically. | `true` | 64 | | `autocompletion` | `boolean` \| `object` | Enable/disable and/or configure autocompletion. | `true` | 65 | | `rectangularSelection` | `boolean` \| `object` | Enable/disable and/or configure rectangular selection. | `true` | 66 | | `crosshairCursor` | `boolean` \| `object` | Enable/disable and/or configure crosshair cursor. | `true` | 67 | | `placeholder` | `string` | The placeholder text or element to show when the editor is empty. | `undefined` | 68 | | `nodebounce` | `boolean` | Disable onchange debounce for value updates. (may impact performance) | `false` | 69 | | `styles` | `ThemeSpec` | In-place theme configuration. _See exemple below_. | `undefined` | 70 | 71 | ## Events 72 | 73 | | Event | Type | Description | 74 | | --------------- | ------------ | ------------------------------------------------------------------------------- | 75 | | `onchange` | `string` | Trigger when the code changes. | 76 | | `onready` | `EditorView` | Trigger when the editor is ready. Allows to retrieve the `EditorView` instance. | 77 | | `onreconfigure` | `EditorView` | Trigger when the editor is reconfiguring because of props update. | 78 | 79 | ## Usage with vite / svelte-kit 80 | 81 | If you try to use this component with `vite` or `svelte-kit`, you have to disable dependency optimization for `codemirror` and all its extensions. 82 | 83 | ```javascript 84 | // vite.config.js 85 | const config = { 86 | //... 87 | optimizeDeps: { 88 | exclude: ["svelte-codemirror-editor", "codemirror", "@codemirror/language-javascript" /* ... */], 89 | }, 90 | //... 91 | } 92 | ``` 93 | 94 | ## Exemples 95 | 96 | ### Basic usage 97 | 98 | ```svelte 99 | 105 | 106 | 107 | ``` 108 | 109 | ### Custom theme 110 | 111 | ```svelte 112 | 119 | 120 | 121 | ``` 122 | 123 | ### Custom styles 124 | 125 | ```svelte 126 | 132 | 133 | 144 | ``` 145 | 146 | ### Get EditorView instance 147 | 148 | ```svelte 149 | 153 | 154 | view = cm_view} /> 155 | ``` 156 | 157 | ## License 158 | 159 | [MIT](LICENSE) 160 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 80 | 81 | 200 | 201 | 257 | -------------------------------------------------------------------------------- /src/lib/CodeMirror.svelte: -------------------------------------------------------------------------------- 1 | 99 | 100 | 352 | 353 | {#if is_browser} 354 |

355 | {:else} 356 |

357 |

358 |

359 |

Loading editor...

360 |

361 | 362 |

{value}

363 |

364 | {/if} 365 | 366 | 420 | --------------------------------------------------------------------------------

Hello world!

Basic setup

Tab

Language

Theme