@wordpress/editor/src/components/revision-diff-panel/index.js

Enhanced block editor for WordPress posts.

import { PanelBody } from '@wordpress/components';
import PostPanelRow from '../post-panel-row';

/**
 * Renders a panel of word-level diffs.
 *
 * @param {Object}  props
 * @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,
	className,
} ) {
	if ( ! entries ) {
		return null;
	}

	const fields = Object.entries( entries ).map( ( [ key, parts ] ) => (
		<PostPanelRow key={ key } label={ key }>
			<span className="editor-revision-fields-diff__value">
				{ parts.map( ( part, index ) => {
					if ( part.added ) {
						return (
							<ins
								key={ index }
								className="editor-revision-fields-diff__added"
							>
								{ part.value }
							</ins>
						);
					}
					if ( part.removed ) {
						return (
							<del
								key={ index }
								className="editor-revision-fields-diff__removed"
							>
								{ part.value }
							</del>
						);
					}
					return <span key={ index }>{ part.value }</span>;
				} ) }
			</span>
		</PostPanelRow>
	) );

	return (
		<PanelBody title={ title } initialOpen={ initialOpen }>
			<div className={ className }>{ fields }</div>
		</PanelBody>
	);
}