React Custom UI `Modal` Unable to display `Code`

Hi @maxming2333, try clicking anywhere inside the highlighted area in the text box, for me it loads the code...

https://github.com/user-attachments/assets/89f61dc6-466a-476a-b437-d0f8ae51c7ef

Hi @maxming2333, try clicking anywhere inside the highlighted area in the text box, for me it loads the code...

Screen.Recording.2024-11-19.at.23.21.03.mov

Yes, it can indeed be displayed after clicking on the pop-up window area, but it should be displayed as soon as the pop-up window is opened, not after clicking.

Thanks for reporting this, @maxming2333.

Great question about React Custom UI Modal Unable to display Code. The recommended approach with GrapesJS 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!