feat: Add dynamic links to Text plugins and HTMLFields with CKEditor 5 (#6)

* Add dynamic link fields

* Complete some left-over changes

* Update private/js/ckeditor5_plugins/cms-link/src/cmsLink.js

* Update private/js/ckeditor5_plugins/cms-link/src/cmsLink.js

* Fix multiple editor issue

* Fix toolbar logic

* Fix: UI update calls when changing text

* Refactor

* Update private/js/ckeditor5_plugins/cms-link/src/cmsLink.js

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

* Fix sourcery recommendations

* fix: Update dropdown after using the action view of the link plugin

* Update readme

* Prepare next release

---------

Co-authored-by: sourcery-ai[bot] <58596630+sourcery-ai[bot]@users.noreply.github.com>

Author: fsbraun

CHANGELOG.rst

@@ -2,6 +2,11 @@
 Changelog
 =========
 
+0.2.0 (2024-12-12)
+==================
+
+* feat: Add dynamic links to Text plugins and HTMLFields with CKEditor 5
+
 0.1.0 (2024-12-16)
 ==================
 

README.rst

@@ -11,15 +11,18 @@ Features
 
 - **CKEditor5**: Look and feel of CKEditor5.
 - **Inline exiting**: CKEditor5 supports inline editing.
-- **Dynamic HTML attributes**: (not yet supported - help needed)
+- **Dynamic HTML attributes**: Supported for the Link plugin
 - **Text-enabled plugins**: (not yet supported - help needed)
 
 
 Installation
 ------------
 
 Install ``djangocms-text-ckeditor5`` using pip:
-``pip install git+https://github.com/django-cms/djangocms-text-ckeditor5``.
+
+.. code-block:: bash
+
+    pip install djangocms-text-ckeditor5
 
 Build latest development branch using git:
 
@@ -34,12 +37,17 @@ Build latest development branch using git:
 You then can install the cloned repo using ``pip install -e
 /path/to/the/repo/djangocms-text-ckeditor5``.
 
-Finally, add ``djangocms_text_ckeditor5`` to your ``INSTALLED_APPS`` in your Django project
-settings:
+Finally, add ``djangocms_text_ckeditor5`` in addition to ``djangocms_text`` to
+your ``INSTALLED_APPS`` in your Django project settings:
 
 .. code-block:: python
 
-    INSTALLED_APPS = [..., "djangocms_text_ckeditor5", ...]
+    INSTALLED_APPS = [
+        ...,
+        "djangocms_text",
+        "djangocms_text_ckeditor5",
+        ...
+    ]
 
 and set the editor you want to use:
 

djangocms_text_ckeditor5/__init__.py

@@ -1,13 +1,18 @@
 from djangocms_text.editors import RTEConfig
 
 
-__version__ = "0.1.0"
+__version__ = "0.2.0"
 
 
 ckeditor5 = RTEConfig(
     name="ckeditor5",
     config="CKEDITOR5",
-    js=("djangocms_text/bundles/bundle.ckeditor5.min.js",),
-    css={"all": ("djangocms_text/css/cms.ckeditor5.css",)},
+    js=("djangocms_text_ckeditor5/bundles/bundle.ckeditor5.min.js",),
+    css={
+        "all": (
+            "djangocms_text_ckeditor5/css/cms.ckeditor5.css",
+            "djangocms_text_ckeditor5/css/cms.linkfield.css",
+        )
+    },
     inline_editing=True,
 )

djangocms_text_ckeditor5/static/djangocms_text/css/cms.ckeditor5.css renamed to djangocms_text_ckeditor5/static/djangocms_text_ckeditor5/css/cms.ckeditor5.css

@@ -7,6 +7,10 @@
     }
 }
 
+.cms-editor-inline-wrapper.ck a {
+    pointer-events: none;
+}
+
 .cms-admin.app-djangocms_text.model-text .ck-editor {
     border: none;
     background: var(--dca-white);

djangocms_text_ckeditor5/static/djangocms_text_ckeditor5/css/cms.linkfield.css

@@ -0,0 +1,65 @@
+.ck.ck-balloon-panel {
+    .cms-linkfield-wrapper {
+        font-size: 0.8rem;
+        position: relative;
+        input[type="text"] {
+            padding-inline-end: 2em;
+            background: var(--dca-white, 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;
+            &[dir=rtl] {
+                background-position: left center;
+            }
+            background-size: auto 1em;
+        }
+        .cms-linkfield-selected {
+            font-weight: bold;
+        }
+        .cms-linkfield-dropdown:not(:empty), .cms-linkfield-dropdown:active {
+            /* Hide dropdown when empty */
+            visibility: visible;
+        }
+        .cms-linkfield-dropdown {
+            z-index: 1;
+            visibility: hidden;
+            position: absolute;
+            max-block-size: 200px;
+            overflow: auto;
+            inset-inline-start: 0;
+            inset-block-start: 100%;
+            border: 1px solid var(--dca-gray-lighter);
+            background: var(--dca-white);
+            inline-size: 120%;
+            resize: both;
+            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;
+                font-size: 0.8rem;
+            }
+            div {
+                padding: 0.3rem 6px;
+                white-space: nowrap;
+                font-weight: normal;
+                border-block-end: 1px solid var(--dca-gray-lighter);
+                &:last-child {
+                    border-bottom: none;
+                }
+                &.cms-linkfield-parent {
+                    font-weight: bold;
+                    background: var(--dca-gray-lightest);
+                }
+                &.cms-linkfield-message {
+                    font-style: italic;
+                    color: var(--dca-gray);
+                }
+                &.cms-linkfield-option {
+                    cursor: pointer;
+                }
+                &.cms-linkfield-option:hover {
+                    background: var(--dca-primary);
+                    color: var(--dca-white);
+                }
+            }
+        }
+    }
+}

private/js/ckeditor5_plugins/cms-link/index.js

@@ -2,6 +2,6 @@
 /* jshint esversion: 6 */
 
 // index.js
-import CMSLinkPlugin from './src/cmsLinkPlugin';
+import CmsLink from './src/cmsLink';
 
-export default CMSLinkPlugin;
+export default CmsLink;