tip tap and trix

front/js/svelte/libs/Tinymce.svelte

@@ -100,8 +100,8 @@
         tinymce.init({...config, ...additionalConfig});
     });
 
-    export function insertMedia(html){
-        activeEditor.execCommand('InsertHTML', false, html);
+    export function insertMedia(info){
+        activeEditor.execCommand('InsertHTML', false, info.html);
     }
 
 </script>

front/js/svelte/libs/TipTap.svelte

@@ -3,9 +3,12 @@
     import {Editor} from '@tiptap/core'
     import Document from '@tiptap/extension-document'
     import Paragraph from '@tiptap/extension-paragraph'
+    import Dropcursor from '@tiptap/extension-dropcursor'
     import Text from '@tiptap/extension-text'
     import Heading from '@tiptap/extension-heading'
+    import HardBreak from '@tiptap/extension-hard-break'
     import Blockquote from '@tiptap/extension-blockquote';
+    import CodeBlock from '@tiptap/extension-code-block';
     import Bold from '@tiptap/extension-bold';
     import BulletList from '@tiptap/extension-bullet-list';
     import Code from '@tiptap/extension-code';
@@ -19,6 +22,8 @@
     import TableCell from '@tiptap/extension-table-cell';
     import TableHeader from '@tiptap/extension-table-header';
     import Underline from '@tiptap/extension-underline';
+    import Image from '@tiptap/extension-image';
+    import Icon from "../common/Icon.svelte";
 
     let element;
     let editor;
@@ -32,19 +37,22 @@
                 Paragraph,
                 Text,
                 Bold,
+                ListItem,
                 BulletList,
                 Code,
+                CodeBlock,
                 History,
                 Italic,
-                ListItem,
+                HardBreak,
                 OrderedList,
-                ListItem,
                 Strike,
                 Table,
                 TableRow,
                 TableCell,
                 TableHeader,
                 Underline,
+                Dropcursor,
+                Image,
                 Heading.configure({
                     levels: [1, 2, 3],
                 }),
@@ -56,7 +64,11 @@
                 // force re-render so `editor.isActive` works as expected
                 editor = editor;
             },
+            onUpdate: ({editor}) => {
+                value = editor.getHTML()
+            },
         });
+
     });
 
     onDestroy(() => {
@@ -64,33 +76,99 @@
             editor.destroy();
         }
     });
+
+    export function insertMedia(info){
+        editor.chain().focus().setImage({ src: info.url }).run()
+    }
 </script>
 
 {#if editor}
-    <button
-            on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-            class:active={editor.isActive('heading', { level: 1 })}
-    >
-        H1
-    </button>
-    <button
-            on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-            class:active={editor.isActive('heading', { level: 2 })}
-    >
-        H2
-    </button>
-    <button
-            on:click={() => editor.chain().focus().setParagraph().run()}
-            class:active={editor.isActive('paragraph')}
-    >
-        P
-    </button>
-    <button
-            on:click={() => editor.chain().focus().toggleBold().run()}
-            class:active={editor.isActive('bold')}
-    >
-        Bold
-    </button>
+    <div class="editor-toolbar">
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                class:active={editor.isActive('heading', { level: 1 })}
+        >
+            H1
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                class:active={editor.isActive('heading', { level: 2 })}
+        >
+            H2
+        </button>
+
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleBold().run()}
+                class:active={editor.isActive('bold')}
+        >
+            B
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleItalic().run()}
+                class:active={editor.isActive('italic')}
+        >
+            <em>IT</em>
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleUnderline().run()}
+                class:active={editor.isActive('underline')}
+        >
+            <u>U</u>
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleStrike().run()}
+                class:active={editor.isActive('strike')}
+        >
+            <s>S</s>
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.commands.unsetAllMarks()}
+        >
+            Clear
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleCode().run()}
+                class:active={editor.isActive('code')}
+        >
+            Code
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleBulletList().run()}
+                class:active={editor.isActive('bulletList')}
+        >
+            <Icon icon="list"></Icon>
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleOrderedList().run()}
+                class:active={editor.isActive('orderedList')}
+        >
+            <Icon icon="ordered-list"></Icon>
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleBlockquote().run()}
+                class:active={editor.isActive('blockquote')}
+        >
+            ""
+        </button>
+        <button
+                class="button"
+                on:click={() => editor.chain().focus().toggleCodeBlock().run()}
+                class:active={editor.isActive('codeBlock')}
+        >
+            cb
+        </button>
+    </div>
 {/if}
 
 <div bind:this={element} class="content"/>

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>