GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Safari 18.5 on Mac Reproducible demo link https://codepen.io/jmulik/pen/LEpdjZq Describe the bug How to reproduce the bug? View https://codepen.io/jmulik/pen/LEpdjZq in Chrome - Able to drag and drop blocks. View same in S...
them7d
yes, it doesn't work because the code is not fully compatible with safari browser to fix this problem you need to use grapes in nextjs like this page https://grapesjs.com/demo.html
GJS Helper
The issue you're experiencing with drag and drop not working in Safari since GrapesJS v0.22.1 is a known behavior related to changes in the framework's storage management. Root Cause GrapesJS v0.22.0 introduced a significant update to its...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://codepen.io/Harshsne/pen/zxvREjB Describe the bug How to reproduce the bug? Drag and drop the text component What is the expected behavior? It should not be selected /dragged in layerma...
artf
You can hide the component from layers with layerable: false property or create your own custom layer manager UI with all the UI logic you need.
GJS Helper
The issue you're experiencing where locked components can still be selected, dragged, and deleted in the GrapesJS Layer Manager is a common point of confusion. The locked property on a GrapesJS component primarily controls interactions on...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? google chrome v139.0.7258.128 Reproducible demo link https://codesandbox.io/p/sandbox/relaxed-payne-vt3pgc Describe the bug How to reproduce the bug? add some elements to the canvas try to find elements in layer manager an...
GJS Helper
Thank you for reporting this issue and providing a clear reproducible demo. The problem you're encountering with drag-and-drop in the Layer Manager after attempting to change its root is due to an incorrect usage of the layerManager.root c...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Firefox Developer 142.0b9, Chrome 138.0.7204.184 Reproducible demo link https://jsfiddle.net/artur_arseniev/ta19s6go/ Describe the bug How to reproduce the bug? Make the "Article" component a symbol Add a text component to...
GJS Helper
The issue you've described, where adding a text component to an original symbol instance leads to cursor resets, flickering, and continuous component:add events, is a known interaction conflict between GrapesJS's symbol update mechanism an...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Edge Version 135.0.2535.51 (Official build) (64-bit), Chrome Version 135.0.6422.112 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo Describe the bug Test Environment: OS: Windows 11[Version 24H2(...
artf
Hey @msftedad the website repo is here, feel free to submit a PR with the fix (file/GrapesEditor.tsx)). I'm closing the issue as it's not related to the core.
GJS Helper
This is a valid and important accessibility bug report for the GrapesJS demo page. The issue stems from the <img> tag for the GrapesJS logo having an empty alt attribute, which incorrectly signals to screen readers that the image is purely...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Edge: Version 135.0.2535.51 (Official build) (64-bit), Chrome: Version 135.0.6422.112 (Official Build) (64-bit) Reproducible demo link https://app.grapesjs.com/studio?utmsource=grapesjs&utmmedium=mainTopNav Describe the bu...
msftedad
Hi Team, Any update on this issue?
GJS Helper
The issue you've reported highlights a common accessibility challenge in web builders that rely heavily on drag-and-drop interactions. GrapesJS, by default, implements its block and component manipulation primarily through mouse/touch-base...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrom v140.0.7307.0 (canary) Reproducible demo link https://jsfiddle.net/y3gr69s4/ Describe the bug How to reproduce the bug? Create editor instance with parser.optionsHtml.keepEmptyTextNodes option set true. Load HTML cod...
GJS Helper
You've accurately identified a discrepancy in how the keepEmptyTextNodes option is handled in GrapesJS, leading to newlines being stripped from your HTML output. This is indeed a bug related to the parser's configuration and its TypeScript...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 138.0.7204.101 Reproducible demo link https://jsfiddle.net/u3L89ejh/1/ Describe the bug How to reproduce the bug? Resize the image Drag it somewhere else on the canvas Click one of those little blue resizer squares...
artf
@jsxOverdose pushed a fix to this new release: https://github.com/GrapesJS/grapesjs/releases/tag/v0.22.11
jsxOverdose
@artf In the new version, there's another bug: when you click one of the resize handles on the Y-axis, it makes the image significantly larger. Here's the demo: https://jsfiddle.net/du81zL6r/
GJS Helper
The issue you're experiencing with elements jumping to an incorrect position after being moved and then interacting with the resizer is a known behavior related to how GrapesJS handles CSS top and left properties, particularly when positio...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Version 138.0.7204.50 (Official Build) (arm64) Reproducible demo link https://jsfiddle.net/artur_arseniev/L24hkgm5/ Describe the bug How to reproduce the bug? add layers manager and use "grapesjs": "0.22.8" or "0.22.9" dep...
GJS Helper
You've accurately identified a regression in GrapesJS versions 0.22.8 and 0.22.9 where the Layer Manager's visibility toggle from 'invisible' to 'visible' was not functioning correctly. The 'visible' to 'invisible' toggle worked as expecte...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://codepen.io/Harshsne/pen/YPXdgmj Describe the bug How to reproduce the bug? upload an image change it to mobile view resize the image What is the expected behavior? When manually changi...
mosh-tudor
@yashvi2026 That's because of your custom CSS code. Remove this part: from editor.BlockManager.add('image', {
artf
I confirm the component resizer doesn't account for !important right now, but I'd follow, more or less, what @mosh-tudor suggested. You don't need to remove the entire styles, as my guess is what you need, but I don't see the point of havi...
yashvi2026
I need to use !important in my style. I've noticed that in other components, when !important is included in the default styles, the styles added through the style manager also include !important to ensure they override the default. So, whe...