@wordpress/block-editor 17.0.2-next.v.202608281122.0 → 17.1.0

package/src/components/rich-text/event-listeners/enter.js

@@ -41,10 +41,10 @@ export default ( props ) => ( element ) => {
 		} else if ( onSplitAtEnd && start === end && end === text.length ) {
 			event.preventDefault();
 			onSplitAtEnd();
-		} else if ( onReplace && onSplit ) {
-			event.__deprecatedOnSplit = true;
 		} else if (
 			! supportsSplitting &&
+			// The deprecated onSplit is flagged on the beforeinput event.
+			! ( onReplace && onSplit ) &&
 			! disableLineBreaks &&
 			! event.defaultPrevented
 		) {
@@ -70,8 +70,22 @@ export default ( props ) => ( element ) => {
 		}
 	}
 
-	function onDefaultKeyDown( event ) {
-		if ( event.defaultPrevented ) {
+	function onBeforeInput( event ) {
+		if ( event.inputType !== 'insertParagraph' ) {
+			return;
+		}
+		const { onReplace, onSplit } = props.current;
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onDefaultBeforeInput( event ) {
+		if (
+			event.defaultPrevented ||
+			( event.inputType !== 'insertParagraph' &&
+				event.inputType !== 'insertLineBreak' )
+		) {
 			return;
 		}
 
@@ -82,12 +96,6 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		if ( event.keyCode !== ENTER ) {
-			return;
-		}
-
-		// On ENTER, we ALWAYS want to prevent the default browser behaviour
-		// at this last interception point.
 		event.preventDefault();
 	}
 
@@ -95,10 +103,10 @@ export default ( props ) => ( element ) => {
 
 	// Attach the listener to the window so parent elements have the chance to
 	// prevent the default behavior.
-	const unsubscribeDefaultKeyDown = subscribeDelegatedListener(
+	const unsubscribeDefaultBeforeInput = subscribeDelegatedListener(
 		defaultView,
-		'keydown',
-		onDefaultKeyDown
+		'beforeinput',
+		onDefaultBeforeInput
 	);
 	// Capture phase so this runs before ancestor (writing flow) bubble
 	// handlers, matching the timing of the previous raw element listener.
@@ -108,8 +116,15 @@ export default ( props ) => ( element ) => {
 		onKeyDown,
 		true
 	);
+	const unsubscribeBeforeInput = subscribeOwnedListener(
+		element,
+		'beforeinput',
+		onBeforeInput,
+		true
+	);
 	return () => {
-		unsubscribeDefaultKeyDown();
+		unsubscribeDefaultBeforeInput();
 		unsubscribeKeyDown();
+		unsubscribeBeforeInput();
 	};
 };

package/src/components/rich-text/event-listeners/index.js

@@ -6,7 +6,6 @@ import insertReplacementText from './insert-replacement-text';
 import removeBrowserShortcuts from './remove-browser-shortcuts';
 import shortcuts from './shortcuts';
 import inputEvents from './input-events';
-import undoAutomaticChange from './undo-automatic-change';
 import pasteHandler from './paste-handler';
 import _delete from './delete';
 import enter from './enter';
@@ -19,7 +18,6 @@ const allEventListeners = [
 	removeBrowserShortcuts,
 	shortcuts,
 	inputEvents,
-	undoAutomaticChange,
 	pasteHandler,
 	_delete,
 	enter,

package/src/components/rich-text/event-listeners/input-rules.js

@@ -84,8 +84,13 @@ export default ( props ) => ( element ) => {
 		} );
 		const block = transformation.transform( content );
 
-		selectionChange( ...findSelection( [ block ] ) );
-		onReplace( [ block ] );
+		// Batch so the undo history records the pre-transform selection,
+		// instead of the selection change here overwriting it first.
+		registry.batch( () => {
+			selectionChange( ...findSelection( [ block ] ) );
+			onReplace( [ block ] );
+		} );
+
 		registry.dispatch( blockEditorStore ).__unstableMarkAutomaticChange();
 
 		return true;

package/src/components/spacing-sizes-control/test/{index.jsx → index.jsdom.test.jsx}

@@ -19,18 +19,29 @@
  * The tests ensure that when the SpacingSizesControl is refactored to use
  * PresetInputControl, the existing user experience and behavior is preserved.
  */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useSelect } from '@wordpress/data';
 import SpacingSizesControl from '../index';
+import useSpacingSizes from '../hooks/use-spacing-sizes';
+
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockVisibleElements();
+globalThis.wpVitest.mockScrollIntoView();
 
 // Mock useSelect
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
 
 // Mock useSpacingSizes hook
-jest.mock( '../hooks/use-spacing-sizes', () => ( {
+vi.mock( import( '../hooks/use-spacing-sizes' ), () => ( {
 	__esModule: true,
-	default: jest.fn( () => [
+	default: vi.fn( () => [
 		{ name: 'None', slug: '0', size: 0 },
 		{ name: 'Small', slug: '20', size: '0.5rem' },
 		{ name: 'Medium', slug: '40', size: '1rem' },
@@ -40,8 +51,8 @@ jest.mock( '../hooks/use-spacing-sizes', () => ( {
 } ) );
 
 // Mock useSettings hook
-jest.mock( '../../use-settings', () => ( {
-	useSettings: jest.fn( ( ...keys ) => {
+vi.mock( import( '../../use-settings' ), () => ( {
+	useSettings: vi.fn( ( ...keys ) => {
 		const defaults = {
 			'spacing.units': [ 'px', 'em', 'rem' ],
 			'spacing.spacingSizes.custom': [],
@@ -54,7 +65,7 @@ jest.mock( '../../use-settings', () => ( {
 } ) );
 
 describe( 'SpacingSizesControl', () => {
-	const mockOnChange = jest.fn();
+	const mockOnChange = vi.fn();
 	const defaultProps = {
 		label: 'Padding',
 		onChange: mockOnChange,
@@ -721,15 +732,11 @@ describe( 'SpacingSizesControl', () => {
 
 		// Mock the large preset set
 		beforeEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( largeSpacingSizes );
+			useSpacingSizes.mockReturnValue( largeSpacingSizes );
 		} );
 
 		afterEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( [
+			useSpacingSizes.mockReturnValue( [
 				{ name: 'None', slug: '0', size: 0 },
 				{ name: 'Small', slug: '20', size: '0.5rem' },
 				{ name: 'Medium', slug: '40', size: '1rem' },
@@ -891,8 +898,8 @@ describe( 'SpacingSizesControl', () => {
 		} );
 
 		it( 'calls onMouseOver and onMouseOut callbacks', async () => {
-			const mockOnMouseOver = jest.fn();
-			const mockOnMouseOut = jest.fn();
+			const mockOnMouseOver = vi.fn();
+			const mockOnMouseOut = vi.fn();
 			const user = userEvent.setup();
 
 			render(
@@ -955,9 +962,7 @@ describe( 'SpacingSizesControl', () => {
 				{ name: 'Huge', slug: '100', size: '5rem' },
 			];
 
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( customSpacingSizes );
+			useSpacingSizes.mockReturnValueOnce( customSpacingSizes );
 
 			render(
 				<SpacingSizesControl { ...defaultProps } values={ undefined } />
@@ -973,9 +978,7 @@ describe( 'SpacingSizesControl', () => {
 				{ name: 'Theme Large', slug: 'theme-lg', size: '2.25rem' },
 			];
 
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( themeSpacingSizes );
+			useSpacingSizes.mockReturnValueOnce( themeSpacingSizes );
 
 			render(
 				<SpacingSizesControl

package/src/components/spacing-sizes-control/test/utils.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	ALL_SIDES,
 	getCustomValueFromPreset,

package/src/components/url-input/test/{button.jsx → button.jsdom.test.jsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import URLInputButton from '../button';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'URLInputButton', () => {
 	it( 'should render a `Insert link` button and not be pressed when `url` is not provided', () => {
 		render( <URLInputButton /> );
@@ -67,7 +70,7 @@ describe( 'URLInputButton', () => {
 
 	it( 'should call `onChange` function once per each value change', async () => {
 		const user = userEvent.setup();
-		const onChangeMock = jest.fn();
+		const onChangeMock = vi.fn();
 
 		render( <URLInputButton onChange={ onChangeMock } /> );
 

package/src/components/url-input/test/fixtures/validated-input-control-deprecation.js

@@ -1,3 +1,5 @@
+import { expect } from 'vitest';
+
 /**
  * Temporary test helper while `URLInput` still unlocks the deprecated private
  * `ValidatedInputControl` from `@wordpress/components`.

package/src/components/url-input/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,4 +1,11 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { speak } from '@wordpress/a11y';
 import { useState } from '@wordpress/element';
@@ -8,7 +15,10 @@ import URLInput from '../';
 import { store as blockEditorStore } from '../../../store';
 import { expectValidatedInputControlDeprecationIfCalled } from './fixtures/validated-input-control-deprecation';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+globalThis.wpVitest.mockScrollIntoView();
+globalThis.wpVitest.mockMatchMedia();
+
+vi.mock( import( '@wordpress/a11y' ), () => ( { speak: vi.fn() } ) );
 
 const SUGGESTIONS = [
 	{
@@ -37,8 +47,8 @@ const KEY_EVENTS = {
  * Waits long enough for the suggestions request debounce to elapse, so that
  * assertions about a request _not_ being made are meaningful.
  */
-function flushDebounce() {
-	return new Promise( ( resolve ) => setTimeout( resolve, 250 ) );
+async function flushDebounce() {
+	await act( () => new Promise( ( resolve ) => setTimeout( resolve, 250 ) ) );
 }
 
 /**
@@ -68,16 +78,16 @@ describe( 'URLInput', () => {
 	let fetchLinkSuggestions;
 
 	beforeEach( () => {
-		fetchLinkSuggestions = jest.fn().mockResolvedValue( SUGGESTIONS );
+		fetchLinkSuggestions = vi.fn().mockResolvedValue( SUGGESTIONS );
 	} );
 
 	afterEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	function renderURLInput( props = {} ) {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<ControlledURLInput
@@ -471,7 +481,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should select and submit the active suggestion when pressing Enter', async () => {
-			const onSubmit = jest.fn();
+			const onSubmit = vi.fn();
 			const { input, onChange } = await renderWithSuggestions( {
 				onSubmit,
 			} );
@@ -491,7 +501,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should submit without a suggestion when pressing Enter with no active suggestion', async () => {
-			const onSubmit = jest.fn();
+			const onSubmit = vi.fn();
 			const { input } = await renderWithSuggestions( { onSubmit } );
 
 			fireEvent.keyDown( input, KEY_EVENTS.enter );
@@ -500,8 +510,8 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should submit without a suggestion when pressing Enter and there are no suggestions', async () => {
-			const onSubmit = jest.fn();
-			const onKeyDown = jest.fn();
+			const onSubmit = vi.fn();
+			const onKeyDown = vi.fn();
 			const { input } = renderURLInput( {
 				value: 'hello',
 				disableSuggestions: true,
@@ -587,7 +597,7 @@ describe( 'URLInput', () => {
 
 	describe( 'custom rendering', () => {
 		it( 'should render the control via `__experimentalRenderControl`', () => {
-			const renderControl = jest
+			const renderControl = vi
 				.fn()
 				.mockReturnValue( <div>Custom control</div> );
 
@@ -608,7 +618,7 @@ describe( 'URLInput', () => {
 		} );
 
 		it( 'should render suggestions via `__experimentalRenderSuggestions`', async () => {
-			const renderSuggestions = jest.fn( ( { suggestions } ) => (
+			const renderSuggestions = vi.fn( ( { suggestions } ) => (
 				<ul>
 					{ suggestions.map( ( suggestion ) => (
 						<li key={ suggestion.id }>{ suggestion.title }</li>

package/src/components/use-block-display-information/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,14 +1,18 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import { useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { symbol } from '@wordpress/icons';
 import useBlockDisplayInformation from '../';
 
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-jest.mock( '../../../lock-unlock', () => ( {
+vi.mock( import( '@wordpress/data' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useSelect: vi.fn(),
+} ) );
+vi.mock( import( '../../../lock-unlock' ), () => ( {
 	unlock: ( value ) => ( {
-		registerPrivateActions: jest.fn(),
-		registerPrivateSelectors: jest.fn(),
+		registerPrivateActions: vi.fn(),
+		registerPrivateSelectors: vi.fn(),
 		...value,
 	} ),
 } ) );
@@ -64,12 +68,12 @@ function setupUseSelect( {
 
 describe( 'useBlockDisplayInformation', () => {
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	it( 'displays pattern information for a pattern section that is not being edited', () => {
 		setupUseSelect();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -85,7 +89,7 @@ describe( 'useBlockDisplayInformation', () => {
 
 	it( 'displays block information for a pattern section that is being edited', () => {
 		setupUseSelect( { isSectionBlock: false } );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -109,7 +113,7 @@ describe( 'useBlockDisplayInformation', () => {
 			},
 			isSectionBlock: false,
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -127,7 +131,7 @@ describe( 'useBlockDisplayInformation', () => {
 		setupUseSelect( {
 			isSectionBlock: false,
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 
@@ -152,7 +156,7 @@ describe( 'useBlockDisplayInformation', () => {
 				description: 'A template part.',
 			},
 		} );
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
 

package/src/components/use-block-drop-zone/index.js

@@ -151,7 +151,7 @@ export function getDropTargetPosition(
 				rect,
 				allowedEdges
 			);
-			// If the the point is close to a side, prioritize that side.
+			// If the point is close to a side, prioritize that side.
 			const [ sideDistance, sideEdge ] = getDistanceToNearestEdge(
 				position,
 				rect,
@@ -572,7 +572,7 @@ export default function useBlockDropZone( {
 		onDrop: onBlockDrop,
 		onDragOver( event ) {
 			// `currentTarget` is only available while the event is being
-			// handled, so get it now and pass it to the thottled function.
+			// handled, so get it now and pass it to the throttled function.
 			// https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
 			throttled( event, event.currentTarget.ownerDocument );
 		},

package/src/components/use-block-drop-zone/test/index.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { getDropTargetPosition } from '..';
 
 const elementData = [

package/src/components/use-on-block-drop/test/index.js

@@ -1,15 +1,14 @@
+import { describe, expect, it, vi } from 'vitest';
 import { findTransform, pasteHandler } from '@wordpress/blocks';
 import { parseDropEvent, onFilesDrop, onHTMLDrop, onBlockDrop } from '..';
 
 const noop = () => {};
 
-jest.mock( '@wordpress/blocks/src/api/factory', () => ( {
-	findTransform: jest.fn(),
-	getBlockTransforms: jest.fn(),
-} ) );
-
-jest.mock( '@wordpress/blocks/src/api/raw-handling', () => ( {
-	pasteHandler: jest.fn(),
+vi.mock( import( '@wordpress/blocks' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	findTransform: vi.fn(),
+	getBlockTransforms: vi.fn(),
+	pasteHandler: vi.fn(),
 } ) );
 
 describe( 'parseDropEvent', () => {
@@ -92,7 +91,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = noop;
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -120,9 +119,9 @@ describe( 'onBlockDrop', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		// Target and source block index is the same.
-		const getBlockIndex = jest.fn( () => targetBlockIndex );
+		const getBlockIndex = vi.fn( () => targetBlockIndex );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -152,9 +151,9 @@ describe( 'onBlockDrop', () => {
 	it( 'does nothing if the block is dropped as a child of itself', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 6 );
+		const getBlockIndex = vi.fn( () => 6 );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -184,12 +183,10 @@ describe( 'onBlockDrop', () => {
 	it( 'does nothing if the block is dropped as a descendant of itself', () => {
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
-		const getClientIdsOfDescendants = jest.fn( () => [
-			targetRootClientId,
-		] );
-		const moveBlocks = jest.fn();
+		const getClientIdsOfDescendants = vi.fn( () => [ targetRootClientId ] );
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -220,9 +217,9 @@ describe( 'onBlockDrop', () => {
 		const sourceRootClientId = '0';
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -257,10 +254,10 @@ describe( 'onBlockDrop', () => {
 		const sourceRootClientId = '0';
 		const targetRootClientId = sourceRootClientId;
 		const targetBlockIndex = 5;
-		const getBlockIndex = jest.fn( () => 1 );
+		const getBlockIndex = vi.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocks = jest.fn();
+		const moveBlocks = vi.fn();
 
 		const event = {
 			dataTransfer: {
@@ -296,11 +293,11 @@ describe( 'onBlockDrop', () => {
 
 describe( 'onFilesDrop', () => {
 	it( 'does nothing if hasUploadPermissions is false', () => {
-		const updateBlockAttributes = jest.fn();
+		const updateBlockAttributes = vi.fn();
 		const canInsertBlockType = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {} ) );
+		const getSettings = vi.fn( () => ( {} ) );
 
 		const onFileDropHandler = onFilesDrop(
 			targetRootClientId,
@@ -320,10 +317,10 @@ describe( 'onFilesDrop', () => {
 		// to have no return value.
 		findTransform.mockImplementation( noop );
 		const updateBlockAttributes = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {
+		const getSettings = vi.fn( () => ( {
 			mediaUpload: true,
 		} ) );
 
@@ -345,13 +342,13 @@ describe( 'onFilesDrop', () => {
 		// of the transform isn't important just that there is a callable 'transform'
 		// function that returns a value.
 		const blocks = 'blocks';
-		const transformation = { transform: jest.fn( () => blocks ) };
+		const transformation = { transform: vi.fn( () => blocks ) };
 		findTransform.mockImplementation( () => transformation );
 		const updateBlockAttributes = noop;
 		const canInsertBlockType = noop;
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 		const targetRootClientId = '1';
-		const getSettings = jest.fn( () => ( {
+		const getSettings = vi.fn( () => ( {
 			mediaUpload: true,
 		} ) );
 
@@ -377,7 +374,7 @@ describe( 'onFilesDrop', () => {
 describe( 'onHTMLDrop', () => {
 	it( 'does nothing if the HTML cannot be converted into blocks', () => {
 		pasteHandler.mockImplementation( () => [] );
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 
 		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();
@@ -388,7 +385,7 @@ describe( 'onHTMLDrop', () => {
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
 		const blocks = [ 'blocks' ];
 		pasteHandler.mockImplementation( () => blocks );
-		const insertOrReplaceBlocks = jest.fn();
+		const insertOrReplaceBlocks = vi.fn();
 
 		const eventHandler = onHTMLDrop( insertOrReplaceBlocks );
 		eventHandler();

package/src/components/warning/test/__snapshots__/{index.jsx.snap → index.jsdom.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Warning should match snapshot 1`] = `
+exports[`Warning > should match snapshot 1`] = `
 <div>
   <div
     style="display: contents; all: initial;"

package/src/components/warning/test/{index.jsx → index.jsdom.test.jsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Warning from '../index';

package/src/components/writing-flow/index.jsx

@@ -7,6 +7,7 @@ import useEditableRoot from './use-editable-root';
 import useHomeEnd from './use-home-end';
 import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
+import useUndoAutomaticChange from './use-undo-automatic-change';
 import useArrowNav from './use-arrow-nav';
 import { usePreviewModeNav } from './use-preview-mode-nav';
 import useSelectAll from './use-select-all';
@@ -28,6 +29,10 @@ export function useWritingFlow() {
 	return [
 		before,
 		useMergeRefs( [
+			// Same-node listeners run in registration order, and the undo of
+			// an automatic change must claim Escape before the tab-nav
+			// listeners step out of the canvas.
+			useUndoAutomaticChange(),
 			ref,
 			useEditableRootEventHandlers(),
 			useClipboardHandler(),