62 lines
1.8 KiB
Svelte
62 lines
1.8 KiB
Svelte
|
<script>
|
||
|
|
|
||
|
|
// https://codesandbox.io/s/codemirror-remark-editor-4m4z9?file=/src/CodeEditor.js:374-387
|
||
|
|
import {onMount, onDestroy} from "svelte";
|
||
|
|
import {basicSetup, EditorView} from "codemirror";
|
||
|
|
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
|
||
|
|
import {EditorState, Compartment} from "@codemirror/state";
|
||
|
|
import {keymap} from "@codemirror/view";
|
||
|
|
import {indentWithTab} from "@codemirror/commands";
|
||
|
|
import {markdown} from "@codemirror/lang-markdown";
|
||
|
|
import {lintKeymap} from "@codemirror/lint";
|
||
|
|
|
||
|
|
let parentElement;
|
||
|
|
let codeMirrorView;
|
||
|
|
export let value;
|
||
|
|
export let editable = true;
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
let language = new Compartment();
|
||
|
|
let tabSize = new Compartment();
|
||
|
|
|
||
|
|
let state = EditorState.create({
|
||
|
|
doc: value,
|
||
|
|
extensions: [
|
||
|
|
basicSetup,
|
||
|
|
keymap.of([
|
||
|
|
indentWithTab,
|
||
|
|
...lintKeymap,
|
||
|
|
...completionKeymap
|
||
|
|
]),
|
||
|
|
language.of(markdown()),
|
||
|
|
markdown(),
|
||
|
|
autocompletion(),
|
||
|
|
tabSize.of(EditorState.tabSize.of(4)),
|
||
|
|
basicSetup,
|
||
|
|
EditorView.editable.of(editable),
|
||
|
|
EditorView.updateListener.of(function (e) {
|
||
|
|
if (e.docChanged) {
|
||
|
|
value = e.state.doc.toString();
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
EditorView.lineWrapping
|
||
|
|
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
codeMirrorView = new EditorView({
|
||
|
|
state,
|
||
|
|
parent: parentElement,
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
onDestroy(() => {
|
||
|
|
if (codeMirrorView) {
|
||
|
|
codeMirrorView.destroy();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="is-editable-{editable}" bind:this={parentElement}/>
|