Editor: Add suggestion diff preview, Apply, and Reject

Phase 3 of the Suggest mode effort. Implements the Apply/Reject
lifecycle and inline diff preview for suggestion notes.

New in provider.js:
- applySuggestion: applies operations to block attributes via
  updateBlockAttributes, marks note resolved with status 'applied'.
  Emits a warning snackbar when baseRevision differs from current
  post modified date (stale suggestion).
- rejectSuggestion: marks note resolved with status 'rejected'
  without changing content.
- applyOperations: pure function running attribute-set ops against
  current block attributes.
- parseSuggestionPayload: safe JSON parser for _wp_suggestion meta.

New SuggestionDiff component:
- Word-level LCS-based diff for text attributes (insertions green
  underline, deletions red strikethrough).
- Attribute label for non-text changes.

UI integration in collab-sidebar/comments.js:
- SuggestionActions component rendered inside CommentBoard when
  thread has _wp_suggestion meta. Shows diff + Apply/Reject buttons
  for pending suggestions, or Applied/Rejected label for resolved.

Tests: applyOperations, parseSuggestionPayload, wordDiff (25 total).

Refs #73411

Author: adamsilverstein

packages/editor/src/components/collab-sidebar/comments.js

@@ -44,6 +44,11 @@ import { focusCommentThread, getCommentExcerpt } from './utils';
 import { useFloatingThread } from './hooks';
 import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
+import {
+	SuggestionDiff,
+	parseSuggestionPayload,
+	useSuggestionsProvider,
+} from '../suggestion-mode';
 
 const { useBlockElement } = unlock( blockEditorPrivateApis );
 const { Menu } = unlock( componentsPrivateApis );
@@ -968,6 +973,7 @@ const CommentBoard = ( {
 						: thread?.content?.rendered }
 				</RawHTML>
 			) }
+			<SuggestionActions thread={ thread } />
 			{ 'delete' === actionState && (
 				<ConfirmDialog
 					isOpen={ showConfirmDialog }
@@ -982,4 +988,79 @@ const CommentBoard = ( {
 	);
 };
 
+function SuggestionActions( { thread } ) {
+	const payload = useMemo(
+		() => parseSuggestionPayload( thread?.meta?._wp_suggestion ),
+		[ thread?.meta?._wp_suggestion ]
+	);
+	const suggestionStatus = thread?.meta?._wp_suggestion_status;
+	const { applySuggestion, rejectSuggestion } = useSuggestionsProvider();
+	const [ busy, setBusy ] = useState( false );
+
+	if ( ! payload ) {
+		return null;
+	}
+
+	const isResolved =
+		suggestionStatus === 'applied' || suggestionStatus === 'rejected';
+
+	return (
+		<VStack spacing="2" className="editor-collab-sidebar-panel__suggestion">
+			<SuggestionDiff operations={ payload.operations } />
+			{ isResolved ? (
+				<Text variant="muted" size="12px">
+					{ suggestionStatus === 'applied'
+						? __( 'Applied' )
+						: __( 'Rejected' ) }
+				</Text>
+			) : (
+				<HStack spacing="2" justify="flex-start">
+					<Button
+						variant="primary"
+						size="small"
+						disabled={ busy }
+						accessibleWhenDisabled
+						onClick={ async () => {
+							setBusy( true );
+							try {
+								await applySuggestion( {
+									commentId: thread.id,
+									clientId: thread.blockClientId,
+									payload,
+								} );
+							} catch {
+								// Notice surfaced by the provider.
+							} finally {
+								setBusy( false );
+							}
+						} }
+					>
+						{ __( 'Apply' ) }
+					</Button>
+					<Button
+						variant="secondary"
+						size="small"
+						disabled={ busy }
+						accessibleWhenDisabled
+						onClick={ async () => {
+							setBusy( true );
+							try {
+								await rejectSuggestion( {
+									commentId: thread.id,
+								} );
+							} catch {
+								// Notice surfaced by the provider.
+							} finally {
+								setBusy( false );
+							}
+						} }
+					>
+						{ __( 'Reject' ) }
+					</Button>
+				</HStack>
+			) }
+		</VStack>
+	);
+}
+
 export default Comments;

packages/editor/src/components/suggestion-mode/index.js

@@ -11,5 +11,8 @@ export { default as SuggestionCommitBar } from './commit-bar';
 export {
 	useSuggestionsProvider,
 	operationsFromOverlay,
+	applyOperations,
+	parseSuggestionPayload,
 	SCHEMA_VERSION,
 } from './provider';
+export { default as SuggestionDiff, wordDiff } from './suggestion-diff';

packages/editor/src/components/suggestion-mode/provider.js

@@ -79,13 +79,53 @@ function isAttributeEqual( a, b ) {
 }
 
 /**
- * Comment-meta backed suggestions provider. Phase 2 implements only
- * `createSuggestion`. Apply and reject are stubbed and will be implemented
- * alongside the diff preview in Phase 3. The provider shape is stable so
- * Phase 3 / a future Yjs-backed provider can swap in without touching the
- * UI.
+ * Apply a suggestion payload's operations to a block's current attributes
+ * to produce the new attributes. Pure function — no side effects.
  *
- * Storage: a new `note` comment with the suggestion payload serialized to
+ * @param {Object}                currentAttributes Block's current attributes.
+ * @param {SuggestionOperation[]} operations        Operations from the payload.
+ * @return {Object} Merged attributes with suggestions applied.
+ */
+export function applyOperations( currentAttributes, operations ) {
+	const result = { ...currentAttributes };
+	for ( const op of operations ) {
+		if ( op.type === 'attribute-set' ) {
+			result[ op.attribute ] = op.after;
+		}
+	}
+	return result;
+}
+
+/**
+ * Parse a `_wp_suggestion` meta value into a typed payload.
+ *
+ * @param {string|undefined} raw The raw JSON string from comment meta.
+ * @return {SuggestionPayload|null} Parsed payload, or null if invalid.
+ */
+export function parseSuggestionPayload( raw ) {
+	if ( ! raw ) {
+		return null;
+	}
+	try {
+		const parsed = JSON.parse( raw );
+		if (
+			typeof parsed === 'object' &&
+			parsed !== null &&
+			Array.isArray( parsed.operations )
+		) {
+			return parsed;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Comment-meta backed suggestions provider. The provider shape is stable so
+ * a future Yjs-backed provider can swap in without touching the UI.
+ *
+ * Storage: a `note` comment with the suggestion payload serialized to
  * the `_wp_suggestion` comment meta. Linkage to a block reuses the existing
  * `metadata.noteId` block attribute.
  *
@@ -182,12 +222,85 @@ export function useSuggestionsProvider() {
 		]
 	);
 
-	const applySuggestion = useCallback( async () => {
-		throw new Error( 'applySuggestion is not implemented in Phase 2.' );
-	}, [] );
-	const rejectSuggestion = useCallback( async () => {
-		throw new Error( 'rejectSuggestion is not implemented in Phase 2.' );
-	}, [] );
+	const { getBlockAttributes: selectBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const applySuggestion = useCallback(
+		async ( { commentId, clientId, payload } ) => {
+			if ( ! payload || ! Array.isArray( payload.operations ) ) {
+				createNotice( 'error', __( 'Invalid suggestion payload.' ), {
+					type: 'snackbar',
+					isDismissible: true,
+				} );
+				return;
+			}
+
+			if (
+				payload.baseRevision &&
+				postModified &&
+				payload.baseRevision !== postModified
+			) {
+				createNotice(
+					'warning',
+					__(
+						'Post content has changed since this suggestion. Review carefully.'
+					),
+					{ type: 'snackbar', isDismissible: true }
+				);
+			}
+
+			const currentAttributes = selectBlockAttributes( clientId );
+			const newAttributes = applyOperations(
+				currentAttributes,
+				payload.operations
+			);
+			updateBlockAttributes( clientId, newAttributes );
+
+			await saveEntityRecord(
+				'root',
+				'comment',
+				{
+					id: commentId,
+					status: 'approved',
+					meta: { _wp_suggestion_status: 'applied' },
+				},
+				{ throwOnError: true }
+			);
+
+			createNotice( 'snackbar', __( 'Suggestion applied.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		},
+		[
+			postModified,
+			saveEntityRecord,
+			updateBlockAttributes,
+			selectBlockAttributes,
+			createNotice,
+		]
+	);
+
+	const rejectSuggestion = useCallback(
+		async ( { commentId } ) => {
+			await saveEntityRecord(
+				'root',
+				'comment',
+				{
+					id: commentId,
+					status: 'approved',
+					meta: { _wp_suggestion_status: 'rejected' },
+				},
+				{ throwOnError: true }
+			);
+
+			createNotice( 'snackbar', __( 'Suggestion rejected.' ), {
+				type: 'snackbar',
+				isDismissible: true,
+			} );
+		},
+		[ saveEntityRecord, createNotice ]
+	);
 
 	return { createSuggestion, applySuggestion, rejectSuggestion };
 }