GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.169 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? Drag a custom code component into the page. The modal should open automatically, else double click the...
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...
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...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Brave Reproducible demo link na Describe the bug How to reproduce the bug? Try adding a YouTube video to a landing page and find out. What is the expected behavior? YouTube video renders and is playable What is the current...
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...
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? any Reproducible demo link https://github.com/padcom/grapesjs-closestType-missing Describe the bug This bug was introduced in here. Before this change everything was working as expected. I presume the reset event is respon...
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...
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? Start from a fresh editor instance with an empty canvas From the Blocks panel, drag a "1 Column" block into the canvas...
lexoyo
I guess it is the same as this bug too?
pierodetomi
I don’t think it’s the same issue. In the one you linked, items are disappearing, while in my case the Layer Manager ends up in a state where you can’t move a layer anymore. They might be related at a higher level as “Sorter-related proble...
GJS Helper
This is a known issue in GrapesJS related to how the internal Sorter instances (used for drag-and-drop in both the Layer Manager and the Canvas) maintain their state after complex, cross-level component reordering operations. The errors yo...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Edge (Version 143.0.3650.46), Chrome (Version 143.0.7499.41) Reproducible demo link https://grapesjs.com/demo Describe the bug Test Environment: OS: Windows 11 version 25H2 (OS Build 26220.7271) Browser: Edge (Version 143....
msftedad
Hi Team, Any update on this issue?
GJS Helper
This is a valid accessibility concern. The GrapesJS editor's canvas is rendered within an <iframe> element. For screen readers to properly identify and announce the purpose of this iframe, it needs an accessible name, typically provided by...
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.