GrapesJS Issues

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...

saeedhbi

Hi @artf, After digging deeper into the full stack trace, I found that the error is not in GrapesJS. The event.key.toLowerCase() call is coming from our own application code — a global window.addEventListener("keydown", ...) handler that w...

artf

Hey @saeedhbi, where exactly do you see event.key.toLowerCase() in our code? Are you sure is not coming from your side? Unfortunately, the jsfiddle is not helpful, seems too much AI slopped 😅, it's not even loading the editor. Maybe you c...

GJS Helper

The TypeError: Cannot read properties of undefined (reading 'toLowerCase') in GrapesJS's keyboard handler is a known issue that arises when certain keyboard events, particularly those from Input Method Editors (IMEs) used for languages lik...

GJS Helper

The issue you've encountered is a common pitfall when performing synchronous DOM or component tree manipulations within GrapesJS lifecycle events, especially when the UndoManager is active. The core problem lies in the timing and the state...

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...

derikb

fwiw I used the demo page as the reproducible link, though that page is not using the most recent version of grapesjs. My local code is using the recent version and shows the same issue.

derikb

Ok I see why its happening. Because the modal and its surrounding backdrop are all one element that has the events attached, so a mousedown, drag, mouseup is still getting treated as a click cause its all over the same element. Event.targe...

GJS Helper

The issue you've described is a known edge case in how browser click events interact with mousedown and mouseup events, especially when dealing with overlays or backdrops for modals. While GrapesJS's modal closing logic is tied to a click...

GJS Helper

This is indeed a valid bug report. YouTube has updated its embedding requirements, and without the referrerpolicy="strict-origin-when-cross-origin" attribute on the iframe, videos may fail to play, displaying an error or requiring users to...

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...

padcom

It turns out the second parameter is not always the component but the sender of the event which means that sometimes it is the collection of components which obviously doesn't have the closestType() method. Thanks @artf for explaining it t...

GJS Helper

It appears there might be a slight misunderstanding regarding the usage of component.closestType(). After reviewing your provided reproduction steps and code, component.closestType is indeed a function on the component object passed to the...

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...

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.