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
PageKit: the GrapesJS application you'd have to build anyway
A source-available Next.js app around the open-source GrapesJS core β publishing, custom domains, leads, checkout and a plugin loader.
Tutorial
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Tutorial
Messaging on gjs.market: talk to a studio before you buy, not after
We've launched private messaging between buyers and studios. One thread per buyerβstudio pair, the whole history in one place.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.