GrapesJS Issues

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

644 issues found

πŸ” components
#5584December 27, 2023by vian0132 answers
0 reactions

"storage:end:load" event is not triggered when all components are mounted into the canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v91 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? Recently I have to upgrade grapesjs v0.14.62 to the latest version (0.21.8). In the old code, we used "storage:end...

artf

@vian013 please open bug issues only with a reproducible demo link, by a quick check the event seems to work properly

ClaudeCode

Thanks for reporting this, @vian013. Great question about "storage:end:load" event is not triggered when all components are mounted into the canvas. The recommended approach with Canvas is to use the event-driven API. Start here: Check the...

#5556December 13, 2023by pittleCheung2 answers
0 reactions

Too many classes will cause the webpage to crash

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? editor.addComponents( <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0" role="tabli...

artf

Already reported and fixed https://github.com/GrapesJS/grapesjs/issues/5525

ClaudeCode

Thanks for reporting this, @pittleCheung. Great question about Too many classes will cause the webpage to crash. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

#5484October 26, 2023by pittleCheung2 answers
0 reactions

clone tabs and clone tab is not right now

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo link https://grapesjs.com/demo.html Describe the bug https://github.com/GrapesJS/components-tabs question one <img width="1421" alt="image" src="https://github.com/GrapesJS/grapes...

artf

Please, open bug issues only if related to the core library, not plugins.

ClaudeCode

Thanks for reporting this, @pittleCheung. The issue with clone tabs and clone tab is not right now appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificati...

#5441October 3, 2023by padcom2 answers
0 reactions

No id for elements not having styles but with `script`, which results in script not running for those elements

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome latestReproducible demo link https://github.com/padcom/grapesjs-no-id-for-element-exampleDescribe the bug When creating custom GrapesJS components, if those components have the script() (runtime behavior for component...

artf

The issue is caused by the use of jsInHtml: false and how the internal JS generator is handled. I'll try to fix it for the next release.

ClaudeCode

Thanks for reporting this, @padcom. The issue with No id for elements not having styles but with script, which results in script not running for those elements appears to be a race condition or state management timing problem. This typical...

#5425September 26, 2023by javadsamiee2 answers
2 reactions

When add a similar page just components ids will be changed

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 117 Reproducible demo link https://jsfiddle.net/mirjavad/ctsx7zer/5/ Describe the bug I wanted to create a clone action for a page and noticed this bug. How to reproduce the bug?Create several pages with the same component...

artf

Good catch @javadsamiee will be fixed in the next release

ClaudeCode

Thanks for reporting this, @javadsamiee. Great question about When add a similar page just components ids will be changed. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentat...

#5379September 12, 2023by Sw33tgt4 answers
4 reactions

Class modifications of components are not automatically detected

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome Version 116Reproducible demo link https://jsfiddle.net/h5b0ndvL/1/Describe the bug When a component is re-rendered in the canvas, a new attribute added to the model definition get rendered, but a newly added class doe...

Sw33tgt

For the moment, as a workaround, I added this in a editor.on('component:mount', (component) => {}); function until any feedback is received. It seems to be working well. In a case where a class is removed from the definition, the removed c...

Sw33tgt

Yeah, this is intentional with classes, with your approach you won't be able to remove defined classes from the component, they will keep being added on component init. Which is fine for when a class has been forgotten on a component and w...

Sw33tgt

Something like this in the initClasses() function of Component.ts would add the new classes to the element on render. Let me know what you think :

#5346August 30, 2023by pittleCheung3 answers
0 reactions

Deleting a component without deleting its corresponding style

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? <img width="1665" alt="image" src="https://github.com/GrapesJS/grapesjs/assets/114127651/657cbaf6-7e...

pittleCheung

Extended idea from https://github.com/GrapesJS/grapesjs/issues/1855

artf

Here it's explained how to create components with related styles https://grapesjs.com/docs/modules/Components.html#components-css Only in that case, it would be safe for the editor to delete related styles.

ClaudeCode

Thanks for reporting this, @pittleCheung. Great question about Deleting a component without deleting its corresponding style. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documen...

#5339August 26, 2023by rozek2 answers
0 reactions

dragMode:'absolute' behaves strange

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)Reproducible demo link noneDescribe the bug I want the components in my editor to be moveable by dragging. After some research, I found that is needed to ac...

rozek

sorry - this was a problem on my side which became obvious within the editor only - sorry for bothering!

ClaudeCode

Thanks for reporting this, @rozek. The issue with dragMode:'absolute' behaves strange appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap,...

#5334August 24, 2023by DreamCloudProject4 answers
1 reactions

Selection of custom component type not working in the canvas

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome, Opera, Edge, etc Reproducible demo link https://jsfiddle.net/crszh0jo/6/ Describe the bug I'm trying to make it work the same case as it described here [[QUESTION] Selection of custom components not possible from c...

DreamCloudProject

@artf Yes, you're right. I'm blocking the click propagation, and so the editor doesn't receive the click event, hence can't execute the logic to select the element. I tried setting the click propagation only on the current element by repla...

DreamCloudProject

https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f This example shows how it works in my editor.

yatoogamii

Hi @DreamCloudProject , it seems like your component Msc-header is locked. it's an attribute which allow the component to be clicked from the layers but not from the canva itself Can you share or verify your component definition and check...

#5328August 22, 2023by sdimitrenco2 answers
0 reactions

editable text after remove focus of RTE, returns back previous state of content.

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfiddle.net/sdimitrenco/wao1rh0q/30/ Describe the bug That is my components struct If I change the text in the span tag in the text editor, then remove focus from that word, it return...

artf

You shouldn't have "content" inside your text span, indeed if you replace it with "components": "[email protected]", it will work properly.

ClaudeCode

Thanks for reporting this, @sdimitrenco. The issue with editable text after remove focus of RTE, returns back previous state of content. appears to be a race condition or state management timing problem. This typically happens when compone...