0.0.2-development • Published 12 months ago
@nick-jonas/svelte-codemirror-editor v0.0.2-development
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 |
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",
},
}}
/>