Writing flow: fix triple click inside text blocks (#64928)

Co-authored-by: ellatrix <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: eidolonnight <[email protected]>
WordPress · Aug 30, 2024 · a3d1c07 · a3d1c07
1 parent 78f4af2
commit a3d1c07
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/writing-flow/use-selection-observer.js b/packages/block-editor/src/components/writing-flow/use-selection-observer.js
@@ -4,6 +4,7 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 import { create } from '@wordpress/rich-text';
+import { isSelectionForward } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -53,6 +54,14 @@ function extractSelectionEndNode( selection ) {
 		return focusNode;
 	}
 
+	// When the selection is forward (the selection ends with the focus node),
+	// the selection may extend into the next element with an offset of 0. This
+	// may trigger multi selection even though the selection does not visually
+	// end in the next block.
+	if ( focusOffset === 0 && isSelectionForward( selection ) ) {
+		return focusNode.previousSibling ?? focusNode.parentElement;
+	}
+
 	return focusNode.childNodes[ focusOffset ];
 }
 

diff --git a/packages/dom/README.md b/packages/dom/README.md
@@ -239,6 +239,22 @@ _Returns_
 
 -   `boolean`: True if rtl, false if ltr.
 
+### isSelectionForward
+
+Returns true if the given selection object is in the forward direction, or false otherwise.
+
+_Related_
+
+-   <https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition>
+
+_Parameters_
+
+-   _selection_ `Selection`: Selection object to check.
+
+_Returns_
+
+-   `boolean`: Whether the selection is forward.
+
 ### isTextContent
 
 _Parameters_

diff --git a/packages/dom/src/dom/index.js b/packages/dom/src/dom/index.js
@@ -24,3 +24,4 @@ export { default as isEmpty } from './is-empty';
 export { default as removeInvalidHTML } from './remove-invalid-html';
 export { default as isRTL } from './is-rtl';
 export { default as safeHTML } from './safe-html';
+export { default as isSelectionForward } from './is-selection-forward';