Issue #3292780 by nod_, Spokje: Move Quick Edit related Javascript from...

Issue #3292780 by nod_, Spokje: Move Quick Edit related Javascript from core/modules/ckeditor5/js/ckeditor5.es6.js::detach() to the Quick Edit module

core/modules/ckeditor5/js/ckeditor5.es6.js

@@ -497,38 +497,11 @@
         editor.updateSourceElement();
       } else {
         element.removeAttribute('contentEditable');
-
-        // Prepare variables that will be used when discarding Quickedit changes.
-        let textElement = null;
-        let originalValue = null;
-        const usingQuickEdit = (((Drupal || {}).quickedit || {}).editors || {})
-          .editor;
-        if (usingQuickEdit) {
-          // The revert() function in QuickEdit's text editor does not work with
-          // CKEditor 5, as it is triggered before CKEditor 5 is fully
-          // destroyed. This function is overridden so the functionality it
-          // provides can happen after the CKEditor destroy() promise is
-          // fulfilled.
-          // This pulls the necessary values from the QuickEdit Backbone Model
-          // before it is destroyed, so they can be used by
-          // `editor.destroy().then()` to perform the expected revert.
-          Drupal.quickedit.editors.editor.prototype.revert =
-            function revertQuickeditChanges() {
-              textElement = this.$textElement[0];
-              originalValue = this.model.get('originalValue');
-            };
-        }
-
-        editor
+        // Return the promise to allow external code to queue code to
+        // execute after the destroy is complete.
+        return editor
           .destroy()
           .then(() => {
-            // If textElement and originalValue are not null, a QuickEdit
-            // revert has been requested. Perform the revert here as it
-            // can't happen until the CKEditor instance is destroyed.
-            if (textElement && originalValue) {
-              textElement.innerHTML = originalValue;
-            }
-
             // Clean up stored references.
             Drupal.CKEditor5Instances.delete(id);
             callbacks.delete(id);

core/modules/ckeditor5/js/ckeditor5.js

@@ -265,22 +265,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         editor.updateSourceElement();
       } else {
         element.removeAttribute('contentEditable');
-        var textElement = null;
-        var originalValue = null;
-        var usingQuickEdit = (((Drupal || {}).quickedit || {}).editors || {}).editor;
-
-        if (usingQuickEdit) {
-          Drupal.quickedit.editors.editor.prototype.revert = function revertQuickeditChanges() {
-            textElement = this.$textElement[0];
-            originalValue = this.model.get('originalValue');
-          };
-        }
-
-        editor.destroy().then(function () {
-          if (textElement && originalValue) {
-            textElement.innerHTML = originalValue;
-          }
-
+        return editor.destroy().then(function () {
           Drupal.CKEditor5Instances.delete(id);
           callbacks.delete(id);
 

core/modules/quickedit/js/editors/formattedTextEditor.es6.js

@@ -70,6 +70,55 @@
           this.$textElement = this.$el;
         }
         this.model.set('originalValue', this.$textElement.html());
+
+        if (
+          Drupal.editors &&
+          Drupal.editors.ckeditor5 &&
+          once('quickedit-ckeditor5-destroy', 'body').length
+        ) {
+          /**
+           * CKEditor 5 destroy lifecycle is different because is uses Promises.
+           */
+          const ckeditor5Detach = Drupal.editors.ckeditor5.detach;
+          Drupal.editors.ckeditor5.detach = function quickeditDetach(
+            element,
+            format,
+            trigger,
+          ) {
+            const destroyPromise = ckeditor5Detach.call(
+              this,
+              element,
+              format,
+              trigger,
+            );
+            if (destroyPromise && destroyPromise.then) {
+              let textElement = null;
+              let originalValue = null;
+              // The revert() function in QuickEdit's text editor does not work with
+              // CKEditor 5, as it is triggered before CKEditor 5 is fully
+              // destroyed. This function is overridden so the functionality it
+              // provides can happen after the CKEditor destroy() promise is
+              // fulfilled.
+              // This pulls the necessary values from the QuickEdit Backbone Model
+              // before it is destroyed, so they can be used by
+              // `editor.destroy().then()` to perform the expected revert.
+              Drupal.quickedit.editors.editor.prototype.revert =
+                function revertQuickeditChanges() {
+                  textElement = this.$textElement[0];
+                  originalValue = this.model.get('originalValue');
+                };
+
+              destroyPromise.then(() => {
+                // If textElement and originalValue are not null, a QuickEdit
+                // revert has been requested. Perform the revert here as it
+                // can't happen until the CKEditor instance is destroyed.
+                if (textElement && originalValue) {
+                  textElement.innerHTML = originalValue;
+                }
+              });
+            }
+          };
+        }
       },
 
       /**

core/modules/quickedit/js/editors/formattedTextEditor.js

@@ -26,6 +26,30 @@
       }
 
       this.model.set('originalValue', this.$textElement.html());
+
+      if (Drupal.editors && Drupal.editors.ckeditor5 && once('quickedit-ckeditor5-destroy', 'body').length) {
+        var ckeditor5Detach = Drupal.editors.ckeditor5.detach;
+
+        Drupal.editors.ckeditor5.detach = function quickeditDetach(element, format, trigger) {
+          var destroyPromise = ckeditor5Detach.call(this, element, format, trigger);
+
+          if (destroyPromise && destroyPromise.then) {
+            var textElement = null;
+            var originalValue = null;
+
+            Drupal.quickedit.editors.editor.prototype.revert = function revertQuickeditChanges() {
+              textElement = this.$textElement[0];
+              originalValue = this.model.get('originalValue');
+            };
+
+            destroyPromise.then(function () {
+              if (textElement && originalValue) {
+                textElement.innerHTML = originalValue;
+              }
+            });
+          }
+        };
+      }
     },
     getEditedElement: function getEditedElement() {
       return this.$textElement;