From a9cf3f8e4a305d0004e7d70d158f9e2fa4c0604e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Sat, 8 May 2021 21:50:43 +0300
Subject: [PATCH] Rich text: extract select object

---
 packages/rich-text/src/component/index.js     | 30 ++----------------
 .../src/component/use-select-object.js        | 31 +++++++++++++++++++
 2 files changed, 33 insertions(+), 28 deletions(-)
 create mode 100644 packages/rich-text/src/component/use-select-object.js

diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
index 26c8d49f3dab47..df5d8f52c2f833 100644
--- a/packages/rich-text/src/component/index.js
+++ b/packages/rich-text/src/component/index.js
@@ -34,6 +34,7 @@ import { useBoundaryStyle } from './use-boundary-style';
 import { useInlineWarning } from './use-inline-warning';
 import { useCopyHandler } from './use-copy-handler';
 import { useFormatBoundaries } from './use-format-boundaries';
+import { useSelectObject } from './use-select-object';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
 import { usePasteHandler } from './use-paste-handler';
 
@@ -652,32 +653,6 @@ function RichText(
 		}
 	}
 
-	/**
-	 * Select object when they are clicked. The browser will not set any
-	 * selection when clicking e.g. an image.
-	 *
-	 * @param {WPSyntheticEvent} event Synthetic mousedown or touchstart event.
-	 */
-	function handlePointerDown( event ) {
-		const { target } = event;
-
-		// If the child element has no text content, it must be an object.
-		if ( target === ref.current || target.textContent ) {
-			return;
-		}
-
-		const { parentNode } = target;
-		const index = Array.from( parentNode.childNodes ).indexOf( target );
-		const range = getDoc().createRange();
-		const selection = getWin().getSelection();
-
-		range.setStart( target.parentNode, index );
-		range.setEnd( target.parentNode, index + 1 );
-
-		selection.removeAllRanges();
-		selection.addRange( range );
-	}
-
 	const rafId = useRef();
 
 	/**
@@ -817,6 +792,7 @@ function RichText(
 			useBoundaryStyle( { activeFormats } ),
 			useInlineWarning(),
 			useCopyHandler( { record, multilineTag, preserveWhiteSpace } ),
+			useSelectObject(),
 			useFormatBoundaries( { record, applyRecord, setActiveFormats } ),
 			useUndoAutomaticChange( { didAutomaticChange, undo } ),
 			usePasteHandler( {
@@ -837,8 +813,6 @@ function RichText(
 		onKeyDown: handleKeyDown,
 		onFocus: handleFocus,
 		onBlur: handleBlur,
-		onMouseDown: handlePointerDown,
-		onTouchStart: handlePointerDown,
 		// Selection updates must be done at these events as they
 		// happen before the `selectionchange` event. In some cases,
 		// the `selectionchange` event may not even fire, for
diff --git a/packages/rich-text/src/component/use-select-object.js b/packages/rich-text/src/component/use-select-object.js
new file mode 100644
index 00000000000000..0866815be15758
--- /dev/null
+++ b/packages/rich-text/src/component/use-select-object.js
@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+export function useSelectObject() {
+	return useRefEffect( ( element ) => {
+		function onClick( event ) {
+			const { target } = event;
+
+			// If the child element has no text content, it must be an object.
+			if ( target === element || target.textContent ) {
+				return;
+			}
+
+			const { ownerDocument } = target;
+			const { defaultView } = ownerDocument;
+			const range = ownerDocument.createRange();
+			const selection = defaultView.getSelection();
+
+			range.selectNode( target );
+			selection.removeAllRanges();
+			selection.addRange( range );
+		}
+
+		element.addEventListener( 'click', onClick );
+		return () => {
+			element.removeEventListener( 'click', onClick );
+		};
+	}, [] );
+}