RichText: Memoize createRecord

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

@@ -174,10 +174,40 @@ export class RichText extends Component {
 		return { formats, text, start, end };
 	}
 
-	createRecord() {
+	/**
+	 * Creates a new record from the current editable DOM.
+	 *
+	 * @param {Object} $1          Named arguments.
+	 * @param {Object} $1.useCache Wether or not to use a cached record when the
+	 *                             selection did not change. Recommended to use
+	 *                             e.g. in the `selectionchange` event handler
+	 *                             when nothing other than the selection could
+	 *                             have changed.
+	 *
+	 * @return {Object} A new record.
+	 */
+	createRecord( { useCache } = {} ) {
 		const range = getSelection().getRangeAt( 0 );
 
-		return create( {
+		// If the range is shallowly equal to the last, return the last
+		// calculated value. This is useful when creating values on the
+		// `selectionchange` event, which fires more often than it should
+		// without a change in selection.
+		//
+		// Shallowly checking equality for ranges is fine:
+		//
+		// > Thus subsequent calls of this method returns the same range object
+		// > if nothing has removed the context object's range in the meantime.
+		// > In particular, getSelection().getRangeAt( 0 ) ===
+		// > getSelection().getRangeAt( 0 ) evaluates to true if the selection
+		// > is not empty.
+		// >
+		// > https://w3c.github.io/selection-api/#dom-selection-getrangeat
+		if ( useCache && range === this.createRecord.lastRange ) {
+			return this.createRecord.lastRecord;
+		}
+
+		const record = create( {
 			element: this.editableRef,
 			range,
 			multilineTag: this.multilineTag,
@@ -188,6 +218,11 @@ export class RichText extends Component {
 			filterString: ( string ) => string.replace( TINYMCE_ZWSP, '' ),
 			prepareEditableTree: this.props.prepareEditableTree,
 		} );
+
+		this.createRecord.lastRecord = record;
+		this.createRecord.lastRange = range;
+
+		return record;
 	}
 
 	applyRecord( record ) {
@@ -396,7 +431,7 @@ export class RichText extends Component {
 			return;
 		}
 
-		const { start, end, formats } = this.createRecord();
+		const { start, end, formats } = this.createRecord( { useCache: true } );
 
 		if ( start !== this.state.start || end !== this.state.end ) {
 			const isCaretWithinFormattedText = this.props.isCaretWithinFormattedText;