tip tap and trix

front/js/svelte/libs/Trix.svelte

@@ -1,21 +1,52 @@
 <script>
-    import {onMount} from "svelte";
+    import {onDestroy, onMount} from "svelte";
     import Trix from "trix"
-    import customcss from "./tinymce.css?inline";
     import "trix/dist/trix.css"
 
     export let value = "";
-    let textareaEl;
-    let lastVal;
-    let editorWrapper;
-    let activeEditor;
+    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>`)
+
+        }
+
+
+    }
+
+    onMount(() => {
+        editor.addEventListener("trix-file-accept", (e) => {
+            e.preventDefault();
+        })
+    })
+    onDestroy(() => {
+        editor.removeEventListener("trix-before-initialize")
+    })
+
 
     Trix.config.blockAttributes.default.breakOnReturn = false
     console.log(Trix.config)
 
 </script>
 
-<div bind:this={editorWrapper} class="tox-wrapper">
-    <input  bind:this={textareaEl} id="x"  bind:value type="hidden">
-    <trix-editor  class="trix-content content" input="x"></trix-editor>
+<div class="tox-wrapper">
+    <input id="x" {value} type="hidden">
+    <trix-editor
+            bind:this={editor}
+            class=" content"
+            input="x"
+            role="textbox"
+            tabindex="0"
+            on:trix-change={updateValue}
+
+    ></trix-editor>
 </div>