feat: Add text color from list of options (#48)

Author: fsbraun

djangocms_text/editors.py

@@ -70,6 +70,15 @@ def default(self, obj):
         + '  <path d="m4.266 12.496.96-2.853H8.76l.96 2.853H11L7.62 3H6.38L3 12.496zm2.748-8.063 1.419 4.23h-2.88l1.426-4.23zm5.132-1.797v-.075c0-.332.234-.618.619-.618.354 0 .618.256.618.58 0 .362-.271.649-.52.898l-1.788 1.832V6h3.59v-.958h-1.923v-.045l.973-1.04c.415-.438.867-.845.867-1.547 0-.8-.701-1.41-1.787-1.41C11.565 1 11 1.8 11 2.576v.06z"/>\n'
         + "</svg>",
     },
+    "TextColor": {
+        "title": _("Text color"),
+    },
+    "InlineQuote": {
+        "title": _("Inline quote"),
+    },
+    "Highlight": {
+        "title": _("Mark"),
+    },
     "RemoveFormat": {
         "title": _("Remove formatting"),
         "icon": '<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" '
@@ -149,17 +158,6 @@ def default(self, obj):
     "Link": {
         "title": _("Link"),
         "form": [
-            # {
-            #     "type": "link",
-            #     "url": '#',
-            #     "label": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" '
-            #              'class="bi bi-box-arrow-up-left" viewBox="0 0 16 16">'
-            #              '<path fill-rule="evenodd" d="M7.364 3.5a.5.5 0 0 1 .5-.5H14.5A1.5 1.5 0 0 1 16 4.5v10a1.5 '
-            #              '1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5V7.864a.5.5 0 1 1 1 0V14.5a.5.5 0 0 0 .5.5h10a.5.5 '
-            #              '0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5H7.864a.5.5 0 0 1-.5-.5"/><path fill-rule="evenodd" '
-            #              'd="M0 .5A.5.5 0 0 1 .5 0h5a.5.5 0 0 1 0 1H1.707l8.147 8.146a.5.5 0 0 1-.708.708L1 '
-            #              '1.707V5.5a.5.5 0 0 1-1 0z"/></svg>',
-            # },
             {
                 "name": "href_select",
                 "type": "hidden",
@@ -316,12 +314,10 @@ def default(self, obj):
         "title": _("Anchor"),
     },
     "Format": {
-        "title": _("Block format"),
-        "class": "vertical",
+        "title": _("Format"),
     },
     "Styles": {
         "title": _("Styles"),
-        "menu": [],
     },
     "Font": {
         "title": _("Font"),
@@ -371,13 +367,14 @@ def default(self, obj):
     ["Undo", "Redo"],
     ["CMSPlugins", "cmswidget", "-", "ShowBlocks"],
     ["Format", "Styles"],
-    ["TextColor", "BGColor", "-", "PasteText", "PasteFromWord"],
+    ["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
     ["Maximize"],
     [
         "Bold",
         "Italic",
         "Underline",
         "-",
+        "InlineQuote",
         "Code",
         "-",
         "Subscript",
@@ -396,13 +393,14 @@ def default(self, obj):
     ["Undo", "Redo"],
     ["ShowBlocks"],
     ["Format", "Styles"],
-    ["TextColor", "BGColor", "-", "PasteText", "PasteFromWord"],
+    ["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
     ["Maximize"],
     [
         "Bold",
         "Italic",
         "Underline",
         "-",
+        "InlineQuote",
         "Code",
         "-",
         "Subscript",
@@ -512,7 +510,7 @@ def get_editor_base_config(editor: Optional[str] = None) -> dict:
         name="tiptap",
         config="TIPTAP",
         js=("djangocms_text/bundles/bundle.tiptap.min.js",),
-        css={"all": ("djangocms_text/css/bundle.tiptap.min.css",)},
+        css={"all": ("djangocms_text/css/bundle.tiptap.min.css", "djangocms_text/css/tiptap.admin.css")},
         inline_editing=True,
         child_plugin_support=True,
     )

djangocms_text/static/djangocms_text/css/tiptap.admin.css

@@ -0,0 +1,77 @@
+.cms-admin {
+    .text-secondary {
+        color: gray;
+    }
+
+    .text-primary {
+        color: mediumblue;
+    }
+
+    .text-success {
+        color: green;
+    }
+
+    .text-danger {
+        color: red;
+    }
+
+    .text-warning {
+        color: orange;
+    }
+
+    .text-info {
+        color: deepskyblue;
+    }
+
+    .text-light {
+        color: lightgrey;
+    }
+
+    .text-dark {
+        color: black;
+    }
+
+    .text-body {
+        color: var(--body-fg);
+    }
+
+    .text-muted {
+        color: dimgrey;
+    }
+
+    .text-secondary {
+        color: gray;
+    }
+
+    .bg-primary {
+        background-color: mediumblue;
+    }
+
+    .bg-success {
+        background-color: green;
+    }
+
+    .bg-danger {
+        background-color: red;
+    }
+
+    .bg-warning {
+        background-color: orange;
+    }
+
+    .bg-info {
+        background-color: deepskyblue;
+    }
+
+    .bg-light {
+        background-color: lightgrey;
+    }
+
+    .bg-dark {
+        background-color: black;
+    }
+
+    .bg-body {
+        background-color: var(--body-bg);
+    }
+}

djangocms_text_ckeditor/widgets.py

@@ -10,6 +10,6 @@ def __init__(self, *args: Any, **kwargs: Any) -> None:
             "djangocms_text_ckeditor.widgets.TextEditorWidget is deprecated. "
             "Use djangocms_text.widgets.TextEditorWidget instead.",
             DeprecationWarning,
-            stacklevel=2,
+            stacklevel=3,
         )
         super().__init__(*args, **kwargs)

private/css/cms.toolbar.css

@@ -136,7 +136,7 @@
         &:active, &.active {
             background: var(--dca-gray-lighter, var(--selected-bg))  !important;
         }
-        &:hover:not(:disabled),&.show {
+        &:hover:not(:disabled):not([data-action="TextColor"]),&.show {
             color: var(--dca-white, var(--button-fg)) !important;
             background: var(--dca-primary, var(--button-bg))  !important;
         }
@@ -151,9 +151,28 @@
             &:after{
                 content: "▼";
                 margin-block-start: 3px;
-                margin-inline-start: 6px;
+                margin-inline-start: 2px;
+                margin-inline-end: 4px;
                 font-size: 0.8rem;
             }
+            span {
+                margin-top: 0.1rem;
+            }
+            &:has([data-action="TextColor"]) > svg {
+                border-bottom: 2px solid currentColor;
+            }
+            button[data-action="TextColor"] {
+                background: currentColor;
+                border: 1px solid var(--dca-gray-lighter, var(--hairline-color)) !important;
+                margin-inline-end: 0.5rem;
+                width: 1.6rem !important;
+                height: 1.2rem;
+                &:hover, &.active {
+                    background-color: currentColor !important;
+                    outline: 3px solid var(--dca-primary, var(--primary));
+                };
+
+            }
         }
         svg {
             display: inline;
@@ -306,6 +325,4 @@
             }
         }
     }
-
 }
-

private/js/cms.tiptap.js

@@ -19,7 +19,7 @@ import TableRow from '@tiptap/extension-table-row';
 import {TextAlign, TextAlignOptions} from '@tiptap/extension-text-align';
 import TiptapToolbar from "./tiptap_plugins/cms.tiptap.toolbar";
 
-import {InlineColors, Small, Var, Kbd, Samp} from "./tiptap_plugins/cms.styles";
+import {TextColor, Small, Var, Kbd, Samp, Highlight, InlineQuote} from "./tiptap_plugins/cms.styles";
 import CmsFormExtension from "./tiptap_plugins/cms.formextension";
 import CmsToolbarPlugin from "./tiptap_plugins/cms.toolbar";
 
@@ -35,7 +35,7 @@ class CMSTipTapPlugin {
                 Underline,
                 CharacterCount,
                 Image,
-                InlineColors,
+                TextColor,
                 Placeholder,
                 Subscript,
                 Superscript,
@@ -49,7 +49,7 @@ class CMSTipTapPlugin {
                 TableHeader,
                 TableCell,
                 CmsDynLink,
-                Small, Var, Kbd, Samp,
+                Small, Var, Kbd, Samp, Highlight, InlineQuote,
                 TextAlign.configure({
                     types: ['heading', 'paragraph'],
                 }),

private/js/tiptap_plugins/cms.dynlink.js

@@ -11,8 +11,15 @@ function DynLinkClickHandler(editor) {
     return new Plugin({
         props: {
             handleDOMEvents: {
-                click(view, event) {
-                    console.log(view);
+                click (view, event) {
+                    const target = event.target.closest('a[href]');
+                    if (target) {
+                        event.preventDefault();
+                        return true;
+                    }
+                    return false;
+                },
+                dblclick(view, event) {
                     const target = event.target.closest('a[href]');
                     if (target) {
                         event.preventDefault();