sveltemirror

A svelte wrapper for CodeMirror 6

Installation

npm install sveltemirror

Usage

To use sveltemirror, you need to import the package and use it as any Svelte component. For more see docs.

<script lang="ts">
    import CodeMirror from "sveltemirror";
    import { javascript } from "@codemirror/lang-javascript";

    let value = "";
</script>

<CodeMirror bind:value lang={javascript()} />

Note: It debounces and checks for old vs new automatically. There is no need to repeat that logic in your code

Properties

Property	Type	Description	Default value
`value`	`string`	The value that will be displayed and edited in the CodeMirror editor	`""`
`view`	`EditorView`	Codemirror view instance	`""`
`basic`	`boolean`	Whether to use CodeMirror `basicSetup` extensions.	`true`
`lang`	`LanguageSupport`	The language extension that will parse and highlight the value.	`undefined`
`theme`	`Extension`	The theme extension to customize the appearence of the editor.	`undefined`
`extensions`	`Extension[]`	Additional extensions to inject in the editor.	`[]`
`useTab`	`boolean`	Whether to use the `Tab` shortcut to handle indentation.	`true`
`tabSize`	`number`	The number of space of an indentation level.	`2`
`editable`	`boolean`	Whether to make the editor editable or not.	`true`
`readonly`	`boolean`	Whether to make the editor readonly or not.	`false`
`placeholder`	`string`	A placeholder to include when value is empty.	`undefined`
`styles`	`ThemeSpec`	In-place theme configuration. See exemple below.	`undefined`
`delay`	`number`	The delay in ms before the `change` event is triggered. i.e the debounce duration.	`300`
`persist`	`boolean`	Whether to persist the editor state in the local storage.	`false`
`id`	`string`	The id of the editor. It is recommended to use this property when using multiple editors on the same page. If you edit with multiple editors on localhost then it'll treat all of them as the same. So add an id anyway	`undefined`

Events

Event	Type	Description
`change`	`string`	Trigger when the code changes

Usage with vite/svelte-kit

If you try to use this component with vite or svelte-kit, you have to disable dependency optimization for codemirror and all its extensions.

// vite.config.js
const config = {
    //...
    optimizeDeps: {
        exclude: ["codemirror", "@codemirror/language-javascript" /* ... */],
    },
    //...
}

License

Most of this repository is still the original work by Touchify. Thanks to them for their work ❤️

MIT