Fix build issue

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

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
@@ -129,12 +129,35 @@
             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;
+    div.tt-create-table {
+        display: block;
+        position: relative;
+        width: calc(12px * 10);
+        height: calc(12px * 10 + 1rem);
+        button {
+            position: absolute;
+            top: 0;
+            inset-inline-start: 0;
+            padding: 4px !important; /* needed for djangocms-admin-style */
+            margin: 0px 2px !important;
+            border: 1px solid var(--dca-gray-lighter, var(--hairline-color)) !important;
+            margin-inline-start: var(--mx)  !important;
+            margin-top: var(--my) !important;
+            &:hover {
+                background-color: Highlight;
+            }
+            &:hover::after {
+                position: absolute;
+                top: calc(124px - var(--my));
+                inset-inline-start: calc(-1 * var(--mx));
+                text-align: center;
+                height: 2rem;
+                width: calc(12px * 10);
+                content: attr(title);
+                font-size: 0.7rem;
+                color: var(--dca-gray);
+            }
+        }
     }
     button, [role="button"] {
         width: auto  !important;  /* for djangocms-admin-style */

diff --git a/private/js/tiptap_plugins/cms.tiptap.toolbar.js b/private/js/tiptap_plugins/cms.tiptap.toolbar.js
@@ -6,15 +6,14 @@
 
 
 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>`;
+    let buttons = '<div class="tt-create-table">';
+    for (let j= 0; j < rows; j++) {
+        for (let i = 0; i < cols; i++) {
+            buttons += `<button title="${i+1}x${j+1}" data-action="Table" style="--mx: ${i*12}px; --my: ${j*12+4}px;" data-rows="${j+1}" data-cols="${i+1}"></button>`;
         }
-        buttons += '</div>';
     }
+    buttons += '<div class="tt-selection"></div>'
+    buttons += '</div>';
     return buttons;
 }
 
@@ -164,10 +163,10 @@ const TiptapToolbar = {
         type: 'mark',
     },
     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()
+        action: (editor, button) => {
+            const rows = parseInt(button.dataset.rows);
+            const cols = parseInt(button.dataset.cols);
+            editor.chain().focus().insertTable({ rows: rows, cols: cols }).run();
         },
         enabled: (editor) => editor.can().insertTable({ rows: 3, cols: 3 }),
         type: 'mark',