Fix editor going blank when it is moved in the DOM (modals, Vue re-ordering) (#131, #230)

[ELHart05]

What this fixes

Fixes #131 and #230, two reports of the same "blank editor" problem (also seen in #106 and #113).

The editor works the first time but comes back blank and unresponsive once something moves it in the DOM. Two common triggers:

• a modal or dialog that relocates its content on open (Bootstrap-Vue, Vuetify, and others do this), per Workaround for new Boostrap-vue when editor became zombie #131;
• Vue re-ordering the elements around the editor, for example when sibling v-if blocks are toggled, per Text becomes blank if DOM elements are added or removed around tinymce instance #230.

The cause is browser behavior, not TinyMCE. Per the HTML standard, removing an <iframe> from the document and inserting it again discards and recreates its document, so moving the editor wipes the editing iframe. Vue never unmounts the component during the move, so none of the lifecycle hooks fire and the editor has no chance to recover. SimonFc explained this back in #106; until now the only answer was a manual v-if or :key workaround in application code.

How it works

The same part of the standard says an iframe re-runs its load steps every time it is inserted, so it fires a load event again on re-insertion. The component now listens for that. The first load is the editor's own initialization; any load after that means the iframe was moved and blanked. When it happens, the dead editor is removed and a new one is initialized in place, with its content restored.

A few specifics:

• Content is kept. For v-model it comes from the bound value. For the uncontrolled (initialValue) case the component keeps a copy of the content current as it changes, since the blanked iframe can no longer be read by the time we detect the move.
• Inline editors have no iframe, so nothing changes for them.
• The load listener is removed on every teardown path, and the re-init is guarded so it can't run after the component is unmounted or deactivated, and can't loop.

It is automatic. Existing apps need no changes, and normal and inline usage behave exactly as before.

Tests

src/test/ts/browser/ReattachTest.ts moves the editor and checks that it recovers. It runs against TinyMCE 4 through 8 and covers:

• recovery and content preservation after a move (the modal case)
• repeated open/close cycles
• v-model: content preserved and the model handlers re-bound on the new editor
• Vue re-ordering a wrapper that holds the editor (the Text becomes blank if DOM elements are added or removed around tinymce instance #230 case)
• inline editors registering no recovery

The full suite (62 tests) passes, and the library and demo both build.

Demo

Added a Modal view to the demo app (route /modal) that reproduces the problem with a Teleport-based modal and shows the editor surviving repeated opens. It pulls in no extra dependencies.