Post the full complete demo code

Yes, the problem is that the demo defines its own plugin that then imports all other plugins. This makes trying to find out how to do stuff really hard, because you have to follow a lot of redirects across different repositories. It's also not how you would write your own application based on grapesjs.

The link to the master demo plugin is also not as easy to find as the demo page, it's here.

The final code of the getting started tutorial is actually here (and its grapesjs config).

Yes, the problem is that the demo defines its own plugin that then imports all other plugins

@anlumo Yeah actually current presets plugins were structured in that way, probably right now I'd rethink them with a more modular approach where the preset itself is mainly the UI of the editor and the rest could be extended with additional plugins (components, blocks, etc.). Unfortunately, right now I'm not able to find time to fix them (there are also old AF) but I'd appreciate some help.

@artf but How to run that file or config file as main file is in vue and base project is in React, can you point out how to make it run as shown in demo?

Thanks for reporting this, @alpha2k-io.

Great question about FEAT: Post the full complete demo code. 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!