tip tap and trix

front/js/svelte/common/Icon.svelte

@@ -113,8 +113,21 @@
             path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
             viewBox: "0 0 24 24",
         },
+        "list": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
+            viewBox: "0 0 24 24",
+        },
+        "ordered-list": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
+            viewBox: "0 0 24 24",
+        },
+        "italic": {
+            path: '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
+            viewBox: "0 0 24 24",
+        }
     };
 
+
     export let width = 16;
     export let height = 16;
     export let icon = "";

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>

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

@@ -2,6 +2,8 @@
     import Tinymce from "../../libs/Tinymce.svelte";
     import RichEditorFiles from "./RichEditorFiles.svelte";
     import {getErrorMessage} from "./errorMessage";
+    import TipTap from "../../libs/TipTap.svelte";
+    import Trix from "../../libs/Trix.svelte";
 
     export let value;
     export let field;
@@ -24,8 +26,9 @@
 
 <div class="mb-0">
 
-
-    <Tinymce  bind:this={editor} bind:value {additionalConfig}/>
+    <Trix  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
@@ -38,7 +41,7 @@
 
         </RichEditorFiles>
     {/if}
-    <!--    <TipTap bind:value />-->
+
 
     {#if errorMessage}
         <div class="invalid-feedback d-block">

front/js/svelte/records/previews/PreviewFile.svelte

@@ -4,7 +4,7 @@
     import {createEventDispatcher, getContext} from "svelte";
     import Preview from "../../files/Preview.svelte";
     import {previewTitle} from "./../Preview";
-    import {htmlurl} from "../../files/imageserver.js"
+    import {fileurl, htmlurl} from "../../files/imageserver.js"
     import Status from "./../Status.svelte";
     import Dropdown from "../../common/Dropdown.svelte";
 
@@ -25,8 +25,13 @@
 
     function insert(e, preset) {
         e.preventDefault();
-        let html = htmlurl(channel,record, preset)
-        dispatch("editor-insert", html);
+        let html = htmlurl(channel, record, preset)
+        dispatch("editor-insert", {
+            html: html,
+            url:  channel.filesUrl + `/templates/${preset}/${record._file.path}`,
+            originalUrl:  channel.filesUrl + "/" + record._file.path,
+            record: record
+        });
     }
 
 </script>