CSS and toolbar updates

django-cms · Dec 22, 2024 · c5ff1a3 · c5ff1a3
1 parent 0c9468d
commit c5ff1a3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
@@ -129,6 +129,13 @@
             inset-inline-start: 0;
         }
     }
+    div.table-row button {
+        width: 9px !important;
+        height: 8px !important;
+        padding: 0  !important;
+        margin: 1px  !important;
+        border: 1px solid var(--dca-gray-lighter, var(--hairline-color)) !important;
+    }
     button, [role="button"] {
         width: auto  !important;  /* for djangocms-admin-style */
         position: relative;

diff --git a/private/js/cms.tiptap.js b/private/js/cms.tiptap.js
@@ -406,7 +406,7 @@ class CMSTipTapPlugin {
                     dropdown = this._populateToolbar(editor, item.items, filter);
                     // Are there any items in the dropdown?
                     if (dropdown.replaceAll(this.separator_markup, '').replaceAll(this.space_markup, '').length === 0) {
-                        continue
+                        continue;
                     }
                 }
                 const title = item.title && item.icon ? `title='${item.title}' ` : '';

diff --git a/private/js/tiptap_plugins/cms.tiptap.toolbar.js b/private/js/tiptap_plugins/cms.tiptap.toolbar.js
@@ -5,6 +5,20 @@
 'use strict';
 
 
+function generateButtonArray(rows, cols) {
+    let buttons = '';
+    for (let i= 0; i < rows; i++) {
+        buttons += '<div class="table-row">';
+
+        for (let j = 0; j < cols; j++) {
+            buttons += `<button title="${i+1}x${j+1}" data-action="Table" data-rows="${j+1}" data-cols="${i+1}"></button>`;
+        }
+        buttons += '</div>';
+    }
+    return buttons;
+}
+
+
 const TiptapToolbar = {
     Undo: {
         action: (editor) => editor.chain().focus().undo().run(),
@@ -151,8 +165,13 @@ const TiptapToolbar = {
     },
     TipTapTable: {
         action: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run(),
+            const rows = parseInt(button.dataset.rows || 3);
+            const cols = parseInt(button.dataset.cols || 3);
+            editor.chain().focus().insertTable({ rows: rows, cols: cols }).run()
+        },
         enabled: (editor) => editor.can().insertTable({ rows: 3, cols: 3 }),
-        type: 'block',
+        type: 'mark',
+        items: generateButtonArray(10,10),
     },
     Code: {
         action: (editor) => editor.chain().focus().toggleCode().run(),