@wordpress/editor 14.48.1 → 14.49.0

package/src/components/autosave-monitor/index.js

@@ -1,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -11,123 +10,89 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-export class AutosaveMonitor extends Component {
-	constructor( props ) {
-		super( props );
-		this.needsAutosave = !! ( props.isDirty && props.isAutosaveable );
-	}
-
-	componentDidMount() {
-		if ( ! this.props.disableIntervalChecks ) {
-			this.setAutosaveTimer();
-		}
-	}
-
-	componentDidUpdate( prevProps ) {
-		if ( this.props.disableIntervalChecks ) {
-			if ( this.props.editsReference !== prevProps.editsReference ) {
-				this.props.autosave();
-			}
-			return;
-		}
-
-		if ( this.props.interval !== prevProps.interval ) {
-			clearTimeout( this.timerId );
-			this.setAutosaveTimer();
-		}
-
-		if ( ! this.props.isDirty ) {
-			this.needsAutosave = false;
-			return;
-		}
-
-		if ( this.props.isAutosaving && ! prevProps.isAutosaving ) {
-			this.needsAutosave = false;
-			return;
-		}
-
-		if ( this.props.editsReference !== prevProps.editsReference ) {
-			this.needsAutosave = true;
-		}
-	}
-
-	componentWillUnmount() {
-		clearTimeout( this.timerId );
-	}
+/**
+ * Calls `callback` every `intervalInSeconds`. The latest `callback` is always
+ * invoked without resetting the timer.
+ *
+ * @param {Function} callback          Function to call on each tick.
+ * @param {number}   intervalInSeconds Seconds between ticks.
+ */
+function useInterval( callback, intervalInSeconds ) {
+	const callbackRef = useRef( callback );
 
-	setAutosaveTimer( timeout = this.props.interval * 1000 ) {
-		this.timerId = setTimeout( () => {
-			this.autosaveTimerHandler();
-		}, timeout );
-	}
+	useEffect( () => {
+		callbackRef.current = callback;
+	}, [ callback ] );
 
-	autosaveTimerHandler() {
-		if ( ! this.props.isAutosaveable ) {
-			this.setAutosaveTimer( 1000 );
+	useEffect( () => {
+		// Interval can be undefined before editor settings are populated.
+		if ( ! intervalInSeconds ) {
 			return;
 		}
 
-		if ( this.needsAutosave ) {
-			this.needsAutosave = false;
-			this.props.autosave();
-		}
-
-		this.setAutosaveTimer();
-	}
-
-	render() {
-		return null;
-	}
+		const id = setInterval(
+			() => callbackRef.current(),
+			intervalInSeconds * 1000
+		);
+		return () => clearInterval( id );
+	}, [ intervalInSeconds ] );
 }
 
 /**
  * Monitors the changes made to the edited post and triggers autosave if necessary.
  *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
+ * The post is checked every `interval` seconds and autosaved when there is something new to save.
  *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- *
- * @param {Object}   props                       - The properties passed to the component.
- * @param {Function} props.autosave              - The function to call when changes need to be saved.
- * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
- * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
- * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
- * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ * @param {Object}   props            The component props.
+ * @param {number}   [props.interval] Time in seconds between checks. Defaults to the editor's
+ *                                    `autosaveInterval` setting.
+ * @param {Function} [props.autosave] Function to call when changes need to be saved. Defaults to the
+ *                                    editor store's `autosave` action.
  *
  * @example
  * ```jsx
- * <AutosaveMonitor interval={30000} />
+ * <AutosaveMonitor interval={ 30 } />
  * ```
  */
-export default compose( [
-	withSelect( ( select, ownProps ) => {
-		const { getReferenceByDistinctEdits } = select( coreStore );
+export default function AutosaveMonitor( { interval, autosave } ) {
+	const { autosave: autosaveAction } = useDispatch( editorStore );
+	const triggerAutosave = autosave ?? autosaveAction;
+
+	const { getReferenceByDistinctEdits } = useSelect( coreStore );
+	const { isEditedPostDirty, isEditedPostAutosaveable, isAutosavingPost } =
+		useSelect( editorStore );
+
+	const autosaveInterval = useSelect(
+		( select ) => {
+			if ( interval !== undefined ) {
+				return interval;
+			}
 
-		const {
-			isEditedPostDirty,
-			isEditedPostAutosaveable,
-			isAutosavingPost,
-			getEditorSettings,
-		} = select( editorStore );
+			return select( editorStore ).getEditorSettings().autosaveInterval;
+		},
+		[ interval ]
+	);
 
-		const { interval = getEditorSettings().autosaveInterval } = ownProps;
+	// Reference of the edits last considered for autosaving. Mutable state that
+	// must not trigger a re-render, hence a ref.
+	const lastEditsReferenceRef = useRef();
 
-		return {
-			editsReference: getReferenceByDistinctEdits(),
-			isDirty: isEditedPostDirty(),
-			isAutosaveable: isEditedPostAutosaveable(),
-			isAutosaving: isAutosavingPost(),
-			interval,
-		};
-	} ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		autosave() {
-			const { autosave = dispatch( editorStore ).autosave } = ownProps;
-			autosave();
-		},
-	} ) ),
-] )( AutosaveMonitor );
+	useInterval( () => {
+		// The post can't be autosaved yet (e.g. its existing autosave is still
+		// loading). Keep any pending edits and try again on the next tick.
+		if ( ! isEditedPostAutosaveable() ) {
+			return;
+		}
+
+		const editsReference = getReferenceByDistinctEdits();
+		const hasNewEdits = editsReference !== lastEditsReferenceRef.current;
+		if ( hasNewEdits && isEditedPostDirty() && ! isAutosavingPost() ) {
+			// Only consume the edits reference when we autosave,
+			// so edits made during an in-flight autosave aren't skipped.
+			lastEditsReferenceRef.current = editsReference;
+			triggerAutosave();
+		}
+	}, autosaveInterval );
+
+	return null;
+}

package/src/components/autosave-monitor/test/index.js

@@ -3,195 +3,210 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
-import { AutosaveMonitor } from '../';
+import AutosaveMonitor from '../';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
 
 jest.useFakeTimers();
-jest.spyOn( global, 'clearTimeout' );
-jest.spyOn( global, 'setTimeout' );
+jest.spyOn( global, 'clearInterval' );
+jest.spyOn( global, 'setInterval' );
+
+// The current edited-post state, read live by the mocked selectors so it can be
+// changed between timer ticks without re-rendering the component.
+let state;
+
+function setState( overrides = {} ) {
+	state = {
+		editsReference: 1,
+		isDirty: false,
+		isAutosaveable: false,
+		isAutosaving: false,
+		autosaveInterval: 10,
+		...overrides,
+	};
+}
 
 describe( 'AutosaveMonitor', () => {
-	let setAutosaveTimerSpy;
 	beforeEach( () => {
-		setAutosaveTimerSpy = jest.spyOn(
-			AutosaveMonitor.prototype,
-			'setAutosaveTimer'
-		);
-	} );
-
-	afterEach( () => {
-		setAutosaveTimerSpy.mockClear();
+		setState();
+		// `useSelect( store )` (static mode) returns bound selectors; the
+		// component destructures the ones it needs from each call. The mapping
+		// form `useSelect( mapSelect )` receives a `select` that resolves to the
+		// same selectors.
+		useSelect.mockImplementation( ( mapSelectOrStore ) => {
+			const selectors = {
+				getReferenceByDistinctEdits: () => state.editsReference,
+				isEditedPostDirty: () => state.isDirty,
+				isEditedPostAutosaveable: () => state.isAutosaveable,
+				isAutosavingPost: () => state.isAutosaving,
+				getEditorSettings: () => ( {
+					autosaveInterval: state.autosaveInterval,
+				} ),
+			};
+			if ( typeof mapSelectOrStore === 'function' ) {
+				return mapSelectOrStore( () => selectors );
+			}
+			return selectors;
+		} );
+		useDispatch.mockReturnValue( { autosave: jest.fn() } );
+		setInterval.mockClear();
+		clearInterval.mockClear();
 	} );
 
 	it( 'should render nothing', () => {
-		const { container } = render( <AutosaveMonitor isDirty /> );
+		const { container } = render( <AutosaveMonitor /> );
 
 		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	it( 'should start autosave timer after being mounted', () => {
-		render( <AutosaveMonitor isDirty /> );
+	it( 'should start the autosave timer after being mounted', () => {
+		render( <AutosaveMonitor /> );
 
-		expect( setAutosaveTimerSpy ).toHaveBeenCalled();
+		expect( setInterval ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the autosave timer after being unmounted', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
+		const { rerender } = render( <AutosaveMonitor /> );
 
 		rerender( <div /> );
 
-		expect( clearTimeout ).toHaveBeenCalled();
+		expect( clearInterval ).toHaveBeenCalled();
 	} );
 
-	it( 'should clear and restart autosave timer when the interval changes', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
+	it( 'should restart the autosave timer when the interval changes', () => {
+		const { rerender } = render( <AutosaveMonitor interval={ 10 } /> );
 
-		rerender( <AutosaveMonitor isDirty interval={ 999 } /> );
+		setInterval.mockClear();
+		clearInterval.mockClear();
+		rerender( <AutosaveMonitor interval={ 999 } /> );
 
-		expect( clearTimeout ).toHaveBeenCalled();
-		expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
+		expect( clearInterval ).toHaveBeenCalled();
+		expect( setInterval ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should autosave when `editReference` changes', () => {
-		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
-		);
-
-		expect( autosave ).not.toHaveBeenCalled();
+	it( 'should schedule the timer using the interval in seconds', () => {
+		render( <AutosaveMonitor interval={ 5 } /> );
 
-		rerender(
-			<AutosaveMonitor
-				isDirty
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
+		expect( setInterval ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			5000
 		);
+	} );
 
-		jest.runOnlyPendingTimers();
+	it( 'should fall back to the editor autosaveInterval setting', () => {
+		setState( { autosaveInterval: 7 } );
+		render( <AutosaveMonitor /> );
 
-		expect( autosave ).toHaveBeenCalledTimes( 1 );
+		expect( setInterval ).toHaveBeenLastCalledWith(
+			expect.any( Function ),
+			7000
+		);
 	} );
 
-	it( 'should autosave when `editReference` changes and the post becomes dirty', () => {
+	it( 'should autosave a dirty, autosaveable post on the timer tick', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isAutosaveable autosave={ autosave } />
-		);
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
 		expect( autosave ).not.toHaveBeenCalled();
 
-		rerender(
-			<AutosaveMonitor
-				isDirty
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
-		);
-
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post is not dirty anymore', () => {
+	it( 'should not autosave when the post is not dirty', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
-		);
+		setState( { isDirty: false, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
+
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).not.toHaveBeenCalled();
+	} );
 
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				editsReference={ [] }
-			/>
-		);
+	it( 'should not autosave while an autosave is already in progress', () => {
+		const autosave = jest.fn();
+		setState( { isDirty: true, isAutosaveable: true, isAutosaving: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
 		expect( autosave ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post is not autosaving', () => {
+	it( 'should autosave edits made during an in-progress autosave once it finishes', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor isAutosaveable autosave={ autosave } />
-		);
-
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
+
+		// New edit arrives while an autosave is already in progress: the tick
+		// should not consume the edits reference nor trigger an autosave.
+		setState( {
+			isDirty: true,
+			isAutosaveable: true,
+			isAutosaving: true,
+			editsReference: 2,
+		} );
+		jest.advanceTimersByTime( 5000 );
 		expect( autosave ).not.toHaveBeenCalled();
 
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving={ false }
-				editsReference={ [] }
-			/>
-		);
-
-		jest.runOnlyPendingTimers();
-
-		expect( autosave ).not.toHaveBeenCalled();
+		// Once the autosave finishes, the pending edit must still be autosaved.
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should not autosave when `editReference` changes and the post started autosaving', () => {
+	it( 'should not autosave again until there are new edits', () => {
 		const autosave = jest.fn();
-		const { rerender } = render(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving={ false }
-			/>
-		);
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		expect( autosave ).not.toHaveBeenCalled();
-
-		rerender(
-			<AutosaveMonitor
-				isAutosaveable
-				autosave={ autosave }
-				isAutosaving
-				editsReference={ [] }
-			/>
-		);
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 
-		jest.runOnlyPendingTimers();
+		// No new edits: a subsequent tick should not autosave again.
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 
-		expect( autosave ).not.toHaveBeenCalled();
+		// A new distinct edit triggers another autosave.
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 2 );
 	} );
 
-	it( 'should schedule itself in another {interval} ms', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
-
-		rerender( <AutosaveMonitor isDirty isAutosaveable interval={ 5 } /> );
+	it( 'should keep pending edits and retry once the post becomes autosaveable', () => {
+		const autosave = jest.fn();
+		setState( { isDirty: true, isAutosaveable: false, editsReference: 2 } );
+		render( <AutosaveMonitor autosave={ autosave } interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).not.toHaveBeenCalled();
 
-		expect( setTimeout ).toHaveBeenLastCalledWith(
-			expect.any( Function ),
-			5000
-		);
+		setState( { isDirty: true, isAutosaveable: true, editsReference: 2 } );
+		jest.advanceTimersByTime( 5000 );
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
-		const { rerender } = render( <AutosaveMonitor isDirty /> );
-
-		rerender(
-			<AutosaveMonitor isDirty isAutosaveable={ false } interval={ 5 } />
-		);
+	it( 'should fall back to the editor store autosave action', () => {
+		const autosave = jest.fn();
+		useDispatch.mockReturnValue( { autosave } );
+		setState( { isDirty: true, isAutosaveable: true } );
+		render( <AutosaveMonitor interval={ 5 } /> );
 
-		jest.runOnlyPendingTimers();
+		jest.advanceTimersByTime( 5000 );
 
-		expect( setTimeout ).toHaveBeenLastCalledWith(
-			expect.any( Function ),
-			1000
-		);
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 } );

package/src/components/collab-sidebar/note-byline.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-// 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 { Stack, Tooltip } from '@wordpress/ui';
 import { __, _x } from '@wordpress/i18n';
 import {

package/src/components/collab-sidebar/note.js

@@ -6,12 +6,14 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { RawHTML, useRef, useState } from '@wordpress/element';
+import { useRef, useState, useLayoutEffect } from '@wordpress/element';
 import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+// eslint-disable-next-line @wordpress/use-recommended-components
+import { Button as UIButton } from '@wordpress/ui';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { moreVertical, published } from '@wordpress/icons';
 
@@ -66,6 +68,28 @@ export function Note( {
 	const [ actionState, setActionState ] = useState( null );
 	const actionButtonRef = useRef( null );
 
+	const commentRef = useRef( null );
+	const rawContent = note?.content?.raw;
+	const [ prevContent, setPrevContent ] = useState( rawContent );
+	const [ isExpanded, setIsExpanded ] = useState( false );
+	const [ isOverflowing, setIsOverflowing ] = useState( false );
+
+	// Collapse whenever the content changes so it can be re-measured.
+	if ( prevContent !== rawContent ) {
+		setPrevContent( rawContent );
+		setIsExpanded( false );
+	}
+
+	// Measure the (clamped) content to decide whether the toggle is needed.
+	useLayoutEffect( () => {
+		const commentElement = commentRef.current;
+		if ( commentElement ) {
+			setIsOverflowing(
+				commentElement.scrollHeight > commentElement.clientHeight
+			);
+		}
+	}, [ rawContent ] );
+
 	const canResolve = note.parent === 0;
 	const isResolutionNote =
 		note.type === 'note' &&
@@ -132,36 +156,37 @@ export function Note( {
 				} }
 			/>
 		);
-	} else if ( isResolutionNote ) {
-		const actionText =
-			note.meta._wp_note_status === 'resolved'
-				? __( 'Marked as resolved' )
-				: __( 'Reopened' );
-		const raw = note?.content?.raw;
-		const text =
-			raw && typeof raw === 'string' && raw.trim() !== ''
-				? sprintf(
-						// translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
-						__( '%1$s: %2$s' ),
-						actionText,
-						raw
-				  )
-				: actionText;
-		body = (
-			<RawHTML
-				className={ clsx(
-					'editor-collab-sidebar-panel__note-content',
-					'editor-collab-sidebar-panel__resolution-text'
-				) }
-			>
-				{ text }
-			</RawHTML>
-		);
 	} else {
+		let content;
+		if ( isResolutionNote ) {
+			const actionText =
+				note.meta._wp_note_status === 'resolved'
+					? __( 'Marked as resolved' )
+					: __( 'Reopened' );
+			const raw = note?.content?.raw;
+			content =
+				raw && typeof raw === 'string' && raw.trim() !== ''
+					? sprintf(
+							// translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+							__( '%1$s: %2$s' ),
+							actionText,
+							raw
+					  )
+					: actionText;
+		} else {
+			content = note?.content?.rendered;
+		}
+
 		body = (
-			<RawHTML className="editor-collab-sidebar-panel__note-content">
-				{ note?.content?.rendered }
-			</RawHTML>
+			<div
+				ref={ commentRef }
+				className={ clsx( 'editor-collab-sidebar-panel__note-content', {
+					'editor-collab-sidebar-panel__resolution-text':
+						isResolutionNote,
+					'is-collapsed': ! isExpanded,
+				} ) }
+				dangerouslySetInnerHTML={ { __html: content ?? '' } }
+			/>
 		);
 	}
 
@@ -204,6 +229,16 @@ export function Note( {
 					{ deleteConfirmMessage }
 				</ConfirmDialog>
 			) }
+			{ isOverflowing && 'edit' !== actionState && (
+				<UIButton
+					className="editor-collab-sidebar-panel__show-more-button"
+					variant="unstyled"
+					size="small"
+					onClick={ () => setIsExpanded( ! isExpanded ) }
+				>
+					{ ! isExpanded ? __( 'Show more' ) : __( 'Show less' ) }
+				</UIButton>
+			) }
 		</NoteCard>
 	);
 }