CKEditor loses connection (detaches) if text component is changed (rerendered on canvas)

[pety-dc]

CKEditor toolvbar loses connection with the edited content if the text component ever gets changed (either styled or some property gets added which casuses rerendering of the text component on the canvas)

Steps to reproduce:

• open a text component for editing
• set a property (id) or style via grapesJS style editor
• reopen the text component for editing and try to edit. You may type in new texts but unable to style via CKeditor toolbar. Also, GrapesJS doesn't recognize the changes.

[pety-dc]

The following snippet can be used as a temporary remedy:

editor.on('component:update', (component) => {
            if (component.isInstanceOf('text')){                
                if (component && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container && component.view.activeRte.container.isDetached()){                    
                    component.view.activeRte.destroy();                    
                }
            }
});

[michael-koeppe]

Hey @pety-dc ,
I ran into the same issue. I tryed your solution but it threw an error, telling me, that isDetached is not a function.
The following code does the job in my case:

editor.on('component:update', (component) => {
    if (component && component.isInstanceOf('text') && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container.isDetached()) {
        component.view.activeRte.destroy();
    }
});

Update: The isDetached() function is indispensable if you want to enter more text after making changes to the styles. An update to CKE v. 4.21 is strongly recommended. I had only taken care of the styles and did not notice that the CK is also destroyed when the component updates itself by text input.

[pety-dc]

Hey @michael-koeppe,

I don't know what version of CKEditor do you use.
The isDetached method was added in 4.13
https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-isDetached

However, I didn't find it in CKEditor 5.

[plomi-net]

Hi @pety-dc,
i'm interested for a solution with this problem too.
I can reproduce the same issue with the release package from this grapesjs repository.

https://github.com/GrapesJS/grapesjs/tree/gh-pages

The version in the repository should be 4.6.2.
Would be this a solution to change the ckeditor version to the latest 4.21.0 ?

Many thanks in advance!

[pety-dc]

@plomi-net
TBH, I'm not sure what you wanted to ask. I'm trying to figure out.

AFAIK the issue that the GrapesJS canvas loses contact with the CKEditor instance when attributes of a text is edited on GrapesJS toolbar (which causes the text component to be redrawn on the canvas) is not dependent of CKeditor version.
Merely upgrading the CKEditor version does not fix this issue.

Having CKEditor version >=4.13 is only required for my suggested solution to this problem which uses the isDetached method which was introduced in CKE in v4.13.

[plomi-net]

@pety-dc
Your suggested solution working fine.
i have updated the ckeditor version to use the ìsDetached` method.
I just say that the repository still contains an outdated version of ckeditor :)

[yongma16]

editor.on('component:update', (component) => {
if (component && component.isInstanceOf('text') && component.view && component.view.activeRte && component.view.activeRte.container && component.view.activeRte.container.isDetached()) {
component.view.activeRte.destroy();
}
});

nice