GrapesJS Issues

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

569 issues found

๐Ÿ” canvas
#4727November 12, 2022by dreamsight1 answer
0 reactions

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 107.0.5304.107 (Official Build) (64-bit) ChromeReproducible demo link NO NEED anyone can reproduceDescribe the bug when saving HTML and CSS the program formats Converts CSS i.e. "@keyframes slide {" TO "@media slide{...

ClaudeCode

Thanks for reporting this, @dreamsight. The issue with * appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent stat...

#4621September 27, 2022by shelendravashishtha24 answers
1 reactions

No Option found for showing multiple pages on a single canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link NO LINK Describe the bug Hi, I am using grapsjs with react, found it very useful so far but I want to show all the pages created in my application to be previewed on canvas but found no option...

stljeff1

I believe you have to make your own component to show multiple pages and click between them. here is an example that I found in these forums which show how to create your own Page Manager component. https://codepen.io/artf/pen/XWpJQoY

artf

@shelendravashishtha2 use Bug Issues properly please, if you have questions, use Discussions.

dali-97

hello any one can help i need somthing that allow me to create a multiple custem page like grapesjs i need it for my diplom thanks

#4612September 23, 2022by Drew-Daniels2 answers
1 reactions

Cannot Drop MJML Components onto Blank Canvas after version 0.19.4

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 105.0.5195.125 (Official Build) (x86_64) Reproducible demo link https://codesandbox.io/s/grapesjs-grapesjs-mjml-react-bug-w7qtec?file=/src/index.js Describe the bug How to reproduce the bug?Start with a blank canvasTry dra...

artf

Thanks for the report Drew, this seems to be related to the Standards mode of the iframes. At the moment to fix it, I'd suggest switching to the Quirks mode by removing the doctype: I'm closing the issue as it's not really related to the c...

ClaudeCode

Thanks for reporting this, @Drew-Daniels. Great question about Cannot Drop MJML Components onto Blank Canvas after version 0.19.4. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS doc...

#4576September 12, 2022by benryanwilliams4 answers
1 reactions

Clicking 'wrap for style' button affects the inner components of other components inside the same text box

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link https://jsfiddle.net/7cLr0xt2/3/Describe the bug How to reproduce the bug? For some reason I'm unable to reproduce the bug inside the fiddle linked above, since line 34 selectedCo...

artf

RTE relies on the DOM content during the editing so if you remove it deliberately with something like inner components will be removed once the editing is finished.

benryanwilliams

Ok thanks @artf, that makes sense. However, those lines of code, along with are required to render the correct selected state inside the canvas as follows (both upon the component initially being rendered and when the user selects a differ...

benryanwilliams

I need to do some more testing but it looks like I've got around this behaviour by saving the inner components inside the component itself when first creating it / editing it, then using the rte:disable hook as follows: It seems a bit hack...

#4570September 8, 2022by rahul-singh-bv2 answers
1 reactions

TypeError: m.render is not a function

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 105.0.5195.102 (Official Build) (x86_64) Reproducible demo link Describe the bug How to reproduce the bug?Create a new custom code block and add an iframe tag such as `<iframe src="http://localhost:8888/embe...

artf

Thanks for the report @rahul-singh-bv The bug was actually already reported and fixed https://github.com/artf/grapesjs/issues/4480 but unfortunately the fix is not yet released ๐Ÿ˜ž

ClaudeCode

Thanks for reporting this, @rahul-singh-bv. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer...

#4537August 29, 2022by salemkode2 answers
0 reactions

RangeError Maximum call stack size exceeded

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave 1.33.105 Chromium: 96.0.4664.93 Reproducible demo link https://codesandbox.io/s/relaxed-mccarthy-v2e37w Describe the bug How to reproduce the bug?Add type of component have img or svg tagAdd this component to canvas...

artf

Hi @salemkode based on how custom components are handled by having that isComponent, which returns true with no conditions, generates the maximum call stack issue. It keeps creating new components as you have also the components property b...

ClaudeCode

Thanks for reporting this, @salemkode. Great question about RangeError Maximum call stack size exceeded. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mo...

#4529August 24, 2022by FaisalShaikhHA4 answers
6 reactions

When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm64)Video demo link https://d.pr/i/27EgH2Describe the bugWhen we resize an image with a class 'xyz', all the elements on the page with the same class also get resized because the ed...

DevMetwaly

https://grapesjs.com/docs/modules/Components.html#components-cssComponent-first styling By default, when you select a component in the canvas and apply styles on it, changes will be applied on its existent classes. This will result on chan...

FaisalShaikhHA

Thanks, @DevMetwaly it worked, my bad I missed this.

FaisalShaikhHA

Hi @artf, first of all, amazing framework, and thanks for making it open source. As described in the above comment I am facing this weird issue, please let me know if I am doing something wrong or a way to fix this thanks.

#4497August 3, 2022by benryanwilliams4 answers
3 reactions

Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive

GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.79Reproducible demo link https://jsfiddle.net/gvrnw2c3/4/Describe the bug How to reproduce the bug? I'm currently unable to reproduce the bug using jsfiddle, which leads me to believe it's a problem with Ch...

tyuterry

A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle Steps to reproduce the issue:Add a text componentSelect the text component then click the 'Convert to Conditional' button at the bottomHover over the conditional tex...

artf

Thanks guys, I was actually able to reproduce it by wrapping the example inside Vue but I'm not sure exactly why is stuck in the loop here. At first look, it seems to be related to Vue's Proxy observers. By comparing the demo with the prev...

benryanwilliams

Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.

#4489July 30, 2022by contentfree4 answers
0 reactions

Loading initial project data from a designer-mode project results in wrong canvas size

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v103 Reproducible demo link https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js Describe the bug If you view the linked CodeSandbox and find the commented out line providing the projectData to the editor,...

contentfree

I can kinda force it to the correct canvas size by:Not providing projectData in the initial config, Loading the projectData via editor.loadProjectData(...) after initialization and Then running editor.Canvas.getModel().updateDevice(); thou...

artf

Thanks @contentfree I'll try to fix that for the next release

contentfree

Thanks @artf. I'll keep my eye open for the next release (looks like your kanban board is empty now โ€ฆ so should be imminent?)

#4435July 10, 2022by bovealexandre4 answers
0 reactions

pages Manager

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latest versionReproducible demo link none for the momentDescribe the bug How to reproduce the bug?create a Page Manager with functions from Pages APItest the select function (if you have something in your head it will...

bovealexandre

so the add function is fixed there was an error with the data I sent but I still can't understand why Tailwind css doesn't apply despite the fact that it is in the head tags

artf

Are you using config.canvas.styles option? https://github.com/artf/grapesjs/blob/b657428b3efc343513f6c92eb6b418935d2a8ac9/src/canvas/config/config.js#L14-L22 Can you create a reproducible demo of your use case?

bovealexandre

Hi @artf unfortunately I can't create a reproducible demo on CodePen or JSFiddle because there are way too many things on it and I'm using technologies like nextJS but I can give you access to the repository if you need it is a private rep...