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

package/build-module/components/writing-flow/use-editable-root-event-handlers.mjs

@@ -0,0 +1,154 @@
+// packages/block-editor/src/components/writing-flow/use-editable-root-event-handlers.js
+import { useSelect } from "@wordpress/data";
+import { useRefEffect } from "@wordpress/compose";
+import { useContext } from "@wordpress/element";
+import { store as blockEditorStore } from "../../store/index.mjs";
+import { getBlockClientId, getSelectionEditableElement } from "../../utils/dom.mjs";
+import { BlockRefs } from "../provider/block-refs-provider.mjs";
+var SUPPORTED_EVENTS = {
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+  onBeforeInput: "beforeinput",
+  onInput: "input",
+  onCompositionStart: "compositionstart",
+  onCompositionUpdate: "compositionupdate",
+  onCompositionEnd: "compositionend"
+};
+var EVENT_TYPES = Object.values(SUPPORTED_EVENTS);
+function getEventHandlers(props) {
+  let handlers;
+  for (const name in SUPPORTED_EVENTS) {
+    if (typeof props[name] === "function") {
+      handlers = handlers || {};
+      handlers[SUPPORTED_EVENTS[name]] = props[name];
+    }
+  }
+  return handlers;
+}
+var EVENT_INTERFACE = [
+  "eventPhase",
+  "bubbles",
+  "cancelable",
+  "timeStamp",
+  "defaultPrevented",
+  "isTrusted"
+];
+var KEYBOARD_EVENT_INTERFACE = [
+  ...EVENT_INTERFACE,
+  "view",
+  "detail",
+  "key",
+  "code",
+  "location",
+  "ctrlKey",
+  "shiftKey",
+  "altKey",
+  "metaKey",
+  "repeat",
+  "locale",
+  "getModifierState",
+  "charCode",
+  "keyCode",
+  "which"
+];
+var INPUT_EVENT_INTERFACE = [...EVENT_INTERFACE, "data"];
+var EVENT_INTERFACES = {
+  keydown: KEYBOARD_EVENT_INTERFACE,
+  keyup: KEYBOARD_EVENT_INTERFACE,
+  beforeinput: INPUT_EVENT_INTERFACE,
+  input: INPUT_EVENT_INTERFACE,
+  compositionstart: INPUT_EVENT_INTERFACE,
+  compositionupdate: INPUT_EVENT_INTERFACE,
+  compositionend: INPUT_EVENT_INTERFACE
+};
+function createBlockSyntheticEvent(nativeEvent, target) {
+  let propagationStopped = false;
+  const syntheticEvent = {
+    nativeEvent,
+    type: nativeEvent.type,
+    target,
+    currentTarget: null,
+    preventDefault() {
+      nativeEvent.preventDefault();
+      syntheticEvent.defaultPrevented = true;
+    },
+    isDefaultPrevented() {
+      return syntheticEvent.defaultPrevented;
+    },
+    stopPropagation() {
+      nativeEvent.stopPropagation();
+      propagationStopped = true;
+    },
+    isPropagationStopped() {
+      return propagationStopped;
+    },
+    // The modern event system doesn't pool, so persistence is a no-op.
+    persist() {
+    },
+    isPersistent() {
+      return true;
+    }
+  };
+  for (const property of EVENT_INTERFACES[nativeEvent.type]) {
+    const value = nativeEvent[property];
+    syntheticEvent[property] = typeof value === "function" ? value.bind(nativeEvent) : value;
+  }
+  return syntheticEvent;
+}
+function useEditableRootEventHandlers() {
+  const { hasMultiSelection, getBlockParents } = useSelect(blockEditorStore);
+  const { refsMap, eventHandlers } = useContext(BlockRefs);
+  return useRefEffect(
+    (node) => {
+      function onEvent(event) {
+        if (!eventHandlers.size || event.target !== node || !event.isTrusted || node.contentEditable !== "true" || hasMultiSelection()) {
+          return;
+        }
+        const selection = node.ownerDocument.defaultView.getSelection();
+        if (!selection.rangeCount) {
+          return;
+        }
+        const editable = getSelectionEditableElement(selection, node);
+        const clientId = getBlockClientId(editable);
+        if (!clientId) {
+          return;
+        }
+        const clientIds = [
+          clientId,
+          ...getBlockParents(clientId, true)
+        ];
+        let syntheticEvent;
+        for (const ancestorClientId of clientIds) {
+          const handler = eventHandlers.get(ancestorClientId)?.current?.[event.type];
+          const element = handler && refsMap.get(ancestorClientId);
+          if (!element) {
+            continue;
+          }
+          if (!syntheticEvent) {
+            syntheticEvent = createBlockSyntheticEvent(
+              event,
+              editable
+            );
+          }
+          syntheticEvent.currentTarget = element;
+          handler(syntheticEvent);
+          if (syntheticEvent.isPropagationStopped()) {
+            break;
+          }
+        }
+      }
+      const root = node.ownerDocument.documentElement;
+      const unsubscribers = EVENT_TYPES.map((type) => {
+        root.addEventListener(type, onEvent);
+        return () => root.removeEventListener(type, onEvent);
+      });
+      return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+    },
+    [hasMultiSelection, getBlockParents, refsMap, eventHandlers]
+  );
+}
+export {
+  useEditableRootEventHandlers as default,
+  getEventHandlers
+};
+//# sourceMappingURL=use-editable-root-event-handlers.mjs.map

package/build-module/components/writing-flow/use-editable-root-event-handlers.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/writing-flow/use-editable-root-event-handlers.js"],
+  "sourcesContent": ["import { useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\nimport { useContext } from '@wordpress/element';\nimport { store as blockEditorStore } from '../../store';\nimport { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';\nimport { BlockRefs } from '../provider/block-refs-provider';\n\n// The React `on*` props the host bridges, mapped to their DOM event type. Only\n// editing events are redirected under `editableRoot` (the wrapper becomes the\n// editing host, so keyboard, input and composition events target it instead of\n// the block); pointer and other events still reach the block and need no\n// bridging. React prop names don't map to DOM types by lowercasing in general\n// (onChange is `input`, onDoubleClick is `dblclick`), so the mapping is\n// explicit, which also locks the bridged surface to events React actually fires.\nconst SUPPORTED_EVENTS = {\n\tonKeyDown: 'keydown',\n\tonKeyUp: 'keyup',\n\tonBeforeInput: 'beforeinput',\n\tonInput: 'input',\n\tonCompositionStart: 'compositionstart',\n\tonCompositionUpdate: 'compositionupdate',\n\tonCompositionEnd: 'compositionend',\n};\n\n// The DOM event types the host listens for. Fixed, so the host attaches these\n// listeners once rather than tracking which types are in use.\nconst EVENT_TYPES = Object.values( SUPPORTED_EVENTS );\n\n/**\n * Collects the supported `on*` event handlers from a set of props, e.g. a\n * block's merged `wrapperProps`, keyed by DOM event type. Used by the block to\n * register them (see `useRegisterBlockEventHandlers`).\n *\n * @param {Object} props Props to read handlers from.\n *\n * @return {Object|undefined} The handlers by event type, or undefined when\n *                            there are none.\n */\nexport function getEventHandlers( props ) {\n\tlet handlers;\n\n\tfor ( const name in SUPPORTED_EVENTS ) {\n\t\tif ( typeof props[ name ] === 'function' ) {\n\t\t\thandlers = handlers || {};\n\t\t\thandlers[ SUPPORTED_EVENTS[ name ] ] = props[ name ];\n\t\t}\n\t}\n\n\treturn handlers;\n}\n\n// The native properties React copies onto its SyntheticEvent for each event\n// type (the *EventInterface tables in react-dom), so the wrapper exposes exactly\n// what a React handler would see and nothing more. Values are copied straight\n// from the native event; React's normalizers only paper over browsers we don't\n// support, and anything omitted stays reachable through `nativeEvent`, as in\n// React (e.g. `getTargetRanges` on a `beforeinput`).\nconst EVENT_INTERFACE = [\n\t'eventPhase',\n\t'bubbles',\n\t'cancelable',\n\t'timeStamp',\n\t'defaultPrevented',\n\t'isTrusted',\n];\nconst KEYBOARD_EVENT_INTERFACE = [\n\t...EVENT_INTERFACE,\n\t'view',\n\t'detail',\n\t'key',\n\t'code',\n\t'location',\n\t'ctrlKey',\n\t'shiftKey',\n\t'altKey',\n\t'metaKey',\n\t'repeat',\n\t'locale',\n\t'getModifierState',\n\t'charCode',\n\t'keyCode',\n\t'which',\n];\nconst INPUT_EVENT_INTERFACE = [ ...EVENT_INTERFACE, 'data' ];\nconst EVENT_INTERFACES = {\n\tkeydown: KEYBOARD_EVENT_INTERFACE,\n\tkeyup: KEYBOARD_EVENT_INTERFACE,\n\tbeforeinput: INPUT_EVENT_INTERFACE,\n\tinput: INPUT_EVENT_INTERFACE,\n\tcompositionstart: INPUT_EVENT_INTERFACE,\n\tcompositionupdate: INPUT_EVENT_INTERFACE,\n\tcompositionend: INPUT_EVENT_INTERFACE,\n};\n\n/**\n * Builds a React `SyntheticEvent`-like object for an extension handler, which\n * expects one. It mirrors what react-dom does: a plain object wrapping the real\n * native event, eagerly copying the same interface properties React exposes for\n * the event type, so a handler sees exactly React's surface and nothing more.\n *\n * `preventDefault` and `stopPropagation` forward to the native event, so they\n * behave as through React; `stopPropagation` also flags the walk through block\n * ancestors to stop. `target` is the editable inside the block rather than the\n * real target (the editing host above it), and `currentTarget` is reassigned as\n * the event bubbles from block to block.\n *\n * @param {Event}       nativeEvent The event to wrap.\n * @param {HTMLElement} target      The element to report as the target.\n *\n * @return {Object} The synthetic event.\n */\nfunction createBlockSyntheticEvent( nativeEvent, target ) {\n\tlet propagationStopped = false;\n\n\tconst syntheticEvent = {\n\t\tnativeEvent,\n\t\ttype: nativeEvent.type,\n\t\ttarget,\n\t\tcurrentTarget: null,\n\t\tpreventDefault() {\n\t\t\tnativeEvent.preventDefault();\n\t\t\tsyntheticEvent.defaultPrevented = true;\n\t\t},\n\t\tisDefaultPrevented() {\n\t\t\treturn syntheticEvent.defaultPrevented;\n\t\t},\n\t\tstopPropagation() {\n\t\t\tnativeEvent.stopPropagation();\n\t\t\tpropagationStopped = true;\n\t\t},\n\t\tisPropagationStopped() {\n\t\t\treturn propagationStopped;\n\t\t},\n\t\t// The modern event system doesn't pool, so persistence is a no-op.\n\t\tpersist() {},\n\t\tisPersistent() {\n\t\t\treturn true;\n\t\t},\n\t};\n\n\tfor ( const property of EVENT_INTERFACES[ nativeEvent.type ] ) {\n\t\tconst value = nativeEvent[ property ];\n\t\tsyntheticEvent[ property ] =\n\t\t\ttypeof value === 'function' ? value.bind( nativeEvent ) : value;\n\t}\n\n\treturn syntheticEvent;\n}\n\n/**\n * Backwards compatibility for block event handlers under `editableRoot`.\n *\n * When a block supports `editableRoot`, the writing flow wrapper is the\n * contentEditable editing host, so keyboard, input and composition events\n * target the wrapper instead of the block. React `on*` handlers a third party\n * added to a block through `wrapperProps` (e.g. via an `editor.BlockListBlock`\n * filter) are on the block element, below the target, so they stop firing.\n *\n * The block registers those handlers (see `useBlockProps`), and this hook\n * calls them from the host: it resolves the block that owns the selection and\n * every block ancestor, and invokes each registered handler with a synthetic\n * event, innermost first, like a bubbling event. The listeners are attached\n * where React attaches its own (the portal container, the iframe's document\n * element), so a block's handler runs and its `preventDefault` /\n * `stopPropagation` behave as they would through React, without editableRoot.\n *\n * This does not cover handlers a filter puts on its own wrapping element rather\n * than the block's `wrapperProps`; the block element is the supported event\n * surface. It can be removed once input handling is lifted to the host.\n */\nexport default function useEditableRootEventHandlers() {\n\tconst { hasMultiSelection, getBlockParents } =\n\t\tuseSelect( blockEditorStore );\n\tconst { refsMap, eventHandlers } = useContext( BlockRefs );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onEvent( event ) {\n\t\t\t\t// Only act on real events targeting the host itself, while it\n\t\t\t\t// is the editing host for a single block and some block has a\n\t\t\t\t// handler to call.\n\t\t\t\tif (\n\t\t\t\t\t! eventHandlers.size ||\n\t\t\t\t\tevent.target !== node ||\n\t\t\t\t\t! event.isTrusted ||\n\t\t\t\t\tnode.contentEditable !== 'true' ||\n\t\t\t\t\thasMultiSelection()\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst selection = node.ownerDocument.defaultView.getSelection();\n\n\t\t\t\tif ( ! selection.rangeCount ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst editable = getSelectionEditableElement( selection, node );\n\t\t\t\tconst clientId = getBlockClientId( editable );\n\n\t\t\t\tif ( ! clientId ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Call the handler on the block that owns the selection and each\n\t\t\t\t// of its block ancestors, innermost first, like a bubbling\n\t\t\t\t// event. The hierarchy comes from the store rather than the DOM,\n\t\t\t\t// and one synthetic event, wrapping the real event, is reused\n\t\t\t\t// for the whole chain, its currentTarget moved from block to\n\t\t\t\t// block. The element is only resolved for blocks with a handler.\n\t\t\t\tconst clientIds = [\n\t\t\t\t\tclientId,\n\t\t\t\t\t...getBlockParents( clientId, true ),\n\t\t\t\t];\n\n\t\t\t\tlet syntheticEvent;\n\t\t\t\tfor ( const ancestorClientId of clientIds ) {\n\t\t\t\t\tconst handler =\n\t\t\t\t\t\teventHandlers.get( ancestorClientId )?.current?.[\n\t\t\t\t\t\t\tevent.type\n\t\t\t\t\t\t];\n\t\t\t\t\tconst element = handler && refsMap.get( ancestorClientId );\n\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! syntheticEvent ) {\n\t\t\t\t\t\tsyntheticEvent = createBlockSyntheticEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\teditable\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tsyntheticEvent.currentTarget = element;\n\t\t\t\t\thandler( syntheticEvent );\n\n\t\t\t\t\tif ( syntheticEvent.isPropagationStopped() ) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Attach where React attaches its own event system: the portal\n\t\t\t// container, which for the iframed canvas is the document element\n\t\t\t// (see `preparePortalMount` in react-dom). Listening at the same\n\t\t\t// node, non-capture, means a block's handler runs in the bubbling\n\t\t\t// phase after core, and its stopPropagation stops at the same point\n\t\t\t// React's would, as its `on*` handler would without editableRoot.\n\t\t\tconst root = node.ownerDocument.documentElement;\n\t\t\tconst unsubscribers = EVENT_TYPES.map( ( type ) => {\n\t\t\t\troot.addEventListener( type, onEvent );\n\t\t\t\treturn () => root.removeEventListener( type, onEvent );\n\t\t\t} );\n\t\t\treturn () =>\n\t\t\t\tunsubscribers.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t},\n\t\t[ hasMultiSelection, getBlockParents, refsMap, eventHandlers ]\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/components/writing-flow/use-editable-root.mjs

@@ -0,0 +1,54 @@
+// packages/block-editor/src/components/writing-flow/use-editable-root.js
+import { useRegistry, useSelect } from "@wordpress/data";
+import { useRefEffect } from "@wordpress/compose";
+import { store as blockEditorStore } from "../../store/index.mjs";
+import { setContentEditableWrapper } from "./utils.mjs";
+import { getBlockClientId, getSelectionEditableElement } from "../../utils/dom.mjs";
+import { unlock } from "../../lock-unlock.mjs";
+function useEditableRoot() {
+  const registry = useRegistry();
+  const enabled = useSelect((select) => {
+    const { getSelectedBlockClientId, canHostEditableRoot, isZoomOut } = unlock(select(blockEditorStore));
+    return !isZoomOut() && canHostEditableRoot(getSelectedBlockClientId());
+  }, []);
+  return useRefEffect(
+    (node) => {
+      if (!enabled) {
+        return;
+      }
+      const {
+        getSelectedBlockClientId,
+        hasMultiSelection,
+        isMultiSelecting
+      } = registry.select(blockEditorStore);
+      if (!setContentEditableWrapper(node, true, { focus: false })) {
+        return;
+      }
+      const { activeElement } = node.ownerDocument;
+      const selection = node.ownerDocument.defaultView.getSelection();
+      if (activeElement !== node && activeElement?.isContentEditable && node.contains(activeElement) && getBlockClientId(activeElement) === getSelectedBlockClientId() && selection.anchorNode && activeElement.contains(selection.anchorNode)) {
+        node.focus();
+      }
+      return () => {
+        if (hasMultiSelection() || isMultiSelecting()) {
+          return;
+        }
+        setContentEditableWrapper(node, false);
+        if (node.ownerDocument.activeElement === node) {
+          const editable = getSelectionEditableElement(
+            node.ownerDocument.defaultView.getSelection(),
+            node
+          );
+          if (editable && getBlockClientId(editable) === getSelectedBlockClientId()) {
+            editable.focus();
+          }
+        }
+      };
+    },
+    [enabled, registry]
+  );
+}
+export {
+  useEditableRoot as default
+};
+//# sourceMappingURL=use-editable-root.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/writing-flow/use-editable-root.js"],
+  "sourcesContent": ["import { useRegistry, useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\nimport { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Keeps the writing flow wrapper contentEditable while the selected block\n * supports `editableRoot`, so the native selection can extend across blocks.\n * While the wrapper is editable it must also hold focus: a nested editable\n * element cannot retain focus once an ancestor becomes an editing host (the\n * first DOM mutation moves focus to the host, inconsistently across\n * browsers).\n */\nexport default function useEditableRoot() {\n\tconst registry = useRegistry();\n\tconst enabled = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId, canHostEditableRoot, isZoomOut } =\n\t\t\tunlock( select( blockEditorStore ) );\n\t\treturn (\n\t\t\t! isZoomOut() && canHostEditableRoot( getSelectedBlockClientId() )\n\t\t);\n\t}, [] );\n\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! enabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst {\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\thasMultiSelection,\n\t\t\t\tisMultiSelecting,\n\t\t\t} = registry.select( blockEditorStore );\n\n\t\t\t// Focus is moved separately below, only when an editable\n\t\t\t// element belonging to the selected block holds it.\n\t\t\tif ( ! setContentEditableWrapper( node, true, { focus: false } ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Move focus from the block's editable element to the wrapper,\n\t\t\t// but only when an editable element belonging to the selected\n\t\t\t// block has focus. Never steal focus from other regions (e.g.\n\t\t\t// List View), UI elements (e.g. buttons), or other editables\n\t\t\t// within the wrapper (e.g. the post title). The selection is\n\t\t\t// preserved. If the selection is still outside the focused\n\t\t\t// element, a mousedown just focused it and the browser has not\n\t\t\t// placed the caret yet; moving focus now would cancel the\n\t\t\t// pending caret placement. The selection observer moves focus\n\t\t\t// once the selection lands.\n\t\t\tconst { activeElement } = node.ownerDocument;\n\t\t\tconst selection = node.ownerDocument.defaultView.getSelection();\n\t\t\tif (\n\t\t\t\tactiveElement !== node &&\n\t\t\t\tactiveElement?.isContentEditable &&\n\t\t\t\tnode.contains( activeElement ) &&\n\t\t\t\tgetBlockClientId( activeElement ) ===\n\t\t\t\t\tgetSelectedBlockClientId() &&\n\t\t\t\tselection.anchorNode &&\n\t\t\t\tactiveElement.contains( selection.anchorNode )\n\t\t\t) {\n\t\t\t\tnode.focus();\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\t// A multi-selection owns the wrapper as its editing host\n\t\t\t\t// now: the host and its textbox semantics remain, and the\n\t\t\t\t// selection observer disables both together when the\n\t\t\t\t// selection collapses. Removing the attributes here would\n\t\t\t\t// strip the accessible name off the focused editing host at\n\t\t\t\t// the moment cross-block editing begins.\n\t\t\t\tif ( hasMultiSelection() || isMultiSelecting() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetContentEditableWrapper( node, false );\n\n\t\t\t\t// If the wrapper held focus, return focus to the editable\n\t\t\t\t// element containing the selection, which is focusable\n\t\t\t\t// again now that the wrapper is no longer an editing host.\n\t\t\t\t// Only do so if that element belongs to the selected block:\n\t\t\t\t// when the selection moved to another block through the\n\t\t\t\t// store, the stale DOM selection must not reclaim block\n\t\t\t\t// selection through its focus handler.\n\t\t\t\tif ( node.ownerDocument.activeElement === node ) {\n\t\t\t\t\tconst editable = getSelectionEditableElement(\n\t\t\t\t\t\tnode.ownerDocument.defaultView.getSelection(),\n\t\t\t\t\t\tnode\n\t\t\t\t\t);\n\t\t\t\t\tif (\n\t\t\t\t\t\teditable &&\n\t\t\t\t\t\tgetBlockClientId( editable ) ===\n\t\t\t\t\t\t\tgetSelectedBlockClientId()\n\t\t\t\t\t) {\n\t\t\t\t\t\teditable.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ enabled, registry ]\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa,iBAAiB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB,mCAAmC;AAC9D,SAAS,cAAc;AAUR,SAAR,kBAAmC;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,UAAW,CAAE,WAAY;AACxC,UAAM,EAAE,0BAA0B,qBAAqB,UAAU,IAChE,OAAQ,OAAQ,gBAAiB,CAAE;AACpC,WACC,CAAE,UAAU,KAAK,oBAAqB,yBAAyB,CAAE;AAAA,EAEnE,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,CAAE,SAAU;AACX,UAAK,CAAE,SAAU;AAChB;AAAA,MACD;AAEA,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,SAAS,OAAQ,gBAAiB;AAItC,UAAK,CAAE,0BAA2B,MAAM,MAAM,EAAE,OAAO,MAAM,CAAE,GAAI;AAClE;AAAA,MACD;AAYA,YAAM,EAAE,cAAc,IAAI,KAAK;AAC/B,YAAM,YAAY,KAAK,cAAc,YAAY,aAAa;AAC9D,UACC,kBAAkB,QAClB,eAAe,qBACf,KAAK,SAAU,aAAc,KAC7B,iBAAkB,aAAc,MAC/B,yBAAyB,KAC1B,UAAU,cACV,cAAc,SAAU,UAAU,UAAW,GAC5C;AACD,aAAK,MAAM;AAAA,MACZ;AAEA,aAAO,MAAM;AAOZ,YAAK,kBAAkB,KAAK,iBAAiB,GAAI;AAChD;AAAA,QACD;AAEA,kCAA2B,MAAM,KAAM;AASvC,YAAK,KAAK,cAAc,kBAAkB,MAAO;AAChD,gBAAM,WAAW;AAAA,YAChB,KAAK,cAAc,YAAY,aAAa;AAAA,YAC5C;AAAA,UACD;AACA,cACC,YACA,iBAAkB,QAAS,MAC1B,yBAAyB,GACzB;AACD,qBAAS,MAAM;AAAA,UAChB;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,SAAS,QAAS;AAAA,EACrB;AACD;",
+  "names": []
+}

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": ["import { HOME, END } from '@wordpress/keycodes';\nimport { useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\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": ";AAAA,SAAS,MAAM,WAAW;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,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": ["import { 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';\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": ["import { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\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": ";AAAA,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,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-preview-mode-nav.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-preview-mode-nav.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { TAB, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * In preview mode, handles Tab and arrow key navigation to move only between\n * block elements, skipping all other focusable content.\n *\n * @return {Function} Ref callback.\n */\nexport function usePreviewModeNav() {\n\tconst isPreviewMode = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().isPreviewMode,\n\t\t[]\n\t);\n\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onKeyDown( event ) {\n\t\t\t\tconst { keyCode, shiftKey, target } = event;\n\n\t\t\t\tconst isTab = keyCode === TAB;\n\t\t\t\tconst isUp = keyCode === UP;\n\t\t\t\tconst isDown = keyCode === DOWN;\n\t\t\t\tconst isLeft = keyCode === LEFT;\n\t\t\t\tconst isRight = keyCode === RIGHT;\n\t\t\t\tconst isArrow = isUp || isDown || isLeft || isRight;\n\n\t\t\t\tif ( ! isTab && ! isArrow ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst isReverse = isTab ? shiftKey : isUp || isLeft;\n\n\t\t\t\tconst blocks = Array.from(\n\t\t\t\t\tnode.querySelectorAll( '[data-block]' )\n\t\t\t\t);\n\n\t\t\t\tif ( ! blocks.length ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst currentBlock = target.closest( '[data-block]' );\n\t\t\t\tconst currentIndex = currentBlock\n\t\t\t\t\t? blocks.indexOf( currentBlock )\n\t\t\t\t\t: -1;\n\n\t\t\t\t// If focus is not on a block, don't intercept navigation.\n\t\t\t\tif ( currentIndex === -1 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// For Tab navigation, allow escaping the block list at boundaries.\n\t\t\t\t// For arrow keys, wrap around.\n\t\t\t\tif ( isTab ) {\n\t\t\t\t\tif ( isReverse && currentIndex === 0 ) {\n\t\t\t\t\t\t// At first block, Shift+Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isReverse && currentIndex === blocks.length - 1 ) {\n\t\t\t\t\t\t// At last block, Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( isReverse ) {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex <= 0\n\t\t\t\t\t\t\t? blocks.length - 1\n\t\t\t\t\t\t\t: currentIndex - 1;\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex === -1 || currentIndex >= blocks.length - 1\n\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t: currentIndex + 1;\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tblocks[ nextIndex ].focus();\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\t};\n\t\t},\n\t\t[ isPreviewMode ]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,KAAK,IAAI,MAAM,MAAM,aAAa;AAK3C,SAAS,SAAS,wBAAwB;AAQnC,SAAS,oBAAoB;AACnC,QAAM,gBAAgB;AAAA,IACrB,CAAE,WAAY,OAAQ,gBAAiB,EAAE,YAAY,EAAE;AAAA,IACvD,CAAC;AAAA,EACF;AAEA,SAAO;AAAA,IACN,CAAE,SAAU;AACX,UAAK,CAAE,eAAgB;AACtB;AAAA,MACD;AAEA,eAAS,UAAW,OAAQ;AAC3B,cAAM,EAAE,SAAS,UAAU,OAAO,IAAI;AAEtC,cAAM,QAAQ,YAAY;AAC1B,cAAM,OAAO,YAAY;AACzB,cAAM,SAAS,YAAY;AAC3B,cAAM,SAAS,YAAY;AAC3B,cAAM,UAAU,YAAY;AAC5B,cAAM,UAAU,QAAQ,UAAU,UAAU;AAE5C,YAAK,CAAE,SAAS,CAAE,SAAU;AAC3B;AAAA,QACD;AAEA,cAAM,YAAY,QAAQ,WAAW,QAAQ;AAE7C,cAAM,SAAS,MAAM;AAAA,UACpB,KAAK,iBAAkB,cAAe;AAAA,QACvC;AAEA,YAAK,CAAE,OAAO,QAAS;AACtB;AAAA,QACD;AAEA,cAAM,eAAe,OAAO,QAAS,cAAe;AACpD,cAAM,eAAe,eAClB,OAAO,QAAS,YAAa,IAC7B;AAGH,YAAK,iBAAiB,IAAK;AAC1B;AAAA,QACD;AAIA,YAAK,OAAQ;AACZ,cAAK,aAAa,iBAAiB,GAAI;AAEtC;AAAA,UACD;AACA,cAAK,CAAE,aAAa,iBAAiB,OAAO,SAAS,GAAI;AAExD;AAAA,UACD;AAAA,QACD;AAEA,YAAI;AACJ,YAAK,WAAY;AAChB,sBACC,gBAAgB,IACb,OAAO,SAAS,IAChB,eAAe;AAAA,QACpB,OAAO;AACN,sBACC,iBAAiB,MAAM,gBAAgB,OAAO,SAAS,IACpD,IACA,eAAe;AAAA,QACpB;AAEA,cAAM,eAAe;AACrB,eAAQ,SAAU,EAAE,MAAM;AAAA,MAC3B;AAEA,WAAK,iBAAkB,WAAW,SAAU;AAC5C,aAAO,MAAM;AACZ,aAAK,oBAAqB,WAAW,SAAU;AAAA,MAChD;AAAA,IACD;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;AACD;",
+  "sourcesContent": ["import { useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { TAB, UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * In preview mode, handles Tab and arrow key navigation to move only between\n * block elements, skipping all other focusable content.\n *\n * @return {Function} Ref callback.\n */\nexport function usePreviewModeNav() {\n\tconst isPreviewMode = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings().isPreviewMode,\n\t\t[]\n\t);\n\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onKeyDown( event ) {\n\t\t\t\tconst { keyCode, shiftKey, target } = event;\n\n\t\t\t\tconst isTab = keyCode === TAB;\n\t\t\t\tconst isUp = keyCode === UP;\n\t\t\t\tconst isDown = keyCode === DOWN;\n\t\t\t\tconst isLeft = keyCode === LEFT;\n\t\t\t\tconst isRight = keyCode === RIGHT;\n\t\t\t\tconst isArrow = isUp || isDown || isLeft || isRight;\n\n\t\t\t\tif ( ! isTab && ! isArrow ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst isReverse = isTab ? shiftKey : isUp || isLeft;\n\n\t\t\t\tconst blocks = Array.from(\n\t\t\t\t\tnode.querySelectorAll( '[data-block]' )\n\t\t\t\t);\n\n\t\t\t\tif ( ! blocks.length ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst currentBlock = target.closest( '[data-block]' );\n\t\t\t\tconst currentIndex = currentBlock\n\t\t\t\t\t? blocks.indexOf( currentBlock )\n\t\t\t\t\t: -1;\n\n\t\t\t\t// If focus is not on a block, don't intercept navigation.\n\t\t\t\tif ( currentIndex === -1 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// For Tab navigation, allow escaping the block list at boundaries.\n\t\t\t\t// For arrow keys, wrap around.\n\t\t\t\tif ( isTab ) {\n\t\t\t\t\tif ( isReverse && currentIndex === 0 ) {\n\t\t\t\t\t\t// At first block, Shift+Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! isReverse && currentIndex === blocks.length - 1 ) {\n\t\t\t\t\t\t// At last block, Tab should exit the block list.\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tlet nextIndex;\n\t\t\t\tif ( isReverse ) {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex <= 0\n\t\t\t\t\t\t\t? blocks.length - 1\n\t\t\t\t\t\t\t: currentIndex - 1;\n\t\t\t\t} else {\n\t\t\t\t\tnextIndex =\n\t\t\t\t\t\tcurrentIndex === -1 || currentIndex >= blocks.length - 1\n\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t: currentIndex + 1;\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\t\t\t\tblocks[ nextIndex ].focus();\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t\t};\n\t\t},\n\t\t[ isPreviewMode ]\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,KAAK,IAAI,MAAM,MAAM,aAAa;AAC3C,SAAS,SAAS,wBAAwB;AAQnC,SAAS,oBAAoB;AACnC,QAAM,gBAAgB;AAAA,IACrB,CAAE,WAAY,OAAQ,gBAAiB,EAAE,YAAY,EAAE;AAAA,IACvD,CAAC;AAAA,EACF;AAEA,SAAO;AAAA,IACN,CAAE,SAAU;AACX,UAAK,CAAE,eAAgB;AACtB;AAAA,MACD;AAEA,eAAS,UAAW,OAAQ;AAC3B,cAAM,EAAE,SAAS,UAAU,OAAO,IAAI;AAEtC,cAAM,QAAQ,YAAY;AAC1B,cAAM,OAAO,YAAY;AACzB,cAAM,SAAS,YAAY;AAC3B,cAAM,SAAS,YAAY;AAC3B,cAAM,UAAU,YAAY;AAC5B,cAAM,UAAU,QAAQ,UAAU,UAAU;AAE5C,YAAK,CAAE,SAAS,CAAE,SAAU;AAC3B;AAAA,QACD;AAEA,cAAM,YAAY,QAAQ,WAAW,QAAQ;AAE7C,cAAM,SAAS,MAAM;AAAA,UACpB,KAAK,iBAAkB,cAAe;AAAA,QACvC;AAEA,YAAK,CAAE,OAAO,QAAS;AACtB;AAAA,QACD;AAEA,cAAM,eAAe,OAAO,QAAS,cAAe;AACpD,cAAM,eAAe,eAClB,OAAO,QAAS,YAAa,IAC7B;AAGH,YAAK,iBAAiB,IAAK;AAC1B;AAAA,QACD;AAIA,YAAK,OAAQ;AACZ,cAAK,aAAa,iBAAiB,GAAI;AAEtC;AAAA,UACD;AACA,cAAK,CAAE,aAAa,iBAAiB,OAAO,SAAS,GAAI;AAExD;AAAA,UACD;AAAA,QACD;AAEA,YAAI;AACJ,YAAK,WAAY;AAChB,sBACC,gBAAgB,IACb,OAAO,SAAS,IAChB,eAAe;AAAA,QACpB,OAAO;AACN,sBACC,iBAAiB,MAAM,gBAAgB,OAAO,SAAS,IACpD,IACA,eAAe;AAAA,QACpB;AAEA,cAAM,eAAe;AACrB,eAAQ,SAAU,EAAE,MAAM;AAAA,MAC3B;AAEA,WAAK,iBAAkB,WAAW,SAAU;AAC5C,aAAO,MAAM;AACZ,aAAK,oBAAqB,WAAW,SAAU;AAAA,MAChD;AAAA,IACD;AAAA,IACA,CAAE,aAAc;AAAA,EACjB;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": ["import { isEntirelySelected } from '@wordpress/dom';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { useRefEffect } from '@wordpress/compose';\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": ";AAAA,SAAS,0BAA0B;AACnC,SAAS,WAAW,mBAAmB;AACvC,SAAS,mCAAmC,6BAA6B;AACzE,SAAS,oBAAoB;AAC7B,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": []
 }