Uncaught CKEditorError: cannot-change-view-tree

[indraraj26]

📝 Provide detailed reproduction steps (if any)

Step 1: type something very fast and remove half word in the editor and instantly apply bold or switch to italic
Step 2: repeat step

I am using this package with Oracle Jet. self.connected and self.disconnected these are life cycles. It is throwing below error in a very rare case and after that editor becomes unresponsiveness and all the toolbar like bold, Italic will not work.

error:

Uncaught CKEditorError: cannot-change-view-tree
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-cannot-change-view-tree
    at Ra.change (ckeditor.js:6:455694)
    at Fc.listenTo.priority (ckeditor.js:6:521464)
    at $l.fire (ckeditor.js:6:318135)
    at $l._handleChangeBlock (ckeditor.js:6:587063)
    at vd._runPendingChanges (ckeditor.js:6:610822)
    at vd.change (ckeditor.js:6:607472)
    at Sp.execute (ckeditor.js:6:783299)
    at Sp.<anonymous> (ckeditor.js:6:327829)
    at Sp.fire (ckeditor.js:6:318135)
    at <computed> [as execute] (ckeditor.js:6:327881)

✔️ Expected result

It should not throw an error.

❌ Actual result

function MinHeightPlugin(editor) {
        this.editor = editor;
      }
      
MinHeightPlugin.prototype.init = function() {
const minHeight = this.editor.config.get('minHeight');
   this.editor.ui.view.editable.extendTemplate({
      attributes: {
            style: {
              minHeight
            }
     }
 });
};

const candidateEditorDataChanged = () => {
        const data = candidateEditor.getData();
        self.properties.noteToCandidate = data;
      }

// This is lifecycle which will emit when viewModel/Dom is ready
self.connected = () => {
        ClassicEditor.builtinPlugins.push(MinHeightPlugin);
        ClassicEditor
          .create( document.querySelector( '#editor1' ), {
            toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'bulletedList', 
            'numberedList',  'blockQuote', '|', 'undo', 'redo',
            ],
            minHeight: '300px'
          }
             )
          .then((editor) => {
            candidateEditor = editor;
            editor.setData(self.properties.noteToCandidate)
            editor.model.document.on( 'change:data',  candidateEditorDataChanged);
          })
          .catch( error => { 
              console.error( error );
          } );
}

 self.disconnected = () => {
        candidateEditor.model.document.off('change:data', candidateEditorDataChanged);
 }

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: Chrome Latest One
• OS: Windows 11
• First affected CKEditor version: "@ckeditor/ckeditor5-build-classic": "^34.2.0"
• Installed CKEditor plugins:

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[indraraj26]

This is also reproducible in a sample.

Step 1: type something very fast and remove half word in the editor and instantly apply bold or switch to italic
Step 2: repeat step 1

[FilipTokarski]

Hi, I'm not able to reproduce this. Could you add a screencast showing exactly what you do and when the error occurs?

[indraraj26]

Hi Filip,

Here is the reproducible video.

record.mp4

Thank you

[indraraj26]

Hi @FilipTokarski ,

Let me know if you still have any doubts, We can jump on a Zoom call.

Reproduce Steps:

Step 1: type something very fast and remove half word in the editor and instantly apply bold or switch to italic
Step 2: repeat step 1

Thank you

[FilipTokarski]

Can you reproduce this also on docs demo or only in your customised editor?

[indraraj26]

Hi @FilipTokarski ,

The cast or reproducible you see, It was of sample which comes with ckeditor package . Also it is reproducible on docs demo too.

Reproduce Steps:

Step 1: type something very fast and remove half word in the editor and instantly apply bold or switch to italic
Step 2: repeat step 1

[dufipl]

Hello @indraraj26,
We were able to create simplified reproduction steps and reproduce the issue.

Steps

1. Open this demo: https://ckeditor.com/docs/ckeditor5/34.2.0/examples/builds/document-editor.html
2. Delete all contents and create a paragraph with e.g. "AAA" inside of it
3. Put the cursor after the text
4. Change the font
5. Try to select the text

Therefore, we can confirm the issue.
Also, it is a regression introduced by version 34.2.0.
cc @Reinmar

[FilipTokarski]

Full stack trace:

Uncaught TypeError: Cannot read properties of null (reading 'parent')
    at Renderer.render (renderer.js:238:1)
    at View._render (view.js:702:1)
    at View.<anonymous> (view.js:204:1)
    at View.fire (emittermixin.js:200:1)
    at View.change (view.js:499:1)
    at View._disableRendering (view.js:689:1)
    at EditingController.listenTo.priority (editingcontroller.js:94:1)
    at Model.fire (emittermixin.js:200:1)
    at Model._runPendingChanges (model.js:961:1)
    at Model.change (model.js:202:1)

Uncaught CKEditorError: cannot-change-view-tree
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-cannot-change-view-tree
    at View.change (view.js:473:1)
    at View._disableRendering (view.js:689:1)
    at EditingController.listenTo.priority (editingcontroller.js:94:1)
    at Model.fire (emittermixin.js:200:1)
    at Model._runPendingChanges (model.js:961:1)
    at Model.change (model.js:202:1)
    at widgettypearound.js:358:1
    at FocusTracker.<anonymous> (widgettypearound.js:177:1)
    at FocusTracker.fire (emittermixin.js:200:1)
    at FocusTracker.set [as isFocused] (observablemixin.js:95:1)

[FilipTokarski]

Bisection shows this commit: 22b97e9

[Reinmar]

Bisection shows this commit: 22b97e9

It was a fix for #11472.