56 lines
1.3 KiB
React
56 lines
1.3 KiB
React
import { useCallback, useMemo } from '@wordpress/element';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { diffWords } from 'diff';
|
|
|
|
export default function DiffView( { original, suggestion, onAccept, height } ) {
|
|
const diff = useMemo( () => {
|
|
if ( ! suggestion ) {
|
|
return [];
|
|
}
|
|
return diffWords( original, suggestion );
|
|
}, [ original, suggestion ] );
|
|
|
|
const handleKeyDown = useCallback(
|
|
e => {
|
|
if ( e.key === 'Enter' || e.key === ' ' ) {
|
|
e.preventDefault();
|
|
onAccept();
|
|
}
|
|
},
|
|
[ onAccept ]
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="jetpack-content-guidelines-ai__diff"
|
|
style={ height ? { height } : undefined }
|
|
role="button"
|
|
tabIndex={ 0 }
|
|
aria-label={ __( 'Click to accept suggested changes', 'jetpack' ) }
|
|
onClick={ onAccept }
|
|
onKeyDown={ handleKeyDown }
|
|
>
|
|
<span className="screen-reader-text">
|
|
{ __( 'Changes from current to suggested guidelines:', 'jetpack' ) }
|
|
</span>
|
|
{ diff.map( ( part, i ) => {
|
|
if ( part.added ) {
|
|
return (
|
|
<ins key={ i } className="jetpack-content-guidelines-ai__diff-added">
|
|
{ part.value }
|
|
</ins>
|
|
);
|
|
}
|
|
if ( part.removed ) {
|
|
return (
|
|
<del key={ i } className="jetpack-content-guidelines-ai__diff-removed">
|
|
{ part.value }
|
|
</del>
|
|
);
|
|
}
|
|
return <span key={ i }>{ part.value }</span>;
|
|
} ) }
|
|
</div>
|
|
);
|
|
}
|