RichText: selectionChange: bind on focus, unbind on blur #12480

ellatrix · 2018-11-30T19:38:44Z

Description

This PR is an attempt to decrease the work done on a key press. Every key press is eventually followed by (several) selection change events. Every RichText instance has a listener on this global event, all of which will be called multiple times after a key press. This is not significant for a few instances, but it becomes quite noticeable if there are a huge amount of instances.

The solution is to only add the listener on focus, then remove again on blur.

Testing on with this post I notice one selection change event takes on average 9ms to complete. With this PR it takes on average 0.3ms.

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.

ellatrix · 2018-11-30T19:55:03Z

In this graph you can see all the little callbacks on every selection change.

aduth · 2018-11-30T19:59:18Z

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

@@ -354,6 +347,12 @@ export class RichText extends Component {
 		if ( unstableOnFocus ) {
 			unstableOnFocus();
 		}
+
+		document.addEventListener( 'selectionchange', this.onSelectionChange );


What of these lines then?

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

Lines 394 to 397 in dd331b3

// Ensure it's the active element. This is a global event.

if ( ! this.isActive() ) {

return;

}

Yeah, we should be able to remove this.

aduth · 2018-11-30T20:07:36Z

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

+	}
+
+	onBlur() {
+		document.removeEventListener( 'selectionchange', this.onSelectionChange );


I guess blur, despite bubbling, doesn't fire when moving between elements in the same contenteditable ?

https://codepen.io/aduth/pen/VVqOmq?editors=1111

(In other words, I suspected there could be an issue, but it doesn't appear so)

No, it shouldn't, it starts at the contenteditable element.

aduth · 2018-11-30T20:15:17Z

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

@@ -392,11 +386,6 @@ export class RichText extends Component {
 	 * Handles the `selectionchange` event: sync the selection to local state.
 	 */
 	onSelectionChange() {
-		// Ensure it's the active element. This is a global event.
-		if ( ! this.isActive() ) {


I think I'd noted it elsewhere, but there's a small difference between isActive and onFocus in that the prior was testing the div wrapper as the active element, the latter exclusively applied to the TinyMCE element (i.e. not considering toolbars and such). When last I tested this, I recall it being a reasonable difference in that (a) all other elements are non-visual or slot-rendered and (b) are not relevant to the selection anyways.

Does that sound accurate to you?

Hm, I think both are checking the contenteditable element? this.editableRef is the contenteditable element, and onFocus is a listener on that element. Maybe you're thinking about setFocusedElement?

Hm, I think both are checking the contenteditable element? this.editableRef is the contenteditable element, and onFocus is a listener on that element. Maybe you're thinking about setFocusedElement?

Ah! I am!

I still think we should consolidate these, as having multiple concepts of focus here is particularly confusing for me, but it's not relevant to the change proposed here.

Yeah, tbh I'm not sure why there's something like setFocusedElement on the wrapper...

My hope was that at some point, we could get rid of the wrapper, at least in the sense of having it be a <Fragment> instead of an actual DOM div node.

aduth

👍

gziolo · 2018-12-02T13:03:21Z

@iseulde, out of curiosity, do you have an idea if there would be a way to detect that you are still editing a given RichText when you use block's toolbar? Use case would be as follows:

I type something in the RichText area (focus is on RichText)
I use the keyboard shortcut to start navigating in the toolbar (blur is triggered on RichText)
I pick the formatting option
I get back to editing in RichText (focus gets back to RichText)
I select another text in `RichText
I use the keyboard shortcut to add link (focus would stay in RichText because popover is in the same virtual dom tree)
I save the link
I get back to editing in RichText

In other words, whatever you do related to editing, we would need to be able to identify a currently active RichText field. As far as I was trying to tackle it, I had the issue with the focus/blur dance when using block's toolbar. I think the same issue would apply in case you want to use InsepectorControls like in your plugin which adds colors formatting. Inline tokens like images, might be another use case where this is getting tricky.

ellatrix · 2018-12-03T08:52:29Z

Sounds like this is what setFocusedElement in the discussion above?

gziolo · 2018-12-03T09:04:54Z

Sounds like this is what setFocusedElement in the discussion above?

This is where we want it to be. It's not yet there :( The issue is mostly when there are other components like PlainText which should take over focus and reset formatters from RichText. It isn't the case. We have an issue which tracks it: #7463.

ellatrix · 2018-12-03T10:35:59Z

But this PR doesn't cause any issues right?

gziolo · 2018-12-03T13:42:05Z

But this PR doesn't cause any issues right?

I don't think so. I just wanted to discuss further improvements :)

aduth · 2018-12-12T15:04:33Z

There's an issue with the changes here, in that if the component unmounts while it's focused and before it's blurred, an error can be logged. This can be seen when merging two blocks, for example.

Navigate to Posts > Add New
Add a paragraph with some text
Add a second paragraph with some text
Place caret at the beginning of second paragraph and press Backspace

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

I'll plan to submit a fix soon, which would be to call to remove the event handler still in componentWillUnmount (is fine to call even if not actually added).

aduth · 2018-12-13T19:20:29Z

I'll plan to submit a fix soon

See: #12817 (now merged)

RichText: selectionChange: bind on focus, unbind on blur

dd331b3

ellatrix added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Performance Related to performance efforts labels Nov 30, 2018

ellatrix requested review from aduth and a team November 30, 2018 19:53

ellatrix added this to the 4.7 milestone Nov 30, 2018

aduth reviewed Nov 30, 2018

View reviewed changes

Remove isActive check

4cef082

aduth reviewed Nov 30, 2018

View reviewed changes

aduth approved these changes Nov 30, 2018

View reviewed changes

ellatrix merged commit 2094200 into master Nov 30, 2018

ellatrix deleted the try/selectionchange-bind branch November 30, 2018 21:25

aduth mentioned this pull request Dec 4, 2018

Performance: Improve the initial loading time and the feeling fo smoothness while typing in blocks. #11782

Closed

youknowriad mentioned this pull request Dec 12, 2018

RichText: Fix React warning shown when unmounting a currently selected RichText #12817

Merged

ellatrix mentioned this pull request Mar 15, 2019

RichText: remove selection change listener during composition #14449

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RichText: selectionChange: bind on focus, unbind on blur #12480

RichText: selectionChange: bind on focus, unbind on blur #12480

ellatrix commented Nov 30, 2018 •

edited

Loading

ellatrix commented Nov 30, 2018

aduth Nov 30, 2018

ellatrix Nov 30, 2018

aduth Nov 30, 2018

ellatrix Nov 30, 2018 •

edited

Loading

aduth Nov 30, 2018 •

edited

Loading

ellatrix Nov 30, 2018

aduth Nov 30, 2018

ellatrix Nov 30, 2018

aduth Nov 30, 2018

aduth left a comment

gziolo commented Dec 2, 2018

ellatrix commented Dec 3, 2018

gziolo commented Dec 3, 2018 •

edited

Loading

ellatrix commented Dec 3, 2018

gziolo commented Dec 3, 2018

aduth commented Dec 12, 2018 •

edited

Loading

aduth commented Dec 13, 2018

	// Ensure it's the active element. This is a global event.
	if ( ! this.isActive() ) {
	return;
	}

RichText: selectionChange: bind on focus, unbind on blur #12480

RichText: selectionChange: bind on focus, unbind on blur #12480

Conversation

ellatrix commented Nov 30, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix commented Nov 30, 2018

aduth Nov 30, 2018

Choose a reason for hiding this comment

ellatrix Nov 30, 2018

Choose a reason for hiding this comment

aduth Nov 30, 2018

Choose a reason for hiding this comment

ellatrix Nov 30, 2018 • edited Loading

Choose a reason for hiding this comment

aduth Nov 30, 2018 • edited Loading

Choose a reason for hiding this comment

ellatrix Nov 30, 2018

Choose a reason for hiding this comment

aduth Nov 30, 2018

Choose a reason for hiding this comment

ellatrix Nov 30, 2018

Choose a reason for hiding this comment

aduth Nov 30, 2018

Choose a reason for hiding this comment

aduth left a comment

Choose a reason for hiding this comment

gziolo commented Dec 2, 2018

ellatrix commented Dec 3, 2018

gziolo commented Dec 3, 2018 • edited Loading

ellatrix commented Dec 3, 2018

gziolo commented Dec 3, 2018

aduth commented Dec 12, 2018 • edited Loading

aduth commented Dec 13, 2018

ellatrix commented Nov 30, 2018 •

edited

Loading

ellatrix Nov 30, 2018 •

edited

Loading

aduth Nov 30, 2018 •

edited

Loading

gziolo commented Dec 3, 2018 •

edited

Loading

aduth commented Dec 12, 2018 •

edited

Loading