Hi, We are encountering an issue - color of property name such as "Width" is blue when dragging a new component to canvas, but we don't modify its value. Grapesjs is powerful, and very helpful to us. However, we are new to grapesjs, and have spent much time on this issue with no progress. Would you please tell us the...
artf
Hi @luziye9 for sure you're using a block/component with a custom style property on it... Anyway, if you're opening a BUG issue, you have to follow the template (grapesjs version, reproducible demo, etc.). So, for now, I'm closing this as...
GJSBlock
Thanks for reporting this, @luziye9. Great question about How does the property color changes to blue when value changed?. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation fo...
I was fiddling with ways that you could change the style of elements inside the canvas and i noticed that by using the color-picker trait to set the inline style color property of the element (not the inline style tag that you get through the getCS() ), that style property was completely gone when getHtml() was used.I...
artf
Hi @DodoTrip the reason is that with inline CSS you can't define styles with states (eg. :hover) and media queries, so I've always seen it as a useless limitation instead of a feature. Despite that, you can still use that option if you don...
ThetripGr
Hi @artf and thank you, for your reply. Mind giving me an example on how it is done right now or should avoidInlineStyle make it work easily?
artf
Honestly, I've stopped using avoidInlineStyle a long time ago, but I guess it should work π
I want to specify the position of dragging element. for example, if I have a header block which no matter where you drag, it should be placed at the top of document. how should I do that?
RutujaBadbe
after dropping the header block into the canvas, I need it to go at top of any other component/block. currently, I am doing this. but it is not working. editor.on('canvas:drop',(DataTransfer, model)=> { if (model.is('header')) { var index...
artf
You can use draggable property to define (via CSS query strings) where the component could be placed but you can't specify the position. You can try to create a custom component as a container for components like the header and init always...
RutujaBadbe
@artf thanks for the reply. I don't know if it is correct way but I did something and it worked for me. I am quite new at this and still learning from docs. I did this- editor.on('canvas:drop',( model)=> { if (model.is('header')) { //creat...
@artf I am loving working with GJS. I have one last thing I'd love your help on. It would be incredibly helpful to be able to customise the labels in the layer manager. I've searched high and low but not found anything. The default way it just shows and is not very helpful when wanting to navigate efficiently. <img wi...
artf
You can extend the model of your component/s and overwrite the getName function
fmay
In case this is useful for anyone, I found an easy/alternative way of doing this when a component is created.
flauc
This is how I did it: The benefit is that if the components id or tag change later it will still be updated in the layer manager and you can also rename individual components.
Hey, @artf. I want to access the json that is generated when a template is stored without actually storing the template. The json object can be accessed using the events but I don't want to call editor.store() and then use the events. Is there a way I can do get the json object (a function call on editor or some prope...
Joshmamroud
@theSC0RP Is this what you're looking for? editor.getComponents()
artf
@theSC0RP it's not clear if you want the storage functionality or not, but what proposed Josh is correct or you can always add your storage (and do nothing inside if need to...) https://grapesjs.com/docs/modules/Storage.html#define-new-sto...
theSC0RP
you can always add your storage (and do nothing inside if need to...) https://grapesjs.com/docs/modules/Storage.html#define-new-storage Thanks @artf. This is what I ended up doing. With editor.getComponents(), you get a cyclic structure st...
Hi @artf - what you've built is magnificent. It's been a gentle struggle as I'm far from being a JS wizard. However, I've got just about everything fully configured - except for this! I want to set traits that display when an image is selected (alt, src, id). I am sure it can be done once at initialisation, but I'm bu...
artf
Hi Freddy, you can simply extend the image component in this case
GJSBlock
Thanks for reporting this, @fmay. Great question about Question : Traits. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() even...
I would like to create a new custom trait to use, that has the input of the color picker and a checkbox so that the end result is either the predefined color coming from the checked checkbox or if unchecked choosing from the picker. This is too specific for my case so my question is if i can use pre-existing trait typ...
artf
Not at the moment, I'm working on a new UI module that will allow the reuse and override of internal UI elements.
GJSBlock
Thanks for reporting this, @ThetripGr. Great question about Is it possible to use existing trait types in new custom traits? (e.g the colorpicker). The recommended approach with GrapesJS is to use the event-driven API. Start here: Check th...
grapesjs-custom-code work fine with script tag until GrapesJS 0.16.27, after this version, no script content is executed. βοΈ Editor init() option : allowScripts: 1 βοΈ Plugin import : https://github.com/artf/grapesjs-custom-code/issues/11#issuecomment-724512902 Is it related to https://github.com/artf/grapesjs/issues/3...
nithinpillalamarri123
hi very thanks for u r replay... yes exactly , after you are replay i tried with 0.16.27 custom blocks script is working as expected but in above versions than 0.16.27 while drag and drop custom block script executing as expected but after...
artf
Hi @bgrand-ch probably you're talking about a fixed bug π Main reasons why you should not let execute a random script from a user:Self-XSSWe can't control the script if we execute it inside the editor, so, for instance, the user paste thi...
GJSBlock
Thanks for reporting this, @bgrand-ch. Great suggestion about grapesjs-custom-code doesn't execute <script> from GrapesJS 0.16.30 and up! While this specific feature isn't yet in the core API, there are several ways to achieve similar beha...
Version: 0.16.27 to latest Are you able to reproduce the bug from the demo? Yes [ X] Yes [ ] No What is the expected behavior? insert text block inside another text block Describe the bug detailed when adding new block, or even when creating a new custom type, the "textable attribute is not working as expected and as...
artf
Duplicate of #2771
GJSBlock
Thanks for reporting this, @hanna404. The issue with Textable attribute not working and causing exceptions appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mo...
Version: 0.16.34 What is the expected behavior? When the editor is initialized, no element is selected, so the style manager should say "Select an element before using Style Manager" like it does when not using "appendTo" in the editor configuration. What is the current behavior? When using "appendTo" in the editor co...
mosh-tudor
I used this code to solve it:
Nielsticot
This is not what I want, my issue is before any element is selected so before the event "component:selected" is trigerred. I temporarily fixed it by selecting an element on editor load but it is not what I really want
artf
If you're using the StyleManager in a custom element you have to handle that state on your own.