file uploads

front/js/svelte/libs/Trix.svelte

@@ -1,68 +1,66 @@
 <script>
-    import {onDestroy, onMount} from "svelte";
-    import Trix from "trix"
-    import "trix/dist/trix.css"
+    import { onDestroy, onMount } from "svelte";
+    import Trix from "trix";
+    import "trix/dist/trix.css";
 
     export let value = "";
     export let field;
     let editor;
 
-
     function updateValue(e) {
         value = e.target.value;
     }
 
-    export function insertMedia(info){
-        if(info.record._file.width > 0){
-            var attachment = new Trix.Attachment({ content: info.html })
-            editor.editor.insertAttachment(attachment)
-        }else{
-            editor.editor.insertHTML(`<a href="${info.originalUrl}">${info.record._file.originalName}</a>`)
-
+    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>`,
+            );
         }
-
-
     }
 
     onMount(() => {
         editor.addEventListener("trix-file-accept", (e) => {
             e.preventDefault();
-        })
+        });
 
         editor.addEventListener("trix-before-initialize", (e) => {
-            Trix.config.blockAttributes.heading1.tagName = 'h2';
-            const { toolbarElement } = e.target
-            const h1Button = toolbarElement.querySelector("[data-trix-attribute=heading1]")
-            h1Button.insertAdjacentHTML("afterend", `<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`)
-        })
-
-
-    })
+            Trix.config.blockAttributes.heading1.tagName = "h2";
+            const { toolbarElement } = e.target;
+            const h1Button = toolbarElement.querySelector(
+                "[data-trix-attribute=heading1]",
+            );
+            h1Button.insertAdjacentHTML(
+                "afterend",
+                `<button style="text-indent: initial;padding: 14px 10px !important;" type="button" class="trix-button trix-button--icon" data-trix-attribute="heading3" title="Heading 3" tabindex="-1" data-trix-active="">H3</button>`,
+            );
+        });
+    });
     // onDestroy(() => {
     //     editor.removeEventListener("trix-before-initialize")
     // })
 
-
-    Trix.config.blockAttributes.default.breakOnReturn = false
+    Trix.config.blockAttributes.default.breakOnReturn = false;
     Trix.config.blockAttributes.heading3 = {
-        tagName: 'h3',
+        tagName: "h3",
         terminal: true,
         breakOnReturn: true,
-        group: false
-    }
+        group: false,
+    };
     // console.log(Trix.config)
-
 </script>
 
 <div class="tox-wrapper">
-    <input id="x-{field.name}" {value} type="hidden">
+    <input id="x-{field.name}" {value} type="hidden" />
     <trix-editor
-            bind:this={editor}
-            class=" content"
-            input="x-{field.name}"
-            role="textbox"
-            tabindex="0"
-            on:trix-change={updateValue}
-
+        bind:this={editor}
+        class=" content"
+        input="x-{field.name}"
+        role="textbox"
+        tabindex="0"
+        on:trix-change={updateValue}
     ></trix-editor>
 </div>