Duplicate component when reloading the page

[chiqui3d]

Hi @ryandeba

I have a problem with the component, which is that when I save the component and try to edit it, I don't get the desired result.

I found two cases:

1- I cannot select it: The isComponent() function has the following code

isComponent: function(el) {
                    if (el.hasAttribute && el.hasAttribute("data-html-code")) {
                        console.log(el);
                        return {
                            type: "html-code",
                            content: el.innerHTML,
                            components: []
                        };
                    }
                }

2 - The code is duplicated when reloading the page: In this case remove from the previous code the components: []

Reference

[ryandeba]

Hi @chiqui3d,

I've spent a bit of time looking into this and am having trouble recreating the problems. I have previously had an issue with selecting a component, but that was some related to some buggy behavior with some css setting the pointer-events on a <table> element, so I don't think it's quite the same as the problem you are seeing.

I've created a jsfiddle to try to reproduce your issues. The "Reset editor components" button is intended to mimic the act of saving and reloading the contents from a database (editor.setComponents(editor.getHtml())) - I'm not sure how you are reloading the editor contents, so this may need to be changed. I tested by dragging the "HTML Code" block into the canvas, editing its HTML, then clicking the "Reset editor components" button. Are you using other plugins or customizations that could be causing your issues? Could you try to update that jsfiddle to better demonstrate the problems?

[chiqui3d]

thanks @ryandeba , You can see the issue clearly in https://jsfiddle.net/af8p8o2a/11/

[ryandeba]

Hey @chiqui3d,

Here's a quick and dirty fix for the problem of not being able to select the html code component: https://jsfiddle.net/af8p8o2a/21/. The changes I made can be found in the fixPointerEventsBug function. I'm haven't had time to figure out what the root issue is, so there's probably a much better way to fix this, but I just don't know what it is at the moment.

Hopefully that solves the first problem for you. Can you provide some more details on how to recreate the duplicated content problem? An updated jsfiddle or steps to recreate would be very helpful 👍

[chiqui3d]

Thank you @ryandeba , I would never have thought that this was the problem, incredible, about the other case, you can see it here https://jsfiddle.net/af8p8o2a/23/, but I think and I suppose that the correct way is as you have done in this last one.

All I've done in this last one has been to comment the components: []

[ryandeba]

Thanks @chiqui3d, I understand the situation better now. Components in grapes have two properties that can store HTML content:

• components: The default behavior is for grapesjs to automatically parse out HTML content and turn it into an array of child components. The components: [] line inside of isComponent tells the grapesjs HTML parser not to do this automatic behavior because we are explicitly telling it that we want the components property to be an empty array.
• content: HTML content set here will get rendered in the view and will also be returned in the toHTML method. Setting the HTML content into this property effectively hides it from grapes so that it will NOT get treated like normal components (selectable, stylable, etc).

I'm going to leave this issue open for now until I find a better solution for the pointer-events bug.

[chiqui3d]

Thank you so much for the real explanation.

But in the second case, when I comment the component:[], Is it really the behavior that this should have? what you do is duplicate the component, which I don't understand, because this behavior doesn't do it with the text component for example.

Thanks again

[ryandeba]

Yeah, I believe that the duplicated content that you see when commenting out components: [] is the expected behavior @chiqui3d. This solution came from a suggestion by the author as a way to prevent grapesjs from parsing child content as components. The duplicated content may seem odd, but since we're storing the HTML content in the content property (via content: el.innerHTML - this is not the default behavior), we also need to tell grapes to not store the same content in the components property - this is all accomplished by components: [] being returned by isComponent.

Reviewing the the code in Component.toHTML, ComponentView.render (note how the html of the content property AND all child components are rendered), and ParserHtml.parseNode may help you see how this works.

[chiqui3d]

yes @ryandeba , I understand it better now, thanks for all the help. Now this way the plugin is for my perfect.

[AksharaKarikalan]

HI @chiqui3d, @ryandeba.. I'm also facing the same issue with update html content. it generates duplicate html blocks like, BEFORE:

<h3 style="box-sizing: border-box;">
            <a href="http://<domain>/042666" style="box-sizing: border-box;">Course Guide</a>
          </h3>
          <p style="box-sizing: border-box;">&#xA0;
          </p>

AFTER UPDATE:

<div id="wrapper" style="box-sizing: border-box;">
    <div id="wrapper" style="box-sizing: border-box;">
          <h3 style="box-sizing: border-box;">
            <a href="http://<domain>/042666" style="box-sizing: border-box;">Course Guide</a>
          </h3>
          <p style="box-sizing: border-box;">&#xA0;
          </p>
    </div>
    </div>

Evert time when I click update button, it adds additional div classes. sample code I used:

updateButton.onclick = function() {          
        // Saving Functionality  
        component.set("content", "");
        component.components(codeViewer.editor.getValue());
        editor.Modal.close();            
      };

Could you guys find the solution for this issue? If yes, guide me in right track. Thanks in advance.