@nick-jonas/svelte-codemirror-editor
TypeScript icon, indicating that this package has built-in type declarations

0.0.2-development • Public • Published

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
placeholder string A placeholder to include when value is empty. undefined
styles ThemeSpec In-place theme configuration. See exemple below. 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" /* ... */],
    },
    //...
}

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",
        },
    }}
/>

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @nick-jonas/svelte-codemirror-editor

Weekly Downloads

6

Version

0.0.2-development

License

MIT

Unpacked Size

15.4 kB

Total Files

10

Last publish

Collaborators

  • nick-jonas