Fix: UI update calls when changing text

django-cms · Dec 18, 2024 · 5996a55 · 5996a55
1 parent 23b07cd
commit 5996a55
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/djangocms_text_ckeditor5/static/djangocms_text_ckeditor5/css/cms.linkfield.css b/djangocms_text_ckeditor5/static/djangocms_text_ckeditor5/css/cms.linkfield.css
@@ -18,7 +18,7 @@
             z-index: 1;
             visibility: hidden;
             position: absolute;
-            max-block-size: 400px;
+            max-block-size: 200px;
             overflow: auto;
             inset-inline-start: 0;
             inset-block-start: 100%;

diff --git a/private/js/ckeditor5_plugins/cms-link/src/cmsLink.js b/private/js/ckeditor5_plugins/cms-link/src/cmsLink.js
@@ -118,6 +118,7 @@ export default class CmsLink extends Plugin {
             .get('ContextualBalloon')
             .on('set:visibleView', (evt, propertyName, newValue) => {
                 if (newValue !== linkFormView && newValue !== linkActionsView) {
+                    // Only run on the two link views
                     return;
                 }
 
@@ -128,30 +129,27 @@ export default class CmsLink extends Plugin {
                 if (newValue === linkActionsView) {
                     // Add the link target name of a cms link into the action view
                     if(cmsHref && editor.config.get('url_endpoint')) {
+                        linkActionsView.previewButtonView.label = '...';
                         fetch(editor.config.get('url_endpoint') + '?g=' + encodeURIComponent(cmsHref))
                         .then(response => response.json())
                         .then(data => {
-                            const button = linkActionsView.previewButtonView.element;
-                            button.firstElementChild.textContent = data.text;
+                            linkActionsView.previewButtonView.label = data.text;
+                            editor.ui.update();  // Update the UI to account for the new button label
                         });
                     } else if (linkHref) {
-                        const button = linkActionsView.previewButtonView.element;
-                        button.firstElementChild.textContent = selection.getAttribute('linkHref');
+                        // Add the link target of a regular link into the action view
+                        linkActionsView.previewButtonView.element.label = selection.getAttribute('linkHref');
+                        editor.ui.update();  // Update the UI to account for the new button label
                     }
                     return;
                 }
 
-                /**
-                 * Used to know if a selection was made from the autocomplete results.
-                 *
-                 * @type {boolean}
-                 */
-
                 if (autoComplete !== null) {
-                    // Already added, just reset it, if no link exists
+                    // AutoComplete already added, just reset it, if no link exists
                     autoComplete.selectElement.value = cmsHref || '';
                     autoComplete.urlElement.value = linkHref || '';
                     autoComplete.populateField();
+                    autoComplete.inputElement.focus();
                     return;
                 }
                 const hiddenInput = document.createElement('input');
@@ -162,10 +160,12 @@ export default class CmsLink extends Plugin {
                     hiddenInput,
                     linkFormView.urlInputView.fieldView.element
                 );
+                // Label is misleading - remove it
                 linkFormView.urlInputView.fieldView.element.parentNode.querySelector('label')?.remove();
                 autoComplete = new LinkField(linkFormView.urlInputView.fieldView.element, {
                     url: editor.config.get('url_endpoint') || ''
                 });
+                autoComplete.inputElement.focus();
             });
     }