build editor

2023-10-23 18:05:06 +03:00
parent e2e3842cd0
commit 9346969d2b
19 changed files with 534 additions and 206 deletions
@@ -0,0 +1,61 @@
+<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}/>