GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug?Just Visit the Demo Site of Grapesjs the canvas not been rendered What is the expected behavior? The Canvas Should be Render...
artf
Closing this as the demo seems to run fine, maybe something related to your browser cache/extensions
GJS Helper
The Uncaught TypeError: Cannot set properties of null (setting 'isEditor') error, especially when encountered on the GrapesJS demo site with a blank canvas, indicates a critical failure during the editor's initialization process. This erro...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Try select for example whole sidebar tools/text/everythingGrab and drop it on canvas What is the expected behavior? Pro...
artf
You can take control over what is dropped inside the canvas via canvas:dragdata event https://jsfiddle.net/artur_arseniev/87rcb24n/
GJS Helper
The issue you've reported, where arbitrary elements from outside the GrapesJS canvas (including parts of the editor's UI) can be dragged and dropped into the canvas, is a common behavior stemming from the browser's native drag-and-drop fun...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 131.0.6778.109 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo-newsletter-editor Describe the bug How to reproduce the bug?Place the mouse pointer at the starting position of the t...
sirbeagle
I believe I have tracked this down to being a conflict with the ability to select multiple blocks at the same time. Commenting out on line 539 in /src/editor/model/Editor.ts seems to prevent the selected text from clearing. I'm now looking...
GJS Helper
You've encountered a common issue where text selection in the GrapesJS Rich Text Editor (RTE) does not visually highlight the selected text, even though the selection itself is functional (e.g., you can copy the text). This behavior is rep...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v131Reproducible demo link https://jsfiddle.net/cmq9end2/1/Describe the bug How to reproduce the bug?Add an img to the canvas with an invalid URL in the srcset Check the network tab in Chrome dev console - the asset r...
GJS Helper
The issue you've described, where an <img> tag with an invalid srcset attribute (and no src attribute) causes an infinite 404 request loop, is a known behavior in some browsers (like Chrome) rather than a direct bug within GrapesJS itself....
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://jsfiddle.net/badiuciprian/qe28obhr/1/Describe the bug How to reproduce the bug?try dragging any block to the canvas What is the expected behavior? The component is rendered to the...
mohamedsalem401
I managed to reproduce it. It's only happening on nativeDnD: false. Probably this makes the block view use the API of the old sorter. I will try to push a fix for this.
artf
@mohamedsalem401 can you check this one, please?
badiuciprian
Thanks for taking care of this. I will watch for the update.
GrapesJS version[X] I confirm to use the latest version of [email protected] when this issue was filedWhat browser are you using? Firefox 132, Chrome 131Reproducible demo link https://jsfiddle.net/x54f9v68/1/Describe the bug How to reproduce the bug?Add a custom block, with the media property set to an SVG with...
samex
I believe it depends on the specific SVG being used. If you check the other SVG icons, you'll notice they don't have a fill attribute (inline) on the main <svg> tag but rather on the child <path> tags. By setting the fill="none" attribute...
tonypapousek
@samex Specifying fill="none" did the trick, thanks! That'll deffo help get my custom stuff working more predictably. Past that, I think the main pain point would be trying to use third-party SVGs (e.g. "react-icons") or wysiwyg output tha...
artf
Yeah I'd close this one as it's not strictly related to the core itself but thanks for point this out
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...
danstarns
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
maxming2333
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 sh...
GJS Helper
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 ex...
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://grapesjs.com/demo-mjml Describe the bug How to reproduce the bug?Select a component at random, such as the second mj-section on the demo pageHover this component in the editor...
GJS Helper
The issue you're encountering where calling tagUpdated() on an MJML component breaks its hover functionality and throws an error is due to a mismatch in how tagUpdated() is designed to work versus the specific rendering lifecycle of MJML c...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Arc v1.61.1 Reproducible demo link https://codesandbox.io/s/grapesjs-react-components-n6sff Describe the bug @artf First of all thank you for this amazing library. I was trying to create custom react components within grap...
artf
Yeah, that's expected from the demo perspective. You can play around with the code and find your solution but I'm closing this as it's not a core bug.
GJS Helper
The behavior you're observing, where custom React components are wrapped inside an extra div with GrapesJS-specific attributes, is fundamental to how GrapesJS manages components in the DOM. This div is not an "extra" wrapper in the GrapesJ...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefix v132.0 Reproducible demo link https://jsfiddle.net/skdegqun/4/ Describe the bug How to reproduce the bug?Running the fiddle can be appreciated on the logs that the data sources passed on editor initialization were...
artf
You need to wait until the editor is ready.
GJS Helper
The issue you're encountering is a known behavior where the GrapesJS DataSources module does not automatically hydrate its state from the dataSources property within the projectData during editor initialization or when loading from storage...