Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RichText: Memoize createRecord #11602

Closed
wants to merge 6 commits into from
Closed

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Nov 7, 2018

Description

It very often occurs that on selection change, the range stays the same and no selection calculation needs to be made. E.g. on entering a character onSelectionChange will be called twice, while the selection actually stays the same. We can memoize createRecord, as range object will be strict equal through getSelection().getRangeAt( 0 ) calls.

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 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 7, 2018
@ellatrix ellatrix added this to the 4.3 milestone Nov 7, 2018
@ellatrix ellatrix requested review from aduth and a team November 7, 2018 20:34
@youknowriad
Copy link
Contributor

I'm moving this out of 4.3, we still need to check whether it creates bugs or not.

@youknowriad youknowriad modified the milestones: 4.3, 4.4 Nov 9, 2018
@ellatrix
Copy link
Member Author

ellatrix commented Nov 9, 2018 via email

@ellatrix
Copy link
Member Author

ellatrix commented Nov 14, 2018

@youknowriad Do you mean something like this? With this button, the range still stays the same.

wp.richText.registerFormatType( 'plugin/test', {
	title: 'test',
	tagName: 'test',
	className: 'test',
	edit: function( props ) {
		return wp.element.createElement( wp.element.Fragment, null,
			wp.element.createElement( wp.editor.RichTextToolbarButton, {
				icon: 'editor-textcolor',
				title: 'test',
				onClick: function() {
					props.onChange( {
						...props.value,
						text: props.value.text.toUpperCase(),
					} );
				}
			} )
		);
	},
} );

@ellatrix ellatrix requested a review from a team November 14, 2018 12:37
@youknowriad
Copy link
Contributor

yes

@ellatrix
Copy link
Member Author

Cool. So all seems fine to me then.

@youknowriad youknowriad modified the milestones: 4.4, 4.5 Nov 15, 2018
@@ -229,7 +229,11 @@ export class RichText extends Component {
createRecord() {
const range = getSelection().getRangeAt( 0 );

return create( {
if ( range === this.createRecord.lastRange ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add a brief comment about the intention of this for posterity?

Copy link
Member

@mtias mtias left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a comment about adding a comment.

@youknowriad
Copy link
Contributor

The e2e test failures seems legit.

@ellatrix
Copy link
Member Author

@youknowriad Previous ones were passing, and the last commit is just a comment. May only need a rebase.

@ellatrix ellatrix force-pushed the fix/multiple-create-record-calls branch from 9c31692 to 5ae8f47 Compare November 20, 2018 08:22
@ellatrix
Copy link
Member Author

No idea why e2e are failing suddenly. Needs investigation.

@ellatrix ellatrix force-pushed the fix/multiple-create-record-calls branch from 763c6ef to afcdbd9 Compare November 30, 2018 14:11
@ellatrix ellatrix force-pushed the fix/multiple-create-record-calls branch from afcdbd9 to 2f38940 Compare November 30, 2018 14:18
@ellatrix
Copy link
Member Author

ellatrix commented Dec 8, 2018

I'm going to close this for now as #12547 addresses the source of the issue: the selection change event emitting too many times with the same selection. The browser might still emit the event in other cases with the same selection, so maybe this fix should still be included, but it would be good to see where it could happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Type] Performance Related to performance efforts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants