GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome (versions 142-144), Safari (versions 16.3, 26.1), Maybe others too Reproducible demo link https://jsfiddle.net/saeedhbi/tqfe7p04/ Describe the bug How to reproduce the bug? Initialize a GrapeJS editor (v0.22.11 or v...
GJS Helper
The TypeError: Cannot read properties of null (reading 'hasFocus') in the GrapesJS Canvas module is a known issue stemming from a race condition. It occurs when keyboard commands (like Ctrl+Z, Delete) attempt to call editor.Canvas.hasFocus...
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? All browsers (Chrome, Safari, Firefox, Edge) Reproducible demo link https://jsfiddle.net/saeedhbi/tdsLa6qe/ Describe the bug How to reproduce the bug? Create a basic GrapeJS editor (version 0.22.11 or 0.22.14) Add an input...
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...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Logeshwaran-codepen/pen/raLJpYb Describe the bug How to reproduce the bug? Select components that available in canvas. Listen to a lifecycle event (e.g. component:selected)...
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...
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.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? 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? 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...