When inserting text when component not synced, the text is overwritten from the existing model

This is not a bug, merging the current DOM with components requires a bit more effort. There is already a similar API you can use or re-implement with your own needs (using component definition instead of HTML string)

Thanks for reporting this, @Wayne-Mather.

Great question about When inserting text when component not synced, the text is overwritten from the existing model. The recommended approach with ProseMirror 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!