codemirror insert

front/js/svelte/libs/CodemirrorMarkdown.svelte

@@ -1,10 +1,10 @@
 <script>
 
     // https://codesandbox.io/s/codemirror-remark-editor-4m4z9?file=/src/CodeEditor.js:374-387
-    import {onMount, onDestroy} from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import {basicSetup, EditorView} from "codemirror";
-    import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-    import {EditorState, Compartment} from "@codemirror/state";
+    import {autocompletion, completionKeymap} from "@codemirror/autocomplete";
+    import {Compartment, EditorState} from "@codemirror/state";
     import {keymap} from "@codemirror/view";
     import {indentWithTab} from "@codemirror/commands";
     import {markdown} from "@codemirror/lang-markdown";
@@ -15,6 +15,30 @@
     export let value;
     export let editable = true;
 
+    export function insertMedia(info) {
+
+        let insertText = "";
+        if (info.record._file.width > 0) {
+            insertText = `![${info.record._file.originalName}](${info.url})`;
+        } else {
+            insertText = `[${info.record._file.originalName}](${info.originalUrl})`;
+        }
+        const cursor = codeMirrorView.state.selection.main.head;
+        const transaction = codeMirrorView.state.update({
+            changes: {
+                from: cursor,
+                insert: insertText,
+            },
+            // the next 2 lines will set the appropriate cursor position after inserting the new text.
+            selection: {anchor: cursor + 1},
+            scrollIntoView: true,
+        });
+
+        if (transaction) {
+            codeMirrorView.dispatch(transaction);
+        }
+    }
+
     onMount(() => {
         let language = new Compartment();
         let tabSize = new Compartment();
@@ -51,7 +75,6 @@
         });
 
 
-
     });
 
     onDestroy(() => {