Is there a way of re-appending a manager container if the dom is temporarily removed?

[giordanna]

First of all thank you for this great open source library.

We are working on an email editor where there are some occasions where we must conditionally render a dom. In this case we must temporarily stop rendering some of the manager containers from grapesjs (style, blocks, layers, etc), but then show it again after a user input. Because of that, the manager containers are gone and i can't seem to find on the docs if theres a way to re-append them.

Here's a reproduction of the occasion: https://codepen.io/giordanna/pen/jOaYVKy

1. Click on the "Preview" button
2. Then click on "Stop preview"
3. The style manager container is gone

The easiest way would be just adding display: none to the containers but this conditionally rendering the dom is a default behavior of our panel component... to circumvent this would be little wacky.

For now we are using editor.destroy() and then initializing it again but it still feels weird.

So, is there a better way of re-appending these manager containers?

Edit: For now I guess I don't even need to call editor.destroy(), I just call this:

this.$nextTick(() => {
  this.editor = grapesjs.init({...})
});

After changing the view back to the manager. https://codepen.io/giordanna/pen/YzEamVw

[artf]

Edit: For now I guess I don't even need to call editor.destroy(), I just call this:

Well, you're leaking memory if you don't destroy it first.

this conditionally rendering the dom is a default behavior of our panel component... to circumvent this would be little wacky

I'd recommend finding a way to prevent unmounting the DOM if it's not necessary and remounting the editor just to show the preview sounds quite unnecessary. It doesn't even sound like a big challenge, especially in Vuejs which offers that for free with v-show.