Fix: Improve text-enabled plugin editing experience by evaluating dat…

…abridge response instead of reloading frame
django-cms · Mar 20, 2024 · cb9c8e4 · cb9c8e4
1 parent 86056fa
commit cb9c8e4
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 21 deletions.
diff --git a/README.rst b/README.rst
@@ -68,7 +68,7 @@ needed. The following editors are currently supported:
 - **TipTap**: A modern rich text editor with a modular architecture, TipTap is currently
   in development and is the default editor. TipTap does not allow the user to edit
   HTML directly, which means that some formating options are lost when switching from
-    CKEditor 4 to TipTap.
+  CKEditor 4 to TipTap.
 - **CKEditor 4**: The initial version of ``djangocms-text`` includes a port of the
   CKEditor 4 interface and child plugin functionality. This editor is compatible with
   the ``djangocms-text-ckeditor`` plugin, and can be used as a drop-in replacement.

diff --git a/private/js/cms.dialog.js b/private/js/cms.dialog.js
@@ -32,6 +32,7 @@ class CmsDialog {
     pluginDialog() {
         this.dialog = document.createElement("dialog");
         this.dialog.classList.add("cms-dialog");
+        this.dialog.dataset.editor = this.el.id;
         this.dialog.innerHTML = `
             <div class="cms-modal-head">
                 <span class="cms-modal-title">
@@ -144,14 +145,13 @@ class CmsDialog {
         // Prefill marked input fields with selected text
         selectionText = selectionText || '';
         if (selectionText.length > 0) {
-            let fillInput = content.querySelector('.js-ckeditor-use-selected-text,.js-prepopulate-selected-text');
-            if (!fillInput) {
-                fillInput = content.querySelector('#id_name');
-            }
-
-            if (!(fillInput.value.trim())) {
-                fillInput.value = selectionText;
-                fillInput.focus();
+            let fillInput = content.querySelector('.js-ckeditor-use-selected-text,.js-prepopulate-selected-text') ||
+                content.querySelector('#id_name');
+            if (fillInput) {  // Does such a field exist?
+                if (!(fillInput.value.trim())) {
+                    fillInput.value = selectionText;  // Prefill the field only if it is empty
+                    fillInput.focus();
+                }
             }
         }
         this.open();

diff --git a/private/js/cms.editor.js b/private/js/cms.editor.js
@@ -117,7 +117,7 @@ class CMSEditor {
         }
         const plugins = this.CMS._plugins;
 
-        this.observer = this.observer || new IntersectionObserver( (entries, opts) => {
+        this.observer = this.observer || new IntersectionObserver( (entries) => {
             entries.forEach((entry) => {
                 if (entry.isIntersecting) {
                     this.init(entry.target);
@@ -247,6 +247,7 @@ class CMSEditor {
         }
     }
 
+
     saveData(el, action) {
         if (el && el.dataset.changed === "true") {
             const html = window.cms_editor_plugin.getHTML(el),
@@ -271,28 +272,43 @@ class CMSEditor {
             })
                 .then(response => {
                         el.dataset.changed = 'false';
+                        if (action !== undefined) {
+                            action(el, response);
+                        }
                         if (this.CMS) {
                             this.CMS.API.Toolbar.hideLoader();
                         }
-                        if (action !== undefined) {
-                            action(el, response);
+                        return response.text();
+                }).then(body => {
+                        // Read the CMS databridge values from the response
+                        // The regexes are used to extract the databridge values from the response.
+                        // This depends on the exact format django CMS core returns it. This will need to be adjusted
+                        // if the format changes.
+                        // Fallback solution is to reload the page as djagocms-text-ckeditor used to do.
+                        const regex1  = /^\s*Window\.CMS\.API\.Helpers\.dataBridge\s=\s(.*?);$/gmu.exec(body);
+                        const regex2  = /^\s*Window\.CMS\.API\.Helpers\.dataBridge\.structure\s=\s(.*?);$/gmu.exec(body);
+                        if (regex1 && regex2 && this.CMS) {
+                            this.CMS.API.Helpers.dataBridge = JSON.parse(regex1[1]);
+                            this.CMS.API.Helpers.dataBridge.structure = JSON.parse(regex2[1]);
+                            this.CMS.API.StructureBoard.handleEditPlugin(this.CMS.API.Helpers.dataBridge);
+                            this._loadToolbar();
+                        } else {
+                            // No databridge found
+                            // Reload
+                            this.CMS.API.Helpers.reloadBrowser('REFRESH_PAGE');
                         }
-                    if (el.dataset.childChanged) {
-                        this.CMS.API.Helpers.reloadBrowser('REFRESH_PAGE');
-                    } else {
-                        this._loadToolbar();
-                    }
                 })
                 .catch(error => {
                         el.dataset.changed = 'true';
                     if (this.CMS) {
+                        this.CMS.API.Toolbar.hideLoader();
                         this.CMS.API.Messages.open({
                             message: error.message,
-                            error: true
+                            error: true,
+                            delay: -1,
                         });
-                    } else {
-                        window.console.error(error.message);
                     }
+                    window.console.error(error.message);
                 });
         }
     }
@@ -352,17 +368,18 @@ class CMSEditor {
             if (saveSuccess) {
                 // Mark document and child as changed
                 el.dataset.changed = 'true';
-                el.dataset.childChanged = 'true';
                 // Hook into the django CMS dataBridge to get the details of the newly created or saved
                 // plugin. For new plugins we need their id to get the content.
                 if (!this.CMS.API.Helpers.dataBridge) {
                     // The dataBridge sets a timer, so typically it will not yet be present
                     setTimeout(() => {
+                        // Needed to update StructureBoard
                         if (onSave) {
                             onSave(el, form, this.CMS.API.Helpers.dataBridge);
                         }
                     }, 100);
                 } else {
+                    // Needed to update StructureBoard
                     if (onSave) {
                         onSave(el, form, this.CMS.API.Helpers.dataBridge);
                     }