markdown insert media

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

@@ -1,11 +1,13 @@
 <script>
+    import { getContext } from "svelte";
+    import { htmlurl, presetUrl } from "../../files/imageserver";
     import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
     import { getErrorMessage } from "./errorMessage";
     import RichEditorFiles from "./RichEditorFiles.svelte";
-
+    const channel = getContext("channel");
     export let value;
     export let field;
-    export let graph;
+
     export let record;
     export let isCreateMode;
     // export let id;
@@ -16,21 +18,38 @@
     function insertMedia(e) {
         editor.insertMedia(e.detail);
     }
+
+    function onFilesInserted(e) {
+        console.log(e.detail);
+        const presetPath = e.detail.preset.path;
+
+        e.detail.files.map((aFile) => {
+            let html = htmlurl(channel, record, presetPath);
+
+            editor.insertMedia({
+                html: html,
+                url: presetUrl(channel, aFile, presetPath),
+                originalUrl: channel.filesUrl + "/" + aFile.path,
+                file: aFile,
+            });
+        });
+    }
 </script>
 
 <div class="mb-3">
+    <RichEditorFiles
+        {record}
+        {field}
+        {validationErrors}
+        {onFilesInserted}
+        on:editor-insert={insertMedia}
+    ></RichEditorFiles>
     <Codemirror
         bind:this={editor}
         bind:value
         editable={!field.readonly || isCreateMode}
     />
-    <RichEditorFiles
-        bind:graph
-        {record}
-        {field}
-        {validationErrors}
-        on:editor-insert={insertMedia}
-    ></RichEditorFiles>
+
     {#if errorMessage}
         <div class="invalid-feedback d-block">
             {errorMessage}