markdown insert media

front/js/svelte/records/elements/File.svelte

@@ -4,6 +4,7 @@
     import PreviewFile from "../previews/PreviewFile.svelte";
     import FileDialog from "../../dialog/FileDialog.svelte";
     import Uploader from "../../files/Uploader.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     export let field;
     export let record;
@@ -22,7 +23,7 @@
     function insertFiles(e) {
         e.preventDefault();
         browseModal.close();
-        value = [...(value ?? []), ...(e.detail ?? [])];
+        value = [...(value ?? []), ...(e.detail.files ?? [])];
     }
 
     function replaceFiles(e) {
@@ -41,12 +42,15 @@
     }
 </script>
 
-<div class="mb-0">
-    <button class="button" on:click={openBrowseModal}> Browse </button>
+<div
+    class="mb-0"
+    style="display: flex; align-items: start; justify-content: start; gap:6px"
+>
+    <button class="button" on:click={openBrowseModal}>
+        <Icon icon="photo-film"></Icon> Browse
+    </button>
 
-    <div>
-        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
-    </div>
+    <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
 </div>
 {#if value.length > 0}
     <Sortable sortableClass="mt-3" on:update={reorder}>

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}

front/js/svelte/records/elements/RichEditorFiles.svelte

@@ -1,15 +1,13 @@
 <script>
-    import PreviewFile from "../previews/PreviewFile.svelte";
-    import Dropdown from "../../common/Dropdown.svelte";
-    import Dialog from "../../dialog/Dialog.svelte";
-    import { insertEdges } from "./reference.js";
     import { getContext } from "svelte";
     import FileDialog from "../../dialog/FileDialog.svelte";
     import Uploader from "../../files/Uploader.svelte";
+    import Icon from "../../common/Icon.svelte";
 
     const channel = getContext("channel");
     export let field;
     export let record;
+    export let onFilesInserted;
     let browseModal;
 
     function openBrowseModal(e) {
@@ -19,6 +17,7 @@
 
     function insertFiles(e) {
         e.preventDefault();
+        onFilesInserted(e);
         browseModal.close();
     }
 
@@ -30,17 +29,20 @@
     function uploadComplete(e) {}
 </script>
 
-<div class="mb-3">
-    <label class="mt-4 mb-3">Rich editor files</label>
-    <button class="button" on:click={openBrowseModal}> Browse </button>
+<div
+    class="mb-0"
+    style="display: flex; align-items: start; justify-content: start; gap:6px"
+>
+    <button class="button" on:click={openBrowseModal}>
+        <Icon icon="photo-film"></Icon> Browse
+    </button>
 
-    <div>
-        <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
-    </div>
+    <Uploader recordId={record.id} on:uploadComplete={uploadComplete} />
 </div>
 
 <FileDialog
     bind:this={browseModal}
     on:insert_files={insertFiles}
     on:replace_files={replaceFiles}
+    presetMode={true}
 ></FileDialog>