@wordpress/editor 14.48.1 → 14.48.2-next.v.202606191442.0

package/src/components/post-text-editor/index.js

@@ -6,6 +6,7 @@ import Textarea from 'react-autosize-textarea';
 /**
  * WordPress dependencies
  */
+import { useLayoutEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -16,6 +17,7 @@ import { VisuallyHidden } from '@wordpress/ui';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { adjustPosition, getDiff } from './utils';
 
 /**
  * Displays the Post Text Editor along with content in Visual and Text mode.
@@ -24,6 +26,9 @@ import { store as editorStore } from '../../store';
  */
 export default function PostTextEditor() {
 	const instanceId = useInstanceId( PostTextEditor );
+	const textareaRef = useRef();
+	const previousValueRef = useRef();
+	const selectionRef = useRef();
 	const { value, type, id } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId, getEditedPostContent } =
 			select( editorStore );
@@ -35,6 +40,58 @@ export default function PostTextEditor() {
 	}, [] );
 	const { editEntityRecord } = useDispatch( coreStore );
 
+	useLayoutEffect( () => {
+		const textarea = textareaRef.current;
+		const previousValue = previousValueRef.current;
+		previousValueRef.current = value;
+
+		if (
+			! textarea ||
+			previousValue === undefined ||
+			previousValue === value ||
+			! selectionRef.current
+		) {
+			return;
+		}
+
+		const { selectionStart, selectionEnd, selectionDirection } =
+			selectionRef.current;
+		const changes = getDiff( previousValue, value );
+		const adjustedSelectionStart = adjustPosition(
+			selectionStart,
+			changes,
+			previousValue,
+			value
+		);
+		const adjustedSelectionEnd = adjustPosition(
+			selectionEnd,
+			changes,
+			previousValue,
+			value
+		);
+
+		textarea.setSelectionRange(
+			adjustedSelectionStart,
+			adjustedSelectionEnd,
+			selectionDirection
+		);
+		selectionRef.current = {
+			selectionStart: adjustedSelectionStart,
+			selectionEnd: adjustedSelectionEnd,
+			selectionDirection,
+		};
+	}, [ value ] );
+
+	const updateSelection = ( event ) => {
+		const { selectionStart, selectionEnd, selectionDirection } =
+			event.target;
+		selectionRef.current = {
+			selectionStart,
+			selectionEnd,
+			selectionDirection,
+		};
+	};
+
 	return (
 		<>
 			<VisuallyHidden
@@ -46,14 +103,22 @@ export default function PostTextEditor() {
 			<Textarea
 				autoComplete="off"
 				dir="auto"
+				ref={ textareaRef }
 				value={ value }
 				onChange={ ( event ) => {
+					updateSelection( event );
+					previousValueRef.current = event.target.value;
 					editEntityRecord( 'postType', type, id, {
 						content: event.target.value,
 						blocks: undefined,
 						selection: undefined,
 					} );
 				} }
+				onFocus={ updateSelection }
+				// A click or arrow-key caret move does not fire `select` (only
+				// range selections do), so track those moves via mouseup/keyup.
+				onMouseUp={ updateSelection }
+				onKeyUp={ updateSelection }
 				className="editor-post-text-editor"
 				id={ `post-content-${ instanceId }` }
 				placeholder={ __( 'Start writing with text or HTML' ) }

package/src/components/post-text-editor/test/utils.js

@@ -0,0 +1,210 @@
+/**
+ * Internal dependencies
+ */
+import { getAdjustedCursorPosition } from '../utils';
+
+describe( 'PostTextEditor', () => {
+	describe( 'getAdjustedCursorPosition', () => {
+		it( 'keeps the cursor in place when text is inserted after it', () => {
+			expect(
+				getAdjustedCursorPosition( 3, 'foo bar', 'foo bar baz' )
+			).toBe( 3 );
+		} );
+
+		it( 'moves the cursor when text is inserted before it', () => {
+			expect( getAdjustedCursorPosition( 4, 'abcd', 'abXYcd' ) ).toBe(
+				6
+			);
+		} );
+
+		it( 'moves the cursor when text is deleted before it', () => {
+			expect( getAdjustedCursorPosition( 6, 'abcdef', 'abef' ) ).toBe(
+				4
+			);
+		} );
+
+		it( 'moves the cursor to the end of a replacement around it', () => {
+			expect( getAdjustedCursorPosition( 3, 'abcdef', 'abXYef' ) ).toBe(
+				4
+			);
+		} );
+
+		it( 'handles multiple separated changes in one update', () => {
+			expect(
+				getAdjustedCursorPosition( 7, 'abcdefghij', 'abXXcdefYYghij' )
+			).toBe( 11 );
+		} );
+
+		it( 'keeps the cursor in place when large text is inserted after it', () => {
+			const oldValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const newValue = `${ oldValue }remote\n`;
+
+			expect(
+				getAdjustedCursorPosition( 'cursor'.length, oldValue, newValue )
+			).toBe( 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large text is inserted before it', () => {
+			const oldValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const newValue = `remote\n${ oldValue }`;
+
+			expect(
+				getAdjustedCursorPosition( 'cursor'.length, oldValue, newValue )
+			).toBe( 'remote\n'.length + 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large text is deleted before it', () => {
+			const deletedPrefix = 'remote\n';
+			const newValue = `cursor\n${ 'a\n'.repeat( 6000 ) }`;
+			const oldValue = `${ deletedPrefix }${ newValue }`;
+			const position = deletedPrefix.length + 'cursor'.length;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( 'cursor'.length );
+		} );
+
+		it( 'moves the cursor when large single-line HTML is inserted before it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const insertedText = 'remote';
+			const tailText = 'tail';
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }${ insertedText }${ content.slice(
+				0,
+				100000
+			) }${ tailText }${ content.slice( 100000 ) }${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + insertedText.length );
+		} );
+
+		it( 'moves the cursor when large single-line HTML is deleted before it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const deletedText = 'remote'.repeat( 1000 );
+			const deletedTailText = 'tail';
+			const content = 'a'.repeat( 120000 );
+			const newValue = `${ opening }${ content }${ closing }`;
+			const oldValue = `${ opening }${ deletedText }${ content.slice(
+				0,
+				100000
+			) }${ deletedTailText }${ content.slice( 100000 ) }${ closing }`;
+			const position = opening.length + deletedText.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - deletedText.length );
+		} );
+
+		it( 'keeps the cursor in an unchanged same-line prefix before a large replacement', () => {
+			const prefix = `${ 'a'.repeat( 300 ) }\n${ 'b'.repeat( 199 ) }`;
+			const suffix = 'tail';
+			const oldValue = `${ prefix }old${ 'x'.repeat(
+				11000
+			) }${ suffix }`;
+			const newValue = `${ prefix }new${ 'y'.repeat(
+				11000
+			) }${ suffix }`;
+			const position = 450;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position );
+		} );
+
+		it( 'moves the cursor when large same-line text is inserted before it and replaced after it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const insertedText = 'remote';
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }${ content.slice(
+				0,
+				50000
+			) }${ insertedText }${ content.slice(
+				50000,
+				100000
+			) }b${ content.slice( 100001 ) }${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + insertedText.length );
+		} );
+
+		it( 'moves the cursor when large same-line text is deleted before it and inserted after it', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const deletedText = 'remote'.repeat( 1000 );
+			const insertedTailText = 'tail';
+			const commonTextBeforeCursor = 500;
+			const oldValue = `${ opening }${ content.slice(
+				0,
+				50000
+			) }${ deletedText }${ content.slice( 50000 ) }${ closing }`;
+			const newValue = `${ opening }${ content.slice(
+				0,
+				100000
+			) }${ insertedTailText }${ content.slice( 100000 ) }${ closing }`;
+			const position =
+				opening.length +
+				50000 +
+				deletedText.length +
+				commonTextBeforeCursor;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - deletedText.length );
+		} );
+
+		it( 'maps the cursor through a pure insertion in a large single line', () => {
+			// "HEAD"/"TAIL" wrap the unchanged content, so the new value contains
+			// the old changed window and it routes through the line-diff fallback.
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const oldValue = `${ opening }${ content }${ closing }`;
+			const newValue = `${ opening }HEAD${ content }TAIL${ closing }`;
+			const position = opening.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position + 'HEAD'.length );
+		} );
+
+		it( 'maps the cursor through a pure deletion in a large single line', () => {
+			const opening = '<!-- wp:paragraph -->\n<p>';
+			const closing = '</p>\n<!-- /wp:paragraph -->';
+			const content = 'a'.repeat( 120000 );
+			const oldValue = `${ opening }HEAD${ content }TAIL${ closing }`;
+			const newValue = `${ opening }${ content }${ closing }`;
+			const position = opening.length + 'HEAD'.length + 60000;
+
+			expect(
+				getAdjustedCursorPosition( position, oldValue, newValue )
+			).toBe( position - 'HEAD'.length );
+		} );
+
+		it( 'handles a large fully-divergent replacement without blocking', () => {
+			// Neither side contains the other and the changed window exceeds the
+			// diffChars threshold, so this routes to the line-diff fallback. A
+			// character diff here would be O(n^2) and freeze the main thread for
+			// seconds; completing within the test timeout guards that path.
+			const oldValue = 'a'.repeat( 8000 );
+			const newValue = 'b'.repeat( 8000 );
+			const result = getAdjustedCursorPosition(
+				4000,
+				oldValue,
+				newValue
+			);
+
+			expect( result ).toBeGreaterThanOrEqual( 0 );
+			expect( result ).toBeLessThanOrEqual( newValue.length );
+		} );
+	} );
+} );

package/src/components/post-text-editor/utils.js

@@ -0,0 +1,204 @@
+/**
+ * External dependencies
+ */
+import { diffChars } from 'diff/lib/diff/character';
+import { diffLines } from 'diff/lib/diff/line';
+
+// Character diffing (Myers) is cheap when the edit distance is small but
+// degrades toward O(n^2) as the two strings diverge: a full replacement of
+// ~10k differing chars blocks the main thread for seconds. Cap the input handed
+// to diffChars so the worst case stays small (~100ms); larger windows fall back
+// to a line diff, with the cursor remapped by getCursorOffsetFromCommonText...
+const STRING_TOO_LARGE_THRESHOLD = 1000;
+
+/**
+ * Diffs two strings into a list of `{ value, added?, removed? }` change parts.
+ *
+ * @param {string} oldValue The previous string.
+ * @param {string} newValue The next string.
+ * @return {Array<Object>} The diff change parts.
+ */
+export function getDiff( oldValue, newValue ) {
+	const maxStringLength = Math.max( oldValue.length, newValue.length );
+
+	if ( maxStringLength <= STRING_TOO_LARGE_THRESHOLD ) {
+		return diffChars( oldValue, newValue );
+	}
+
+	let start = 0;
+	const minStringLength = Math.min( oldValue.length, newValue.length );
+
+	while (
+		start < minStringLength &&
+		oldValue[ start ] === newValue[ start ]
+	) {
+		start++;
+	}
+
+	let oldEnd = oldValue.length;
+	let newEnd = newValue.length;
+
+	while (
+		oldEnd > start &&
+		newEnd > start &&
+		oldValue[ oldEnd - 1 ] === newValue[ newEnd - 1 ]
+	) {
+		oldEnd--;
+		newEnd--;
+	}
+
+	const oldChangedValue = oldValue.slice( start, oldEnd );
+	const newChangedValue = newValue.slice( start, newEnd );
+	const maxChangedStringLength = Math.max(
+		oldChangedValue.length,
+		newChangedValue.length
+	);
+	let changes;
+
+	if ( maxChangedStringLength <= STRING_TOO_LARGE_THRESHOLD ) {
+		changes = diffChars( oldChangedValue, newChangedValue );
+	} else {
+		changes = diffLines( oldChangedValue, newChangedValue );
+	}
+
+	if ( start > 0 ) {
+		changes.unshift( { value: oldValue.slice( 0, start ) } );
+	}
+
+	if ( oldEnd < oldValue.length ) {
+		changes.push( { value: oldValue.slice( oldEnd ) } );
+	}
+
+	return changes;
+}
+
+function clampCursorPosition( position, value ) {
+	return Math.max( 0, Math.min( value.length, position ) );
+}
+
+// A coarse (line-level) diff reports a whole changed region as one replacement,
+// which would otherwise snap the cursor to the region's end. Recover a precise
+// position by finding the longest run of text ending at the cursor that is
+// preserved in the replacement, then placing the cursor just past where that
+// run starts in the new text. This uses indexOf (near-linear in V8) rather than
+// a character diff, so it stays cheap even across a large single-line region.
+function getCursorOffsetFromCommonTextBeforeCursor(
+	oldValue,
+	newValue,
+	position
+) {
+	const oldValueBeforeCursor = oldValue.slice( 0, position );
+	let low = 1;
+	let high = oldValueBeforeCursor.length;
+	let cursorOffset;
+
+	while ( low <= high ) {
+		const length = Math.floor( ( low + high ) / 2 );
+		const index = newValue.indexOf(
+			oldValueBeforeCursor.slice( oldValueBeforeCursor.length - length )
+		);
+
+		if ( index === -1 ) {
+			high = length - 1;
+		} else {
+			cursorOffset = index + length;
+			low = length + 1;
+		}
+	}
+
+	return cursorOffset;
+}
+
+/**
+ * Maps a cursor position from the old string to the new string given a diff.
+ *
+ * @param {number}        position The cursor position in the old string.
+ * @param {Array<Object>} changes  The diff returned by `getDiff`.
+ * @param {string}        oldValue The previous string.
+ * @param {string}        newValue The next string.
+ * @return {number} The adjusted cursor position in the new string.
+ */
+export function adjustPosition( position, changes, oldValue, newValue ) {
+	let oldIndex = 0;
+	let newIndex = 0;
+	let adjustedPosition = position;
+
+	for ( let i = 0; i < changes.length; i++ ) {
+		const change = changes[ i ];
+		if ( ! change.added && ! change.removed ) {
+			oldIndex += change.value.length;
+			newIndex += change.value.length;
+			continue;
+		}
+
+		const oldStart = oldIndex;
+		const newStart = newIndex;
+		let oldLength = 0;
+		let newLength = 0;
+
+		while (
+			i < changes.length &&
+			( changes[ i ].added || changes[ i ].removed )
+		) {
+			if ( changes[ i ].removed ) {
+				oldLength += changes[ i ].value.length;
+			} else {
+				newLength += changes[ i ].value.length;
+			}
+			i++;
+		}
+		i--;
+
+		const oldEnd = oldStart + oldLength;
+		const newEnd = newStart + newLength;
+
+		if ( position < oldStart ) {
+			// The cursor is before this change, so nothing here can move it.
+			break;
+		}
+
+		if ( oldLength === 0 ) {
+			// Pure insertion at or before the cursor: shift it right by the
+			// inserted length.
+			adjustedPosition += newLength;
+		} else if ( position <= oldEnd ) {
+			// The cursor falls inside a replaced region; recover its precise
+			// spot from the text preserved around it.
+			const cursorOffset = getCursorOffsetFromCommonTextBeforeCursor(
+				oldValue.slice( oldStart, oldEnd ),
+				newValue.slice( newStart, newEnd ),
+				position - oldStart
+			);
+
+			adjustedPosition =
+				cursorOffset === undefined ? newEnd : newStart + cursorOffset;
+			break;
+		} else {
+			// The cursor is after this change: shift it by the net length delta.
+			adjustedPosition += newLength - oldLength;
+		}
+
+		oldIndex += oldLength;
+		newIndex += newLength;
+	}
+
+	return clampCursorPosition( adjustedPosition, newValue );
+}
+
+/**
+ * Diffs `oldValue` against `newValue` and maps a cursor `position` from the old
+ * string to the new one.
+ *
+ * @param {number} position The cursor position in the old string.
+ * @param {string} oldValue The previous string.
+ * @param {string} newValue The next string.
+ * @return {number} The adjusted cursor position in the new string.
+ */
+export function getAdjustedCursorPosition( position, oldValue, newValue ) {
+	return adjustPosition(
+		position,
+		getDiff( oldValue, newValue ),
+		oldValue,
+		newValue
+	);
+}

package/src/components/post-type-support-check/test/index.js

@@ -54,6 +54,17 @@ describe( 'PostTypeSupportCheck', () => {
 		expect( container ).not.toHaveTextContent( 'Supported' );
 	} );
 
+	it( 'does not crash when the post type has no `supports` object', () => {
+		setupUseSelectMock( {} );
+		const { container } = render(
+			<PostTypeSupportCheck supportKeys="title">
+				Supported
+			</PostTypeSupportCheck>
+		);
+
+		expect( container ).not.toHaveTextContent( 'Supported' );
+	} );
+
 	it( 'renders its children when post type is known and supports', () => {
 		setupUseSelectMock( {
 			supports: {

package/src/components/post-url/index.js

@@ -58,7 +58,7 @@ export default function PostURL( { onClose } ) {
 			postSlug: safeDecodeURIComponent(
 				select( editorStore ).getEditedPostSlug()
 			),
-			viewPostLabel: postType?.labels.view_item,
+			viewPostLabel: postType?.labels?.view_item,
 			postLink: post.link,
 			permalinkPrefix: permalinkParts?.prefix,
 			permalinkSuffix: permalinkParts?.suffix,

package/src/components/post-view-link/index.js

@@ -24,7 +24,7 @@ export default function PostViewLink() {
 			return {
 				permalink: select( editorStore ).getPermalink(),
 				isPublished: select( editorStore ).isCurrentPostPublished(),
-				label: postType?.labels.view_item,
+				label: postType?.labels?.view_item,
 				hasLoaded: !! postType,
 				showIconLabels: get( 'core', 'showIconLabels' ),
 			};

package/src/components/post-view-link/test/index.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import PostViewLink from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+
+const DEFAULTS = {
+	postType: { labels: { view_item: 'View Post' } },
+	permalink: 'https://example.com/sample/',
+	isPublished: true,
+	showIconLabels: false,
+};
+
+function setupUseSelectMock( overrides = {} ) {
+	// Use object spread (not destructure defaults) so an explicit `undefined`
+	// override actually overrides the default value.
+	const data = { ...DEFAULTS, ...overrides };
+	useSelect.mockImplementation( ( cb ) =>
+		cb( () => ( {
+			getCurrentPostType: () => 'post',
+			getPostType: () => data.postType,
+			getPermalink: () => data.permalink,
+			isCurrentPostPublished: () => data.isPublished,
+			get: () => data.showIconLabels,
+		} ) )
+	);
+}
+
+describe( 'PostViewLink', () => {
+	it( 'renders the post type-specific view label when available', () => {
+		setupUseSelectMock();
+		render( <PostViewLink /> );
+		expect( screen.getByLabelText( 'View Post' ) ).toBeInTheDocument();
+	} );
+
+	it( 'falls back to "View post" without crashing when the post type has no labels', () => {
+		// See https://github.com/WordPress/gutenberg/issues/62918.
+		setupUseSelectMock( { postType: {} } );
+		render( <PostViewLink /> );
+		expect( screen.getByLabelText( 'View post' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders nothing if the post is not published', () => {
+		setupUseSelectMock( { isPublished: false } );
+		const { container } = render( <PostViewLink /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'renders nothing if no permalink is available', () => {
+		setupUseSelectMock( { permalink: undefined } );
+		const { container } = render( <PostViewLink /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'renders nothing while the post type has not loaded', () => {
+		setupUseSelectMock( { postType: undefined } );
+		const { container } = render( <PostViewLink /> );
+		expect( container ).toBeEmptyDOMElement();
+	} );
+} );

package/src/components/provider/index.js

@@ -380,7 +380,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		}, [ post.type, post.id, setEditedPost, removeNotice ] );
 
 		// Synchronize the editor settings as they change.
-		useEffect( () => {
+		// Do it as a layout effect so that rendered UI with outdated settings is not painted.
+		useLayoutEffect( () => {
 			updateEditorSettings( settings );
 		}, [ settings, updateEditorSettings ] );
 

package/src/components/resizable-editor/resize-handle.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 import { __unstableMotion as motion } from '@wordpress/components';
-// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
 import { Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.

package/src/components/revision-diff-panel/index.js

@@ -15,8 +15,14 @@ import PostPanelRow from '../post-panel-row';
  * @param {string}  props.title       Panel title.
  * @param {Object}  props.entries     Map of key → diffWords parts arrays.
  * @param {boolean} props.initialOpen Whether the panel starts open.
+ * @param {string}  [props.className] Optional class for the content wrapper.
  */
-export default function RevisionDiffPanel( { title, entries, initialOpen } ) {
+export default function RevisionDiffPanel( {
+	title,
+	entries,
+	initialOpen,
+	className,
+} ) {
 	if ( ! entries ) {
 		return null;
 	}
@@ -53,7 +59,7 @@ export default function RevisionDiffPanel( { title, entries, initialOpen } ) {
 
 	return (
 		<PanelBody title={ title } initialOpen={ initialOpen }>
-			{ fields }
+			<div className={ className }>{ fields }</div>
 		</PanelBody>
 	);
 }