Delay TinyMCE initialisation to focus #10723

ellatrix · 2018-10-18T08:57:12Z

Description

This PR is similar to #9040, with the difference that it does not destroy TinyMCE on blur. It merely delays TinyMCE initialisation to the point where the user focuses the field.

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

youknowriad · 2018-10-18T09:05:25Z

Sounds like a safer approach to start with. I have a question:

What happens if we try to hit the formatting toolbar before initialization (should we try to trigger the initialization explicitely when we apply a format for instance?)

ellatrix · 2018-10-18T09:07:10Z

What happens if we try to hit the formatting toolbar before initialization (should we try to trigger the initialization explicitely when we apply a format for instance?)

The format bar only appears when the editor is initialised. This is not needed though, as we no longer need TinyMCE to apply formats. So we can just show it without MCE being initialised.

ellatrix · 2018-10-18T09:10:05Z

@youknowriad Atm it is needed that the toolbar only initialises after TinyMCE because we're registering shortcuts though TinyMCE. After the format API PR this dependency disappears.

ellatrix · 2018-10-18T09:38:39Z

There are some failing tests. Unsure why those specifically atm. I was actually expecting more failures.

gziolo · 2018-10-18T09:45:04Z

There is one issue though, try to click on bold, anchor or italic in the middle of RichText. I don't know why but cursor moves sometimes to the start of RichText field. When I click on the regular text it all works properly.

gziolo · 2018-10-18T09:46:31Z

I was wondering if we can initialize all TinyMCE instances inside a selected block, and destroy them when you deselect block. Maybe pre-initialize on hover if the issue I mentioned is still the case.

ellatrix · 2018-10-18T09:53:58Z

pre-initialize

What's that?

I was wondering if we can initialize all TinyMCE instances inside a selected block, and destroy them when you deselect block.

That's exactly what #9040 tries to do. I think this approach is a bit less extreme as a first step.

gziolo · 2018-10-18T10:21:41Z

pre-initialize

What's that?

It doesn't matter anymore since you fixed it :)

youknowriad · 2018-10-18T11:10:53Z

The format bar only appears when the editor is initialised. This is not needed though, as we no longer need TinyMCE to apply formats. So we can just show it without MCE being initialised.

That's not true though. The format toolbar can be visible but the editor not focused (which means TinyMCE not initialized).

So we can just show it without MCE being initialised.

Yes, but if I remember properly we used to avoid rerendering the TinyMCE component which means if the content changes externally (by applying a format or something else), it's not refreshed. (Maybe this changed, I didn't follow everything)

ellatrix · 2018-10-18T11:28:29Z

That's not true though.

That's not true anymore. See #10723 (comment).

mcsf

Looks good overall.

Note: when starting a fresh Gutenberg session, I can feel the latency upon the first focusing of a block. Subsequent focus switches don't lead to any noticeable difference. I think the overall benefit of this PR clearly outweighs this.

packages/editor/src/components/rich-text/tinymce.js

youknowriad · 2018-10-29T09:47:21Z

I added this in 4.2 because I think it's very important to get in beta. At least we can test it a little bit before RC.

youknowriad · 2018-10-29T09:53:14Z

I rebased and pushed the new snapshots for the unit tests as they seemed legit to me.

youknowriad · 2018-10-29T10:28:08Z

In dc5a085 I update the quote => paragraph transform and the test. I think "focusing RichText" initializes TinyMCE which probably produces an onChange call cleaning empty paragraphs so this slightly impacts the tests where <p></p> should be considered empty. I don't think it's very important so I updated the code and the tests but let me know if you think differently.

youknowriad · 2018-10-29T10:49:36Z

Here's the status of the two remaining failures in e2e tests:

Block Deletion: Can't reproduce locally, I suspect it's intermittent
Splitting and Merging: I think the breakage are probably legit, If I use SLOWMO in the test, it passes though and If I try manually, I can't reproduce the breakage. It's more likely a "timing" issue since now the initialization happens a bit later than before. I'm not certain we can do something about. We should see if we're fine with the breakage and introduce wait or waitForSomething in the tests. and if we're not fine with the breakage, maybe this approach of initializing TinyMCE on Focus is not viable.

Thoughs?

aduth · 2018-10-29T18:36:26Z

packages/block-library/src/quote/index.js

@@ -108,7 +108,7 @@ export const settings = {
 blocks: [ 'core/paragraph' ],
 transform: ( { value, citation } ) => {
 const paragraphs = [];
- if ( value ) {
+ if ( value && value !== '<p></p>' ) {


I recall a discussion about this being non-ideal. Is this a "gotta get worse before getting better" thing? Do we have an issue to track the improvements?

See #10763.

@youknowriad After the enter "fix", do we still need these changes?

yes, I think we do, that's something else I think. In this case we don't even focus the editor so the value is not changed.

ellatrix · 2018-10-30T11:18:38Z

Slightly related PR, which may help alleviate issue here: #10328. It would move keyup and keydown event handlers from TinyMCE to the contentEditable element, so they take effect immediately. With delaying TinyMCE init, we may miss catching an early event?

Alternative might be to set a class at the end of TinyMCE init and check for that in the e2e test, instead of just the normal TinyMCE classes. Unsure at which stage those are added.

youknowriad · 2018-10-30T11:25:13Z

@iseulde Both these two things seem reasonable to me.

Slightly related PR, which may help alleviate issue here: #10328. It would move keyup and keydown event handlers from TinyMCE to the contentEditable element, so they take effect immediately. With delaying TinyMCE init, we may miss catching an early event?

If this fixes, the "delay" issue, it would be awesome.

Alternative might be to set a class at the end of TinyMCE init and check for that in the e2e test, instead of just the normal TinyMCE classes. Unsure at which stage those are added.

Seems like a good thing to avoid relying on TinyMCE classnames in the tests.

Even If I'd love to get this in ASAP, It does feel like we're not ready there to ship for 4.2 though, so thinking we should punt but make sure we follow-up quickly on it?

packages/block-library/src/button/test/__snapshots__/index.js.snap

packages/editor/src/components/rich-text/tinymce.js

youknowriad · 2018-10-30T16:44:10Z

So I found a way to fix the issue: Call waitForRichTextInitialization after each Enter press creating a new paragraph/block.

This fix is a bug actually: A bug happening when you type really really fast. It's also a bug we already have even without this PR which results in inconsistent tests (splitting-merging anyone?).

So this PR makes this bug more "visible" because we delayed the initialization a bit. But at the moment I'm thinking the advantages of this PR are bigger than this bug and the removal of waitForRichTextInitialization should be addressed separately.

ellatrix · 2018-10-30T16:47:33Z

See #6021. I can try to address it as soon as possible after this release. I think it's okay to merge this and work on a fix for enter separately.

youknowriad

LGTM 👍

aduth · 2018-10-30T18:48:12Z

with the difference that it does not destroy TinyMCE on blur.

Was there a concern with this? It seemed to me one of the safer steps of this approach in #9040.

gziolo · 2018-10-30T19:28:31Z

As far as I remember we discussed that we should take one step at the time. We should continue exploring destroying on blur - it might make sense to defer it until block gets unselected so you could retain fast interactions between multiple instances of RichText inside one block - use cases are navigating between content and cite of Quote block, or between table rows in Table block.

talldan · 2018-11-01T07:09:20Z

This PR seems to have resulted in this bug:
#11348

Looking into it now, seems a pretty urgent one to fix.

The bug seems to be caused by focus not triggering reliably in the table cells, causing them to not be selected. When a table cell doesn't have selection the onChange does nothing and values in the table aren't updated:

gutenberg/packages/block-library/src/table/edit.js

Lines 113 to 129 in b7d8fbf

 onChange( content ) { 

 const { selectedCell } = this.state; 

 if ( ! selectedCell ) { 

 return; 

 } 

 const { attributes, setAttributes } = this.props; 

 const { section, rowIndex, columnIndex } = selectedCell; 

 setAttributes( updateCellContent( attributes, { 

 section, 

 rowIndex, 

 columnIndex, 

 content, 

 } ) ); 

 }

Now I know what the bug is, I'm looking into the exact cause and what the best fix would be.

talldan · 2018-11-01T07:21:25Z

My best guess right now is a race condition. Perhaps since Initialisation of TinyMCE now happens onFocus:
https://github.com/WordPress/gutenberg/pull/10723/files#diff-de07a4aefea1cc394e50163dd259882fR108

The editor event isn't always registered in time:

gutenberg/packages/editor/src/components/rich-text/index.js

Line 190 in 4cc3a13

editor.on( 'focus', this.onFocus );

ellatrix · 2018-11-01T07:26:14Z

@talldan Would #11287 fix it? Looking in a bit.

talldan · 2018-11-01T07:29:45Z

I'll have a test of that - I've got a fix here as well that seems to do the trick. Not sure if there's a drawback to using the react event instead of the editor event:
https://github.com/WordPress/gutenberg/compare/fix/table-cell-focus-issue?expand=1

talldan · 2018-11-01T07:35:19Z

Yep, looks like #11287 contains exactly the same fix. Confirmed it resolves the issue.

ellatrix · 2018-11-01T07:36:21Z

Yes, it moves the keydown and keyup handlers as well. :)

jasmussen · 2018-11-21T11:03:59Z

This PR appears to have caused #12113.

My method of figuring this out was kind of manual — I simply checked out commits to master, and got to this page: https://github.com/WordPress/gutenberg/commits/master?before=01be7ac89b97b76c490d57a15c16466657240770+371

☝️ "Port nextpage block to the ReactNative mobile app" is the last commit where the Enter key worked perfectly in IE11.

The regression as noted in #12113 appears right in the next commit, i.e. this PR.

ellatrix changed the title ~~Delay TinyMCE initialisat to focus~~ Delay TinyMCE initialisation to focus Oct 18, 2018

ellatrix force-pushed the try/mce-delay-init branch from b756ec9 to c6903c1 Compare October 18, 2018 09:00

gziolo requested a review from aduth October 18, 2018 09:36

gziolo added the [Type] Performance Related to performance efforts label Oct 18, 2018

mcsf reviewed Oct 19, 2018

View reviewed changes

packages/editor/src/components/rich-text/tinymce.js Show resolved Hide resolved

packages/editor/src/components/rich-text/tinymce.js Show resolved Hide resolved

youknowriad added this to the 4.2 milestone Oct 29, 2018

youknowriad force-pushed the try/mce-delay-init branch from ace7b50 to 8ff5fe5 Compare October 29, 2018 09:46

aduth reviewed Oct 29, 2018

View reviewed changes

ellatrix and others added 5 commits October 30, 2018 12:30

Delay TinyMCE init to focus

5e136af

Try @aduth's hack

455b5b1

don't verify html

1166576

Generate new snapshots to fix unit tests

5e6566b

Fix quote block transforms

bb9bed0

ellatrix force-pushed the try/mce-delay-init branch from dc5a085 to 783d168 Compare October 30, 2018 11:34

ellatrix force-pushed the try/mce-delay-init branch from 783d168 to b5a36c9 Compare October 30, 2018 11:55

Try adjusting waitForRichTextInitialization

4c1ecdb

gziolo reviewed Oct 30, 2018

View reviewed changes

packages/block-library/src/button/test/__snapshots__/index.js.snap Show resolved Hide resolved

packages/editor/src/components/rich-text/tinymce.js Show resolved Hide resolved

Try fixing the typing quickly e2e tests

4cc3a13

youknowriad force-pushed the try/mce-delay-init branch from a751275 to 4cc3a13 Compare October 30, 2018 16:28

youknowriad approved these changes Oct 30, 2018

View reviewed changes

youknowriad merged commit 35c02bc into master Oct 30, 2018

youknowriad deleted the try/mce-delay-init branch October 30, 2018 16:50

This was referenced Oct 30, 2018

Try: TinyMCE: On-demand initialization #9040

Closed

Incredibly slow to load editor for a post with 93 instances of TinyMCE #8822

Closed

mtias added the [Component] TinyMCE label Oct 30, 2018

talldan mentioned this pull request Nov 1, 2018

Fix rich text value for nested lists #10799

Merged

4 tasks

youknowriad mentioned this pull request Nov 6, 2018

Extensive articles with over 1700 words and various blocks make Gutenberg very slow. #10418

Closed

This was referenced Nov 21, 2018

IE11: Enter in a paragraph loses focus. #12113

Closed

IE 11: tabbing through the Blocks UI requires to tab twice through the whole UI #12181

Closed

afercia mentioned this pull request Dec 6, 2018

Gutenberg How-To Block Lagging When You Get to 15+ Steps Yoast/wordpress-seo#11766

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Delay TinyMCE initialisation to focus #10723

Delay TinyMCE initialisation to focus #10723

ellatrix commented Oct 18, 2018 •

edited

Loading

youknowriad commented Oct 18, 2018

ellatrix commented Oct 18, 2018 •

edited

Loading

ellatrix commented Oct 18, 2018

ellatrix commented Oct 18, 2018

gziolo commented Oct 18, 2018

gziolo commented Oct 18, 2018

ellatrix commented Oct 18, 2018

gziolo commented Oct 18, 2018

youknowriad commented Oct 18, 2018

ellatrix commented Oct 18, 2018

mcsf left a comment

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

aduth Oct 29, 2018

ellatrix Oct 29, 2018

ellatrix Oct 30, 2018

youknowriad Oct 30, 2018 •

edited

Loading

ellatrix commented Oct 30, 2018

youknowriad commented Oct 30, 2018

youknowriad commented Oct 30, 2018 •

edited

Loading

ellatrix commented Oct 30, 2018

youknowriad left a comment

aduth commented Oct 30, 2018

gziolo commented Oct 30, 2018 •

edited

Loading

talldan commented Nov 1, 2018

talldan commented Nov 1, 2018 •

edited

Loading

ellatrix commented Nov 1, 2018

talldan commented Nov 1, 2018

talldan commented Nov 1, 2018

ellatrix commented Nov 1, 2018

jasmussen commented Nov 21, 2018

Delay TinyMCE initialisation to focus #10723

Delay TinyMCE initialisation to focus #10723

Conversation

ellatrix commented Oct 18, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

youknowriad commented Oct 18, 2018

ellatrix commented Oct 18, 2018 • edited Loading

ellatrix commented Oct 18, 2018

ellatrix commented Oct 18, 2018

gziolo commented Oct 18, 2018

gziolo commented Oct 18, 2018

ellatrix commented Oct 18, 2018

gziolo commented Oct 18, 2018

youknowriad commented Oct 18, 2018

ellatrix commented Oct 18, 2018

mcsf left a comment

Choose a reason for hiding this comment

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

youknowriad commented Oct 29, 2018

aduth Oct 29, 2018

Choose a reason for hiding this comment

ellatrix Oct 29, 2018

Choose a reason for hiding this comment

ellatrix Oct 30, 2018

Choose a reason for hiding this comment

youknowriad Oct 30, 2018 • edited Loading

Choose a reason for hiding this comment

ellatrix commented Oct 30, 2018

youknowriad commented Oct 30, 2018

youknowriad commented Oct 30, 2018 • edited Loading

ellatrix commented Oct 30, 2018

youknowriad left a comment

Choose a reason for hiding this comment

aduth commented Oct 30, 2018

gziolo commented Oct 30, 2018 • edited Loading

talldan commented Nov 1, 2018

talldan commented Nov 1, 2018 • edited Loading

ellatrix commented Nov 1, 2018

talldan commented Nov 1, 2018

talldan commented Nov 1, 2018

ellatrix commented Nov 1, 2018

jasmussen commented Nov 21, 2018

ellatrix commented Oct 18, 2018 •

edited

Loading

ellatrix commented Oct 18, 2018 •

edited

Loading

youknowriad Oct 30, 2018 •

edited

Loading

youknowriad commented Oct 30, 2018 •

edited

Loading

gziolo commented Oct 30, 2018 •

edited

Loading

talldan commented Nov 1, 2018 •

edited

Loading