@wordpress/block-editor 16.0.1-next.v.202607070741.0 → 16.1.0

package/build-module/components/writing-flow/use-home-end.mjs

@@ -0,0 +1,43 @@
+// packages/block-editor/src/components/writing-flow/use-home-end.js
+import { HOME, END } from "@wordpress/keycodes";
+import { useSelect } from "@wordpress/data";
+import { useRefEffect } from "@wordpress/compose";
+import { getSelectionEditableElement } from "../../utils/dom.mjs";
+import { store as blockEditorStore } from "../../store/index.mjs";
+function useHomeEnd() {
+  const { hasMultiSelection } = useSelect(blockEditorStore);
+  return useRefEffect((node) => {
+    function onKeyDown(event) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (event.keyCode !== HOME && event.keyCode !== END) {
+        return;
+      }
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+      if (!event.target.isContentEditable || hasMultiSelection()) {
+        return;
+      }
+      const selection = node.ownerDocument.defaultView.getSelection();
+      if (!getSelectionEditableElement(selection, node)) {
+        return;
+      }
+      event.preventDefault();
+      selection.modify(
+        event.shiftKey ? "extend" : "move",
+        event.keyCode === HOME ? "backward" : "forward",
+        "lineboundary"
+      );
+    }
+    node.addEventListener("keydown", onKeyDown);
+    return () => {
+      node.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+}
+export {
+  useHomeEnd as default
+};
+//# sourceMappingURL=use-home-end.mjs.map

package/build-module/components/writing-flow/use-home-end.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/writing-flow/use-home-end.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { HOME, END } from '@wordpress/keycodes';\nimport { useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getSelectionEditableElement } from '../../utils/dom';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Moves the caret to the start or end of the visual line for Home and End\n * with `Selection.modify()`, because the browser's default caret movement\n * cannot be relied on in two cases:\n *\n * - While the wrapper is the contentEditable editing host (a selected block\n *   supports `editableRoot`), browsers don't perform the default caret\n *   movement for Home and End.\n * - Chromium on macOS maps Home and End to scroll commands, so it never\n *   moves the caret in editable content on that platform, including nested\n *   editable elements like the tab labels in the tab-list block.\n */\nexport default function useHomeEnd() {\n\tconst { hasMultiSelection } = useSelect( blockEditorStore );\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.keyCode !== HOME && event.keyCode !== END ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.metaKey || event.ctrlKey || event.altKey ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Only handle keys pressed in editable content, in both of the\n\t\t\t// cases mentioned above: `event.target` is the focused element,\n\t\t\t// and `isContentEditable` is true both for the wrapper as the\n\t\t\t// editing host and for a nested editable element like a tab label.\n\t\t\t// Anything else that takes focus like inputs and textareas keep\n\t\t\t// default behavior.\n\t\t\tif ( ! event.target.isContentEditable || hasMultiSelection() ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = node.ownerDocument.defaultView.getSelection();\n\n\t\t\tif ( ! getSelectionEditableElement( selection, node ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\t\t\tselection.modify(\n\t\t\t\tevent.shiftKey ? 'extend' : 'move',\n\t\t\t\tevent.keyCode === HOME ? 'backward' : 'forward',\n\t\t\t\t'lineboundary'\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": ";AAGA,SAAS,MAAM,WAAW;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAK7B,SAAS,mCAAmC;AAC5C,SAAS,SAAS,wBAAwB;AAc3B,SAAR,aAA8B;AACpC,QAAM,EAAE,kBAAkB,IAAI,UAAW,gBAAiB;AAC1D,SAAO,aAAc,CAAE,SAAU;AAChC,aAAS,UAAW,OAAQ;AAC3B,UAAK,MAAM,kBAAmB;AAC7B;AAAA,MACD;AAEA,UAAK,MAAM,YAAY,QAAQ,MAAM,YAAY,KAAM;AACtD;AAAA,MACD;AAEA,UAAK,MAAM,WAAW,MAAM,WAAW,MAAM,QAAS;AACrD;AAAA,MACD;AAQA,UAAK,CAAE,MAAM,OAAO,qBAAqB,kBAAkB,GAAI;AAC9D;AAAA,MACD;AAEA,YAAM,YAAY,KAAK,cAAc,YAAY,aAAa;AAE9D,UAAK,CAAE,4BAA6B,WAAW,IAAK,GAAI;AACvD;AAAA,MACD;AAEA,YAAM,eAAe;AACrB,gBAAU;AAAA,QACT,MAAM,WAAW,WAAW;AAAA,QAC5B,MAAM,YAAY,OAAO,aAAa;AAAA,QACtC;AAAA,MACD;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAC5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "names": []
+}

package/build-module/components/writing-flow/use-input.mjs

@@ -10,6 +10,8 @@ import {
   findTransform
 } from "@wordpress/blocks";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { setContentEditableWrapper } from "./utils.mjs";
+import { getSelectionEditableElement } from "../../utils/dom.mjs";
 function useInput() {
   const {
     __unstableIsFullySelected,
@@ -34,7 +36,15 @@ function useInput() {
   } = useDispatch(blockEditorStore);
   return useRefEffect((node) => {
     function onBeforeInput(event) {
-      if (node.contentEditable === "true") {
+      if (node.contentEditable !== "true") {
+        return;
+      }
+      if (hasMultiSelection()) {
+        event.preventDefault();
+        return;
+      }
+      const selection = node.ownerDocument.defaultView.getSelection();
+      if (!getSelectionEditableElement(selection, node)) {
         event.preventDefault();
       }
     }
@@ -92,7 +102,7 @@ function useInput() {
         return;
       }
       if (event.keyCode === ENTER) {
-        node.contentEditable = false;
+        setContentEditableWrapper(node, false);
         event.preventDefault();
         if (__unstableIsFullySelected()) {
           replaceBlocks(
@@ -103,7 +113,7 @@ function useInput() {
           __unstableSplitSelection();
         }
       } else if (event.keyCode === BACKSPACE || event.keyCode === DELETE) {
-        node.contentEditable = false;
+        setContentEditableWrapper(node, false);
         event.preventDefault();
         if (__unstableIsFullySelected()) {
           removeBlocks(getSelectedBlockClientIds());
@@ -117,7 +127,7 @@ function useInput() {
         // input anything.
         event.key.length === 1 && !(event.metaKey || event.ctrlKey)
       ) {
-        node.contentEditable = false;
+        setContentEditableWrapper(node, false);
         if (__unstableIsSelectionMergeable()) {
           __unstableDeleteSelection(event.keyCode === DELETE);
         } else {
@@ -130,7 +140,7 @@ function useInput() {
       if (!hasMultiSelection()) {
         return;
       }
-      node.contentEditable = false;
+      setContentEditableWrapper(node, false);
       if (__unstableIsSelectionMergeable()) {
         __unstableDeleteSelection();
       } else {

package/build-module/components/writing-flow/use-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-input.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\nimport { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';\nimport {\n\tcreateBlock,\n\tgetDefaultBlockName,\n\thasBlockSupport,\n\tgetBlockTransforms,\n\tfindTransform,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * Handles input for selections across blocks.\n */\nexport default function useInput() {\n\tconst {\n\t\t__unstableIsFullySelected,\n\t\tgetSelectedBlockClientIds,\n\t\tgetSelectedBlockClientId,\n\t\t__unstableIsSelectionMergeable,\n\t\thasMultiSelection,\n\t\tgetBlockName,\n\t\tcanInsertBlockType,\n\t\tgetBlockRootClientId,\n\t\tgetSelectionStart,\n\t\tgetSelectionEnd,\n\t\tgetBlockAttributes,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\treplaceBlocks,\n\t\t__unstableSplitSelection,\n\t\tremoveBlocks,\n\t\t__unstableDeleteSelection,\n\t\t__unstableExpandSelection,\n\t\t__unstableMarkAutomaticChange,\n\t} = useDispatch( blockEditorStore );\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onBeforeInput( event ) {\n\t\t\t// If writing flow is editable, NEVER allow the browser to alter the\n\t\t\t// DOM. This will cause React errors (and the DOM should only be\n\t\t\t// altered in a controlled fashion).\n\t\t\tif ( node.contentEditable === 'true' ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\t\tif ( event.shiftKey || __unstableIsFullySelected() ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\t\t\tconst blockName = getBlockName( clientId );\n\t\t\t\t\tconst selectionStart = getSelectionStart();\n\t\t\t\t\tconst selectionEnd = getSelectionEnd();\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tselectionStart.attributeKey ===\n\t\t\t\t\t\tselectionEnd.attributeKey\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst selectedAttributeValue =\n\t\t\t\t\t\t\tgetBlockAttributes( clientId )[\n\t\t\t\t\t\t\t\tselectionStart.attributeKey\n\t\t\t\t\t\t\t];\n\t\t\t\t\t\tconst transforms = getBlockTransforms( 'from' ).filter(\n\t\t\t\t\t\t\t( { type } ) => type === 'enter'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst transformation = findTransform(\n\t\t\t\t\t\t\ttransforms,\n\t\t\t\t\t\t\t( item ) => {\n\t\t\t\t\t\t\t\treturn item.regExp.test(\n\t\t\t\t\t\t\t\t\tselectedAttributeValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( transformation ) {\n\t\t\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\t\ttransformation.transform( {\n\t\t\t\t\t\t\t\t\tcontent: selectedAttributeValue,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t__unstableMarkAutomaticChange();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t! hasBlockSupport( blockName, 'splitting', false ) &&\n\t\t\t\t\t\t! event.__deprecatedOnSplit\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Ensure template is not locked.\n\t\t\t\t\tif (\n\t\t\t\t\t\tcanInsertBlockType(\n\t\t\t\t\t\t\tgetDefaultBlockName(),\n\t\t\t\t\t\t\tgetBlockRootClientId( clientId )\n\t\t\t\t\t\t) ||\n\t\t\t\t\t\tcanInsertBlockType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tgetBlockRootClientId( clientId )\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\t__unstableSplitSelection();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\tnode.contentEditable = false;\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( __unstableIsFullySelected() ) {\n\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\tgetSelectedBlockClientIds(),\n\t\t\t\t\t\tcreateBlock( getDefaultBlockName() )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t__unstableSplitSelection();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tevent.keyCode === BACKSPACE ||\n\t\t\t\tevent.keyCode === DELETE\n\t\t\t) {\n\t\t\t\tnode.contentEditable = false;\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( __unstableIsFullySelected() ) {\n\t\t\t\t\tremoveBlocks( getSelectedBlockClientIds() );\n\t\t\t\t} else if ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t\t__unstableDeleteSelection( event.keyCode === DELETE );\n\t\t\t\t} else {\n\t\t\t\t\t__unstableExpandSelection();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\t// If key.length is longer than 1, it's a control key that doesn't\n\t\t\t\t// input anything.\n\t\t\t\tevent.key.length === 1 &&\n\t\t\t\t! ( event.metaKey || event.ctrlKey )\n\t\t\t) {\n\t\t\t\tnode.contentEditable = false;\n\t\t\t\tif ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t\t__unstableDeleteSelection( event.keyCode === DELETE );\n\t\t\t\t} else {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// Safari does not stop default behaviour with either\n\t\t\t\t\t// event.preventDefault() or node.contentEditable = false, so\n\t\t\t\t\t// remove the selection to stop browser manipulation.\n\t\t\t\t\tnode.ownerDocument.defaultView\n\t\t\t\t\t\t.getSelection()\n\t\t\t\t\t\t.removeAllRanges();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction onCompositionStart( event ) {\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tnode.contentEditable = false;\n\n\t\t\tif ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t__unstableDeleteSelection();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// Safari does not stop default behaviour with either\n\t\t\t\t// event.preventDefault() or node.contentEditable = false, so\n\t\t\t\t// remove the selection to stop browser manipulation.\n\t\t\t\tnode.ownerDocument.defaultView.getSelection().removeAllRanges();\n\t\t\t}\n\t\t}\n\n\t\tnode.addEventListener( 'beforeinput', onBeforeInput );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\tnode.addEventListener( 'compositionstart', onCompositionStart );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'beforeinput', onBeforeInput );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\tnode.removeEventListener( 'compositionstart', onCompositionStart );\n\t\t};\n\t}, [] );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\nimport { ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';\nimport {\n\tcreateBlock,\n\tgetDefaultBlockName,\n\thasBlockSupport,\n\tgetBlockTransforms,\n\tfindTransform,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\nimport { getSelectionEditableElement } from '../../utils/dom';\n\n/**\n * Handles input for selections across blocks.\n */\nexport default function useInput() {\n\tconst {\n\t\t__unstableIsFullySelected,\n\t\tgetSelectedBlockClientIds,\n\t\tgetSelectedBlockClientId,\n\t\t__unstableIsSelectionMergeable,\n\t\thasMultiSelection,\n\t\tgetBlockName,\n\t\tcanInsertBlockType,\n\t\tgetBlockRootClientId,\n\t\tgetSelectionStart,\n\t\tgetSelectionEnd,\n\t\tgetBlockAttributes,\n\t} = useSelect( blockEditorStore );\n\tconst {\n\t\treplaceBlocks,\n\t\t__unstableSplitSelection,\n\t\tremoveBlocks,\n\t\t__unstableDeleteSelection,\n\t\t__unstableExpandSelection,\n\t\t__unstableMarkAutomaticChange,\n\t} = useDispatch( blockEditorStore );\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onBeforeInput( event ) {\n\t\t\t// If writing flow is editable, never allow the browser to alter\n\t\t\t// the DOM outside of an editable element within a block. This\n\t\t\t// will cause React errors (and the DOM should only be altered in\n\t\t\t// a controlled fashion). The wrapper can be contentEditable with\n\t\t\t// a single selection when the selected block supports\n\t\t\t// `editableRoot`; in that case edits within the block's editable\n\t\t\t// element are handled by its rich text instance.\n\t\t\tif ( node.contentEditable !== 'true' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( hasMultiSelection() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selection = node.ownerDocument.defaultView.getSelection();\n\n\t\t\tif ( ! getSelectionEditableElement( selection, node ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\t\tif ( event.shiftKey || __unstableIsFullySelected() ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst clientId = getSelectedBlockClientId();\n\t\t\t\t\tconst blockName = getBlockName( clientId );\n\t\t\t\t\tconst selectionStart = getSelectionStart();\n\t\t\t\t\tconst selectionEnd = getSelectionEnd();\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tselectionStart.attributeKey ===\n\t\t\t\t\t\tselectionEnd.attributeKey\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst selectedAttributeValue =\n\t\t\t\t\t\t\tgetBlockAttributes( clientId )[\n\t\t\t\t\t\t\t\tselectionStart.attributeKey\n\t\t\t\t\t\t\t];\n\t\t\t\t\t\tconst transforms = getBlockTransforms( 'from' ).filter(\n\t\t\t\t\t\t\t( { type } ) => type === 'enter'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tconst transformation = findTransform(\n\t\t\t\t\t\t\ttransforms,\n\t\t\t\t\t\t\t( item ) => {\n\t\t\t\t\t\t\t\treturn item.regExp.test(\n\t\t\t\t\t\t\t\t\tselectedAttributeValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( transformation ) {\n\t\t\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\t\t\tclientId,\n\t\t\t\t\t\t\t\ttransformation.transform( {\n\t\t\t\t\t\t\t\t\tcontent: selectedAttributeValue,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t__unstableMarkAutomaticChange();\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\t! hasBlockSupport( blockName, 'splitting', false ) &&\n\t\t\t\t\t\t! event.__deprecatedOnSplit\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Ensure template is not locked.\n\t\t\t\t\tif (\n\t\t\t\t\t\tcanInsertBlockType(\n\t\t\t\t\t\t\tgetDefaultBlockName(),\n\t\t\t\t\t\t\tgetBlockRootClientId( clientId )\n\t\t\t\t\t\t) ||\n\t\t\t\t\t\tcanInsertBlockType(\n\t\t\t\t\t\t\tblockName,\n\t\t\t\t\t\t\tgetBlockRootClientId( clientId )\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\t__unstableSplitSelection();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( event.keyCode === ENTER ) {\n\t\t\t\tsetContentEditableWrapper( node, false );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( __unstableIsFullySelected() ) {\n\t\t\t\t\treplaceBlocks(\n\t\t\t\t\t\tgetSelectedBlockClientIds(),\n\t\t\t\t\t\tcreateBlock( getDefaultBlockName() )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\t__unstableSplitSelection();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tevent.keyCode === BACKSPACE ||\n\t\t\t\tevent.keyCode === DELETE\n\t\t\t) {\n\t\t\t\tsetContentEditableWrapper( node, false );\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( __unstableIsFullySelected() ) {\n\t\t\t\t\tremoveBlocks( getSelectedBlockClientIds() );\n\t\t\t\t} else if ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t\t__unstableDeleteSelection( event.keyCode === DELETE );\n\t\t\t\t} else {\n\t\t\t\t\t__unstableExpandSelection();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\t// If key.length is longer than 1, it's a control key that doesn't\n\t\t\t\t// input anything.\n\t\t\t\tevent.key.length === 1 &&\n\t\t\t\t! ( event.metaKey || event.ctrlKey )\n\t\t\t) {\n\t\t\t\tsetContentEditableWrapper( node, false );\n\t\t\t\tif ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t\t__unstableDeleteSelection( event.keyCode === DELETE );\n\t\t\t\t} else {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t// Safari does not stop default behaviour with either\n\t\t\t\t\t// event.preventDefault() or node.contentEditable = false, so\n\t\t\t\t\t// remove the selection to stop browser manipulation.\n\t\t\t\t\tnode.ownerDocument.defaultView\n\t\t\t\t\t\t.getSelection()\n\t\t\t\t\t\t.removeAllRanges();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction onCompositionStart( event ) {\n\t\t\tif ( ! hasMultiSelection() ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetContentEditableWrapper( node, false );\n\n\t\t\tif ( __unstableIsSelectionMergeable() ) {\n\t\t\t\t__unstableDeleteSelection();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\t// Safari does not stop default behaviour with either\n\t\t\t\t// event.preventDefault() or node.contentEditable = false, so\n\t\t\t\t// remove the selection to stop browser manipulation.\n\t\t\t\tnode.ownerDocument.defaultView.getSelection().removeAllRanges();\n\t\t\t}\n\t\t}\n\n\t\tnode.addEventListener( 'beforeinput', onBeforeInput );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\tnode.addEventListener( 'compositionstart', onCompositionStart );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'beforeinput', onBeforeInput );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\tnode.removeEventListener( 'compositionstart', onCompositionStart );\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/writing-flow/use-multi-selection.mjs

@@ -2,6 +2,7 @@
 import { useRefEffect } from "@wordpress/compose";
 import { useSelect } from "@wordpress/data";
 import { store as blockEditorStore } from "../../store/index.mjs";
+import { setContentEditableWrapper } from "./utils.mjs";
 function selector(select) {
   const {
     isMultiSelecting,
@@ -46,8 +47,7 @@ function useMultiSelection() {
       if (!isFullSelection) {
         return;
       }
-      node.contentEditable = true;
-      node.focus();
+      setContentEditableWrapper(node, true);
       defaultView.getSelection().removeAllRanges();
     },
     [

package/build-module/components/writing-flow/use-multi-selection.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-multi-selection.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nfunction selector( select ) {\n\tconst {\n\t\tisMultiSelecting,\n\t\tgetMultiSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tgetSelectedBlockClientId,\n\t\tgetSelectedBlocksInitialCaretPosition,\n\t\t__unstableIsFullySelected,\n\t} = select( blockEditorStore );\n\n\treturn {\n\t\tisMultiSelecting: isMultiSelecting(),\n\t\tmultiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),\n\t\thasMultiSelection: hasMultiSelection(),\n\t\tselectedBlockClientId: getSelectedBlockClientId(),\n\t\tinitialPosition: getSelectedBlocksInitialCaretPosition(),\n\t\tisFullSelection: __unstableIsFullySelected(),\n\t};\n}\n\nexport default function useMultiSelection() {\n\tconst {\n\t\tinitialPosition,\n\t\tisMultiSelecting,\n\t\tmultiSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tselectedBlockClientId,\n\t\tisFullSelection,\n\t} = useSelect( selector, [] );\n\n\t/**\n\t * When the component updates, and there is multi selection, we need to\n\t * select the entire block contents.\n\t */\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\t// Allow initialPosition to bypass focus behavior. This is useful\n\t\t\t// for the list view or other areas where we don't want to transfer\n\t\t\t// focus to the editor canvas.\n\t\t\tif ( initialPosition === undefined || initialPosition === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! hasMultiSelection || isMultiSelecting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { length } = multiSelectedBlockClientIds;\n\n\t\t\tif ( length < 2 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! isFullSelection ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Allow cross contentEditable selection by temporarily making\n\t\t\t// all content editable. We can't rely on using the store and\n\t\t\t// React because re-rending happens too slowly. We need to be\n\t\t\t// able to select across instances immediately.\n\t\t\tnode.contentEditable = true;\n\n\t\t\t// For some browsers, like Safari, it is important that focus\n\t\t\t// happens BEFORE selection removal.\n\t\t\tnode.focus();\n\n\t\t\tdefaultView.getSelection().removeAllRanges();\n\t\t},\n\t\t[\n\t\t\thasMultiSelection,\n\t\t\tisMultiSelecting,\n\t\t\tmultiSelectedBlockClientIds,\n\t\t\tselectedBlockClientId,\n\t\t\tinitialPosition,\n\t\t\tisFullSelection,\n\t\t]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAE1C,SAAS,SAAU,QAAS;AAC3B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,OAAQ,gBAAiB;AAE7B,SAAO;AAAA,IACN,kBAAkB,iBAAiB;AAAA,IACnC,6BAA6B,+BAA+B;AAAA,IAC5D,mBAAmB,kBAAkB;AAAA,IACrC,uBAAuB,yBAAyB;AAAA,IAChD,iBAAiB,sCAAsC;AAAA,IACvD,iBAAiB,0BAA0B;AAAA,EAC5C;AACD;AAEe,SAAR,oBAAqC;AAC3C,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,UAAU,CAAC,CAAE;AAM5B,SAAO;AAAA,IACN,CAAE,SAAU;AACX,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,EAAE,YAAY,IAAI;AAKxB,UAAK,oBAAoB,UAAa,oBAAoB,MAAO;AAChE;AAAA,MACD;AAEA,UAAK,CAAE,qBAAqB,kBAAmB;AAC9C;AAAA,MACD;AAEA,YAAM,EAAE,OAAO,IAAI;AAEnB,UAAK,SAAS,GAAI;AACjB;AAAA,MACD;AAEA,UAAK,CAAE,iBAAkB;AACxB;AAAA,MACD;AAMA,WAAK,kBAAkB;AAIvB,WAAK,MAAM;AAEX,kBAAY,aAAa,EAAE,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\n\nfunction selector( select ) {\n\tconst {\n\t\tisMultiSelecting,\n\t\tgetMultiSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tgetSelectedBlockClientId,\n\t\tgetSelectedBlocksInitialCaretPosition,\n\t\t__unstableIsFullySelected,\n\t} = select( blockEditorStore );\n\n\treturn {\n\t\tisMultiSelecting: isMultiSelecting(),\n\t\tmultiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),\n\t\thasMultiSelection: hasMultiSelection(),\n\t\tselectedBlockClientId: getSelectedBlockClientId(),\n\t\tinitialPosition: getSelectedBlocksInitialCaretPosition(),\n\t\tisFullSelection: __unstableIsFullySelected(),\n\t};\n}\n\nexport default function useMultiSelection() {\n\tconst {\n\t\tinitialPosition,\n\t\tisMultiSelecting,\n\t\tmultiSelectedBlockClientIds,\n\t\thasMultiSelection,\n\t\tselectedBlockClientId,\n\t\tisFullSelection,\n\t} = useSelect( selector, [] );\n\n\t/**\n\t * When the component updates, and there is multi selection, we need to\n\t * select the entire block contents.\n\t */\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\t// Allow initialPosition to bypass focus behavior. This is useful\n\t\t\t// for the list view or other areas where we don't want to transfer\n\t\t\t// focus to the editor canvas.\n\t\t\tif ( initialPosition === undefined || initialPosition === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! hasMultiSelection || isMultiSelecting ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { length } = multiSelectedBlockClientIds;\n\n\t\t\tif ( length < 2 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! isFullSelection ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Allow cross contentEditable selection by temporarily making\n\t\t\t// all content editable. We can't rely on using the store and\n\t\t\t// React because re-rending happens too slowly. We need to be\n\t\t\t// able to select across instances immediately.\n\t\t\t// For some browsers, like Safari, it is important that focus\n\t\t\t// happens BEFORE selection removal.\n\t\t\tsetContentEditableWrapper( node, true );\n\n\t\t\tdefaultView.getSelection().removeAllRanges();\n\t\t},\n\t\t[\n\t\t\thasMultiSelection,\n\t\t\tisMultiSelecting,\n\t\t\tmultiSelectedBlockClientIds,\n\t\t\tselectedBlockClientId,\n\t\t\tinitialPosition,\n\t\t\tisFullSelection,\n\t\t]\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAK1B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,iCAAiC;AAE1C,SAAS,SAAU,QAAS;AAC3B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,OAAQ,gBAAiB;AAE7B,SAAO;AAAA,IACN,kBAAkB,iBAAiB;AAAA,IACnC,6BAA6B,+BAA+B;AAAA,IAC5D,mBAAmB,kBAAkB;AAAA,IACrC,uBAAuB,yBAAyB;AAAA,IAChD,iBAAiB,sCAAsC;AAAA,IACvD,iBAAiB,0BAA0B;AAAA,EAC5C;AACD;AAEe,SAAR,oBAAqC;AAC3C,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,UAAU,CAAC,CAAE;AAM5B,SAAO;AAAA,IACN,CAAE,SAAU;AACX,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,EAAE,YAAY,IAAI;AAKxB,UAAK,oBAAoB,UAAa,oBAAoB,MAAO;AAChE;AAAA,MACD;AAEA,UAAK,CAAE,qBAAqB,kBAAmB;AAC9C;AAAA,MACD;AAEA,YAAM,EAAE,OAAO,IAAI;AAEnB,UAAK,SAAS,GAAI;AACjB;AAAA,MACD;AAEA,UAAK,CAAE,iBAAkB;AACxB;AAAA,MACD;AAQA,gCAA2B,MAAM,IAAK;AAEtC,kBAAY,aAAa,EAAE,gBAAgB;AAAA,IAC5C;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/components/writing-flow/use-select-all.mjs

@@ -4,7 +4,11 @@ import { useSelect, useDispatch } from "@wordpress/data";
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from "@wordpress/keyboard-shortcuts";
 import { useRefEffect } from "@wordpress/compose";
 import { store as blockEditorStore } from "../../store/index.mjs";
-import { isInsideRootBlock, getBlockClientId } from "../../utils/dom.mjs";
+import {
+  isInsideRootBlock,
+  getBlockClientId,
+  getSelectionEditableElement
+} from "../../utils/dom.mjs";
 function useSelectAll() {
   const { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } = useSelect(blockEditorStore);
   const { multiSelect, selectBlock } = useDispatch(blockEditorStore);
@@ -15,11 +19,23 @@ function useSelectAll() {
         return;
       }
       const selectedClientIds = getSelectedBlockClientIds();
-      if (selectedClientIds.length < 2 && !isEntirelySelected(event.target)) {
+      const { ownerDocument } = node;
+      const selection = ownerDocument.defaultView.getSelection();
+      const editable = event.target === node && getSelectionEditableElement(selection, node) || event.target;
+      if (selectedClientIds.length < 2 && !isEntirelySelected(editable)) {
+        if (event.target === node && editable !== node) {
+          event.preventDefault();
+          const range = ownerDocument.createRange();
+          range.selectNodeContents(editable);
+          selection.removeAllRanges();
+          selection.addRange(range);
+          ownerDocument.dispatchEvent(
+            new Event("selectionchange")
+          );
+        }
         return;
       }
       event.preventDefault();
-      const { ownerDocument } = event.target;
       const [firstSelectedClientId] = selectedClientIds;
       const activeClientId = getBlockClientId(
         ownerDocument.activeElement

package/build-module/components/writing-flow/use-select-all.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-select-all.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { isEntirelySelected } from '@wordpress/dom';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { isInsideRootBlock, getBlockClientId } from '../../utils/dom';\n\nexport default function useSelectAll() {\n\tconst { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst { multiSelect, selectBlock } = useDispatch( blockEditorStore );\n\tconst isMatch = useShortcutEventMatch();\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( ! isMatch( 'core/block-editor/select-all', event ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selectedClientIds = getSelectedBlockClientIds();\n\n\t\t\tif (\n\t\t\t\tselectedClientIds.length < 2 &&\n\t\t\t\t! isEntirelySelected( event.target )\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\n\t\t\tconst { ownerDocument } = event.target;\n\t\t\tconst [ firstSelectedClientId ] = selectedClientIds;\n\t\t\tconst activeClientId = getBlockClientId(\n\t\t\t\townerDocument.activeElement\n\t\t\t);\n\n\t\t\t// Handle the case when an appender is selected.\n\t\t\tif (\n\t\t\t\tactiveClientId &&\n\t\t\t\tactiveClientId !== firstSelectedClientId &&\n\t\t\t\t! isInsideRootBlock(\n\t\t\t\t\townerDocument.getElementById(\n\t\t\t\t\t\t'block-' + firstSelectedClientId\n\t\t\t\t\t),\n\t\t\t\t\townerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tselectBlock( activeClientId );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst rootClientId = getBlockRootClientId( firstSelectedClientId );\n\t\t\tconst blockClientIds = getBlockOrder( rootClientId );\n\n\t\t\t// If we have selected all sibling nested blocks, try selecting up a\n\t\t\t// level. See: https://github.com/WordPress/gutenberg/pull/31859/\n\t\t\tif ( selectedClientIds.length === blockClientIds.length ) {\n\t\t\t\tif ( rootClientId ) {\n\t\t\t\t\tnode.ownerDocument.defaultView\n\t\t\t\t\t\t.getSelection()\n\t\t\t\t\t\t.removeAllRanges();\n\t\t\t\t\tselectBlock( rootClientId );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tmultiSelect(\n\t\t\t\tblockClientIds[ 0 ],\n\t\t\t\tblockClientIds[ blockClientIds.length - 1 ]\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n"],
-  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,WAAW,mBAAmB;AACvC,SAAS,mCAAmC,6BAA6B;AACzE,SAAS,oBAAoB;AAK7B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB,wBAAwB;AAErC,SAAR,eAAgC;AACtC,QAAM,EAAE,eAAe,2BAA2B,qBAAqB,IACtE,UAAW,gBAAiB;AAC7B,QAAM,EAAE,aAAa,YAAY,IAAI,YAAa,gBAAiB;AACnE,QAAM,UAAU,sBAAsB;AAEtC,SAAO,aAAc,CAAE,SAAU;AAChC,aAAS,UAAW,OAAQ;AAC3B,UAAK,CAAE,QAAS,gCAAgC,KAAM,GAAI;AACzD;AAAA,MACD;AAEA,YAAM,oBAAoB,0BAA0B;AAEpD,UACC,kBAAkB,SAAS,KAC3B,CAAE,mBAAoB,MAAM,MAAO,GAClC;AACD;AAAA,MACD;AAEA,YAAM,eAAe;AAErB,YAAM,EAAE,cAAc,IAAI,MAAM;AAChC,YAAM,CAAE,qBAAsB,IAAI;AAClC,YAAM,iBAAiB;AAAA,QACtB,cAAc;AAAA,MACf;AAGA,UACC,kBACA,mBAAmB,yBACnB,CAAE;AAAA,QACD,cAAc;AAAA,UACb,WAAW;AAAA,QACZ;AAAA,QACA,cAAc;AAAA,MACf,GACC;AACD,oBAAa,cAAe;AAC5B;AAAA,MACD;AAEA,YAAM,eAAe,qBAAsB,qBAAsB;AACjE,YAAM,iBAAiB,cAAe,YAAa;AAInD,UAAK,kBAAkB,WAAW,eAAe,QAAS;AACzD,YAAK,cAAe;AACnB,eAAK,cAAc,YACjB,aAAa,EACb,gBAAgB;AAClB,sBAAa,YAAa;AAAA,QAC3B;AACA;AAAA,MACD;AAEA;AAAA,QACC,eAAgB,CAAE;AAAA,QAClB,eAAgB,eAAe,SAAS,CAAE;AAAA,MAC3C;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAE5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { isEntirelySelected } from '@wordpress/dom';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport {\n\tisInsideRootBlock,\n\tgetBlockClientId,\n\tgetSelectionEditableElement,\n} from '../../utils/dom';\n\nexport default function useSelectAll() {\n\tconst { getBlockOrder, getSelectedBlockClientIds, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\n\tconst { multiSelect, selectBlock } = useDispatch( blockEditorStore );\n\tconst isMatch = useShortcutEventMatch();\n\n\treturn useRefEffect( ( node ) => {\n\t\tfunction onKeyDown( event ) {\n\t\t\tif ( ! isMatch( 'core/block-editor/select-all', event ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst selectedClientIds = getSelectedBlockClientIds();\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst selection = ownerDocument.defaultView.getSelection();\n\t\t\t// When the wrapper is contentEditable and holds focus (the\n\t\t\t// selected block supports `editableRoot`), the event targets the\n\t\t\t// wrapper; resolve the editable element containing the selection.\n\t\t\tconst editable =\n\t\t\t\t( event.target === node &&\n\t\t\t\t\tgetSelectionEditableElement( selection, node ) ) ||\n\t\t\t\tevent.target;\n\n\t\t\tif (\n\t\t\t\tselectedClientIds.length < 2 &&\n\t\t\t\t! isEntirelySelected( editable )\n\t\t\t) {\n\t\t\t\t// While the wrapper is contentEditable, the browser default\n\t\t\t\t// would select the entire canvas. Select the contents of the\n\t\t\t\t// editable element instead, like the default does when the\n\t\t\t\t// element itself holds focus.\n\t\t\t\tif ( event.target === node && editable !== node ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst range = ownerDocument.createRange();\n\t\t\t\t\trange.selectNodeContents( editable );\n\t\t\t\t\tselection.removeAllRanges();\n\t\t\t\t\tselection.addRange( range );\n\t\t\t\t\t// The native `selectionchange` event is asynchronous;\n\t\t\t\t\t// dispatch it synchronously so that listeners depending\n\t\t\t\t\t// on it (e.g. the rich text internal record sync) run\n\t\t\t\t\t// before any event following this one.\n\t\t\t\t\townerDocument.dispatchEvent(\n\t\t\t\t\t\tnew Event( 'selectionchange' )\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tevent.preventDefault();\n\n\t\t\tconst [ firstSelectedClientId ] = selectedClientIds;\n\t\t\tconst activeClientId = getBlockClientId(\n\t\t\t\townerDocument.activeElement\n\t\t\t);\n\n\t\t\t// Handle the case when an appender is selected.\n\t\t\tif (\n\t\t\t\tactiveClientId &&\n\t\t\t\tactiveClientId !== firstSelectedClientId &&\n\t\t\t\t! isInsideRootBlock(\n\t\t\t\t\townerDocument.getElementById(\n\t\t\t\t\t\t'block-' + firstSelectedClientId\n\t\t\t\t\t),\n\t\t\t\t\townerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tselectBlock( activeClientId );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst rootClientId = getBlockRootClientId( firstSelectedClientId );\n\t\t\tconst blockClientIds = getBlockOrder( rootClientId );\n\n\t\t\t// If we have selected all sibling nested blocks, try selecting up a\n\t\t\t// level. See: https://github.com/WordPress/gutenberg/pull/31859/\n\t\t\tif ( selectedClientIds.length === blockClientIds.length ) {\n\t\t\t\tif ( rootClientId ) {\n\t\t\t\t\tnode.ownerDocument.defaultView\n\t\t\t\t\t\t.getSelection()\n\t\t\t\t\t\t.removeAllRanges();\n\t\t\t\t\tselectBlock( rootClientId );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tmultiSelect(\n\t\t\t\tblockClientIds[ 0 ],\n\t\t\t\tblockClientIds[ blockClientIds.length - 1 ]\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": ";AAGA,SAAS,0BAA0B;AACnC,SAAS,WAAW,mBAAmB;AACvC,SAAS,mCAAmC,6BAA6B;AACzE,SAAS,oBAAoB;AAK7B,SAAS,SAAS,wBAAwB;AAC1C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEQ,SAAR,eAAgC;AACtC,QAAM,EAAE,eAAe,2BAA2B,qBAAqB,IACtE,UAAW,gBAAiB;AAC7B,QAAM,EAAE,aAAa,YAAY,IAAI,YAAa,gBAAiB;AACnE,QAAM,UAAU,sBAAsB;AAEtC,SAAO,aAAc,CAAE,SAAU;AAChC,aAAS,UAAW,OAAQ;AAC3B,UAAK,CAAE,QAAS,gCAAgC,KAAM,GAAI;AACzD;AAAA,MACD;AAEA,YAAM,oBAAoB,0BAA0B;AACpD,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,YAAY,cAAc,YAAY,aAAa;AAIzD,YAAM,WACH,MAAM,WAAW,QAClB,4BAA6B,WAAW,IAAK,KAC9C,MAAM;AAEP,UACC,kBAAkB,SAAS,KAC3B,CAAE,mBAAoB,QAAS,GAC9B;AAKD,YAAK,MAAM,WAAW,QAAQ,aAAa,MAAO;AACjD,gBAAM,eAAe;AACrB,gBAAM,QAAQ,cAAc,YAAY;AACxC,gBAAM,mBAAoB,QAAS;AACnC,oBAAU,gBAAgB;AAC1B,oBAAU,SAAU,KAAM;AAK1B,wBAAc;AAAA,YACb,IAAI,MAAO,iBAAkB;AAAA,UAC9B;AAAA,QACD;AACA;AAAA,MACD;AAEA,YAAM,eAAe;AAErB,YAAM,CAAE,qBAAsB,IAAI;AAClC,YAAM,iBAAiB;AAAA,QACtB,cAAc;AAAA,MACf;AAGA,UACC,kBACA,mBAAmB,yBACnB,CAAE;AAAA,QACD,cAAc;AAAA,UACb,WAAW;AAAA,QACZ;AAAA,QACA,cAAc;AAAA,MACf,GACC;AACD,oBAAa,cAAe;AAC5B;AAAA,MACD;AAEA,YAAM,eAAe,qBAAsB,qBAAsB;AACjE,YAAM,iBAAiB,cAAe,YAAa;AAInD,UAAK,kBAAkB,WAAW,eAAe,QAAS;AACzD,YAAK,cAAe;AACnB,eAAK,cAAc,YACjB,aAAa,EACb,gBAAgB;AAClB,sBAAa,YAAa;AAAA,QAC3B;AACA;AAAA,MACD;AAEA;AAAA,QACC,eAAgB,CAAE;AAAA,QAClB,eAAgB,eAAe,SAAS,CAAE;AAAA,MAC3C;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAE5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
   "names": []
 }

package/build-module/components/writing-flow/use-selection-observer.mjs

@@ -1,10 +1,16 @@
 // packages/block-editor/src/components/writing-flow/use-selection-observer.js
 import { useSelect, useDispatch } from "@wordpress/data";
 import { useRefEffect } from "@wordpress/compose";
-import { create } from "@wordpress/rich-text";
+import {
+  create,
+  privateApis as richTextPrivateApis
+} from "@wordpress/rich-text";
 import { isSelectionForward } from "@wordpress/dom";
 import { store as blockEditorStore } from "../../store/index.mjs";
 import { getBlockClientId } from "../../utils/dom.mjs";
+import { setContentEditableWrapper } from "./utils.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+var { ownsSelection } = unlock(richTextPrivateApis);
 function extractSelectionStartNode(selection) {
   const { anchorNode, anchorOffset } = selection;
   if (anchorNode.nodeType === anchorNode.TEXT_NODE) {
@@ -15,7 +21,7 @@ function extractSelectionStartNode(selection) {
   }
   return anchorNode.childNodes[anchorOffset - 1];
 }
-function extractSelectionEndNode(selection) {
+function extractSelectionEndNode(selection, isTripleClick) {
   const { focusNode, focusOffset } = selection;
   if (focusNode.nodeType === focusNode.TEXT_NODE) {
     return focusNode;
@@ -23,7 +29,7 @@ function extractSelectionEndNode(selection) {
   if (focusOffset === focusNode.childNodes.length) {
     return focusNode;
   }
-  if (focusOffset === 0 && isSelectionForward(selection)) {
+  if (focusOffset === 0 && isSelectionForward(selection) && isTripleClick) {
     return focusNode.previousSibling ?? focusNode.parentElement;
   }
   return focusNode.childNodes[focusOffset];
@@ -35,37 +41,71 @@ function findDepth(a, b) {
   }
   return depth;
 }
-function setContentEditableWrapper(node, value) {
-  if (node.contentEditable !== String(value)) {
-    node.contentEditable = value;
-    if (value) {
-      node.focus();
-    }
-  }
-}
 function getRichTextElement(node) {
   const element = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;
   return element?.closest("[data-wp-block-attribute-key]");
 }
 function useSelectionObserver() {
-  const { multiSelect, selectBlock, selectionChange } = useDispatch(blockEditorStore);
-  const { getBlockParents, getBlockSelectionStart, isMultiSelecting } = useSelect(blockEditorStore);
+  const {
+    multiSelect,
+    selectBlock,
+    selectionChange,
+    startMultiSelect,
+    stopMultiSelect
+  } = useDispatch(blockEditorStore);
+  const {
+    getBlockParents,
+    getBlockSelectionStart,
+    isMultiSelecting,
+    getSelectionStart,
+    getSelectionEnd,
+    getSelectedBlockClientId,
+    canHostEditableRoot
+  } = unlock(useSelect(blockEditorStore));
   return useRefEffect(
     (node) => {
       const { ownerDocument } = node;
       const { defaultView } = ownerDocument;
+      let isTripleClick = false;
+      function onMouseDown(event) {
+        isTripleClick = event.detail === 3;
+        if (event.shiftKey) {
+          startMultiSelect();
+        }
+      }
+      function onKeyDown() {
+        isTripleClick = false;
+      }
       function onSelectionChange(event) {
         const selection = defaultView.getSelection();
         if (!selection.rangeCount) {
           return;
         }
         const startNode = extractSelectionStartNode(selection);
-        const endNode = extractSelectionEndNode(selection);
+        const endNode = extractSelectionEndNode(
+          selection,
+          isTripleClick
+        );
         if (!node.contains(startNode) || !node.contains(endNode)) {
           return;
         }
         const isClickShift = event.shiftKey && event.type === "mouseup";
         if (selection.isCollapsed && !isClickShift) {
+          const collapsedClientId = getBlockClientId(startNode);
+          if (!isMultiSelecting() && collapsedClientId && // Only keep the wrapper editable when the collapsed
+          // selection is in the block that is actually selected.
+          // A stale native selection may linger in a previously
+          // selected editable root block (e.g. Firefox does not
+          // always move it), which must not re-enable the wrapper
+          // after another block has been selected.
+          collapsedClientId === getSelectedBlockClientId() && canHostEditableRoot(collapsedClientId)) {
+            setContentEditableWrapper(node, true);
+            const { activeElement } = ownerDocument;
+            if (activeElement !== node && activeElement?.isContentEditable && node.contains(activeElement) && getBlockClientId(activeElement) === collapsedClientId) {
+              node.focus();
+            }
+            return;
+          }
           if (node.contentEditable === "true" && !isMultiSelecting()) {
             setContentEditableWrapper(node, false);
             let element = startNode.nodeType === startNode.ELEMENT_NODE ? startNode : startNode.parentElement;
@@ -102,14 +142,20 @@ function useSelectionObserver() {
         if (isSingularSelection) {
           if (!isMultiSelecting()) {
             const richTextElement = !selection.isCollapsed && (getRichTextElement(startNode) || getRichTextElement(endNode));
-            if (richTextElement && ownerDocument.activeElement !== richTextElement) {
+            if (richTextElement && // The rich text instance syncs the selection
+            // itself when its element is editable and owns the
+            // selection (also through a focused editing host).
+            // It may be temporarily non-editable while a drag
+            // that started outside it is in progress (see
+            // rich-text's preventFocusCapture).
+            (richTextElement.contentEditable !== "true" || ownerDocument.activeElement !== richTextElement && !ownsSelection(richTextElement))) {
               const range = selection.getRangeAt(0);
               const richTextData = create({
                 element: richTextElement,
                 range,
                 __unstableIsEditableTree: true
               });
-              selectionChange({
+              const selectionUpdate = {
                 start: {
                   clientId: startClientId,
                   attributeKey: richTextElement.dataset.wpBlockAttributeKey,
@@ -118,9 +164,22 @@ function useSelectionObserver() {
                 end: {
                   clientId: startClientId,
                   attributeKey: richTextElement.dataset.wpBlockAttributeKey,
-                  offset: richTextData.end
+                  // Clamp the end offset to the element. A
+                  // forward selection can overshoot past the
+                  // rich text (e.g. a triple click extends
+                  // into the next block at offset 0), leaving
+                  // `end` undefined; that means the selection
+                  // reaches through the end of this element's
+                  // content.
+                  offset: richTextData.end ?? richTextData.text.length
                 }
-              });
+              };
+              const { start, end } = selectionUpdate;
+              const selectionStart = getSelectionStart();
+              const selectionEnd = getSelectionEnd();
+              if (selectionStart.clientId !== start.clientId || selectionEnd.clientId !== end.clientId || selectionStart.attributeKey !== start.attributeKey || selectionStart.offset !== start.offset || selectionEnd.offset !== end.offset) {
+                selectionChange(selectionUpdate);
+              }
             } else {
               selectBlock(startClientId);
             }
@@ -137,7 +196,8 @@ function useSelectionObserver() {
             endClientId
           ];
           const depth = findDepth(startPath, endPath);
-          if (startPath[depth] !== startClientId || endPath[depth] !== endClientId) {
+          const isAncestorDescendant = depth >= startPath.length || depth >= endPath.length;
+          if (!isAncestorDescendant && (startPath[depth] !== startClientId || endPath[depth] !== endClientId)) {
             multiSelect(startPath[depth], endPath[depth]);
             return;
           }
@@ -174,17 +234,70 @@ function useSelectionObserver() {
           }
         }
       }
+      function ensureMultiBlockSelectionSync(event) {
+        const selection = defaultView.getSelection();
+        if (!selection.rangeCount || selection.isCollapsed) {
+          return;
+        }
+        const startClientId = getBlockClientId(
+          extractSelectionStartNode(selection)
+        );
+        const endClientId = getBlockClientId(
+          extractSelectionEndNode(selection, isTripleClick)
+        );
+        if (startClientId !== endClientId) {
+          onSelectionChange(event);
+        }
+      }
       ownerDocument.addEventListener(
         "selectionchange",
         onSelectionChange
       );
-      defaultView.addEventListener("mouseup", onSelectionChange);
+      function onMouseUp(event) {
+        onSelectionChange(event);
+        stopMultiSelect();
+      }
+      defaultView.addEventListener("mouseup", onMouseUp);
+      node.addEventListener("mousedown", onMouseDown);
+      node.addEventListener("keydown", onKeyDown);
+      ownerDocument.addEventListener(
+        "copy",
+        ensureMultiBlockSelectionSync,
+        true
+      );
+      ownerDocument.addEventListener(
+        "cut",
+        ensureMultiBlockSelectionSync,
+        true
+      );
+      ownerDocument.addEventListener(
+        "paste",
+        ensureMultiBlockSelectionSync,
+        true
+      );
       return () => {
         ownerDocument.removeEventListener(
           "selectionchange",
           onSelectionChange
         );
-        defaultView.removeEventListener("mouseup", onSelectionChange);
+        defaultView.removeEventListener("mouseup", onMouseUp);
+        node.removeEventListener("mousedown", onMouseDown);
+        node.removeEventListener("keydown", onKeyDown);
+        ownerDocument.removeEventListener(
+          "copy",
+          ensureMultiBlockSelectionSync,
+          true
+        );
+        ownerDocument.removeEventListener(
+          "cut",
+          ensureMultiBlockSelectionSync,
+          true
+        );
+        ownerDocument.removeEventListener(
+          "paste",
+          ensureMultiBlockSelectionSync,
+          true
+        );
       };
     },
     [multiSelect, selectBlock, selectionChange, getBlockParents]