Skip to content

touchifyapp/svelte-codemirror-editor

Repository files navigation

svelte-codemirror-editor

License NPM version NPM download semantic-release

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