liferay / alloy-editor

WYSIWYG editor based on CKEditor with completely rewritten UI
http://alloyeditor.com
GNU Lesser General Public License v3.0
1.38k stars 282 forks source link

uibridge isn't resetting definitions once the editor is destroyed and recreated #1537

Closed georgel-pop-lr closed 1 year ago

georgel-pop-lr commented 1 year ago

Do you want to request a feature or report a bug? Bug

What is the current behavior?

Once you call destroy and recreate the editor, when trying to change font or fontsize you get the following error:

Uncaught TypeError: Cannot read properties of null (reading 'getRanges') at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.command.exec (ckeditor.js?browserId=chrome&minifierType=js&languageId=en_US&t=1655312240360:875:311) at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.command.exec (ckeditor.js?browserId=chrome&minifierType=js&languageId=en_US&t=1655312240360:207:171) at c.execCommand (ckeditor.js?browserId=chrome&minifierType=js&languageId=en_US&t=1655312240360:276:251) at a.onClick (ckeditor.js?browserId=chrome&minifierType=js&languageId=en_US&t=1655312240360:878:103) at r._onClick (version.js:1:1) at Object.u (version.js:1:1) at h (version.js:1:1) at m (version.js:1:1) at x (version.js:1:1) at R (version.js:1:1)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

Use this POC sample code to reproduce the issue:

....

 <div id="editable2" contenteditable="true" placeholder="Write some content here too">
            <p>Bacon ipsum dolor amet salami cow beef chuck pastrami prosciutto. Ground round landjaeger pancetta, cupim capicola turkey pastrami jowl pork shank chuck flank kevin. Sausage pastrami doner short loin burgdoggen spare ribs. Drumstick picanha pastrami ham hock ground round porchetta. Meatball hamburger cow turducken, flank jowl biltong kielbasa t-bone. Chicken tongue doner, picanha salami pork belly filet mignon brisket strip steak landjaeger venison.</p>
        </div>

<button type="button"  onclick="createDestroyEditor()">Create/Destroy</button>

        <script>
            window.ALLOYEDITOR_BASEPATH = 'alloy-editor/';

            var createEditor = true;
            var editor1 = AlloyEditor.editable('description');
            var editor2 = AlloyEditor.editable('editable1');
            var editor3 = AlloyEditor.editable('headline');
            var editor4;

            function createDestroyEditor() {
                if (createEditor) {
                    editor4 = AlloyEditor.editable('editable2', {
                        mode: 'full'
                    });
                    createEditor = false;
                    alert("Editor created successfully!");
                } else {
                    editor4.destroy();
                    createEditor = true;
                    alert("Editor destroyed successfully!");
                }
            }

        </script>
...

Steps:

  1. Create the editor by pressing Create/Destroy button and change fontsize by selecting a text, everything works perfectly.

  2. Destroy and recreate the editor, try to change fontsize again, you will get the above error.

What is the expected behavior? You can use CKEditor plugins after you destroy and recreate the editor.

Which versions of alloy-editor, and which browser / OS are affected by this issue? Did this work in previous versions? This is affected by all browsers, and previous versions didn't work either.

diegonvs commented 1 year ago

Released https://github.com/liferay/alloy-editor/releases/tag/v2.14.8