Added Tiptab table plugin

ccm-cms/package-lock.json

@@ -3085,6 +3085,50 @@
             "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-2.0.0-beta.4.tgz",
             "integrity": "sha512-rTQCnSnloSf6UN1y3zhu6j41MxrcCVWm5JIPX8VEt60WsOXJLAc/YJHLYi2FWhh/Psq8k78sPrmZbjYUrj3Dkw=="
         },
+        "@tiptap/extension-table": {
+            "version": "2.0.0-beta.29",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.29.tgz",
+            "integrity": "sha512-2yK4dZboe7+KQoJeM0p6v7xx+G/yKDWbbtDtYRnFecD2Oiz1u44DeMKGzVqPXcMYWxmCnAeUK0kcbmwnPYyBTg==",
+            "requires": {
+                "prosemirror-tables": "^1.1.1",
+                "prosemirror-view": "^1.19.3"
+            },
+            "dependencies": {
+                "prosemirror-model": {
+                    "version": "1.14.3",
+                    "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.14.3.tgz",
+                    "integrity": "sha512-yzZlBaSxfUPIIP6U5Edh5zKxJPZ5f7bwZRhiCuH3UYkWhj+P3d8swHsbuAMOu/iDatDc5J/Qs5Mb3++mZf+CvQ==",
+                    "requires": {
+                        "orderedmap": "^1.1.0"
+                    }
+                },
+                "prosemirror-view": {
+                    "version": "1.19.3",
+                    "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.19.3.tgz",
+                    "integrity": "sha512-YP/ZzVwqPPwbHbJi97U2/CeyZ8PIHmLJt0gIhZWP8XfnuBRGG3y+jwLzUoBVmiuoUCy3R6PSB+pOATliGzLfPg==",
+                    "requires": {
+                        "prosemirror-model": "^1.14.3",
+                        "prosemirror-state": "^1.0.0",
+                        "prosemirror-transform": "^1.1.0"
+                    }
+                }
+            }
+        },
+        "@tiptap/extension-table-cell": {
+            "version": "2.0.0-beta.14",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.14.tgz",
+            "integrity": "sha512-VoZ8SF8urU1/I3XnjDez2pbDO0h4cow+o8Xi6mhkMTXbxr212T674W7lu5DVMJ4Y1NF1eLe9eJ9kGJE43cA0+Q=="
+        },
+        "@tiptap/extension-table-header": {
+            "version": "2.0.0-beta.16",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.16.tgz",
+            "integrity": "sha512-L/r+ez4G7ZlninS4MwK4tYoVuA6bMMCz7OLvHGBmp24vZm7OA3qyUP4+GGtOXtdhv3aydeBis03gSrrB50aRWw=="
+        },
+        "@tiptap/extension-table-row": {
+            "version": "2.0.0-beta.14",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.14.tgz",
+            "integrity": "sha512-mewdlTqgBCyzeZIZ6F08gfuzwsiYjQ7BvABo2UhDfr0+EN2UvfJj0bT3tGgeZhMxT5Js2DXL+c+ZOVJxWJ9faQ=="
+        },
         "@tiptap/extension-text": {
             "version": "2.0.0-beta.7",
             "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.7.tgz",
@@ -8640,6 +8684,18 @@
                 "prosemirror-transform": "^1.0.0"
             }
         },
+        "prosemirror-tables": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.1.tgz",
+            "integrity": "sha512-LmCz4jrlqQZRsYRDzCRYf/pQ5CUcSOyqZlAj5kv67ZWBH1SVLP2U9WJEvQfimWgeRlIz0y0PQVqO1arRm1+woA==",
+            "requires": {
+                "prosemirror-keymap": "^1.1.2",
+                "prosemirror-model": "^1.8.1",
+                "prosemirror-state": "^1.3.1",
+                "prosemirror-transform": "^1.2.1",
+                "prosemirror-view": "^1.13.3"
+            }
+        },
         "prosemirror-transform": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.3.2.tgz",

ccm-cms/package.json

@@ -23,6 +23,10 @@
         "@tiptap/core": "^2.0.0-beta.46",
         "@tiptap/extension-subscript": "^2.0.0-beta.4",
         "@tiptap/extension-superscript": "^2.0.0-beta.4",
+        "@tiptap/extension-table": "^2.0.0-beta.29",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.14",
+        "@tiptap/extension-table-header": "^2.0.0-beta.16",
+        "@tiptap/extension-table-row": "^2.0.0-beta.14",
         "@tiptap/starter-kit": "^2.0.0-beta.43",
         "bootstrap": "^4.6.0",
         "bootstrap-icons": "^1.5.0",

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

@@ -1,9 +1,14 @@
 import "bootstrap";
 import * as $ from "jquery";
 import { Editor } from "@tiptap/core";
+import Gapcursor from "@tiptap/extension-gapcursor";
 import StarterKit from "@tiptap/starter-kit";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
+import Table from "@tiptap/extension-table";
+import TableRow from "@tiptap/extension-table-row";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
 
 document.addEventListener("DOMContentLoaded", function (event) {
     const viewButtons = document.querySelectorAll(
@@ -353,6 +358,64 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
             event.preventDefault();
             editor.chain().focus().toggleCodeBlock().run();
         });
+
+    buttonsElem
+        .querySelector(".tiptap-ul")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().toggleBulletList().run();
+        });
+
+    buttonsElem
+        .querySelector(".tiptap-ol")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            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 => {
+            event.preventDefault();
+            const dialog = buttonsElem.querySelector(
+                ".cms-editor-insert-table-dialog"
+            );
+            if (!dialog) {
+                return;
+            }
+            const rowsInput = dialog.querySelector(
+                "input#rows"
+            ) as HTMLInputElement;
+            const colsInput = dialog.querySelector(
+                "input#cols"
+            ) as HTMLInputElement;
+            const headerRowInput = dialog.querySelector(
+                "input#headerRow"
+            ) as HTMLInputElement;
+            console.log(`rowsInput = ${rowsInput}`);
+            console.log(`colsInput = ${colsInput}`);
+            console.log(`headerRowInput = ${headerRowInput}`);
+            const rows = rowsInput.value;
+            const cols = colsInput.value;
+            const headerRow = JSON.parse(headerRowInput.value) as Boolean;
+            editor
+                .chain()
+                .focus()
+                .insertTable({ cols: cols, rows: rows, headerRow: headerRow })
+                .run();
+        });
 }
 
 async function showEditDialog(event: Event) {
@@ -402,7 +465,16 @@ async function showEditDialog(event: Event) {
 
     const editor = new Editor({
         element: tiptapDiv,
-        extensions: [StarterKit, Subscript, Superscript],
+        extensions: [
+            Gapcursor,
+            StarterKit,
+            Subscript,
+            Superscript,
+            Table.configure({ resizable: true }),
+            TableRow,
+            TableHeader,
+            TableCell
+        ],
         content: variant
     });