GrapesJS Issues

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

545 issues found

๐Ÿ” typescript
#6324Nov 22, 2024by badiuciprian4 answers
2 reactions

Sorter.setDragHelper is not a function on block drag

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? 131.0.6778.86Reproducible demo link https://jsfiddle.net/badiuciprian/qe28obhr/1/Describe the bug How to reproduce the bug?try dragging any block to the canvas What is the expected behavior? The component is rendered to the...

mohamedsalem401

I managed to reproduce it. It's only happening on nativeDnD: false. Probably this makes the block view use the API of the old sorter. I will try to push a fix for this.

artf

@mohamedsalem401 can you check this one, please?

badiuciprian

Thanks for taking care of this. I will watch for the update.

#6318Nov 20, 2024by tonypapousek4 answers
3 reactions

Unable to use transparent fill in Block media svg

GrapesJS version[X] I confirm to use the latest version of [email protected] when this issue was filedWhat browser are you using? Firefox 132, Chrome 131Reproducible demo link https://jsfiddle.net/x54f9v68/1/Describe the bug How to reproduce the bug?Add a custom block, with the media property set to an SVG with...

samex

I believe it depends on the specific SVG being used. If you check the other SVG icons, you'll notice they don't have a fill attribute (inline) on the main <svg> tag but rather on the child <path> tags. By setting the fill="none" attribute...

tonypapousek

@samex Specifying fill="none" did the trick, thanks! That'll deffo help get my custom stuff working more predictably. Past that, I think the main pain point would be trying to use third-party SVGs (e.g. "react-icons") or wysiwyg output tha...

artf

Yeah I'd close this one as it's not strictly related to the core itself but thanks for point this out

#6308Nov 13, 2024by maxming23333 answers
0 reactions

React Custom UI `Modal` Unable to display `Code`

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx Describe the bug How to reproduce the bug?open https://grapesjs-react-custom-ui.stackblitz.io/click this button...

danstarns

Hi @maxming2333, try clicking anywhere inside the highlighted area in the text box, for me it loads the code... https://github.com/user-attachments/assets/89f61dc6-466a-476a-b437-d0f8ae51c7ef

maxming2333

Hi @maxming2333, try clicking anywhere inside the highlighted area in the text box, for me it loads the code... Screen.Recording.2024-11-19.at.23.21.03.mov Yes, it can indeed be displayed after clicking on the pop-up window area, but it sh...

GJS Helper

The issue you're encountering stems from how GrapesJS's CodeViewer (which internally uses CodeMirror) interacts with React's rendering lifecycle, especially when embedded within a custom modal. React components manage their own DOM, and ex...

#6307Nov 12, 2024by maxming23331 answer
0 reactions

MJML Component `tagUpdated` will make it impossible to `hover`

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 130.0.6723.117 Reproducible demo link https://grapesjs.com/demo-mjml Describe the bug How to reproduce the bug?Select a component at random, such as the second mj-section on the demo pageHover this component in the editor...

GJS Helper

The issue you're encountering where calling tagUpdated() on an MJML component breaks its hover functionality and throws an error is due to a mismatch in how tagUpdated() is designed to work versus the specific rendering lifecycle of MJML c...

#6271Oct 25, 2024by padcom4 answers
1 reactions

Drag and drop of components doesn't work on latest Firefox

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0 (64-bit) on Linux and Mac Reproducible demo link https://grapesjs.com/demo Describe the bug How to reproduce the bug?Start dragging the "Hover me" buttonTry to put it above the "All text blocks could be edite...

padcom

You guys are awesome! And not a moment too soon :) I have a presentation Today in the afternoon and now I'll be able to show it working on Firefox too!

padcom

I've tracked down the breaking change in Firefox to version 109.0. It's the first one that has the problem. Version 108.0.2 works fine. Hope that helps.

padcom

I have also tested 133.0a1 nightly from 2024-10-24-21-16-15-mozilla-central and the problem is also there.

#6263Oct 24, 2024by yashvi20264 answers
1 reactions

Duplicated links are added using rte

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://codepen.io/Harshsne/pen/xxoOyXODescribe the bug How to reproduce the bug?add link to a word using rte, link component is added Now type something after the link component without space an...

sirbeagle

Alight - the only bad part is we may never know what the fix ended up being. @artf - I think we can close out this issue.

sirbeagle

So I've been playing around with this quite a bit and I can reproduce the error on the Codepen that @yashvi2026 provided. My steps to reproduce (most of the time) are very similar: Type two words with numerous spaces in between in a text b...

yashvi2026

Yes.After upgrading to latest version ,this issue doesnt occur.

#6260Oct 24, 2024by hr12012 answers
0 reactions

An error when I use component:clone in a component

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Microsoft Edge 130.0.2849.46Reproducible demo link https://jsfiddle.net/uwybfd98/Describe the bug How to reproduce the bug?select the carousel componentclick the space in the upper right or lower left corner of the image and...

artf

@hr1201 onRender could be triggered many times, you should never attach listeners there if you don't clean up the properly. Your logic is also purely model related so it shouldn't even be in the view, just move your code in the model.init...

GJS Helper

The issue you're experiencing with recursive component:clone events and editor jams stems from how event listeners are attached within your custom component's view.onRender method. Let's break down the root cause and provide a robust solut...

#6250Oct 23, 2024by maxming23332 answers
0 reactions

Clone page prompt 'Converting circular structure to JSON'

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 129.0.6668.101Reproducible demo link https://grapesjs.com/demoDescribe the bug How to reproduce the bug? open https://grapesjs.com/demo run this script in DevTools: What is the expected behavior? Successfully copied w...

maxming2333

In addition to the above method, is there any other way to copy the page?

GJS Helper

The TypeError: Converting circular structure to JSON you're encountering when cloning a GrapesJS page's main component and adding it to a new page is a common issue related to how GrapesJS components are serialized for storage. This happen...

#6248Oct 22, 2024by Frubl2 answers
1 reactions

ShowOffsets bug when iframe body has zoom

GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfiddle.net/a2hbxg0y/1/ Describe the bug How to reproduce the bug?Open dev tools and write element style for iframe body - zoom: n; What is the current behavior? When hovering over an...

artf

You shouldn't edit the zoom of the iframe, use the native API

GJS Helper

You've identified a specific bug in GrapesJS related to the showOffsets feature when the iframe body has a CSS zoom property applied. This is a valid observation, and I can confirm the behavior you described. Issue Confirmation When zoom i...

#6211Oct 11, 2024by jlafosse4 answers
0 reactions

Too much recursion

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox 131.0.2 Reproducible demo link https://grapesjs.com/demo-newsletter-editor.html Describe the bug How to reproduce the bug?Go to the grapesjs demo, then import the following html:Open your browser console.Rapidly cl...

artf

Hey @jlafosse thanks for the report. I'd not expect that issue with the latest version: <img width="123" alt="Screenshot 2024-10-21 at 19 00 04" src="https://github.com/user-attachments/assets/ff074a31-cd19-4547-bb27-596c92e16d64"> Can you...

jlafosse

Indeed, that appears to have fixed the issue! Thank you!

artf

๐Ÿ™Œ closing then, thanks ๐Ÿ™‡โ€โ™‚๏ธ

Browse all topics