I'm using component.find() to search for a nested component in a big chunk of HTML content for a fieldset tag so that I can append components after it. Component.find locates the component, as seen in the console.log, but attempting to .append or use .components to inject content results in a console error: fieldSet.a...
msantore
Figured this out! Just had to specific an array position :-) After using component.find('fieldset') be sure to set an array position fieldSet[0].append(questionFieldSet);
This bug is also on the online demo : https://grapesjs.com/demo.htmlAdd a Text Block to the page, start typing and hiting enter to make several break lines.Unselect the block.Double click on the block to start editing again. Now if you click on the "view code" button, you will see that the HTML nodes inside the Text B...
artf
Ok I'll try to check this out
pouyamiralayi
@alexiswbr using the below snippet, the `div's will become br`'s as the expected behaviour:
obrazkow
I use such way to prevent transformation to component and keep original html. Just override component that you need, for example text or create new. Maybe it's not good solution, but it works :)
I'm using GrapesJs with Angular and am extending the functionality using Angular components. So my template looks like this: This all works fine; I've added DomComponents to the designer, and the components show up in the layer designer and I can even change traits with no problem. Everything renders as it should. How...
andrewryan1906
So, What I ended up doing instead is using Angular elements, but NOT compiling the elements into a web component (wanted to avoid the extra complexity). This kept me from having to switch out the DOM elements, and so GrapesJS editor is pla...
andrewryan1906
This might help. As part of processing the element, I'm swapping it out with my Angular element on the fly... so, after rs-wc-custom-component tag is rendered, I wait 1 ms and generate a dynamic Angular component, and swap out the rs-wc-cu...
artf
As part of processing the element, I'm swapping it out with my Angular element on the fly... so, after rs-wc-custom-component tag is rendered, I wait 1 ms and generate a dynamic Angular component, and swap out the rs-wc-custom-component wi...
When I drag a component - say a Map - onto the canvas, it now creates three copies of that element in the DOM. However, the model is correct, and if I refresh the screen, it renders correctly. Without trying to erect an entire sandbox to reproduce, any quick thoughts on what might be causing this? Thanks, Andrew
andrewryan1906
OK, as far as I can tell the problem is in Sorter.js and centers around this code: This code is called by onMove any time you start to drag a component onto the canvas. I see that you create temporary component, and then immediately remove...
andrewryan1906
This entire problem disappears when I remove this line from my configuration init: Something about that setting causes this behavior. Still don't understand what.
artf
Thanks @andrewryan1906 for all the insights, actually the Sorter file was in my to refactor list for a while now but didn't yet find the time to handle it... Anyway I'm still confused about what is going on, for sure I need you to create a...
Not sure why, But all of a sudden, when I start dragging components onto a canvas, I get this: This seems to happen when I edit a template, save it, and reload it. It also seems to happen when I try to drag a new component to the LAST element of the page; if I try to drag and element inside of a DIV container inside t...
andrewryan1906
Here's another clue... once the canvas "breaks" (which I can reliable make happen by refreshing the page and forcing a load... this behavior doesn't happen on new templates, only when the template is loaded from my custom storage, but I ve...
andrewryan1906
OK, I managed to stick grapes.js into my Angular project and reference it instead of the minified version, so I could get more insight into what is going on. The problem seems to be in Sorter.js. The findPosition method is tasked with figu...
I'm having an issue with Traits, wondering if this may be a bug. When I update the fontColor or fontSize trait, the other traits reset. Video: https://www.loom.com/share/6a40830699ad4c4590363f2641a07eac Code: https://github.com/msantore/vue-builder/blob/master/src/plugins/materials/components/index.js#L362 GrapesJS Ve...
pouyamiralayi
@msantore you are using `setStyle` which will override the previous styles. use it like below: cheers!
msantore
That fixed it, thanks!
artf
You can also use addStyle({ color: ${value} }) which does the same thing
First off, great work on an amazing project. Can't believe this exists. OK, I've spent the last few days going through the docs and now am starting to build my own components. However; for template design, I want my components to render differently. I can see that I can intercept the rendering and change that. But I'm...
andrewryan1906
I actually discovered the problem halfway through writing the post but decided to finish it and leave it here in case anyone ran into this. The styles used for panels, blocks, etc don't apply to the styles inside of the canvas, since the c...
The current approach that converts a component's script to text before placing it in the document is rather limiting. Wouldn't it be possible to use an approach like this, so that the scope is retained? Put the function in window and use a shim function in the component instead. original code: follows my suggestion: f...
artf
Wouldn't it be possible to use an approach like this, so that the scope is retained? No, because you're trying to mix the scope of the editor environment with the one which will be deployed to the final user (which has nothing to do with t...
× Unhandled Rejection (Error): Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. import React from 'react...
pouyamiralayi
@bumpradar this issue must be posted here: grapesjs-react cheers!
Ace0611
Hi, I am getting this error while trying to import GEditor from grapesjs-react (import GEditor from 'grapesjs-react';): Error: 'grapesjs-react' does not contain a default export (imported as 'GEditor'). Has anyone resolved this issue?
Hi @artf How to implement dragData event for custom components(external).I called dragData method on div drag but dataTransfer and content has no information of current drag component.Please help me its urgent thanks. this._editor.on('canvas:dragdata', (dataTransfer, content) => { console.log('dataTransfer', dataTrans...
artf
canvas:dragdata is meant to be used to enrich the Native D&D support. If for example, you drag into the canvas a video from your desktop and want the editor to understand it correctly, you would do something like this
manuel-84
have you managed to do this? i have problems with dropped text with mjml plugin enabled, it should create a mj-text element, instead it's creating a div