From c5ff1a3d6045cfa5193aa328f528853280118153 Mon Sep 17 00:00:00 2001
From: Fabian Braun <fsbraun@gmx.de>
Date: Sun, 22 Dec 2024 01:50:02 +0100
Subject: [PATCH] CSS and toolbar updates

---
 private/css/cms.tiptap.css                    |  7 +++++++
 private/js/cms.tiptap.js                      |  2 +-
 .../js/tiptap_plugins/cms.tiptap.toolbar.js   | 21 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
index 048ef2d6..1127fba9 100644
--- 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
index f75ab148..b0623847 100644
--- 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
index 06c5ad24..7816ded3 100644
--- 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(),