Prepared improvment of editor code structure (Typescript part)

ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml

@@ -775,9 +775,7 @@ tabindex="-1"
                     </h6>
                 </c:when>
                 <c:otherwise>
-                    <div
+                    <div id="#{cc.attrs.editorId}-edit-dialog-title">
-                        id="#{cc.attrs.editorId}-edit-dialog-title"
-                        >
                         #{cc.attrs.editDialogTitle} #{cc.attrs.selectedLocale}
                     </div>
                 </c:otherwise>
@@ -791,9 +789,11 @@ tabindex="-1"
                                     </button>-->
         </div>
         <!--<div class="modal-body">-->
-        <div class="cms-tiptap-editor"
+        <div
+            class="cms-tiptap-editor"
             data-locale="#{cc.attrs.selectedLocale}"
-             data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}">
+            data-variant-url="#{cc.attrs.variantUrl}/#{cc.attrs.selectedLocale}"
+        >
             <div class="cms-tiptap-editor-buttons d-flex mb-1">
                 <div class="px-2 cms-tiptap-editor-textformatting">
                     <button
@@ -807,10 +807,7 @@ tabindex="-1"
                     </span> -->
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-strong-emph"
-                        btn btn-outline-dark
-                        tiptap-strong-emph
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.strong_emph']}"
                         type="button"
                     >
@@ -830,58 +827,38 @@ tabindex="-1"
                     </span> -->
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-strikethrough"
-                        btn btn-outline-dark
-                        tiptap-strikethrough
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.strikethrough']}"
                         type="button"
                     >
-                        <bootstrap:svgIcon
+                        <bootstrap:svgIcon icon="type-strikethrough" />
-                            icon="type-strikethrough"
-                            />
                         <!-- <span class="sr-only">
                         #{CmsAdminMessages['cms_editor.buttons.strikethrough']}
                     </span> -->
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-subscript"
-                        btn btn-outline-dark
-                        tiptap-subscript
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.subscript']}"
                         type="button"
                     >
-                        <span aria-hidden="true"
+                        <span aria-hidden="true">x<sub>n</sub></span>
-                              >x<sub>n</sub></span
-                        >
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-superscript"
-                        btn btn-outline-dark
-                        tiptap-superscript
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.superscript']}"
                         type="button"
                     >
-                        <span aria-hidden="true"
+                        <span aria-hidden="true">x<sup>n</sup></span>
-                              >x<sup>n</sup></span
-                        >
                     </button>
                 </div>
                 <div class="px-2 cms-tiptap-editor-headings">
                     <ui:repeat begin="1" end="6" var="level">
                         <button
-                            class="
+                            class="btn btn-outline-dark tiptap-h#{level}"
-                            btn btn-outline-dark
-                            tiptap-h#{level}
-                            "
                             title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
                             type="button"
                         >
-                            <span aria-hidden="true"
+                            <span aria-hidden="true">H#{level}</span>
-                                  >H#{level}</span
-                            >
                         </button>
                     </ui:repeat>
                     <!-- <button class="btn btn-outline-dark tiptap-h2"
@@ -892,30 +869,21 @@ tabindex="-1"
                 </div>
                 <div class="px-2 cms-tiptap-editor-paragraphs">
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-paragraph"
-                        btn btn-outline-dark
-                        tiptap-paragraph
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
                         type="button"
                     >
                         <bootstrap:svgIcon icon="type" />
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-blockquote"
-                        btn btn-outline-dark
-                        tiptap-blockquote
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
                         type="button"
                     >
                         <bootstrap:svgIcon icon="blockquote-left" />
                     </button>
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-codeblock"
-                        btn btn-outline-dark
-                        tiptap-codeblock
-                        "
                         title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
                         type="button"
                     >
@@ -940,10 +908,7 @@ tabindex="-1"
                 </div>
                 <div class="px-2 cms-tiptap-editor-table">
                     <button
-                        class="
+                        class="btn btn-outline-dark tiptap-insert-table"
-                        btn btn-outline-dark
-                        tiptap-insert-table
-                        "
                         data-target="#insert-table-dialog"
                         data-toggle="modal"
                         title="#{CmsAdminMessage['cms_editor.buttons.insert_table']}"
@@ -961,8 +926,10 @@ tabindex="-1"
                         <div class="modal-dialog">
                             <form class="modal-content">
                                 <div class="modal-header">
-                                    <h4 class="modal-title"
+                                    <h4
-                                        id="insert-table-dialog-title">
+                                        class="modal-title"
+                                        id="insert-table-dialog-title"
+                                    >
                                         #{CmsAdminMessages['cms_editor.dialogs.insert_table.title']}
                                     </h4>
                                     <button
@@ -971,9 +938,7 @@ tabindex="-1"
                                         data-dismiss="modal"
                                         type="button"
                                     >
-                                        <bootstrap:svgIcon
+                                        <bootstrap:svgIcon icon="x" />
-                                            icon="x"
-                                            />
                                     </button>
                                 </div>
                                 <div class="modal-body">
@@ -1019,17 +984,28 @@ tabindex="-1"
                                 </div>
                             </form>
                         </div>
+                        <button
+                            class="btn btn-outline-dark tiptap-insert-table-row"
+                            title="#{CmsAdminMessage['cms_editor.buttons.insert_table_row']}"
+                            type="button"
+                        >
+                            Insert row
+                        </button>
                     </div>
                 </div>
             </div>
-            <div class="cms-tiptap-editor-canvas border"
+            <div
+                class="cms-tiptap-editor-canvas border"
                 data-locale="#{cc.attrs.selectedLocale}"
-                 data-variant-url="#{cc.attrs.variantUrl}"></div>
+                data-variant-url="#{cc.attrs.variantUrl}"
+            ></div>
             <!--</div>-->
             <!--<div class="modal-footer">-->
             <div class="mt-3">
-                <a class="btn btn-warning cms-editor-cancel-button"
+                <a
-                   href="#{backUrl}">
+                    class="btn btn-warning cms-editor-cancel-button"
+                    href="#{backUrl}"
+                >
                     #{cc.attrs.editDialogCancelLabel}
                 </a>
                 <button

ccm-cms/src/main/typescript/content-sections/cms-editor.ts

@@ -1,6 +1,6 @@
 import "bootstrap";
 import * as $ from "jquery";
-import { Editor } from "@tiptap/core";
+import { ChainedCommands, Editor } from "@tiptap/core";
 import Gapcursor from "@tiptap/extension-gapcursor";
 import StarterKit from "@tiptap/starter-kit";
 import Subscript from "@tiptap/extension-subscript";
@@ -10,6 +10,18 @@ import TableRow from "@tiptap/extension-table-row";
 import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
 
+const BUTTONS: CmsEditorButton[] = [
+    {
+        selector: ".tiptap-emph",
+        command: editor => {
+            return editor.chain().focus().toggleItalic().run();
+        },
+        can: editor => {
+            return editor.can().chain().focus().toggleItalic().run();
+        }
+    }
+];
+
 document.addEventListener("DOMContentLoaded", function (event) {
     // const viewButtons = document.querySelectorAll(
     //     ".cms-editor .cms-editor-variants .cms-editor-view-button"
@@ -119,19 +131,31 @@ async function initEditor(editorElem: HTMLElement) {
     const buttonsElem = editorElem.querySelector(".cms-tiptap-editor-buttons");
     if (buttonsElem) {
         initEditorButtons(editor, buttonsElem);
+        for (const button of BUTTONS) {
+            buttonsElem
+                .querySelector(button.selector)
+                ?.addEventListener("click", event => {
+                    event.preventDefault();
+                    button.command(editor);
+                });
+        }
     } else {
         console.error("editorButtons are null");
         return;
     }
+
+    editor.on("selectionUpdate", (editorParam: EditorParam) => {
+        // ToDo
+    });
 }
 
 function initEditorButtons(editor: Editor, buttonsElem: Element) {
-    buttonsElem
+    // buttonsElem
-        .querySelector(".tiptap-emph")
+    //     .querySelector(".tiptap-emph")
-        ?.addEventListener("click", event => {
+    //     ?.addEventListener("click", event => {
-            event.preventDefault();
+    //         event.preventDefault();
-            editor.chain().focus().toggleItalic().run();
+    //         editor.chain().focus().toggleItalic().run();
-        });
+    //     });
 
     buttonsElem
         .querySelector(".tiptap-strong-emph")
@@ -208,18 +232,6 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
             editor.chain().focus().toggleOrderedList().run();
         });
 
-    editor.on("selectionUpdate", ({ editor }) => {
-        console.log("Selection updated");
-        console.log(
-            `can insertRowBefore: ${editor
-                .can()
-                .chain()
-                .focus()
-                .addRowBefore()
-                .run()}`
-        );
-    });
-
     buttonsElem
         .querySelector(".cms-editor-insert-table-dialog .btn-success")
         ?.addEventListener("click", event => {
@@ -252,6 +264,25 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
                 .run();
             $("#insert-table-dialog").modal("hide");
         });
+
+    buttonsElem
+        .querySelector(".cms-editor-insert-table-row")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().addRowAfter().run();
+        });
+
+    editor.on("selectionUpdate", ({ editor }) => {
+        console.log("Selection updated");
+        console.log(
+            `can insertRowAfter: ${editor
+                .can()
+                .chain()
+                .focus()
+                .addRowAfter()
+                .run()}`
+        );
+    });
 }
 
 async function showEditDialog(event: Event) {
@@ -459,3 +490,13 @@ async function showViewDialog(event: Event) {
     const viewDialogJquery = $(`#${viewDialogId}`) as any;
     viewDialogJquery.modal("toggle");
 }
+
+interface CmsEditorButton {
+    selector: string;
+    command: (editor: Editor) => boolean;
+    can: (editor: Editor) => boolean;
+}
+
+interface EditorParam {
+    editor: Editor;
+}