[Question] Losing the component information on saving the code from Code Editor

I have integrated the code edit option in the Web builder.

• Using editor.getHtml() to get the current HTML content and populate in the code editor

• While saving the code from the code editor, I am using editor.setComponents() to set the edited content to the builder canvas.

Issues

1. On Saving the html from the code editor, it loses all the old component related information and acts as a new component with default values in the traits.
2. data-gjs-type becomes default and it is not recognizing the custom components.

Anaysis & Thoughts On checking it seems like,

1. when we use editor.getHtml() it gives the final html without any data-gjs-* attributes.
2. editor.setComponents() method seems to override the old component information.

Questions

1. In order to retain all the old component information and use it after editing the HTML in the editor, how can we do that?
2. If it is by using editor.getComponents(), how can we store and reuse after saving the content from the code editor?

[noogen]

@sathyanarayananaCES First, to echo others that it is best to use get/setComponents and get/setStyle to save the content of the editor. If I understand your usage correctly, that you want HTML for htmlCodeEditor and be able to import back into the editor after user edit. Take a look at the demo of the editor import which simply call setComponents with raw HTML. Refs - https://github.com/artf/grapesjs/blob/dev/docs/api/editor.md#examples and https://github.com/artf/grapesjs/blob/dev/test/specs/grapesjs/index.js#L180

To do what you want will require call to editor.genHtml() for the htmlCodeViewer.setContent and import back with editor.setComponents with the raw HTML from htmlCodeViewer instead of dealing with components array. The gotcha/pitfall that you have to understand is, internally, grapejs try its best to parse that raw HTML back into components array. Parsing HTML is difficult even with valid HTML. Therefore, you will get unexpected result and may lose data that grapejs cannot parse. This is the reason why everyone is suggesting to use getComponents and getStyle if you ever want to store and load it back. I hope that provide some clarity into why you are losing data? It’s because you are using import/grapesjs HTML parsing.

[pouyamiralayi]

@jenter #1331 comment and #2644 comment are good examples. Also checkout #2664 comment which is a pitfall to avoid! Cheers!