Revert "Allow multi-select on iOS Safari/touch devices (WordPress#63671…

…)" (WordPress#65414)

This reverts commit 6aeba74.

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -68,7 +68,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
-			ownerDocument.defaultView.getSelection().removeAllRanges();
 			ref.current.focus();
 			return;
 		}

packages/block-editor/src/components/rich-text/event-listeners/paste-handler.js

@@ -26,15 +26,10 @@ export default ( props ) => ( element ) => {
 			preserveWhiteSpace,
 			pastePlainText,
 		} = props.current;
-		const { ownerDocument } = element;
-		const { defaultView } = ownerDocument;
-		const { anchorNode, focusNode } = defaultView.getSelection();
-		const containsSelection =
-			element.contains( anchorNode ) && element.contains( focusNode );
 
 		// The event listener is attached to the window, so we need to check if
 		// the target is the element.
-		if ( ! containsSelection ) {
+		if ( event.target !== element ) {
 			return;
 		}
 

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

@@ -397,19 +397,7 @@ export function RichTextWrapper(
 	const inputEvents = useRef( new Set() );
 
 	function onFocus() {
-		let element = anchorRef.current;
-
-		if ( ! element ) {
-			return;
-		}
-
-		// Writing flow might be editable, so we should make sure focus goes to
-		// the root editable element.
-		while ( element.parentElement?.isContentEditable ) {
-			element = element.parentElement;
-		}
-
-		element.focus();
+		anchorRef.current?.focus();
 	}
 
 	const TagName = tagName;

packages/block-editor/src/components/writing-flow/index.js

@@ -23,7 +23,6 @@ import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
 import useClipboardHandler from './use-clipboard-handler';
-import useEventRedirect from './use-event-redirect';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -66,7 +65,6 @@ export function useWritingFlow() {
 				},
 				[ hasMultiSelection ]
 			),
-			useEventRedirect(),
 		] ),
 		after,
 	];

packages/block-editor/src/components/writing-flow/use-arrow-nav.js

@@ -19,7 +19,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -191,7 +190,8 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,11 +233,6 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const target =
-				ownerDocument.activeElement === node
-					? getSelectionRoot( ownerDocument )
-					: event.target;
-
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -279,7 +274,6 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -303,7 +297,6 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,

packages/block-editor/src/components/writing-flow/use-input.js

@@ -16,7 +16,6 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Handles input for selections across blocks.
@@ -50,24 +49,7 @@ export default function useInput() {
 			// DOM. This will cause React errors (and the DOM should only be
 			// altered in a controlled fashion).
 			if ( node.contentEditable === 'true' ) {
-				const selection = node.ownerDocument.defaultView.getSelection();
-				const range = selection.rangeCount
-					? selection.getRangeAt( 0 )
-					: null;
-				const root = getSelectionRoot( node.ownerDocument );
-
-				// If selection is contained within a nested editable, allow
-				// input. We need to ensure that selection is maintained.
-				if ( root ) {
-					node.contentEditable = false;
-					root.focus();
-					selection.removeAllRanges();
-					if ( range ) {
-						selection.addRange( range );
-					}
-				} else {
-					event.preventDefault();
-				}
+				event.preventDefault();
 			}
 		}
 
@@ -77,23 +59,6 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
-				const { ownerDocument } = node;
-				if ( node === ownerDocument.activeElement ) {
-					if ( event.key === 'End' || event.key === 'Home' ) {
-						const selectionRoot = getSelectionRoot( ownerDocument );
-						const selection =
-							ownerDocument.defaultView.getSelection();
-						selection.selectAllChildren( selectionRoot );
-						const method =
-							event.key === 'End'
-								? 'collapseToEnd'
-								: 'collapseToStart';
-						selection[ method ]();
-						event.preventDefault();
-						return;
-					}
-				}
-
 				if ( event.keyCode === ENTER ) {
 					if ( event.shiftKey || __unstableIsFullySelected() ) {
 						return;

packages/block-editor/src/components/writing-flow/use-select-all.js

@@ -10,7 +10,6 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 export default function useSelectAll() {
 	const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =
@@ -24,27 +23,12 @@ export default function useSelectAll() {
 				return;
 			}
 
-			const selectionRoot = getSelectionRoot( node.ownerDocument );
 			const selectedClientIds = getSelectedBlockClientIds();
 
-			// Abort if there is selection, but it is not within a block.
-			if ( selectionRoot && ! selectedClientIds.length ) {
-				return;
-			}
-
 			if (
-				selectionRoot &&
 				selectedClientIds.length < 2 &&
-				! isEntirelySelected( selectionRoot )
+				! isEntirelySelected( event.target )
 			) {
-				if ( node === node.ownerDocument.activeElement ) {
-					event.preventDefault();
-					node.ownerDocument.defaultView
-						.getSelection()
-						.selectAllChildren( selectionRoot );
-					return;
-				}
-
 				return;
 			}
 
@@ -61,7 +45,6 @@ export default function useSelectAll() {
 					node.ownerDocument.defaultView
 						.getSelection()
 						.removeAllRanges();
-					node.contentEditable = 'false';
 					selectBlock( rootClientId );
 				}
 				return;

packages/block-editor/src/components/writing-flow/use-selection-observer.js

@@ -107,12 +107,8 @@ function getRichTextElement( node ) {
 export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } =
 		useDispatch( blockEditorStore );
-	const {
-		getBlockParents,
-		getBlockSelectionStart,
-		isMultiSelecting,
-		getSelectedBlockClientId,
-	} = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart, isMultiSelecting } =
+		useSelect( blockEditorStore );
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
@@ -195,17 +191,10 @@ export default function useSelectionObserver() {
 					return;
 				}
 
-				setContentEditableWrapper(
-					node,
-					!! ( startClientId && endClientId )
-				);
-
 				const isSingularSelection = startClientId === endClientId;
 				if ( isSingularSelection ) {
 					if ( ! isMultiSelecting() ) {
-						if ( getSelectedBlockClientId() !== startClientId ) {
-							selectBlock( startClientId );
-						}
+						selectBlock( startClientId );
 					} else {
 						multiSelect( startClientId, startClientId );
 					}

packages/block-editor/src/components/writing-flow/utils.js

@@ -116,33 +116,3 @@ function toPlainText( html ) {
 	// Merge any consecutive line breaks
 	return plainText.replace( /\n\n+/g, '\n\n' );
 }
-
-/**
- * Gets the current content editable root element based on the selection.
- * @param {Document} ownerDocument
- * @return {Element|undefined} The content editable root element.
- */
-export function getSelectionRoot( ownerDocument ) {
-	const { defaultView } = ownerDocument;
-	const { anchorNode, focusNode } = defaultView.getSelection();
-
-	if ( ! anchorNode || ! focusNode ) {
-		return;
-	}
-
-	const anchorElement = (
-		anchorNode.nodeType === anchorNode.ELEMENT_NODE
-			? anchorNode
-			: anchorNode.parentElement
-	).closest( '[contenteditable]' );
-
-	if ( ! anchorElement ) {
-		return;
-	}
-
-	if ( ! anchorElement.contains( focusNode ) ) {
-		return;
-	}
-
-	return anchorElement;
-}

packages/dom/src/dom/place-caret-at-edge.js

@@ -67,14 +67,7 @@ export default function placeCaretAtEdge( container, isReverse, x ) {
 		return;
 	}
 
-	const { ownerDocument } = container;
-	const { defaultView } = ownerDocument;
-	assertIsDefined( defaultView, 'defaultView' );
-	const selection = defaultView.getSelection();
-	assertIsDefined( selection, 'selection' );
-
 	if ( ! container.isContentEditable ) {
-		selection.removeAllRanges();
 		return;
 	}
 
@@ -86,6 +79,11 @@ export default function placeCaretAtEdge( container, isReverse, x ) {
 		return;
 	}
 
+	const { ownerDocument } = container;
+	const { defaultView } = ownerDocument;
+	assertIsDefined( defaultView, 'defaultView' );
+	const selection = defaultView.getSelection();
+	assertIsDefined( selection, 'selection' );
 	selection.removeAllRanges();
 	selection.addRange( range );
 }