Re-attaching the web component to DOM breaks editor.

[mstahv]

Steps to reproduce:

1. Go to https://codepen.io/tinymce/pen/oNLbGwP
2. Type some text and apply formatting
3. Select tinymce-editor in the element inspector
4. Store it in global variable, then remove and add back:

const ed = $0;
document.body.removeChild($0);
document.body.appendChild(ed);

Now the editor is back but the content is not editable and old content is lost.

[web-padawan]

Looks like the <iframe> becomes empty when re-attaching:

It could be that this is not the web component specific issue but the bug in TinyMCE itself.

[tiny-james]

Essentially iframes lose all their state when removed from the DOM. With iframes that reference a URL this just means that they reload the URL but in the case of TinyMCE the iframe is used to store the content, separate CSS from the rest of the page and allow for a separate selection model. As TinyMCE does not keep a copy of the HTML being edited outside of the iframe it is unrecoverable if it is removed from the DOM.

The traditional workaround is to call editor.getContent() and store the editor content (and possibly store the selection with editor.selection.getBookmark(3) ) then destroy the existing editor and create a new editor with the content. Sadly this will lose the undo stack as there's no way to extract that from the editor.

In future when we have proper browser support we'd like to implement an inline-like editor in shadow dom which would then be movable however I have heard from the editor team that their experiments have shown that it's currently impossible due to the way browsers implement selection inside a shadow dom.

[web-padawan]

it's currently impossible due to the way browsers implement selection inside a shadow dom.

Yes, that's a known limitation which affects Safari: window.getSelection() does not return nodes from Shadow DOM.
There is a polyfill which I'm using with Quill but it's unofficial and might have some limitations.