Ckeditor wrap and block the text below

Hello!

We used this trick to solve the problem for a while:

            editor.on("rte:enable",()=>{
                editor.trigger('canvasScroll');
            });

subscribe to the event rte:enable and trigger the canvasScroll. With this, the grapes will recalculate the position.

@ronaldohoch Thank you, this code work to me

bugs will also be implemented on this website. https://grapesjs.com/demo-mjml.html The toolbar in the upper right corner will also be covered

@artf

Thanks for reporting this, @mingxin-yang.

The issue with ckeditor wrap and block the text below appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report