svelte-codemirror-editor

A svelte component to create a CodeMirror 6 editor.

Compatibility Matrix

| svelte-codemirror-editor version | svelte version | |----------------------------------|----------------| | v1.x | v3, v4, v5 | | v2.x | v5 (runes) |

Installation

npm install svelte-codemirror-editor

Usage

To use svelte-codemirror-editor, you need to import the package and use it as any Svelte component.

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

    let value = "";
</script>

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

Properties

| Property | Type | Description | Default value | | ---------------------- | --------------------- | --------------------------------------------------------------------- | ------------- | | value | string | The value that will be displayed and edited in the CodeMirror editor. | "" | | class | ClassValue | Class value to add additional css classes to CodeMirror editor. | "" | | 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. | [] | | keybinding | KeyBinding[] | Additional keybindings to register. | [] | | allowMultiSelect | boolean | Whether to allow multi-selecting text. | true | | 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 | | lineWrapping | boolean | Whether to wrap lines in the editor or not. | false | | lineNumbers | boolean | Whether to show line numbers or not. | true | | highlight | object | Hightlighting options. | {} | | history | boolean | object | Enable/Disable and/or configure history. | true | | foldGutter | boolean | object | Enable/disable and/or configure fold gutter. | true | | drawSelection | boolean | object | Enable/disable and/or configure draw selection. | true | | dropCursor | boolean | Whether to show the drop cursor. | true | | indentOnInput | boolean | Whether to indent on input. | true | | syntaxHighlighting | boolean | object | Enable/disable and/or configure syntax highlighting. | true | | bracketMatching | boolean | object | Enable/disable and/or configure bracket matching. | true | | closeBrackets | boolean | Whether to close brackets automatically. | true | | autocompletion | boolean | object | Enable/disable and/or configure autocompletion. | true | | rectangularSelection | boolean | object | Enable/disable and/or configure rectangular selection. | true | | crosshairCursor | boolean | object | Enable/disable and/or configure crosshair cursor. | true | | placeholder | string | The placeholder text or element to show when the editor is empty. | undefined | | nodebounce | boolean | Disable onchange debounce for value updates. (may impact performance) | false | | styles | ThemeSpec | In-place theme configuration. See exemple below. | undefined |

Events

| Event | Type | Description | | --------------- | ------------ | ------------------------------------------------------------------------------- | | onchange | string | Trigger when the code changes. | | onready | EditorView | Trigger when the editor is ready. Allows to retrieve the EditorView instance. | | onreconfigure | EditorView | Trigger when the editor is reconfiguring because of props update. |

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: ["svelte-codemirror-editor", "codemirror", "@codemirror/language-javascript" /* ... */],
    },
    //...
}

Exemples

Basic usage

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

    let value = $state("");
</script>

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

Custom theme

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    import { javascript } from "@codemirror/lang-javascript";
    import { oneDark } from "@codemirror/theme-one-dark";

    let value = $state("");
</script>

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

Custom styles

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

    let value = $state("");
</script>

<CodeMirror
    bind:value
    lang={javascript()}
    styles={{
        "&": {
            width: "500px",
            maxWidth: "100%",
            height: "50rem",
        },
    }}
/>

Get EditorView instance

<script lang="ts">
    import CodeMirror from "svelte-codemirror-editor";
    let view = $state<EditorView>();
</script>

<CodeMirror onready={(cm_view) => view = cm_view} />

License

MIT