[QUESTION] Recursive view update of custom component
Question
Hi,
I have defined a custom type like:
editor.DomComponents.addType('customType', {
model: {
defaults: {
type: 'customType',
tagName: 'customTag',
textable: 1,
dragable: true,
draggable: ['p', 'div', 'span']
},
},
isComponent(el: HTMLElement) {
let result;
const tag = el.tagName;
if (tag == 'CUSTOMTAG') {
result = {
type: 'customType',
tagName: tag.toLowerCase(),
};
}
return result;
},
view: {
async onRender(elem: any) {
let element: HTMLElement = elem.el;
await this.getContent(element);
},
async getContent(element: HTMLElement) {
let path = element.getAttribute('href');
if (path) {
res = await apiCall.loadData(path);
}
// res.result contains html.
// It also can contain cutomTag element inside it.
element.innerHTML = res.result;
element.style.display = 'block';
}
},
});
I want to keep the customTag in my model and show the content (HTML) in the view.
However, in the content, it is possible to have same customTag inside with different href and content.
On view render, Grapesjs does not get trigger this type for the nested customTag (which I understand why).
Is there a best way to set view of the component so that if there is customTag inside the content, it processes as the customType?
Is it possible to have recursive components like this when only view is updated?
Thanks
Answers (3)
OK. I found a work around. and since this question is too specific I close the issue. Thanks for the support.
If you're doing this element.innerHTML = res.result; you just place the content as a static one, the editor doesn't parse it to components, what you're probably looking for is updating the model model.components(res.result)
I'd recommend reading with more attention to how components work, seems like it's not yet clear to you the difference between the model and the view...
Thanks for the reply.
The goal is to keep the model as <customTag></customTag> and just render the content as static. However, I did not find the way to react to the static contents upon render. That's the reason I want to keep model and view separate so that I have customTag in source code.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2549
[QUESTION] Update component view on property change
Hi everyone, I'm trying to create a component that will update it's view based on a property value My approach is bassed on #1227 and on th...
Issue #2839
[Question] I added one component named template in the blocks but when i try to drag another components inside this template component ,it will be dragged but after saving it removes all the components inside it. How to avoid this?
This is code of template component: I debugged it, so i got that : setComponents method in the dom_components clearing it ...but not gettin...
Issue #2456
[QUESTION] (Possibly a bug) How to apply traits to components used for GrapesJs initialization
I am using This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply compone...
Issue #2697
[QUESTION] Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.