@wordpress/editor 14.48.1 → 14.49.0

package/src/components/post-saved-state/test/index.js

@@ -71,6 +71,24 @@ describe( 'PostSavedState', () => {
 		expect( screen.getByRole( 'button' ) ).toMatchSnapshot();
 	} );
 
+	it( 'returns a disabled button while a non-post entity is being saved', () => {
+		useSelect.mockImplementation( () => ( {
+			isDirty: true,
+			isNew: false,
+			isSaveable: true,
+			isSaving: false,
+			isSavingNonPostEntityChanges: true,
+			postStatus: 'draft',
+		} ) );
+
+		render( <PostSavedState /> );
+
+		expect( screen.getByRole( 'button' ) ).toHaveAttribute(
+			'aria-disabled',
+			'true'
+		);
+	} );
+
 	it( 'should return Saved text if not new and not dirty', () => {
 		useSelect.mockImplementation( () => ( {
 			isDirty: false,

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

@@ -246,7 +246,6 @@ export default function PostStatus() {
 														) }
 														type="text"
 														id={ passwordInputId }
-														__next40pxDefaultSize
 														maxLength={ 255 }
 													/>
 												</div>

package/src/components/post-taxonomies/flat-term-selector.js

@@ -3,11 +3,8 @@
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useEffect, useMemo, useState } from '@wordpress/element';
-import {
-	FormTokenField,
-	withFilters,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { FormTokenField, withFilters } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useDebounce } from '@wordpress/compose';
@@ -280,7 +277,7 @@ export function FlatTermSelector( { slug } ) {
 	);
 
 	return (
-		<VStack spacing={ 4 }>
+		<Stack direction="column" gap="lg">
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }
@@ -296,7 +293,7 @@ export function FlatTermSelector( { slug } ) {
 				} }
 			/>
 			<MostUsedTerms taxonomy={ taxonomy } onSelect={ appendTerm } />
-		</VStack>
+		</Stack>
 	);
 }
 

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -462,7 +462,6 @@ export function HierarchicalTermSelector( { slug } ) {
 				<form onSubmit={ onAddTerm }>
 					<Flex direction="column" gap="4">
 						<TextControl
-							__next40pxDefaultSize
 							className="editor-post-taxonomies__hierarchical-terms-input"
 							label={ newTermLabel }
 							value={ formName }

package/src/components/post-template/create-new-template-modal.js

@@ -121,7 +121,6 @@ export default function CreateNewTemplateModal( { onClose } ) {
 			<form onSubmit={ submit }>
 				<VStack spacing="3">
 					<TextControl
-						__next40pxDefaultSize
 						label={ __( 'Name' ) }
 						value={ title }
 						onChange={ setTitle }

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.js';
+import { diffLines } from 'diff/lib/diff/line.js';
+
+// 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' ),
 			};