[Writing Flow]: Try to fix multi-selection with shift+click

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

@@ -11,10 +11,9 @@ import { store as blockEditorStore } from '../../store';
 import { getBlockClientId } from '../../utils/dom';
 
 export default function useClickSelection() {
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	const {
 		isSelectionEnabled,
-		getBlockParents,
 		getBlockSelectionStart,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
@@ -54,10 +53,8 @@ export default function useClickSelection() {
 			};
 		},
 		[
-			multiSelect,
 			selectBlock,
 			isSelectionEnabled,
-			getBlockParents,
 			getBlockSelectionStart,
 			hasMultiSelection,
 		]

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

@@ -76,43 +76,81 @@ export default function useSelectionObserver() {
 	const { multiSelect, selectBlock, selectionChange } = useDispatch(
 		blockEditorStore
 	);
-	const { getBlockParents } = useSelect( blockEditorStore );
+	const { getBlockParents, getBlockSelectionStart } = useSelect(
+		blockEditorStore
+	);
 	return useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
-			function onSelectionChange() {
+			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-
 				// If no selection is found, end multi selection and disable the
 				// contentEditable wrapper.
-				if ( ! selection.rangeCount || selection.isCollapsed ) {
+				if ( ! selection.rangeCount ) {
 					setContentEditableWrapper( node, false );
 					return;
 				}
 
-				const clientId = getBlockClientId(
+				let startClientId = getBlockClientId(
 					extractSelectionStartNode( selection )
 				);
-				const endClientId = getBlockClientId(
+				let endClientId = getBlockClientId(
 					extractSelectionEndNode( selection )
 				);
+				// If the selection has changed and we had pressed `shift+click`,
+				// we need to check if in an element that doesn't support
+				// selection has been clicked.
+				if ( event.shiftKey ) {
+					const selectedClientId = getBlockSelectionStart();
+					const clickedClientId = getBlockClientId( event.target );
+					// `endClientId` is not defined if we end the selection by clicking a non-selectable block.
+					// We need to check if there was already a selection with a non-selectable focusNode.
+					const focusNodeIsNonSelectable =
+						clickedClientId !== endClientId;
+					if (
+						( startClientId === endClientId &&
+							selection.isCollapsed ) ||
+						! endClientId ||
+						focusNodeIsNonSelectable
+					) {
+						endClientId = clickedClientId;
+					}
+					// Handle the case when we have a non-selectable block and
+					// click another one.
+					if ( startClientId !== selectedClientId ) {
+						startClientId = selectedClientId;
+					}
+				}
 
-				// If the selection did not involve a block, return early.
-				if ( clientId === undefined && endClientId === undefined ) {
+				const isSingularSelection = startClientId === endClientId;
+				// If selection is collapsed, end multi selection and disable the
+				// contentEditable wrapper.
+				// We also check if we have updated the clientIds when holding `shift`
+				// and elements that doesn't support selection are involved.
+				// There might be the case that the selection is collapsed but we need
+				// to multi-select blocks.
+				if ( selection.isCollapsed && isSingularSelection ) {
 					setContentEditableWrapper( node, false );
 					return;
 				}
 
-				const isSingularSelection = clientId === endClientId;
+				// If the selection did not involve a block, return early.
+				if (
+					startClientId === undefined &&
+					endClientId === undefined
+				) {
+					setContentEditableWrapper( node, false );
+					return;
+				}
 
 				if ( isSingularSelection ) {
-					selectBlock( clientId );
+					selectBlock( startClientId );
 				} else {
 					const startPath = [
-						...getBlockParents( clientId ),
-						clientId,
+						...getBlockParents( startClientId ),
+						startClientId,
 					];
 					const endPath = [
 						...getBlockParents( endClientId ),

packages/rich-text/src/component/use-input-and-selection.js

@@ -238,7 +238,7 @@ export function useInputAndSelection( props ) {
 		function onCompositionStart() {
 			isComposing = true;
 			// Do not update the selection when characters are being composed as
-			// this rerenders the component and might distroy internal browser
+			// this rerenders the component and might destroy internal browser
 			// editing state.
 			ownerDocument.removeEventListener(
 				'selectionchange',