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 GrapesJS What browser are you using? Firefox 116.0.3 Reproducible demo link https://grapesjs.com/demo-mjml.html Describe the bug How to reproduce the bug?On the canvas scroll to the bottom and select a componentOpen the layersSelect a component that is at the...
GJS Helper
You've accurately identified a bug in GrapesJS where the scrollCanvas functionality fails to scroll the canvas to bring a selected component into view, particularly when selecting components from the Layers panel. This issue is reproducibl...
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, 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...
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.
GJS Helper
The issue you're experiencing, where editable text within a nested span (a text component) inside a link component reverts to its previous state after losing focus, is a known synchronization challenge in GrapesJS when dealing with nested...
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? Chrome v115.0.5790.170 Reproducible demo link https://jsfiddle.net/BenKhz/yfwqc6mu/1/ Referencing The docs hereDescribe the bugOpen Provided fiddle HereSelect a component on canvas and add a class via the selector manager. (...
artf
Hi @BenKhz that's happening because selector* events are related to the global Selectors container (when you remove a selector from the component, the Selector itself is still there as it could be used in other places), if you want to trac...
BenKhz
Ah! I was misunderstanding. Thank you for the clarification. Keep up the good work!
GJS Helper
Thank you for reporting this issue and for your kind words about GrapesJS! You've hit upon a common point of confusion regarding GrapesJS events, and it's an excellent question. Root Cause Explanation The selector:remove event, as document...
GrapesJS version 0.21.4[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome Version 113.0.5672.63 Reproducible demo link https://jsfiddle.net/szLp8h4n/11/Describe the bug How to reproduce the bug? Move any of the text components around in the page. An alert will be displayed. could be...
artf
Hi @rajevar I think you're looking for component:create event, as component:add works as expected (eg. might be used to track any new movement inside a specific component)
GJS Helper
You've correctly identified a common point of confusion with GrapesJS event handling. The component:add event indeed triggers not only when a new component is dragged from the blocks panel onto the canvas but also when an existing componen...
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? Chrome Version 115.0.5790.114 Reproducible demo link https://jsfiddle.net/mcraf3se/5/ Describe the bug Hello, just starting with GrapesJS so it is quite likely I am misunderstanding something fundamental. I am struggling w...
artf
The error here is using the arrow function, just replace it with clickOnElement() {
GJS Helper
The issue you're encountering with this being window or undefined inside your custom component's view event handler is a common JavaScript this binding problem, especially when using arrow functions. It's not a bug in GrapesJS but rather a...