trix

front/js/svelte/libs/Trix.svelte

@@ -4,6 +4,7 @@
     import "trix/dist/trix.css"
 
     export let value = "";
+    export let field;
     let editor;
 
 
@@ -28,9 +29,9 @@
             e.preventDefault();
         })
     })
-    onDestroy(() => {
+    // onDestroy(() => {
-        editor.removeEventListener("trix-before-initialize")
+    //     editor.removeEventListener("trix-before-initialize")
-    })
+    // })
 
 
     Trix.config.blockAttributes.default.breakOnReturn = false
@@ -39,11 +40,11 @@
 </script>
 
 <div class="tox-wrapper">
-    <input id="x" {value} type="hidden">
+    <input id="x-{field.name}" {value} type="hidden">
     <trix-editor
             bind:this={editor}
             class=" content"
-            input="x"
+            input="x-{field.name}"
             role="textbox"
             tabindex="0"
             on:trix-change={updateValue}

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

@@ -26,9 +26,8 @@
 
 <div class="mb-0">
 
-    <Trix  bind:this={editor} bind:value></Trix>
+    <Trix {field} bind:this={editor} bind:value></Trix>
 <!--    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>-->
-<!--    <TipTap bind:value   bind:this={editor}  />-->
     {#if field.collections.length > 0}
         <RichEditorFiles
                 bind:graph

front/package.json

@@ -11,29 +11,6 @@
         "@codemirror/lang-markdown": "^6.2.5",
         "@codemirror/state": "^6.4.1",
         "@sveltejs/vite-plugin-svelte": "^3.1.1",
-        "@tiptap/core": "^2.6.6",
-        "@tiptap/extension-blockquote": "^2.6.6",
-        "@tiptap/extension-bold": "^2.6.6",
-        "@tiptap/extension-bullet-list": "^2.6.6",
-        "@tiptap/extension-code": "^2.6.6",
-        "@tiptap/extension-code-block": "^2.6.6",
-        "@tiptap/extension-document": "^2.6.6",
-        "@tiptap/extension-dropcursor": "^2.6.6",
-        "@tiptap/extension-hard-break": "^2.6.6",
-        "@tiptap/extension-heading": "^2.6.6",
-        "@tiptap/extension-history": "^2.6.6",
-        "@tiptap/extension-image": "^2.6.6",
-        "@tiptap/extension-italic": "^2.6.6",
-        "@tiptap/extension-list-item": "^2.6.6",
-        "@tiptap/extension-ordered-list": "^2.6.6",
-        "@tiptap/extension-paragraph": "^2.6.6",
-        "@tiptap/extension-strike": "^2.6.6",
-        "@tiptap/extension-table": "^2.6.6",
-        "@tiptap/extension-table-cell": "^2.6.6",
-        "@tiptap/extension-table-header": "^2.6.6",
-        "@tiptap/extension-table-row": "^2.6.6",
-        "@tiptap/extension-text": "^2.6.6",
-        "@tiptap/extension-underline": "^2.6.6",
         "axios": "^1.7.4",
         "codemirror": "^6.0.1",
         "date-fns": "^3.6.0",

front/sass/_dropdown.scss

@@ -16,7 +16,7 @@
   overflow: visible;
   position: absolute;
   border-radius: 12px;
-  z-index: 20;
+  z-index: 22;
   background: var(--p20);
   transition: 600ms;
   flex-grow: 1;

front/sass/_rich.scss

@@ -52,16 +52,30 @@
 }
 
 trix-editor {
-
+  background: var(--p20)!important;
+  border: 1px solid var(--p50)!important;
+  border-radius: 0 0 5px 5px!important;
+  padding: 15px 15px!important;
   & > div {
     margin-bottom: 14px;
     font-size: 16px;
     line-height: 23px;
   }
 
+  &:focus {
+    background: var(--p10)!important;
+
+  }
+  figure.attachment{
+    display: flex!important;
+    flex-direction: column!important;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
   .attachment {
-    background: var(--p10);
+    background: var(--p20);
-    padding: 0px;
+    padding: 12px 0;
     text-align: center;
     display: flex;
     justify-content: center;