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
Read full answer below โQuestion
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx Describe the bug How to reproduce the bug?open https://grapesjs-react-custom-ui.stackblitz.io/click this button <img width="537" alt="image" src="https://github.com/user-attachments/assets/35d33966-60b6-4a88-96c6-0c260d523af7">no code to show in Modal <img width="1127" alt="image" src="https://github.com/user-attachments/assets/761efaae-5061-4867-8367-832df023a9c8"> What is the expected be...
Answers (3)
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, no...
The issue you're encountering stems from how GrapesJS's CodeViewer (which internally uses CodeMirror) interacts with React's rendering lifecycle, especially when embedded within a custom modal. React components manage their own DOM, and external libraries like CodeMirror need to be explicitly attac...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6063
How to load grapesjs by default preview
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest Reproducible demo link https://stac...
Issue #6081
Custom Component not able to visible in grapsJs/studio at first rendering
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chromeReproducible demo link https://stackbl...
Issue #6683
Modals close on mouseup event outside of modal rather than a full click
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.169 Reproducible demo li...
Issue #4042
Icons are not loading when loading within an angular application
GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://stackbl...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โPremium plugins ship with support, regular updates, and production-ready features โ save days of integration work.
Browse premium plugins โRelated tutorials
In-depth guides on the same topic.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners โ this post is for you.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins โ TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.