GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 117.0 Reproducible demo link localhost Describe the bug grapesjs": "^0.21.7", editor.loadProjectData({ "assets": [], "styles": [], "pages": [{ "component": "<div>TEST TEST TEST TEST</div>" }] }) editor freeze Code o...
antoinematyja
Hi, I encountered the same issue using Vue 3 and using a vue ref to store the editor. Not sure if this is a good idea though. A code reproduction would be something like: Fix: don't use a ref ๐
artf
Are you able to provide a reproducible demo? Tried your example and I don't see any freeze....
boardmain
tried with the latest version 21.7 i try to put it online, but i just pasted html from a custom command, the source is pasted, but after it, the editor freeze ( i need to close the page ) for example ~~~ btnImp.onclick = () => { editor.run...
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.
GJS Helper
The issue you've described is a known behavior in GrapesJS related to how component IDs are generated and optimized during HTML serialization. When a custom component has a script() function but no explicit styles applied to it, GrapesJS m...
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
GJS Helper
The issue you've encountered is a known behavior in GrapesJS when initializing multiple pages with components that share the same initial IDs and corresponding inline styles. GrapesJS correctly identifies and renames component IDs to ensur...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 116.0.5845.187Reproducible demo link https://jsfiddle.net/yLcvbwjd/Describe the bug How to reproduce the bug?Add component:styleUpdate eventUpdate a style of a component with addStyle or setStyle What is the expected...
bgrand-ch
@artf โค๏ธ
GJS Helper
The component:styleUpdate event in GrapesJS is an editor-level event that is primarily triggered by the GrapesJS Style Manager or other internal editor mechanisms when a component's style is modified through the UI. When you directly call...
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 :
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v116.0.5845.97 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Select any component from the canvasOpen the Layer Manager PanelSelect the first "Section" componentUse...
Sw33tgt
I downgraded to v0.21.4 and I don't have the issue anymore, so this is only occurring on the latest version available.
padcom
Having the same issue in the simplest examples. Downgrading do .4 makes it go away. Regression?
artf
Yeah fixed already here. I'll push a new release for the end of this week.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Windows, Chrome, React Reproducible demo link / Describe the bug When attempting to add a custom atRules like @container or @font-face, the CSS consistently compiles to @media instead. I have tried various methods, includi...
GJS Helper
The issue you're encountering where custom AtRules like @container or @font-face are compiled to @media when using editor.Css.addRules is a known limitation in GrapesJS's current CssComposer. Root Cause GrapesJS's CssComposer (the module r...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64) Reproducible demo link none Describe the bug I've defined my own component types with type specific drag-and-drop rules: but the configured functions are...
rozek
even with draggable and droppable set to true, I cannot drag one element into another
rozek
A first workaround which helps dropping components into other components:remove dragMode:'absolute', from grapesjs.init({...})instead, add dmode:'absolute', to model.defaults of every component type you want to be draggable (and, perhaps,...
artf
In absolute mode, there is no concept of moving components inside/outside of other components. A component in absolute mode is only updated in style position, it's not moved in the DOM, that's why draggable/droppable does not make sense to...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 116 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Open the layer manager and try to move the componentIt will disable the component and show the errors in the consol...
GJS Helper
Thank you for reporting this issue. I can confirm that this is a reproducible bug in the latest version of GrapesJS, including on the official demo page (https://grapesjs.com/demo.html). This bug prevents users from reordering components u...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64) Reproducible demo link none Describe the bug I have a component type with a script When previewing a project using a component of this type, GrapesJS cre...
rozek
that's interesting: defining a separate function and defining the component type as described in the docs works as designed. But it still sounds strange, that an inline function produces a syntax error in the exported HTML...
artf
@rozek good catch, will fix for the next release
GJS Helper
The Uncaught SyntaxError: Unexpected token '{' you're encountering stems from how GrapesJS processes and embeds component scripts defined using the ES6 method shorthand syntax. This issue is a known behavior when the script property is def...