svelte-codemirror-editor

A svelte component to create a CodeMirror 6 editor.

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	""
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
lineWrapping	boolean	Whether to wrap lines in the editor or not.	false
placeholder	string	A placeholder to include when value is empty.	undefined
nodebounce	boolean	Whether to stop debouncing value updates.	false
styles	ThemeSpec	In-place theme configuration. See exemple below.	undefined

Events

Event	Type	Description
change	string	Trigger when the code changes.
ready	EditorView	Trigger when the editor is ready. Allows to retrieve the EditorView instance.

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 = "";
</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 = "";
</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 = "";
</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: EditorView;
</script>

<CodeMirror on:ready={(e) => view = e.detail} />

License

MIT