rich editor

front/js/svelte/files/imageserver.js

@@ -32,7 +32,7 @@ export function htmlurl(channel, file, preset) {
   } else if (file.mime === "image/svg+xml") {
     html = `<img src="${url}" alt="${file.path}"/>`;
   } else {
-    html = `<a href="${url}">${file.originalName}</a>`;
+    html = `<a href="${url}">${file.filename}</a>`;
   }
 
   return html;

front/js/svelte/libs/CodemirrorMarkdown.svelte

@@ -8,19 +8,25 @@
     import { indentWithTab } from "@codemirror/commands";
     import { markdown } from "@codemirror/lang-markdown";
     import { lintKeymap } from "@codemirror/lint";
+    import { fileurl, presetUrl } from "../files/imageserver";
 
     let parentElement;
     let codeMirrorView;
     export let value;
     export let editable = true;
 
-    export function insertMedia(info) {
-        let insertText = "";
-        if (info.file.width > 0) {
-            insertText = `![${info.file.filename}](${info.url})`;
-        } else {
-            insertText = `[${info.file.filename}](${info.originalUrl})`;
-        }
+    export function insertMedia(channel, files, presetPath) {
+        const insertText = files.reduce((text, aFile) => {
+            const url =
+                aFile.width > 0
+                    ? presetUrl(channel, aFile, presetPath)
+                    : fileurl(channel, aFile);
+
+            let addTest = `![${aFile.filename}](${url})`;
+
+            return text + "\n" + addTest;
+        }, "");
+
         const cursor = codeMirrorView.state.selection.main.head;
         const transaction = codeMirrorView.state.update({
             changes: {

front/js/svelte/libs/Trix.svelte

@@ -11,15 +11,16 @@
         value = e.target.value;
     }
 
-    export function insertMedia(info) {
-        if (info.file.width > 0) {
-            var attachment = new Trix.Attachment({ content: info.html });
-            editor.editor.insertAttachment(attachment);
-        } else {
-            editor.editor.insertHTML(
-                `<a href="${info.originalUrl}">${info.file.filename}</a>`,
-            );
-        }
+    export function insertMedia(html) {
+        console.log({ html });
+        var attachment = new Trix.Attachment({ content: html });
+        editor.editor.insertAttachment(attachment);
+        // if (info.file.width > 0) {
+        //     var attachment = new Trix.Attachment({ content: html });
+        //     editor.editor.insertAttachment(attachment);
+        // } else {
+        //     editor.editor.insertHTML(html);
+        // }
     }
 
     onMount(() => {

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

@@ -15,34 +15,14 @@
     $: errorMessage = getErrorMessage(validationErrors, field.name);
     let editor;
 
-    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,
-            });
-        });
+        editor.insertMedia(channel, e.detail.files, presetPath);
     }
 </script>
 
 <div class="mb-3">
-    <RichEditorFiles
-        {record}
-        {field}
-        {validationErrors}
-        {onFilesInserted}
-        on:editor-insert={insertMedia}
+    <RichEditorFiles {record} {field} {validationErrors} {onFilesInserted}
     ></RichEditorFiles>
     <Codemirror
         bind:this={editor}

front/js/svelte/records/elements/RichEditor.svelte

@@ -2,7 +2,10 @@
     import RichEditorFiles from "./RichEditorFiles.svelte";
     import { getErrorMessage } from "./errorMessage";
     import Trix from "../../libs/Trix.svelte";
+    import { htmlurl } from "../../files/imageserver";
+    import { getContext } from "svelte";
 
+    const channel = getContext("channel");
     export let value;
     export let field;
     export let record;
@@ -12,19 +15,18 @@
 
     $: errorMessage = getErrorMessage(validationErrors, field.name);
 
-    function insertMedia(e) {
-        editor.insertMedia(e.detail);
+    function onFilesInserted(e) {
+        const presetPath = e.detail.preset.path;
+        e.detail.files.map((aFile) => {
+            const html = htmlurl(channel, aFile, presetPath);
+            editor.insertMedia(html);
+        });
     }
 </script>
 
 <div class="mb-0">
     <Trix {field} bind:this={editor} bind:value></Trix>
-    <RichEditorFiles
-        {record}
-        {field}
-        {validationErrors}
-        on:editor-insert={insertMedia}
-    ></RichEditorFiles>
+    <RichEditorFiles {record} {field} {onFilesInserted}></RichEditorFiles>
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">