Don't call selection change if range hasn't changed

WordPress · Feb 24, 2023 · d16ec3e · d16ec3e
1 parent 0381c93
commit d16ec3e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -238,7 +238,6 @@ export function useRichText( {
 			applyRecord,
 			createRecord,
 			handleChange,
-			isSelected,
 			onSelectionChange,
 		} ),
 		useSelectionChangeCompat(),

diff --git a/packages/rich-text/src/component/use-input-and-selection.js b/packages/rich-text/src/component/use-input-and-selection.js
@@ -113,18 +113,11 @@ export function useInputAndSelection( props ) {
 
 		/**
 		 * Syncs the selection to local state. A callback for the
-		 * `selectionchange` native events.
-		 *
-		 * @param {Event} event
+		 * `selectionchange` event.
 		 */
-		function handleSelectionChange( event ) {
-			const {
-				record,
-				applyRecord,
-				createRecord,
-				isSelected,
-				onSelectionChange,
-			} = propsRef.current;
+		function handleSelectionChange() {
+			const { record, applyRecord, createRecord, onSelectionChange } =
+				propsRef.current;
 
 			// Check if the implementor disabled editing. `contentEditable`
 			// does disable input, but not text selection, so we must ignore
@@ -178,10 +171,6 @@ export function useInputAndSelection( props ) {
 				return;
 			}
 
-			if ( event.type !== 'selectionchange' && ! isSelected ) {
-				return;
-			}
-
 			// In case of a keyboard event, ignore selection changes during
 			// composition.
 			if ( isComposing ) {

diff --git a/packages/rich-text/src/component/use-selection-change-compat.js b/packages/rich-text/src/component/use-selection-change-compat.js
@@ -15,6 +15,14 @@ import { useRefEffect } from '@wordpress/compose';
 export function useSelectionChangeCompat() {
 	return useRefEffect( ( element ) => {
 		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		const selection = defaultView.getSelection();
+
+		let range;
+
+		function getRange() {
+			return selection.rangeCount ? selection.getRangeAt( 0 ) : null;
+		}
 
 		function onDown( event ) {
 			const type = event.type === 'keydown' ? 'keyup' : 'pointerup';
@@ -30,12 +38,15 @@ export function useSelectionChangeCompat() {
 
 			function onUp() {
 				onCancel();
+				if ( range === getRange() ) return;
 				ownerDocument.dispatchEvent( new Event( 'selectionchange' ) );
 			}
 
 			ownerDocument.addEventListener( type, onUp );
 			ownerDocument.addEventListener( 'selectionchange', onCancel );
 			ownerDocument.addEventListener( 'input', onCancel );
+
+			range = getRange();
 		}
 
 		element.addEventListener( 'pointerdown', onDown );