GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

569 issues found

๐Ÿ” canvas
#4192March 11, 2022by drashtibpatel2 answers
0 reactions

Drag boundary issue with dragMode: absolute/translate

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome, firefox Reproducible demo link https://jsfiddle.net/drashti/9xk5ph8j/1/ Describe the bug I am using the Grape JS builder for my client to setup the builder and templates. For that I want the setDragMode "absolute o...

artf

No, at the moment is not possible. The dragMode is not real public and documented feature so I'm collecting all the issues and features to support here: https://github.com/artf/grapesjs/issues/3770#issuecomment-944915841

ClaudeCode

Thanks for reporting this, @drashtibpatel. The issue with Drag boundary issue with dragMode: absolute/translate appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and D...

#4188March 9, 2022by levinhtin1 answer
0 reactions

SVG <linearGradient> tag become <lineargradient> in canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Microsoft Edge Version 99.0.1150.30 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?I have created a custom block with SVG, ex:When I drop component into canvas, linearGradie...

ClaudeCode

Thanks for reporting this, @levinhtin. Great question about SVG <linearGradient> tag become <lineargradient> in canvas. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation...

#4157February 24, 2022by Adham3803 answers
0 reactions

Resizing canvas makes componenents end up with wrong positions once exported with dmode 'absolute'

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Microsoft edge 98.0.1108.56 Reproducible demo link https://jsfiddle.net/473b2tah/1/ Describe the bug The canvas resize is cool but does not take into account that one might be working with px offsets because of dmode which...

Adham380

I have sort of found a workaround... Set the .gjs-frame-wrapper to the desired width in CSS and transform: translate (- x px, 0px) for the iframe in CSS. The Canvas is not the correct width then (slightly smaller) but everything seems to w...

artf

https://github.com/artf/grapesjs/issues/3770#issuecomment-1059784514

ClaudeCode

Thanks for reporting this, @Adham380. The issue with Resizing canvas makes componenents end up with wrong positions once exported with dmode 'absolute' appears to be a race condition or state management timing problem. This typically happe...

#4138February 12, 2022by yadavAtIrisdame4 answers
0 reactions

Unexpected behavior in style manager

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 1.35.101 Chromium: 98.0.4758.87 (Official Build) (64-bit) Reproducible demo link https://codesandbox.io/s/strange-sun-qgdcq?file=/index.jsDescribe the bug How to reproduce the bug?drop the component in canvasselect t...

artf

Thanks for the report @yadavAtIrisdame but I'm not able to reproduce it from your demo or the official one. Can you describe the exact steps?

yadavAtIrisdame

@artf I'm unable to reproduce this bug. in most cases, The Style Manager works as expected. but, all of a sudden, they start acting like(shown in image). Particularly margin and padding properties.

artf

Sorry but unfortunately without the proper reproducible demo, I can't do much. I'll be happy to fix it if anybody is able to provide the reproducible steps.

#4116February 1, 2022by saudAtIrisdame4 answers
0 reactions

Flex Property not working in style manager

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.34.81 Chromium: 97.0.4692.99 (Official Build) (64-bit) Reproducible demo link https://codesandbox.io/s/strange-sun-qgdcq?file=/index.js Describe the bug How to reproduce the bug?create custom type componentdrop t...

Vac1911

I diagnosed the issue after finding the same problem independently. Looking at StyleManager.select() https://github.com/artf/grapesjs/blob/75cd582a8d1a91096276bc4dccc7475a269ad45c/src/style_manager/index.js#L339-L395 On line 369, every pro...

saudAtIrisdame

@Vac1911 @artf I got it, but what's the solution, how can I fix this problem? is this grapejs issue or mine?

Vac1911

@saudAtIrisdame It seems to be a grapejs issue. I fixed it for myself changing the source code, reordering the select method to check visibility last. Here is the dist file after running build:js https://gist.github.com/Vac1911/4c89f2a4880...

#4099January 25, 2022by jloguercio2 answers
0 reactions

"Using draggableComponents: false" still drag (clone?) some elements if i try to edit text

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v96Reproducible demo link https://jsfiddle.net/809enL2w/1/Describe the bug I use domComponents: { draggableComponents: false }, to avoid to drag components, only when you drag with the arrow in toolbar, but if do a fa...

artf

Yeah seems like the native HTML5 D&D still works with text selection, I'll try to fix it.

ClaudeCode

Thanks for reporting this, @jloguercio. The issue with "Using draggableComponents: false" still drag (clone?) some elements if i try to edit text appears to be a race condition or state management timing problem. This typically happens whe...

#4097January 24, 2022by Joshmamroud3 answers
1 reactions

mousePosFetcher in resizer config & change:style listener not working

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave V1.34.81 Reproducible demo link https://jsfiddle.net/joshmamroud/vkrcxuzb/41/ Describe the bug How to reproduce the bug?Add a Grid block to the canvasResize a columnNotice the console logs aren't displaying for mouse...

artf

Hi @Joshmamroud CBs should be called when mousePosFetcher is called That is not happening because resizable options are not directly passed to the Resizer, but through the resize command. You can see mousePosFetcher there is handled by the...

Joshmamroud

Thanks @artf! That makes sense.

ClaudeCode

Thanks for reporting this, @Joshmamroud. Great question about mousePosFetcher in resizer config & change:style listener not working. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#4082January 20, 2022by jloguercio3 answers
0 reactions

Remove some initial styles from frame canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link No demo Describe the bug When i load some template, the editor add some initial styles like the image below, how can i set or remove some or that styles? for example : i need to remove the...

artf

Check the main editor config options (eg. baseCss) https://github.com/artf/grapesjs/blob/dev/src/editor/config/config.js And please, don't use issue bugs for questions, open a discussion in that case.

jloguercio

Thank you very much

ClaudeCode

Thanks for reporting this, @jloguercio. The issue with Remove some initial styles from frame canvas appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificat...

#4029December 22, 2021by jloguercio2 answers
0 reactions

Drag Blocks to Canvas performance when you have 1000+ custom blocks

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v96Reproducible demo link No demoDescribe the bug How to reproduce the bug?Add to Block manager more than 1000 blocks, in my case 7,864 font awesome icons.Try to drag any block from block panel Explanation I added eve...

artf

For your case, I'd suggest creating a custom block manager where you can adapt the UI for your blocks as you wish (eg. search, DOM virtualization, etc.)

ClaudeCode

Thanks for reporting this, @jloguercio. Great question about Drag Blocks to Canvas performance when you have 1000+ custom blocks. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documenta...

#4020December 17, 2021by cunj122 answers
0 reactions

SVG text textcontent not updated when calling getHtml on editor

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link https://jsfiddle.net/1hrLxdba/30/ Describe the bug How to reproduce the bug?Drag a svg text block to the canvas.Change it's content via the svg-text traitClick on print html What is the ex...

artf

You have to update the Component content, not the DOM

ClaudeCode

Thanks for reporting this, @cunj12. Great question about SVG text textcontent not updated when calling getHtml on editor. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for...