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

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

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

Hi @sathyanarayananaCES you must call editor.getComponents and editor.getStyle in order to retrieve the components details; then you can return to the stored state by calling editor.setComponents and editor.setStyle with the result of above mentioned function calls. Cheers!