I realized that the cloned and all the clone components have mirror editing. Is there a way to avoid it?
artf
I should be able to release the fix today π¬ https://github.com/artf/grapesjs/issues/3291
GJSBlock
Thanks for reporting this, @ilsantuzzo. Great question about Edit a clone without affect the cloned components. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...
First of all, congrats @artf for this amazing project π― I am currently working on a project and I wanted to ask if I can edit the wrapper (body) like I edit other components inside it. For example I would like to edit the padding of the wrapper as I do with the background-color. I've had a look over the configs but c...
artf
Yes @kuhelbeher, now the wrapper is created post plugins, so you can entirely extend it as any other component
artf
LE: I have found a way. I am overwritting the stylable array from getWrapper() but I'm not 100% sure this is the correct way. Can you confirm this? Yeah sure it's ok, but if you need, you can change the wrapper properties on init via mainC...
kuhelbeher
you can change the wrapper properties on init via mainConfig.domComponents.wrapper optionhttps://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 Hello, I've noticed that this op...
I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grapesjs canvas updates the textnode found in .components. And I want the component exported as HTML correctly e.g. <textarea>MY user edited TEXTNODE CONTENT</textarea>. At the moment,...
artf
Hi @abulka, as the editing is happening in the view, you should update the component model once the view is updated. So it should work with something like this
GJSBlock
Thanks for reporting this, @abulka. The issue with how to make textnode editing update component content? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mod...
Version: Reproduced in codepen below using 0.16.34 (returned from https://unpkg.com/grapesjs) and 0.16.22 in a Preact project Describe the bug detailed A custom GrapesJS component calls its view's "onRender" function when the component is rendered to the canvas. Per the documentation: I would expect this to be called...
GJSBlock
Thanks for reporting this, @Dmurl5. The issue with Custom component view onRender is called early appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificatio...
Hey, I am using grapesjs in my Angular app I have a custom angular component (which is basically custom HTML created with angular) and I am trying to export content using grapesjs-plugin-export Issue I am facing is that after export there is no JS code (which is initially inside angular component) that can do with htm...
artf
You can more about components with js here: https://grapesjs.com/docs/modules/Components-js.html#basic-scripts
GJSBlock
Thanks for reporting this, @haizenbergD. Great question about How to export JS code from angular components?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your sp...
Wondering how to do a reverse lookup, from component back to block. I use Block Manager add() to add a block like below after initialization. How do I if the selected component is generated by this custom block ?
artf
You should think more about components than blocks, indeed the right Block should look more like that. But in case you need it, you can always attach custom properties to your content block (which then will be appended to the component) On...
GJSBlock
Thanks for reporting this, @amliu. Great question about [Question] How to know from which block is the selected component generated ?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS...
Hi @artf ! Is there any way to parse the styles into a CSS string? This would be helpful in a scenario where you have multiple GrapesJs instances stored and you want to update the CSS on all of them. You can manipulate the styles because that is an array and it's reliable. Currently, on the CSS I am using regex to loc...
artf
Well, you should be able to take the CSS from any GrapesJS instance with editorInstance.getCss(). Which basically generates the CSS from the styles JSON
GJSBlock
Thanks for reporting this, @lacieri. Great question about [QUESTION]: Parse styles to a Css string. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific m...
The color picker in grapesjs does not work the same between Chrome and Firefox. When you open the picker on a selected component that has never had it's background color set before (for instance...) the color picker opens with opacity set to 100% in Chrome and 0% in Firefox. The issue is that the user may hot even loo...
mhowey
@artf Another difference to note between Firefox and Chrome is what is displayed in the palette. Firefox shows a transparent box while Chrome shows a gray one.
artf
Seems to be solved on the latest Firefox version
GJSBlock
Thanks for reporting this, @mhowey. The issue with Color Picker Transparency slider is at 0 in firefox. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modif...
Version: 0.16.27 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No [X] Video but no demo What is the expected behavior? Add as many nested span elements as necessary and preserve their style/ID. What is the current behavior? From two nested span elements, style/ID of parent span elements disappear. Are y...
artf
Hi Benjamin, the bug was already fixed (when you report a bug, ensure to have the latest version)
GJSBlock
Thanks for reporting this, @bgrand-ch. The issue with v0.16.27 - Style/ID disappear when nested span appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifica...
Hello, I have a custom component, let's call it a Section Block. I want to prevent the user from dropping Section Blocks inside other Section Blocks. Is that possible? Ref: https://grapesjs.com/docs/modules/Components.html#define-custom-component-type I am aware of the draggable/droppable options that I can define on...
artf
You can use :not() selector, eg. :not(.except-this-class)
stljeff1
Thanks @artf . This solution works, mostly. Now I am encountering a new problem where some placeholder text is disappearing. On some elements inside my blocks, I'll have an HTML element with a text node, then some other nested html element...
artf
You're defining the component with the old API, which requires other stuff to work properly and that might be the cause of the issue (I've tried on my side and everything works as expected). Please check here for the correct API https://gr...