https://github.com/touchifyapp/svelte-codemirror-editor

A svelte component to create a CodeMirror 6+ editor
https://github.com/touchifyapp/svelte-codemirror-editor

Last synced: about 1 year ago
JSON representation

A svelte component to create a CodeMirror 6+ editor

• Host: GitHub
• URL: https://github.com/touchifyapp/svelte-codemirror-editor
• Owner: touchifyapp
• License: mit
• Created: 2022-06-16T14:24:28.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-05T14:15:10.000Z (almost 2 years ago)
• Last Synced: 2025-04-02T04:02:29.673Z (about 1 year ago)
• Language: Svelte
• Homepage: https://touchifyapp.github.io/svelte-codemirror-editor/
• Size: 1.29 MB
• Stars: 194
• Watchers: 3
• Forks: 25
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# svelte-codemirror-editor

[![License](https://img.shields.io/badge/license-MIT-green.svg)](http://opensource.org/licenses/MIT)

[![NPM version](https://img.shields.io/npm/v/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor)

[![NPM download](https://img.shields.io/npm/dm/svelte-codemirror-editor.svg?style=flat-square)](https://npmjs.org/package/svelte-codemirror-editor)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

A svelte component to create a [CodeMirror 6](https://codemirror.net/6/) editor.

## Installation

```bash

npm install svelte-codemirror-editor

```

## Usage

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

```svelte

    import CodeMirror from "svelte-codemirror-editor";

    import { javascript } from "@codemirror/lang-javascript";

    let value = "";

```

## 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.

```javascript

// vite.config.js

const config = {

    //...

    optimizeDeps: {

        exclude: ["svelte-codemirror-editor", "codemirror", "@codemirror/language-javascript" /* ... */],

    },

    //...

}

```

## Exemples

### Basic usage

```svelte

    import CodeMirror from "svelte-codemirror-editor";

    import { javascript } from "@codemirror/lang-javascript";

    let value = "";

```

### Custom theme

```svelte

    import CodeMirror from "svelte-codemirror-editor";

    import { javascript } from "@codemirror/lang-javascript";

    import { oneDark } from "@codemirror/theme-one-dark";

    let value = "";

```

### Custom styles

```svelte

    import CodeMirror from "svelte-codemirror-editor";

    import { javascript } from "@codemirror/lang-javascript";

    let value = "";

```

### Get EditorView instance

```svelte

    import CodeMirror from "svelte-codemirror-editor";

    let view: EditorView;

 view = e.detail} />

```

## License

[MIT](LICENSE)