GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chromw Reproducible demo link https://codesandbox.io/p/sandbox/hrdwnl Describe the bug What is the expected behavior? When trying to add bullet points by default it should have indentation, and when clicking tab it should...
GJS Helper
The issue you're experiencing with list/bullet points not indenting automatically in the GrapesJS ProseMirror RTE is a common styling problem, not a functional bug with ProseMirror's core list handling. The grapesjs-plugin-rte-prosemirror...
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? Edge 144.0.3719.92 Reproducible demo link https://jsfiddle.net/L61f0qtz/ Describe the bug How to reproduce the bug? Open GrapesJS editor in Microsoft Edge. Add a keymap for saving using either Ctrl+S or Ctrl+Shift+S with {...
GJS Helper
The issue you're experiencing with preventDefault() not working for Ctrl+S and Ctrl+Shift+S in Microsoft Edge when the GrapesJS canvas is focused is a common challenge related to how browsers handle keyboard events within iframes and syste...
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...
@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? 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...
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.
https://github.com/GrapesJS/grapesjs/blob/f59e981f76ff378f59c06cf706af88e502db098e/packages/core/src/utils/ColorPicker.ts#L2407C5-L2415C6 I traced back to these lines and seems like when converting HEXA to RGBA theese lines mess up results. Is there particular reason to intentionally support legacy ARGB?
artf
Thanks for the report. This should have been fixed here https://github.com/GrapesJS/grapesjs/pull/6672
yvoroniak-infusemedia
for ex: #ff000077 (transparent red) is being converted to #000077 (shade of blue). I tried monkey patch it but seems like internaly grapes js uses its own implementation not the one bound to window. (unfortunately for me) Would be nice to...
GJS Helper
The issue you've identified regarding the GrapesJS ColorPicker struggling with proper color conversions, specifically from HEXA to RGBA, and your observation about potential legacy ARGB support, points to a common misunderstanding of hexad...