feat: Add dynamic links to Text plugins and HTMLFields with CKEditor 5

djangocms_text_ckeditor5/__init__.py

@@ -7,7 +7,12 @@
 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_ckeditor5/css/cms.linkfield.css

@@ -0,0 +1,62 @@
+.ck.ck-balloon-panel {
+    .cms-linkfield-wrapper {
+        font-size: 0.8rem;
+        position: relative;
+        input[type="text"] {
+            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 {
+            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: 400px;
+            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,7 @@
 /* jshint esversion: 6 */
 
 // index.js
-import CMSLinkPlugin from './src/cmsLinkPlugin';
+import CmsLink from './src/cmsLink';
+import LinkSuggestionsEditing from './src/linksuggestionediting';
 
-export default CMSLinkPlugin;
+export { CmsLink, LinkSuggestionsEditing };