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? 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.
GJS Helper
The issue you're encountering, where deleting a component does not remove its corresponding styles, leading to redundant CSS, is a common challenge in web builders like GrapesJS. This behavior is by design in GrapesJS's CssComposer for sev...
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!
GJS Helper
The issue you've described with dragMode: 'absolute' causing components to appear offset is indeed a bug stemming from a fundamental HTML violation: duplicate id attributes within the DOM. Your analysis and screenshots accurately pinpoint...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome V116.0.5845.96 Reproducible demo link https://jsfiddle.net/Adrien_Friboulet/npdkshaf/8/ Describe the bug https://github.com/GrapesJS/grapesjs/assets/128728949/e85b65c4-53ad-43d0-9f5f-74dc0a181dd0 How to reproduce th...
artf
Thanks @AFriboulet-ii I will fix it for the next release.
GJS Helper
The issue you've described is a known behavior in GrapesJS where the undo manager correctly reverts the component's model attributes (including its classes collection), but the ComponentView responsible for rendering the component on the c...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 115.0.5790.171 (Official Build) (64-bit)Reproducible demo link https://codesandbox.io/s/1r0w2pk1vl?file=/index.htmlDescribe the bug How to reproduce the bug?... Add this form type and form block What is the expected...
artf
The getJs returns the JS of your component model (the one you would place inside model.defaults.script), not the component view. Please read carefully Components & JS
GJS Helper
The issue you're encountering, where editor.getJs({ component }) returns an empty string despite having a submit event handler defined in your custom form component's view.events, is expected behavior and not a bug in GrapesJS. Root Cause...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Arc 1.1.1 Reproducible demo link https://jsfiddle.net/3bprucnv/3/ Describe the bug How to reproduce the bug? Add custom css rule for .gjs-selected eg. change the border color to red. .gjs-selected { outline-color: red; } W...
artf
Please refer to https://github.com/GrapesJS/grapesjs/issues/3515
GJS Helper
The issue you're encountering with the .gjs-selected class not accepting your CSS override is due to GrapesJS's default styling for this class using the !important rule. GrapesJS applies outline: 3px solid #3b97e3 !important; to .gjs-selec...
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.
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 115.0Reproducible demo link https://jsfiddle.net/varyqjo7/Describe the bug How to reproduce the bug?Create a new Angular project (version 16.1.3)Install grapesjs latest version (npm i grapesjs)Add css and js in angula...
GJS Helper
The issue you're encountering, "Object literal may only specify known properties, and 'el' does not exist in type 'PanelProps'", is a TypeScript compilation error. It indicates that the el property is not a valid or recognized property wit...
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...
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? editor?.Css.addRules(targetCss); What is the expected behavior? editor?.Css.addRules(targetCss); it add style at end <img widt...
artf
This is not a bug, Css.addRules doesn't have any option argument. You can open a discussion in regard to this topic and we can see if it makes sense to introduce it
pittleCheung
ok, I get it,I need to add some styles in front of an array, not at the end. such as arr.unshift(css) How can I do that? I might need a little help from you
GJS Helper
The behavior you're observing with editor.Css.addRules() is actually the expected and intended functionality of the GrapesJS CSS API. By default, when you use editor.Css.addRules(targetCss);, the new CSS rules are appended to the end of th...