GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

466 issues found

πŸ” components
#5274Aug 3, 2023by wunksert4 answers
1 reactions

Parser bug inside Remix

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link https://github.com/wunksert/remix-grapes-error/tree/main Describe the bug How to reproduce the bug?Clone repo abovenpm inpm run dev you'll see that the grapes iframe and boilerplate is re...

artf

@wunksert it seems like the editor initializes on itself multiple times, are you properly clearing the editor instance with destroy (eg. in your useEffect)?

wunksert

It might turn out that a fix for this is more simply solved by me editing structure or naming conventions in my project. Happy to do that if it's faster than changing something in GrapesJS core.

artf

yeah definitely not related to the core

#5268Aug 2, 2023by SLain1233 answers
0 reactions

Autoplay for youtube or vimeo doesn't work

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v115 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Drag and drop video component to canvas.Select youtube or vimeo and add video id.Activate autoplay checkbox.Publis...

SLain123

I can fix the bug myself, but I can't push my branch with fix to repo. It seems like I don't have permission for pushing or create new branch.

artf

@SLain123 you have to create a PR from your fork https://stackoverflow.com/questions/38918942/pull-request-from-a-different-repository

GJS Helper

The issue you're experiencing with YouTube and Vimeo autoplay not working in GrapesJS is not a bug in GrapesJS itself, but rather a consequence of modern browser autoplay policies. Browsers like Chrome, Firefox, and Safari have implemented...

#5263Jul 28, 2023by pittleCheung4 answers
3 reactions

Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo link null Describe the bug How to reproduce the bug? <img width="1666" alt="image" src="https://github.com/GrapesJS/grapesjs/assets/114127651/c37e339a-e14f-486b-85fb-34c170b855dd"...

pittleCheung

Yes , you are right, I copying all matched styles ,so I can paste anywhere , even cross-browser paste, I find this to be extremely useful. When I delete a component, it does not remove the corresponding styles. This is a major issue, And w...

pittleCheung

itβ€˜s still a problem

artf

I don't see how this is a core bug. You're using your own copy/paste logic and it doesn't even seem correct, you should take care of the unique ids of each component/rule.After deleting these child components, their styles still remain. If...

#5245Jul 16, 2023by riteshdalal4 answers
0 reactions

Contents of component with editable:false are still editable

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 114.0.5735.198 Reproducible demo link https://jsfiddle.net/riteshdalal/obnx7sg3/22/ Describe the bug How to reproduce the bug?Create a component with editable:false in the modelDrop the component on the canvas What...

artf

The editable property has no meaning by default and it's only used internally by other extended components like Text or Image

riteshdalal

@artf how do we create a component such that gjs does not parse the children.

riteshdalal

The editable property has no meaning by default and it's only used internally by other extended components like Text or Image This used to work on older versions of GJS. Just stopped working in 0.21.3

#5241Jul 14, 2023by hanzuken2 answers
0 reactions

Element absolute position is different from Cursor position when moving in the zoomed canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome version 114.0.5735.199 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Enable the absolute drag mode editor.editor.set('dmode', 'absolute')Se...

artf

Issues related to Absolute mode are tracked here https://github.com/GrapesJS/grapesjs/issues/3770

GJS Helper

You've accurately identified a common issue in GrapesJS related to absolute positioning and canvas zoom. This is indeed a bug where the drag operation's delta calculation doesn't account for the canvas's current zoom level, leading to a di...

#5236Jul 11, 2023by joukhar2 answers
0 reactions

Textnode with content "null" is rendered as "null" not whitespace

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome Version 114.0.5735.199 (Official Build) (64-bit)Reproducible demo link N/ADescribe the bug I'm sorry for opening the issue again, but your commits doesn't work i installed dev version using npm install GrapesJS/grapes...

artf

@joukhar npm install GrapesJS/grapesjs#dev is not enough, I didn't create the build in the dev branch yet, so if you want the fix locally you have to build it yourself first. Anyway, there is no need to create new issue even if the related...

GJS Helper

Thank you for reporting this issue and providing detailed insights into the relevant code sections. You've correctly identified the root cause of the problem. Root Cause Analysis: The issue stems from how JavaScript's textContent property...

#5232Jul 11, 2023by bgrand-ch4 answers
5 reactions

Worker - Headless "document is not defined"

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 114.0.5735.133 Reproducible demo link Impossible to add a worker to reproduce. Describe the bug How to reproduce the bug?Add a web worker.Initialize GrapesJS with "headless" option inside the worker.Add a plugin with "edit...

artf

Hi @bgrand-ch unfortunately everything that involves the parser (HTML/CSS) requires the DOM related API to be available. For the CSS maybe you can try to use parser-postcss plugin, I'd expect it to work in the worker environment

bgrand-ch

Hi @artf, thanks a lot for your quick answer πŸ˜„ I will try this week.

bgrand-ch

@artf The Post CSS parser plugin works perfectly in a web worker! Thanks for your help.

#5229Jul 10, 2023by joukhar4 answers
1 reactions

Textnode with content "null" is rendered as "null" not whitespace

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome Version 114.0.5735.199 (Official Build) (64-bit)Reproducible demo link N/ADescribe the bug How to reproduce the bug?Drop this component <div class=\"flex items-center rounded shadow-md overflow-hidden max-w-xl relativ...

artf

Probably in the first week of August

artf

Hi @joukhar is it happening with the latest version? I'm able to see nulls in the export code if I use your exact JSON example (that should be fixable), but I'm unable to generate those textnodes with nulls by using your HTML example, can...

joukhar

thanks for the replay, if you need demo so please give me some time until i make one , i will comment again when im finished it the problem happens only when u store it and load it, but when u drop the component for the first time nothing...

#5211Jul 2, 2023by Zafermushtaha973 answers
1 reactions

Bug

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? v9.2 Reproducible demo link https://jsfiddle.net/szLp8h4n Describe the bug I am using it in vue3 project when I want to add new components , page is hanged and not response this is my code : Code of Conduct [X] I agree to...

gxanshu

Hi there! 😊 I don't believe this is a bug with GrapesJS. I checked your reproduction link and tried adding a component to the canvas, and it worked perfectly fine for me without any issues. πŸ‘

artf

You have to bypass Vue's Proxy observers https://github.com/GrapesJS/grapesjs/issues/4497#issuecomment-1213078160

GJS Helper

The issue you're encountering, where the page hangs when programmatically adding new components, stems from an incorrect approach to component creation and attachment within GrapesJS. You're essentially trying to add a component that is al...

#5207Jun 28, 2023by gxanshu3 answers
1 reactions

Duplicated CSS while multi page creation

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome latest Reproducible demo link https://codesandbox.io/s/withered-bush-wv29dx?file=/index.js Describe the bug How to reproduce the bug?... create multi pages in grapesjs.init()... check the styles of each page What is...

artf

This is intentional and I'm not planning to change this behaviour as you can easily create specific CSS selectors if you need different styles per page. The big benefit of this approach is to allow reusing selectors across pages.

hasan-aa

I think I'm experiencing an issue with this approach. I'm saving the pages to server like this: and loading them like this in a loop: The css rules targeting ids are working fine, but the rules with a class are duplicating even when loaded...

GJS Helper

The issue you're encountering with duplicated CSS across multiple pages in GrapesJS is a common point of confusion related to how GrapesJS manages styles globally within an editor instance. By default, GrapesJS's CssComposer (the component...

Browse all topics