Minor fixes

django-cms · Dec 26, 2024 · 108547e · 108547e
1 parent 2759236
commit 108547e
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 26 deletions.
diff --git a/djangocms_text/editors.py b/djangocms_text/editors.py
@@ -209,29 +209,44 @@ def default(self, obj):
         "title": _("Table"),
         "icon": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z"/></svg>',
     },
+    "toggleHeaderRow": {
+        "title": _("Header row"),
+        "icon": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16"><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z"/></svg>',
+    },
+    "toggleHeaderColumn": {
+        "title": _("Header column"),
+        "icon": '<svg class="bi bi-table" width="16" height="16" fill="currentColor" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m2 16a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2zm2-15v4h3v-4zm4 0v4h3v-4zm4 0v4h3v-3a1 1 0 0 0-1-1zm3 5h-3v4h3zm0 5h-3v4h2a1 1 0 0 0 1-1zm-4 4v-4h-3v4zm-4 0v-4h-3v4zm-3-5h3v-4h-3zm4-4v4h3v-4z"/></svg>',
+    },
     "addRowBefore": {
         "title": _("Add row before"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m19 9.3271h-1v4h-16v-4h-1v3.5a1.5 1.5 0 0 0 1.5 1.5h15a1.5 1.5 0 0 0 1.5-1.5z" style="opacity:.6"/><path d="m8 13.327v-4h-1v4z" style="opacity:.6"/><path d="m13 13.327v-4h-1v4z" style="opacity:.6"/><path d="m8 9.3271h4v-2h-4z"/><path d="m13 1.3271v8h5v-2h-4v-4h4v-2z"/><path d="m12 1.3271v8h1v-8z"/><path d="m8 1.3271v2h4v-2z"/><path d="m7 1.3271v8h1v-8z"/><path d="m2 1.3271v2h4v4h-4v2h5v-8z"/><path d="m1 9.3271h1v-8h-1z"/><path d="m1 9.3271v-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1z"/><path d="m19 1.3271h-1v8h1z"/><path d="m19 1.3271v8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1z"/><path d="m16.012 12.062a0.5 0.5 0 0 1 0.5 0.5v3h3a0.5 0.5 0 0 1 0 1h-3v3a0.5 0.5 0 0 1-1 0v-3h-3a0.5 0.5 0 0 1 0-1h3v-3a0.5 0.5 0 0 1 0.5-0.5"/></svg>',
     },
     "addRowAfter": {
         "title": _("Add row after"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m2.5 1a1.5 1.5 0 0 0-1.5 1.5v3.5h1v-4h16v4h1v-3.5a1.5 1.5 0 0 0-1.5-1.5z" style="opacity:.6"/><path d="m12 6h1v-4h-1z" style="opacity:.6"/><path d="m7 6h1v-4h-1z" style="opacity:.6"/><path d="m8 14h4v-2h-4z" style=""/><path d="m17.469 12v2h0.53125v-2z" style=""/><path d="m13 6v8h1.4297v-2h-0.42969v-4h4v-2z" style=""/><path d="m12 6v8h1v-8z" style=""/><path d="m8 6v2h4v-2z" style=""/><path d="m7 6v8h1v-8z" style=""/><path d="m2 6v2h4v4h-4v2h5v-8z" style=""/><path d="m1 14h1v-8h-1z" style=""/><path d="m1 14v-8a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1z" style=""/><path d="m19 6h-1v8h1z" style=""/><path d="m19 6v8a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1z" style=""/><path d="m15.962 12.017a0.5 0.5 0 0 1 0.5 0.5v3h3a0.5 0.5 0 0 1 0 1h-3v3a0.5 0.5 0 0 1-1 0v-3h-3a0.5 0.5 0 0 1 0-1h3v-3a0.5 0.5 0 0 1 0.5-0.5"/></svg>',
     },
     "addColumnBefore": {
         "title": _("Add column before"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m9.079 1v1h4v16h-4v1h3.5a1.5 1.5 0 0 0 1.5-1.5v-15a1.5 1.5 0 0 0-1.5-1.5z" style="opacity:.6"/><path d="m13.079 7v1h-10.944v-1zm0 5v1h-10.944v-1z" opacity=".6" style="stroke-width:.82703"/><path d="m9.079 19h-8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1z"/><path d="m9.079 18h-8v1h8z"/><path d="m9.079 2h-2v4h-4v-4h-2v16h2v-4h4v4h2zm-6 6h4v4h-4z"/><path d="m9.079 1h-8v1h8z"/><path d="m2.079 0a1 1 0 0 0-1 1h8a1 1 0 0 0-1-1z"/><path d="m15.941 11.962a0.5 0.5 0 0 1 0.5 0.5v3h3a0.5 0.5 0 0 1 0 1h-3v3a0.5 0.5 0 0 1-1 0v-3h-3a0.5 0.5 0 0 1 0-1h3v-3a0.5 0.5 0 0 1 0.5-0.5"/></svg>',
     },
     "addColumnAfter": {
         "title": _("Add column after"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6 19v-1h-4v-16h4v-1h-3.5a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5z" style="opacity:.6"/><path d="m12.837 7v1h-10.837v-1zm0 5v1h-10.837v-1z" opacity=".6" style="stroke-width:.82298"/><path d="m14 19h-8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1z" style=""/><path d="m14 18h-8v1h8z" style=""/><path d="m14 17.125h-2v0.875h2z" style=""/><path d="m6 2v16h2v-4h4v0.57422h2v-12.574h-2v4h-4v-4zm2 6h4v4h-4z" style=""/><path d="m14 1h-8v1h8z" style=""/><path d="m7 0a1 1 0 0 0-1 1h8a1 1 0 0 0-1-1z" style=""/><path d="m15.882 11.882a0.5 0.5 0 0 1 0.5 0.5v3h3a0.5 0.5 0 0 1 0 1h-3v3a0.5 0.5 0 0 1-1 0v-3h-3a0.5 0.5 0 0 1 0-1h3v-3a0.5 0.5 0 0 1 0.5-0.5"/></svg>',
     },
     "deleteRow": {
         "title": _("Delete row"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m2.5 1a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5h7.0137a6.7974 6.7974 0 0 1-0.60938-1h-6.9043v-16h16v6.9102a6.7974 6.7974 0 0 1 1 0.60938v-7.0195a1.5 1.5 0 0 0-1.5-1.5z" style="opacity:.6"/><path d="m12 2v6.8906a6.7974 6.7974 0 0 1 1-0.39258v-6.498z" style="opacity:.6"/><path d="m7 2v16h1v-16z" style="opacity:.6"/><path d="m1 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.252a6.7974 6.7974 0 0 1 0.63086-2h-0.88281v-4h4v0.89258a6.7974 6.7974 0 0 1 2-0.625v-0.26758h4v0.91016a6.7974 6.7974 0 0 1 2 1.5078v-3.418a1 1 0 0 0-1-1h-18zm1 2h4v4h-4v-4z"/><path d="m14.974 10.027a4.9673 4.9673 0 0 0-4.9668 4.9668 4.9673 4.9673 0 0 0 4.9668 4.9668 4.9673 4.9673 0 0 0 4.9668-4.9668 4.9673 4.9673 0 0 0-4.9668-4.9668zm-3.5 4.4668h7a0.5 0.5 0 0 1 0 1h-7a0.5 0.5 0 0 1 0-1z" style="fill:#000000;stroke-width:0"/></svg>',
     },
     "deleteColumn": {
         "title": _("Delete column"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m2.5 1a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5h7.0254a6.7974 6.7974 0 0 1-0.61328-1h-6.9121v-16h16v6.9023a6.7974 6.7974 0 0 1 1 0.60547v-7.0078a1.5 1.5 0 0 0-1.5-1.5h-15z"/><path d="m2 7v1h16v-1z" style="opacity:.6"/><path d="m8.5039 13a6.7974 6.7974 0 0 1 0.39648-1h-6.9004v1z" style="opacity:.6"/><path d="m7 0a1 1 0 0 0-1 1v18a1 1 0 0 0 1 1h3.4102a6.7974 6.7974 0 0 1-1.498-2h-0.91211v-4h0.2793a6.7974 6.7974 0 0 1 0.63477-2h-0.91406v-4h4v0.91406a6.7974 6.7974 0 0 1 2-0.63281v-7.2812a1 1 0 0 0-1-1h-6zm1 2h4v4h-4v-4z"/><path d="m15 10.034a4.9673 4.9673 0 0 0-4.9668 4.9668 4.9673 4.9673 0 0 0 4.9668 4.9668 4.9673 4.9673 0 0 0 4.9668-4.9668 4.9673 4.9673 0 0 0-4.9668-4.9668zm-3.5 4.4668h7a0.5 0.5 0 0 1 0 1h-7a0.5 0.5 0 0 1 0-1z" style="fill:#000000;stroke-width:0"/></svg>',
     },
     "deleteTable": {
         "title": _("Delete table"),
     },
     "mergeOrSplit": {
-        "title": _("Merge or split cells"),
+        "title": _("Merge/split cells"),
+        "icon": '<svg version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m2.5 1a1.5 1.5 0 0 0-1.5 1.5v15a1.5 1.5 0 0 0 1.5 1.5h4.459v-1h-4.959v-16h16v4.8203h1v-4.3203a1.5 1.5 0 0 0-1.5-1.5z" style="opacity:.6"/><path d="m7.5614 6.3318h11.006a1.1006 1.1121 0 0 1 1.1006 1.1121v11.121a1.1006 1.1121 0 0 1-1.1006 1.1121h-11.006a1.1006 1.1121 0 0 1-1.1006-1.1121v-11.121a1.1006 1.1121 0 0 1 1.1006-1.1121zm-0.36687 0.74142v11.863h11.74v-11.863z" opacity=".6" style="opacity:1;stroke-width:.73757"/><path d="m6.7285 13v-1h-4.7285v1z" style="opacity:.6"/><path d="m6.7285 8v-1h-4.7285v1z" style="opacity:.6"/><path d="m12 6.6816h1v-4.6816h-1z" style="opacity:.6"/><path d="m7 2v4.6816h1v-4.6816z" style="opacity:.6"/></svg>',
     },
     "Code": {
         "title": _("Code"),

diff --git a/djangocms_text/static/djangocms_text/css/cms.text.css b/djangocms_text/static/djangocms_text/css/cms.text.css
@@ -175,6 +175,6 @@ form.cms-form {
 }
 
 cms-plugin.cms-editor-inline-wrapper:focus {
-    outline: 3px solid Highlight;
+    outline: 3px solid AccentColor;
     outline-offset: 2px;
 }
diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
@@ -34,10 +34,6 @@
     }
     position: relative;
 
-    &:has(dialog.cms-form-dialog) [role="menubar"] {
-        /* show toolbar if form dialog is open */
-        visibility: visible;
-    }
     .tiptap {
         &.ProseMirror-focused {
             /* Safari: Only outline the editor div, not toolbar etc. */
@@ -73,7 +69,7 @@
         }
         &.ProseMirror-focused {
             td, th {
-                outline: AccentColor solid 0.5px;
+                outline: Highlight solid 0.5px;
             }
         }
         & cms-plugin {
@@ -86,9 +82,5 @@
                 outline-offset: 2px;
             }
         }
-        &.ProseMirror-focused [role="menubar"] {
-            /* show toolbar if editor is focused */
-            visibility: visible;
-        }
     }
 }
diff --git a/private/css/cms.toolbar.css b/private/css/cms.toolbar.css
@@ -1,11 +1,22 @@
 .cms-editor-inline-wrapper {
+    .ProseMirror-focused [role="menubar"] {
+        /* show toolbar if editor is focused */
+        visibility: visible;
+        [role="button"].show {
+            z-index: 10;
+            > .dropdown-content {
+                visibility: visible;
+                height: auto;
+            }
+        }
+    }
+    &:has(dialog.cms-form-dialog) [role="menubar"] {
+        /* show toolbar if form dialog is open */
+        visibility: visible;
+    }
+
     [role="menubar"] {
         bottom: calc(100% - 1px);
-
-        [role="button"].show > .dropdown-content {
-            visibility: visible;
-            height: auto;
-        }
         padding: 2px 0.4rem;
         /* border-radius: 3px; */
         margin: 0 !important;
@@ -34,6 +45,13 @@
         display: block;
         top: 0;
         visibility: visible;
+        [role="button"].show {
+            z-index: 10;
+            > .dropdown-content {
+                visibility: visible;
+                height: auto;
+            }
+        }
         position: static;
         width: 100%;
         box-sizing: border-box;
@@ -48,7 +66,7 @@
         padding-right: 0;
         .dropdown-content {
             inset-block-start: 100%;
-            inset-inline-start: 0;
+            inset-inline-start: -2px;
         }
     }
     .tt-table {

diff --git a/private/js/tiptap_plugins/cms.tiptap.toolbar.js b/private/js/tiptap_plugins/cms.tiptap.toolbar.js
@@ -25,6 +25,8 @@ const _tableMenu = [
     'addRowAfter',
     'deleteRow',
     '|',
+    'toggleHeaderColumn',
+    'toggleHeaderRow',
     'mergeOrSplit',
 ];
 
@@ -190,6 +192,18 @@ const TiptapToolbar = {
         items: generateTableMenu,
         class: 'tt-table',
     },
+    toggleHeaderColumn: {
+        action: (editor, button) => editor.commands.toggleHeaderColumn(),
+        enabled: (editor) => editor.can().toggleHeaderColumn(),
+        active: (editor) => editor.isActive('headerColumn'),
+        type: 'mark',
+    },
+    toggleHeaderRow: {
+        action: (editor, button) => editor.commands.toggleHeaderRow(),
+        enabled: (editor) => editor.can().toggleHeaderRow(),
+        active: (editor) => editor.isActive('headerRow'),
+        type: 'mark',
+    },
     addColumnBefore: {
         action: (editor, button) => editor.commands.addColumnBefore(),
         enabled: (editor) => editor.can().addColumnBefore(),

diff --git a/private/js/tiptap_plugins/cms.toolbar.js b/private/js/tiptap_plugins/cms.toolbar.js
@@ -50,7 +50,7 @@ function _createBlockToolbarPlugin(editor) {
                 return this.getState(state);
             },
             handleDOMEvents: {
-                mousedown (view, event) {
+                mousedowxn (view, event) {
                     if (editor.options.blockToolbar?.contains(event.target)) {
                         event.preventDefault();
                         return true;
@@ -107,12 +107,13 @@ function _createBlockToolbar(editor, blockToolbar) {
 
     toolbar.classList.add('cms-block-toolbar');
     toolbar.style.zIndex = editor.options.baseFloatZIndex || 1000000;  //
-    toolbar.innerHTML = `${_menu_icon}<div class="cms-block-dropdown">${_populateToolbar(editor, blockToolbar, 'block')}</div>`;
+    toolbar.innerHTML = `${_drag_icon}<div class="cms-block-dropdown">${_populateToolbar(editor, blockToolbar, 'block')}</div>`;
 
     toolbar.draggable = true;
     toolbar.addEventListener("dragstart", (event) => {
         toolbar.classList.remove('show');
-        const {block, depth} = editor.options.blockToolbar.dataset;
+        const {resolvedPos, depth} = _getResolvedPos(editor.view.state);
+        const block = resolvedPos.start(depth);
         if (depth >= 0) {
             const { state, dispatch } = editor.view;
             const nodeSelection = NodeSelection.create(state.doc, block);
@@ -162,6 +163,11 @@ function updateBlockToolbar(editor, state) {
         const ref = editor.options.el.getBoundingClientRect();
         editor.options.blockToolbar.draggable = resolvedPos.node(depth).content.size > 0;
         editor.options.blockToolbar.style.insetBlockStart = `${pos.top - ref.top}px`;
+        let title = resolvedPos.node(1).type.name;
+        for (let i= 2; i <= depth; i++) {
+            title += ` > ${resolvedPos.node(i).type.name}`;
+        }
+        editor.options.blockToolbar.title = title;
     } else {
         editor.options.blockToolbar.draggable = false;
     }
@@ -196,7 +202,7 @@ function _updateToolbarIcon (editor, node) {
     if (type in _node_icons) {
         _replaceIcon(editor.options.blockToolbar.firstElementChild, _node_icons[type]);
     } else {
-        _replaceIcon(editor.options.blockToolbar.firstElementChild, _menu_icon);
+        _replaceIcon(editor.options.blockToolbar.firstElementChild, _drag_icon);
     }
 }
 
@@ -315,7 +321,6 @@ function _handleToolbarClick(event, editor) {
                 _closeAllDropdowns(event, editor);
                 button.classList.add('show');
                 content.style.top = button.offsetHeight + 'px';
-                content.style.zIndex = button.closest('button, [role="menubar"]').style.zIndex + 10;
                 if (button.offsetLeft + content.offsetWidth > window.innerWidth) {
                     content.style.left = (window.innerWidth - content.offsetWidth - button.offsetLeft - 25) + 'px';
                 }
@@ -395,7 +400,7 @@ function _populateToolbar(editor, array, filter) {
             }
             const title = item.title && item.icon ? `title='${item.title}' ` : '';
             const icon = item.icon || item.title;
-            html += `<span ${title}class="dropdown" role="button">${icon}<div class="dropdown-content ${item.class || ''}">${dropdown}</div></span>`;
+            html += `<span ${title}class="dropdown" role="button">${icon}<div title class="dropdown-content ${item.class || ''}">${dropdown}</div></span>`;
         } else {
             switch (item) {
                 case '|':
@@ -493,11 +498,10 @@ function _updateToolbar(editor, toolbar) {
         if (action) {
             if (TiptapToolbar[action]) {
                 const toolbarItem = window.cms_editor_plugin._getRepresentation(action);
-                button.disabled = !toolbarItem.enabled(editor, button);
                 try {
-                    button.disabled = !toolbarItem.enabled(editor, button);
+                    button.disabled = !toolbarItem?.enabled(editor, button);
                     try {
-                        if (toolbarItem.active(editor, button)) {
+                        if (toolbarItem?.active(editor, button)) {
                             button.classList.add('active');
                         } else {
                             button.classList.remove('active');