feat: Improve tiptap-integration of toolbars for better UX

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"),

djangocms_text/static/djangocms_text/css/cms.text.css

@@ -48,24 +48,26 @@
     inset-inline-end: 50%;
 }
 
-dialog.cms-form-dialog {
+dialog.cms-form-dialog, .cms-editor-inline-wrapper .cms-block-dropdown {
     &::before {
         position: absolute;
         background: var(--dca-white);
         border: 1px solid var(--dca-gray-light);
         box-shadow: 0 0 10px rgba(var(--dca-shadow), .25);
         height: 10px;
-        width:  10px;
+        width: 10px;
         left: 24px;
-        top: 8px;
+        top: 7px;
         transform: rotate(-135deg);
         transform-origin: 0 0;
         content: "";
     }
+
     &.right::before {
         right: 24px;
         left: auto;
     }
+
     &::after {
         position: absolute;
         background: var(--dca-white);
@@ -75,10 +77,13 @@ dialog.cms-form-dialog {
         width: 40px;
         content: "";
     }
+
     &.right::after {
         right: 10px;
         left: auto;
     }
+}
+dialog.cms-form-dialog {
     .dropback {
         position: fixed;
         top: 0;
@@ -168,3 +173,8 @@ form.cms-form {
         }
     }
 }
+
+cms-plugin.cms-editor-inline-wrapper:focus {
+    outline: 3px solid AccentColor;
+    outline-offset: 2px;
+}