Try: TinyMCE: On-demand initialization

[aduth]

Related: #8822
Related: #8879

In-Progress: This is a proof-of-concept and as such, is neither complete as presented nor expected to work for all usage.

This pull request seeks to explore a refactor of the TinyMCE component to initialize itself only when it receives focus, and to destroy itself when focus leaves the field.

This serves a dual purpose:

• If many RichText are present in the post content, TinyMCE initialization can be substantial. This remedies the issue by avoiding initialization until the user interacts with the field.
• TinyMCE manipulates the DOM and if lingering artifacts are left to remain after focus leaves the field, it can cause negative side-effects (see forced focusing in Writing Flow: Pressing enter while within inline boundary forces caret position to revert #8877)

Implementation notes:

Existing selection is reset when initializing TinyMCE, which broke writing flow behaviors. This is a result of TinyMCE resetting the HTML of the element on initialization. A workaround has been implemented to neutralize editor.dom.setHTML during initialization.

Future considerations may include:

• Can TinyMCE restore the selection which existed prior to the initialization after initialization completes?
• Can TinyMCE avoid setting HTML if it's not necessary?
  • Even just a if ( html === node.innerHTML ) return; in editor.dom.setHTML

cc @androb

Known issues:

• There's an error when adding a new paragraph (startContainer property access)
• There's an error when clicking the bold button in the toolbar when collapsed selection in a paragraph (isCollapsed)

Observations:

A more thorough performance evaluation should be performed.

Anecdotally, I observed that while there was still significant interaction lag, I was able to convert a post containing 2377 paragraphs to blocks. Previously this conversion would completely stall the tab. See demo content at #8720 (this is certainly an extreme case).

[youknowriad]

Superseded by #10723?

[aduth]

Mostly, yes. #10723 doesn't include anything for destroying the initialized fields on blur.

[ellatrix]

Needs a rebase after #10723.

[abotteram]

So we are using a lot of RichText blocks in our HowTo structured data block and we are having massive performance issues when people start adding more than say... 10 steps. I have tested our plugin with this PR and it solves our performance issues. We would really like to see this picked up in the near future.

Yoast/wordpress-seo#11766

[androb]

Hi @aduth - sorry I missed this. If it is still an issue and your suggestions for TinyMCE can help, do you mind opening a ticket at https://github.com/tinymce/tinymce/issues

[gziolo]

@aduth and @iseulde - is still something that we should update and land? There were several iterations on the TinyMCE initialization so I'm not quite sure how far we got.

[gziolo]

See my comment. I'm also marking as Stale to make triaging easier.

[ellatrix]

We'll soon no longer need it, so in my opinion it's good to close. But if there are substantial memory benefits that are needed in the meantime, it's worth to still look into of course.

[ellatrix]

Superseded by #13697.