Add RTL, test environment

django-cms · Mar 18, 2024 · b83e887 · b83e887
1 parent dafc302
commit b83e887
Show file tree

Hide file tree

Showing 31 changed files with 251 additions and 159 deletions.
diff --git a/.coveragerc b/.coveragerc
@@ -1,6 +1,8 @@
 [run]
 branch = True
-source = djangocms_text_ckeditor
+source =
+    djangocms_text
+    djangocms_text_ckeditor
 omit =
     migrations/*
     tests/*

diff --git a/.github/workflows/publish-to-live-pypi.yml b/.github/workflows/publish-to-live-pypi.yml
@@ -22,6 +22,13 @@ jobs:
         pip install
         build
         --user
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - name: Install dependencies
+      run: npm install
+    - name: Build client
+      run: webpack --mode production
     - name: Build a binary wheel and a source tarball
       run: >-
         python -m

diff --git a/.github/workflows/publish-to-test-pypi.yml b/.github/workflows/publish-to-test-pypi.yml
@@ -3,25 +3,33 @@ name: Publish Python 🐍 distributions 📦 to TestPyPI
 on:
   push:
     branches:
-      - master
+      - main
 
 jobs:
   build-n-publish:
     name: Build and publish Python 🐍 distributions 📦 to TestPyPI
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@master
-    - name: Set up Python 3.9
+    - name: Set up Python 3.12
       uses: actions/setup-python@v1
       with:
-        python-version: 3.9
+        python-version: 3.12
 
     - name: Install pypa/build
       run: >-
         python -m
         pip install
         build
         --user
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - name: Install dependencies
+      run: npm install
+    - name: Build client
+      run: webpack --mode production
+
     - name: Build a binary wheel and a source tarball
       run: >-
         python -m

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -8,10 +8,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        python-version: [ "3.10", "3.11"]
+        python-version: [ "3.10", "3.11", "3.12"]
         requirements-file: [
-          dj32_cms311.txt,
-          dj32_cms41.txt,
           dj42_cms311.txt,
           dj42_cms41.txt,
           dj50_cms41.txt

diff --git a/README.rst b/README.rst
@@ -731,7 +731,7 @@ Old djangocms-text-ckeditor readme:
     :target: http://badge.fury.io/py/djangocms-text
 .. |coverage| image:: https://codecov.io/gh/django-cms/djangocms-text/branch/main/graph/badge.svg
     :target: https://codecov.io/gh/django-cms/djangocms-text
-.. |python| image:: https://img.shields.io/badge/python-3.7+-blue.svg
+.. |python| image:: https://img.shields.io/badge/python-3.10+-blue.svg
     :target: https://pypi.org/project/djangocms-text/
 .. |django| image:: https://img.shields.io/badge/django-3.2--5.0-blue.svg
     :target: https://www.djangoproject.com/

diff --git a/djangocms_text/cms_plugins.py b/djangocms_text/cms_plugins.py
@@ -587,6 +587,14 @@ def get_child_plugin_candidates(cls, slot, page):
             ]
         return text_enabled_plugins
 
+    def render_plugin_icon(self, plugin):
+        icon = getattr(plugin, "text_icon", None)
+        if icon is None:
+            return
+        if "cms-icon" in icon:
+            return f'<span class="{icon}"></span>'
+        return icon
+
     def get_plugins(self, obj=None):
         plugin = getattr(self, "cms_plugin_instance", None) or obj
         if not plugin:
@@ -614,7 +622,7 @@ def get_plugins(self, obj=None):
                 {
                     "value": plugin.value,
                     "name": names.get(plugin.value, plugin.name),
-                    "icon": getattr(plugin, "text_icon", None),
+                    "icon": self.render_plugin_icon(plugin),
                     "module": modules.get(plugin.value, plugin.module),
                 }
             )

diff --git a/djangocms_text/editors.py b/djangocms_text/editors.py
@@ -183,20 +183,6 @@ def default(self, obj):
         + '  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>\n'
         + "</svg>",
     },
-    "LinkPlugin": {
-        "title": _("Link"),
-        "icon": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">\n'
-        + '  <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>\n'
-        + '  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>\n'
-        + "</svg>",
-    },
-    "ImagePlugin": {
-        "title": _("Image"),
-        "icon": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">\n'
-        + '  <path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>\n'
-        + '  <path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z"/>\n'
-        + "</svg>",
-    },
     "Unlink": {
         "title": _("Unlink"),
         "icon": '<svg width="16" height="16" fill="currentColor"'
@@ -294,6 +280,36 @@ def default(self, obj):
         "aria": _("CMS Plugins"),
         "editLabel": _("Edit CMS Plugin"),
         "addLabel": _("Add CMS Plugin"),
+        "icon": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" '
+                'class="bi bi-puzzle" viewBox="0 0 16 16"><path d="M3.112 3.645A1.5 1.5 0 0 1 4.605 '
+                '2H7a.5.5 0 0 1 .5.5v.382c0 .696-.497 1.182-.872 1.469a.5.5 0 0 0-.115.118l-.012.025L6.5 '
+                '4.5v.003l.003.01q.005.015.036.053a.9.9 0 0 0 .27.194C7.09 4.9 7.51 5 8 5c.492 0 '
+                '.912-.1 1.19-.24a.9.9 0 0 0 .271-.194.2.2 0 0 0 .039-.063v-.009l-.012-.025a.5.5 0 0 '
+                '0-.115-.118c-.375-.287-.872-.773-.872-1.469V2.5A.5.5 0 0 1 9 2h2.395a1.5 1.5 0 0 1 '
+                '1.493 1.645L12.645 6.5h.237c.195 0 .42-.147.675-.48.21-.274.528-.52.943-.52.568 0 '
+                '.947.447 1.154.862C15.877 6.807 16 7.387 16 8s-.123 1.193-.346 '
+                '1.638c-.207.415-.586.862-1.154.862-.415 0-.733-.246-.943-.52-.255-.333-.48-.48-.675-.48h-.237l.243 '
+                '2.855A1.5 1.5 0 0 1 11.395 14H9a.5.5 0 0 1-.5-.5v-.382c0-.696.497-1.182.872-1.469a.5.5 0 0 0 '
+                '.115-.118l.012-.025.001-.006v-.003a.2.2 0 0 0-.039-.064.9.9 0 0 0-.27-.193C8.91 11.1 8.49 11 '
+                '8 11s-.912.1-1.19.24a.9.9 0 0 0-.271.194.2.2 0 0 '
+                '0-.039.063v.003l.001.006.012.025c.016.027.05.068.115.118.375.287.872.773.872 1.469v.382a.5.5 '
+                '0 0 1-.5.5H4.605a1.5 1.5 0 0 1-1.493-1.645L3.356 9.5h-.238c-.195 0-.42.147-.675.48-.21.274'
+                '-.528.52-.943.52-.568 0-.947-.447-1.154-.862C.123 9.193 0 8.613 0 8s.123-1.193.346-1.638C.553 '
+                '5.947.932 5.5 1.5 5.5c.415 0 .733.246.943.52.255.333.48.48.675.48h.238zM4.605 3a.5.5 0 0 '
+                '0-.498.55l.001.007.29 3.4A.5.5 0 0 1 3.9 7.5h-.782c-.696 0-1.182-.497-1.469-.872a.5.5 0 0 '
+                '0-.118-.115l-.025-.012L1.5 6.5h-.003a.2.2 0 0 0-.064.039.9.9 0 0 0-.193.27C1.1 7.09 1 7.51 1 '
+                '8s.1.912.24 1.19c.07.14.14.225.194.271a.2.2 0 0 0 .063.039H1.5l.006-.001.025-.012a.5.5 0 0 0 '
+                '.118-.115c.287-.375.773-.872 1.469-.872H3.9a.5.5 0 0 1 .498.542l-.29 3.408a.5.5 0 0 0 '
+                '.497.55h1.878c-.048-.166-.195-.352-.463-.557-.274-.21-.52-.528-.52-.943 '
+                '0-.568.447-.947.862-1.154C6.807 10.123 7.387 10 8 10s1.193.123 1.638.346c.415.207.862.586.862 '
+                '1.154 0 .415-.246.733-.52.943-.268.205-.415.39-.463.557h1.878a.5.5 0 0 0 '
+                '.498-.55l-.001-.007-.29-3.4A.5.5 0 0 1 12.1 8.5h.782c.696 0 1.182.497 '
+                '1.469.872.05.065.091.099.118.115l.025.012.006.001h.003a.2.2 0 0 0 .064-.039.9.9 0 0 0 '
+                '.193-.27c.14-.28.24-.7.24-1.191s-.1-.912-.24-1.19a.9.9 0 0 0-.194-.271.2.2 0 0 '
+                '0-.063-.039H14.5l-.006.001-.025.012a.5.5 0 0 0-.118.115c-.287.375-.773.872-1.469.872H12.1a.5.5 0 0 '
+                '1-.498-.543l.29-3.407a.5.5 0 0 0-.497-.55H9.517c.048.166.195.352.463.557.274.21.52.528.52.943 0 '
+                '.568-.447.947-.862 1.154C9.193 5.877 8.613 6 8 6s-1.193-.123-1.638-.346C5.947 5.447 5.5 5.068 5.5 '
+                '4.5c0-.415.246-.733.52-.943.268-.205.415-.39.463-.557z"/></svg>',
     }
 }
 

diff --git a/djangocms_text/widgets.py b/djangocms_text/widgets.py
@@ -100,7 +100,13 @@ def render_textarea(self, name, value, attrs=None, renderer=None):
         return super().render(name, value, attrs, renderer)
 
     def get_toolbar_setting(self, toolbar):
-        return get_editor_base_config()
+        toolbar_setting = get_editor_base_config()
+        for plugin in self.installed_plugins:
+            toolbar_setting[plugin["value"]] = {
+                "title": plugin["name"],
+                "icon": plugin["icon"],
+            }
+        return toolbar_setting
 
     def get_editor_settings(self, language):
         configuration = deepcopy(self.configuration)

diff --git a/private/css/cms.balloon-toolbar.css b/private/css/cms.balloon-toolbar.css
@@ -7,7 +7,7 @@
     border-radius: 3px;
     box-shadow: none;
     /* box-shadow: 0 1.5px 1.5px rgba(var(--dca-shadow),.4); */
-    right: calc(100% + 1rem);
+    inset-inline-end: calc(100% + 1rem);
     width: calc(1.6*var(--size));
     height:  calc(1.6*var(--size));
     line-height: calc(1.3*var(--size));
@@ -23,7 +23,8 @@
     [role="menubar"] {
         padding: 3px;
         position: absolute;
-        top: 100%;
+        inset-block-start: 100%;
+        inset-block-end: unset;
         bottom: unset;
         width: unset;
         max-width: 100vw;

diff --git a/private/css/cms.linkfield.css b/private/css/cms.linkfield.css
@@ -3,8 +3,8 @@
         font-size: 0.8rem;
         position: relative;
         input[type="text"] {
-            padding-right: 3em;
-            background: var(--dca-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" fill="%23808080" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat right center;
+            padding-inline-end: 3em;
+            background: var(--dca-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" fill="%23808080" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat inline-end center;
             background-size: auto 1em;
         }
         .cms-linkfield-selected {
@@ -18,16 +18,16 @@
             z-index: 1;
             visibility: hidden;
             position: absolute;
-            max-height: 400px;
+            max-block-size: 400px;
             overflow: auto;
-            left: 0;
-            top: 100%;
+            inset-inline-start: 0;
+            inset-block-start: 100%;
             border: 1px solid var(--dca-gray-lighter);
             background: var(--dca-white);
-            width: 120%;
+            inline-size: 120%;
             resize: both;
-            border-bottom-left-radius: 4px;
-            border-bottom-right-radius: 4px;
+            border-end-start-radius: 4px;
+            border-end-end-radius: 4px;
             box-shadow: 0 1.5px 1.5px rgba(var(--dca-shadow),.4);
             .cms-linkfield-error {
                 color: red;
@@ -37,7 +37,7 @@
                 padding: 0.5rem 6px;
                 white-space: nowrap;
                 font-weight: normal;
-                border-bottom: 1px solid var(--dca-gray-lighter);
+                border-block-end: 1px solid var(--dca-gray-lighter);
                 &:last-child {
                     border-bottom: none;
                 }

diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
@@ -16,7 +16,7 @@
         .ProseMirror {
             overflow-y: scroll;
             padding: 1rem 0.8rem 0.2rem 0.2rem;
-            border-top: 2px solid var(--dca-gray-lighter);
+            border-top: 2px solid var(--dca-gray-lighter, var(--hairline-color));
             &:focus-visible {
                 outline: none;
             }
@@ -30,7 +30,7 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
 
 .cms-editor-inline-wrapper {
     &.textarea .tiptap {
-        border: 1px solid var(--dca-gray-lighter);
+        border: 1px solid var(--dca-gray-lighter, var(--hairline-color));
         padding: 6px;
         min-height: 3rem;
         border-radius: 3px;
@@ -71,10 +71,10 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
         pointer-events: all;
         display: flex;
         flex-flow: row wrap;
-        border: solid 1px var(--dca-gray-light);
+        border: solid 1px var(--dca-gray-light, var(--hairline-color));
         box-shadow: 0 1.5px 1.5px rgba(var(--dca-shadow),.4);
-        color: var(--dca-black);
-        background: var(--dca-white);
+        color: var(--dca-black, var(--body-fg));
+        background: var(--dca-white, var(--body-bg));
         opacity: 1;
         div.grouper {
             padding: 0;
@@ -94,11 +94,11 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
         outline: none;
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
-        border: 1px solid var(--dca-gray-lighter);
+        border: 1px solid var(--dca-gray-lighter, var(--hairline-color));
         border-bottom: none;
         .dropdown-content {
-            top: 100%;
-            left: 0;
+            inset-block-start: 100%;
+            inset-inline-start: 0;
         }
     }
     button, [role="button"] {
@@ -112,18 +112,19 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
         justify-content: center;
         cursor: pointer;
         border: none  !important;
-        background: var(--dca-white);
+        color: var(--dca-black, var(--body-fg));
+        background: var(--dca-white, var(--body-bg));
         border-radius: 2px;
         text-align: center;
         vertical-align: middle;
         line-height: 1.2;
         padding: 6px 4px  !important;
         &:active, &.active {
-            background: var(--dca-gray-lighter)  !important;
+            background: var(--dca-gray-lighter, var(--selected-bg))  !important;
         }
         &:hover:not(:disabled),&.show {
-            color: var(--dca-white) !important;
-            background: var(--dca-primary)  !important;
+            color: var(--dca-white, var(--button-fg)) !important;
+            background: var(--dca-primary, var(--button-bg))  !important;
         }
         &:disabled {
             color: var(--dca-gray-light);
@@ -133,7 +134,13 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
         &.dropdown {
             position: relative;
             font-size: 0.8rem;
-            padding: 6px 8px  !important;
+            padding: 6px 4px  !important;
+            &:after{
+                content: "▼";
+                margin-block-start: 3px;
+                margin-inline-start: 6px;
+                font-size: 0.8rem;
+            }
         }
         svg {
             zoom: 120%;
@@ -142,31 +149,51 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
         }
     }
     .dropdown-content {
-        color: var(--dca-black);
+        color: var(--dca-black, var(--body-fg));
         border-radius: 0;
         visibility: hidden;
         position: absolute;
-        top: 100%;
-        left: 0;
+        inset-block-start: 100%;
+        inset-inline-start: 0;
         display: flex;
         flex-flow: row;
-        border: solid 1px var(--dca-gray-light);
+        border: solid 1px var(--dca-gray-light, var(--hairline-color));
         box-shadow: 0 1.5px 1.5px rgba(var(--dca-shadow),.4);
-        background: var(--dca-white);
+        background: var(--dca-white, var(--body-bg));
         padding: 6px 0.8rem;
         &.vertical {
             flex-flow: column;
             font-size: 1rem;
             padding: 0;
             button {
-                text-align: left;
-                justify-content: left;
+                text-align: start;
+                justify-content: start;
                 padding: 8px 1.2rem  !important;
                 small {
                     margin: 0;
                 }
             }
         }
+        &.plugins {
+            max-height: 16rem;
+            overflow-y: auto;
+            text-align: start;
+            .header {
+                background: var(--dca-gray-lighter, var(--hairline-color));
+                padding-top: 0.4rem;
+                padding-bottom: 0.4rem;
+                padding-inline-start: 6px;
+            }
+            button {
+                > * {
+                    width: 1rem;
+                    margin-inline-end: 0.8rem;
+                    margin-inline-start: -0.3rem;
+                }
+                text-align: start;
+                white-space: nowrap;
+            }
+        }
     }
     span:empty {
         margin-left: 4px;
@@ -181,8 +208,8 @@ p:not(.is-empty) > br.ProseMirror-trailingBreak {
     }
     .dropback, .toolbar-dropback {
         position: fixed;
-        top: 0;
-        left: 0;
+        inset-block-start: 0;
+        inset-inline-start: 0;
         width: 100%;
         height: 100%;
         z-index: -1;