Issue #2614Opened March 2, 2020by makbari1 reactions

[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)

makbariMarch 4, 20201 reactions

OK. I found a work around. and since this question is too specific I close the issue. Thanks for the support.

artfMarch 3, 20200 reactions

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...

makbariMarch 3, 20200 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.