Adding inline scripts and updating old events

I tried to update the inline script using the following steps:

• Get the document of the iframe: iframeDoc = editor.Canvas.getDocument()
• Get the innerHTML of the body of the document: iframeDocBodyHtml = iframeDoc.body.innerHTML
• Replace the innerHTML of the body: iframeDoc.body.innerHTML = iframeDocBodyHtml
• Reattach the inline script

Doing this leads to a loss of the inbuilt grapesjs events like hover or component select (this is obvious as all the events are lost). Is there a way to reattach these grapesjs events? I also tried to do editor.Canvas.toggleFramesEvents(1) but it did not help.

I tried to add the select and hover events by running component-select command by writing editor.trigger('core:component-select') but that didn't help either and doing editor.runCommand('core:component-select') gives an error. Am I missing something?

Well, I think it won't be bad to add an easy way to force the rerender of the iframe (not a common case but for sure might be useful in some cases). Unfortunately, right now, you should try to use private methods and check if everything works as expected, then if you confirm, I'll be happy to add a listener for something like frame.trigger('rerender'). For now I'd ask you to try something like this

// Take the actual view of the frame
const frameView = editor.Canvas.getFrame().view;
// Once we remove the frameView, we have to rerender the frame 
// wrapper view (which contains different elements like toolbars and the frame itself).
const frameWrapView = frameView.config.frameWrapView;
// Now, remove the frameView and rerender the wrapper
frameView.remove();
frameWrapView.render();

Thanks for reporting this, @theSC0RP.

Great question about Adding inline scripts and updating old events. The recommended approach with Canvas is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!