Version: 0.16.44 Hi there! I have remote storage for pages, and recently I faced an issue when saving page, JSON.stringify(editor.getComponents()) started to throw error Uncaught TypeError: e[M].getId is not a function. I investigated the already saved JSON representation of the page and found out that it fails on thi...
yucomds
Same error here ... do you have a solution? [EDIT] Downgrading seems to be the only solution for now
josfh2005
Same problem here, if I preprocess the components and remove that attribute (__symbol) before load the Editor the template works fine. Is the a way @artf to disable the symbols for now?
artf
Yeah unfortunately the previous version of grapesjs had a bug that created symbols involuntary. In the current version, the bug is fixed and symbols are disabled, but unfortunately, this still happens if you try to load a component with a...
Version: 0.16.34 Are you able to reproduce the bug from the demo? [ ] Yes [x ] No As I understand the code import dialog skips all the HTML scripts, so I can not reproduce the issue on the demo What is the expected behavior? The editor must remove dead script blocks before appending a new script block at the end of th...
Ju99ernaut
I'm unable to reproduce this, maybe you can provide more information on the custom component itself, anyway I suspect this is a storage related issue. Are you storing then loading pages from the generated html?
Andrew-Chen-Wang
Typically inline scripts go in the body at the bottom. Try putting it there maybe?
am1rb
I do not append anything by myself. The editor appends the scripts related to my components in a new script tag at the end of the generated HTML. Please take a look at this file: https://github.com/artf/grapesjs/blob/dev/src/editor/model/E...
Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? When we have a button with the property data-gjs-draggable in false, this button not should be dragged in the canvas. Describe the bug detailed StepsSet a button component with draggable property in falseDr...
artf
I guess you're doing something wrong, how do you create those components and their properties?? You shouldn't even see those attributes in the inspector.
marcepoblet
@artf In our codes we have not changed anything. The only difference is that we update the GrapesJs version. Before I had version v0.16.18 and it worked correctly, but now we update GrapesJs to v0.16.41 and it doesn't work for buttons.
marcepoblet
we set the properties with this: editor.getSelected().attributes.attributes["data-gjs-editable"] = 'false' editor.getSelected().attributes.attributes["data-gjs-copyable"] = 'false' editor.getSelected().attributes.attributes["data-gjs-dropp...
Much grateful to you for this library. Background: I am building an editor where I intend to define most of the components from an existing set of Vuejs components which I have developed earlier and use in my applications. Most of these are UI based simple and complex components. For example, I have simple vuejs compo...
Ju99ernaut
I'm not sure if such hooks exist per component but you can try to take advantage to the toHtml property of a component. It's already been discussed elsewhere so you search it in the issues as there are quite a few.
artf
Yeap, you can define your components with a custom toHTML/toJSON function (in model), in order to customize their output
ClaudeCode
Thanks for reporting this, @sudiptochoudhury. The issue with Is there a event per component before save which the component can listen to? appears to be a race condition or state management timing problem. This typically happens when compo...
Version: 0.16.41 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? 1) Copy selected parent component (container) to the clipboard. 2) Paste selected parent component (container) from the clipboard (into the same page or an other page). 3) All components keep ID styles and i...
artf
That because you've updated original commands with your versions (incorrectly). Indeed, if I remove your plugin from the demo everything works as expected. Please check the original copy and paste command, you should clone components befor...
artf
Just check the original commands https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js
bgrand-ch
@artf Thanks for your answer. A link or an example or more explanations please? 😅
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
ClaudeCode
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
ClaudeCode
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...
ClaudeCode
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
ClaudeCode
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...