Avoid collisions with default global export CKEDITOR

The new build of CKEditor 5 automatically exports a global window.CKEDITOR variable. Previously, RT also used window.CKEDITOR to store CKEditor instances, causing conflicts. Rename RT's version to window.RT_CKEditor.
bestpractical · Feb 10, 2025 · 32d260b · 32d260b
1 parent 6fb41bc
commit 32d260b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/lib/RT/Test/Selenium.pm b/lib/RT/Test/Selenium.pm
@@ -252,7 +252,7 @@ sub set_richtext_field {
     my $value = shift;
     $self->find_element( selector_to_xpath(qq{textarea[name='$id'] + div.ck-editor}) );
     my $script = q{
-       CKEDITOR.instances[arguments[0]].setData(arguments[1]);
+       RT_CKEditor.instances[arguments[0]].setData(arguments[1]);
     };
     $self->execute_script( $script, $id, $value );
 }

diff --git a/share/static/js/util.js b/share/static/js/util.js
@@ -459,8 +459,8 @@ function initializeSelectElements(elt) {
     elt.querySelectorAll('input.rt-autocomplete:not(.tomselected)').forEach(initializeSelectElement);
 }
 
-function ReplaceAllTextareas(elt) {
-    window.CKEDITOR ||= { "instances": {} };
+async function ReplaceAllTextareas(elt) {
+    window.RT_CKEditor ||= { "instances": {} };
 
     elt ||= document;
     // replace all content and signature message boxes
@@ -538,7 +538,7 @@ function ReplaceAllTextareas(elt) {
             CKEDITOR.ClassicEditor
                 .create( textArea, initArgs )
                 .then(editor => {
-                    CKEDITOR.instances[editor.sourceElement.name] = editor;
+                    RT_CKEditor.instances[editor.sourceElement.name] = editor;
                     // the height of element(.ck-editor__editable_inline) is reset on focus,
                     // here we set height of its parent(.ck-editor__main) instead.
                     editor.ui.view.editable.element.parentNode.style.height = height;
@@ -554,16 +554,18 @@ function ReplaceAllTextareas(elt) {
                         editor.model.document.on('change:data', () => {
                             const value = editor.getData();
                             jQuery('textarea.richtext').filter(function () {
-                                return CKEDITOR.instances[this.name] && name_filter_regex.test(this.name);
+                                return RT_CKEditor.instances[this.name] && name_filter_regex.test(this.name);
                             }).not(jQuery(editor.sourceElement)).each(function () {
-                                if ( CKEDITOR.instances[this.name].getData() !== value ) {
-                                    CKEDITOR.instances[this.name].setData(value);
+                                if ( RT_CKEditor.instances[this.name].getData() !== value ) {
+                                    RT_CKEditor.instances[this.name].setData(value);
                                 };
                             });
                         });
                     }
                     editor.on('destroy', () => {
-                        delete CKEDITOR.instances[editor.sourceElement.name];
+                        if (RT_CKEditor.instances[editor.sourceElement.name]) {
+                            delete RT_CKEditor.instances[editor.sourceElement.name];
+                        }
                     });
                 })
                 .catch( error => {
@@ -865,8 +867,8 @@ jQuery(function() {
 
     document.body.addEventListener('htmx:configRequest', function(evt) {
         for ( const param in evt.detail.parameters ) {
-            if ( evt.detail.parameters[param + 'Type'] === 'text/html' && CKEDITOR.instances[param] ) {
-                evt.detail.parameters[param] = CKEDITOR.instances[param].getData();
+            if ( evt.detail.parameters[param + 'Type'] === 'text/html' && RT_CKEditor.instances[param] ) {
+                evt.detail.parameters[param] = RT_CKEditor.instances[param].getData();
             }
         }
     });
@@ -914,7 +916,7 @@ jQuery(function() {
 
         evt.detail.historyElt.querySelector('#hx-boost-spinner').classList.add('invisible');
         evt.detail.historyElt.querySelectorAll('textarea.richtext').forEach(function(elt) {
-            CKEDITOR.instances[elt.name].destroy();
+            RT_CKEditor.instances[elt.name].destroy();
         });
         evt.detail.historyElt.querySelectorAll('.hasDatepicker').forEach(function(elt) {
             elt.classList.remove('hasDatepicker');
@@ -1426,8 +1428,8 @@ htmx.onLoad(function(elt) {
             plainMessageBox.addClass('mark-changed');
             let interval;
             interval = setInterval(function() {
-                if (CKEDITOR.instances && CKEDITOR.instances[messageBoxName]) {
-                    const richTextEditor = CKEDITOR.instances[messageBoxName];
+                if (RT_CKEditor.instances && RT_CKEditor.instances[messageBoxName]) {
+                    const richTextEditor = RT_CKEditor.instances[messageBoxName];
                     richTextEditor.model.document.on( 'change:data', () => {
                         mark_changed(plainMessageBox.attr('name'));
                     });
@@ -1944,9 +1946,9 @@ jQuery(function () {
 
                     document.querySelectorAll('#dynamic-modal form textarea.richtext').forEach((textarea) => {
                         const name = textarea.name;
-                        if ( CKEDITOR.instances[name] ) {
-                            if ( CKEDITOR.instances[name].getData() !== textarea.value ) {
-                                CKEDITOR.instances[name].updateSourceElement();
+                        if ( RT_CKEditor.instances[name] ) {
+                            if ( RT_CKEditor.instances[name].getData() !== textarea.value ) {
+                                RT_CKEditor.instances[name].updateSourceElement();
                                 jQuery(textarea.closest('form')).data('changed', true);
                             }
                         }