tip tap and trix

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"/>