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

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

@@ -36,6 +36,7 @@ import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
 import { useRevisionBlocks } from './use-revision-blocks';
 import useCommands from '../commands';
 import useUploadSaveLock from './use-upload-save-lock';
+import useNetworkReconnect from './use-network-reconnect';
 import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
@@ -379,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 ] );
 
@@ -403,6 +405,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		// Lock post saving when media uploads are in progress (experimental feature).
 		useUploadSaveLock();
 
+		// Pause/resume media upload queue on network disconnect/reconnect.
+		useNetworkReconnect();
+
 		if ( ! isReady || ! mode ) {
 			return null;
 		}

package/src/components/provider/test/use-network-reconnect.js

@@ -0,0 +1,137 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useNetworkReconnect from '../use-network-reconnect';
+
+const mockPauseQueue = jest.fn();
+const mockResumeQueue = jest.fn();
+
+jest.mock( '@wordpress/data', () => ( {
+	useRegistry: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/upload-media', () => ( {
+	store: 'core/upload-media',
+} ) );
+
+jest.mock( '../../../lock-unlock', () => ( {
+	unlock: jest.fn( () => ( {
+		pauseQueue: mockPauseQueue,
+		resumeQueue: mockResumeQueue,
+	} ) ),
+} ) );
+
+describe( 'useNetworkReconnect', () => {
+	const originalAddEventListener = window.addEventListener;
+	const originalRemoveEventListener = window.removeEventListener;
+	let listeners;
+
+	beforeEach( () => {
+		mockPauseQueue.mockClear();
+		mockResumeQueue.mockClear();
+		listeners = {};
+		window.addEventListener = jest.fn( ( event, cb ) => {
+			listeners[ event ] = cb;
+		} );
+		window.removeEventListener = jest.fn( ( event ) => {
+			delete listeners[ event ];
+		} );
+		useRegistry.mockReturnValue( {
+			dispatch: jest.fn( () => ( {} ) ),
+		} );
+	} );
+
+	afterEach( () => {
+		window.addEventListener = originalAddEventListener;
+		window.removeEventListener = originalRemoveEventListener;
+		delete window.__clientSideMediaProcessing;
+	} );
+
+	it( 'does nothing when client-side media processing is disabled', () => {
+		window.__clientSideMediaProcessing = false;
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).not.toHaveBeenCalled();
+	} );
+
+	it( 'does nothing when the flag is undefined', () => {
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).not.toHaveBeenCalled();
+	} );
+
+	it( 'registers offline and online listeners when enabled', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		expect( window.addEventListener ).toHaveBeenCalledWith(
+			'offline',
+			expect.any( Function )
+		);
+		expect( window.addEventListener ).toHaveBeenCalledWith(
+			'online',
+			expect.any( Function )
+		);
+	} );
+
+	it( 'pauses the queue when the offline event fires', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.offline();
+
+		expect( mockPauseQueue ).toHaveBeenCalledTimes( 1 );
+		expect( mockResumeQueue ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resumes the queue when the online event fires', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.online();
+
+		expect( mockResumeQueue ).toHaveBeenCalledTimes( 1 );
+		expect( mockPauseQueue ).not.toHaveBeenCalled();
+	} );
+
+	it( 'handles multiple offline/online cycles', () => {
+		window.__clientSideMediaProcessing = true;
+		renderHook( () => useNetworkReconnect() );
+
+		listeners.offline();
+		listeners.online();
+		listeners.offline();
+		listeners.online();
+
+		expect( mockPauseQueue ).toHaveBeenCalledTimes( 2 );
+		expect( mockResumeQueue ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'removes the listeners on unmount', () => {
+		window.__clientSideMediaProcessing = true;
+		const { unmount } = renderHook( () => useNetworkReconnect() );
+
+		unmount();
+
+		expect( window.removeEventListener ).toHaveBeenCalledWith(
+			'offline',
+			expect.any( Function )
+		);
+		expect( window.removeEventListener ).toHaveBeenCalledWith(
+			'online',
+			expect.any( Function )
+		);
+		expect( listeners.offline ).toBeUndefined();
+		expect( listeners.online ).toBeUndefined();
+	} );
+} );

package/src/components/provider/use-network-reconnect.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useRegistry } from '@wordpress/data';
+import { store as uploadStore } from '@wordpress/upload-media';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * A hook that pauses the media upload queue when the browser goes offline
+ * and resumes it when connectivity is restored.
+ *
+ * Only active when client-side media processing is enabled.
+ */
+export default function useNetworkReconnect() {
+	const isEnabled = window.__clientSideMediaProcessing;
+	const registry = useRegistry();
+
+	useEffect( () => {
+		if ( ! isEnabled ) {
+			return;
+		}
+
+		const handleOffline = () => {
+			unlock( registry.dispatch( uploadStore ) ).pauseQueue();
+		};
+
+		const handleOnline = () => {
+			unlock( registry.dispatch( uploadStore ) ).resumeQueue();
+		};
+
+		window.addEventListener( 'offline', handleOffline );
+		window.addEventListener( 'online', handleOnline );
+
+		return () => {
+			window.removeEventListener( 'offline', handleOffline );
+			window.removeEventListener( 'online', handleOnline );
+		};
+	}, [ isEnabled, registry ] );
+}

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>
 	);
 }

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

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { diffWords } from 'diff/lib/diff/word';
+/*
+ * `diffWordsWithSpace` preserves the v4-style per-word output. v6+
+ * stopped treating whitespace as a token in `diffWords`, which coalesces
+ * adjacent word changes into a single removed/added pair.
+ */
+import { diffWordsWithSpace } from 'diff';
 
 /**
  * WordPress dependencies
@@ -33,6 +38,16 @@ function stringifyValue( value ) {
 	return String( value );
 }
 
+/**
+ * Determines whether a meta value should be treated as empty.
+ *
+ * @param {string} str The stringified value.
+ * @return {boolean} Whether the value is effectively empty.
+ */
+function isEmptyMeta( str ) {
+	return ! str || str === '[]' || str === '{}';
+}
+
 /**
  * Panel that shows meta field diffs between the current revision and
  * the previous revision in the document sidebar during revision mode.
@@ -67,11 +82,11 @@ export default function RevisionFieldsDiffPanel() {
 			const revStr = stringifyValue( revisionMeta[ key ] );
 			const prevStr = stringifyValue( previousMeta[ key ] );
 
-			if ( ! revStr && ! prevStr ) {
+			if ( isEmptyMeta( revStr ) && isEmptyMeta( prevStr ) ) {
 				continue;
 			}
 
-			result[ key ] = diffWords( prevStr, revStr );
+			result[ key ] = diffWordsWithSpace( prevStr, revStr );
 		}
 
 		if ( Object.keys( result ).length === 0 ) {
@@ -86,6 +101,7 @@ export default function RevisionFieldsDiffPanel() {
 			title={ __( 'Meta' ) }
 			entries={ entries }
 			initialOpen={ false }
+			className="editor-revision-meta-diff__content"
 		/>
 	);
 }