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(() => {

front/js/svelte/records/FormField.svelte

@@ -98,6 +98,16 @@
                 bind:graph
                 {record}
         />
+    {:else if field.info.name === "markdown"}
+        <Markdown
+                bind:value={data[field.name]}
+                {schema}
+                {field}
+                {validationErrors}
+                {isCreateMode}
+                bind:graph
+                {record}
+        />
     {:else}
         <svelte:component
             this={formElement}

front/js/svelte/records/elements/Markdown.svelte

@@ -1,21 +1,37 @@
 <script>
     import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
     import { getErrorMessage } from "./errorMessage";
+    import RichEditorFiles from "./RichEditorFiles.svelte";
 
 
     export let value;
     export let field;
+    export let graph;
+    export let record;
     export let isCreateMode;
     // export let id;
     export let validationErrors;
     $: errorMessage = getErrorMessage(validationErrors, field.name);
-    
+    let editor;
+
+    function insertMedia(e){
+        editor.insertMedia(e.detail)
+    }
 </script>
 
 <div class="mb-3">
     
-    <Codemirror bind:value editable={!field.readonly || isCreateMode} />
-
+    <Codemirror bind:this={editor} bind:value editable={!field.readonly || isCreateMode} />
+    {#if field.collections.length > 0}
+        <RichEditorFiles
+                bind:graph
+                {record}
+                {field}
+                {validationErrors}
+                on:editor-insert={insertMedia}
+        >
+        </RichEditorFiles>
+    {/if}
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}