GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? All browsers (Chrome, Safari, Firefox, Edge) Reproducible demo link https://jsfiddle.net/saeedhbi/powxyjdq/3/ Describe the bug How to reproduce the bug? Initialize a GrapeJS editor Select a component in the canvas Quickly...
artf
Similar to https://github.com/GrapesJS/grapesjs/issues/6705 I'm not able to create that kind of race condition (eg. select and remove via API) and in your example is checking getRoot on a component, but there is no such a method on the Com...
saeedhbi
Same as https://github.com/GrapesJS/grapesjs/issues/6705#issuecomment-3921025039, the issue was in our external library that was using GrapeJS and since had same situation like the issue 6705, I will close it. Thank you for your review.
GJS Helper
This TypeError: e.getRoot is not a function is a known race condition within GrapesJS's Style Manager, particularly when components are rapidly selected and then deleted. It occurs because the Style Manager's update logic, which is debounc...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 143.0.7499.193 Reproducible demo link https://app.rechat.com/dashboard/marketing/history/Letter?printCampaignId=28f0587d-8738-4fd6-8087-da3167f6d737&action=edit Describe the bug How to reproduce the bug? Ope...
artf
Please provide an isolated, reproducible demo cause that seems to come from your code logic and not related to the core
GJS Helper
The GrapesJS editor crash with a TypeError: Cannot read properties of undefined (reading 'type') when loading your template is caused by malformed HTML within the content you are trying to load. Specifically, certain div elements have a da...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.193 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hello. How to reproduce the bug? Import GrapeJS in a JS file / Node env : on a webpage using strict CSP rules, for instance : Doi...
GJS Helper
GrapesJS, by its nature as a dynamic web builder, relies on injecting styles and manipulating the DOM, which can indeed lead to Content Security Policy (CSP) violations, especially with very strict rules like yours. Let's break down the is...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143.0.7499.193 Reproducible demo link https://codesandbox.io/p/sandbox/2l3887 Describe the bug How to reproduce the bug? Open the page and load the GrapesJS editor Select the Row component and delete it Click the R...
mdmontesinos
I'm facing a similar issue, where the re-added component has the correct styles property: <img width="1112" height="17" alt="Image" src="https://github.com/user-attachments/assets/474011c4-b1be-48df-9aa8-14c3dcdfc68d" /> But if I use the "...
artf
@mdmontesinos your usage is not correct, styles has to be defined at the component definition, and it's not expected to change. Also, it's wrong to use IDs for component definition if the component is expected to be reused, the ID will be...
mdmontesinos
@artf I'm using an ID because there will always be a single instance of that component in my project. My use case is that a component is designed externally to be used as a "background" and then imported into projects that use it. Therefor...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v143 Reproducible demo link https://jsfiddle.net/szLp8h4n Describe the bug How to reproduce the bug? Set background color Set border radius bottom left, to eg 20px. What is the expected behavior? The bottom left cor...
GJS Helper
Thank you for reporting this issue. I can confirm the bug where the 'Border Radius Bottom Left' and 'Border Radius Bottom Right' controls in the GrapesJS Style Manager are indeed swapped, leading to the incorrect corner being rounded. This...
@artf The elements with an ID in the symbols have different ID in the different instances of the symbol. It makes sense because it's bad to have multiple elements with the same ID in an HTML document Issue 1 Users who have a symbol on different pages are confused because the styles they "add" to an element ID is "lost...
GJS Helper
You've accurately identified a fundamental design decision in GrapesJS regarding how IDs are handled within symbol instances. This behavior, while crucial for maintaining valid HTML, indeed presents challenges for specific use cases like s...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.41 Reproducible demo link https://jsfiddle.net/mghzw41k/2/ Describe the bug On preview mode, anchor links with hash navigation (e.g., href="#section") don't work. The default browser navigation behavior i...
doudou673
I encountered the same problem.
GJS Helper
The issue you're experiencing with anchor links (hash navigation) not working in GrapesJS preview mode is a common behavior stemming from how GrapesJS handles interactions within its canvas. In editing mode, GrapesJS intercepts click event...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 137.0 and Chrome 136.0.7103.92 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? Open the official demo https://grapesjs.com/demo.html To reproduce the exact same stru...
pierodetomi
I can confirm Iβm seeing the same issue, and itβs caused by the disappearing element having a computed height of 0px (because itβs using display: none). While this is definitely a bug, as a temporary workaround you can avoid using display:...
GJS Helper
This is indeed a bug within the GrapesJS Layers panel's drag-and-drop functionality, specifically when attempting to move components that are semantically linked, such as an input element with an id and a label element with a for attribute...
Here is a video showing the bug: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? firefox latest and Chrome v141.0.7390.122 Reproducible demo link https://canary.silex.me/ I can do a fiddle/c...
lexoyo
Oh and i'd be happy to contribute if you tell me what solution i should focus on (a command to re-connect instances, an async method to load project data like what i do in silex, ...) cc @artf
artf
yeah looks like an issue with that way of loading pages π€ I don't see any issue on my side (full project load). What is the reason behind loading pages in that way?
lexoyo
yeah looks like an issue with that way of loading pages π€ I don't see any issue on my side (full project load). What is the reason behind loading pages in that way? It avoids blocking the main thread for too long. When users load a real l...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 145.0 (64-bit) Reproducible demo link https://jsfiddle.net/artur_arseniev/ta19s6go/ Describe the bug How to reproduce the bug? Go to the official Symbols demo, create a symbol and change the text color of the main...
NilLlisterri
Got it, if I want to style something inside a symbol and share the changes I should add a class to it. Thank you both for the help!
lexoyo
Hello This color is applied to the element, in grapesjs this means it will generate a css like #compid { color: red; } but IDs are unique in an HTML page, so the other symbol has a different ID It's a problem to me too, I'm not sure how th...
artf
Sorry, not a bug, but a "feature" π IMHO, component styles should not be bound to symbols; that's an easy way to override styles between same symbols (common thing). If you need the same styles, you simply leverage the classes.