@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 7.3 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/post-revisions-preview/diff-markers.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n} from '@wordpress/element';\nimport { useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useBlockElementRef } = unlock( blockEditorPrivateApis );\n\n/**\n * Recursively collect blocks with diff status.\n *\n * @param {Array} blocks The blocks to search.\n * @return {Array} Blocks with __revisionDiffStatus.\n */\nfunction collectDiffBlocks( blocks ) {\n\tconst result = [];\n\tfor ( const block of blocks ) {\n\t\tif ( block.__revisionDiffStatus?.status ) {\n\t\t\tresult.push( {\n\t\t\t\tclientId: block.clientId,\n\t\t\t\tstatus: block.__revisionDiffStatus.status,\n\t\t\t} );\n\t\t}\n\t\tif ( block.innerBlocks?.length ) {\n\t\t\tresult.push( ...collectDiffBlocks( block.innerBlocks ) );\n\t\t}\n\t}\n\treturn result;\n}\n\nconst STATUS_LABELS = {\n\tadded: __( 'Go to added block' ),\n\tremoved: __( 'Go to removed block' ),\n\tmodified: __( 'Go to modified block' ),\n};\n\nfunction calculatePosition( el ) {\n\tif ( ! el ) {\n\t\treturn null;\n\t}\n\tconst doc = el.ownerDocument;\n\tconst scrollHeight = doc.documentElement.scrollHeight;\n\tconst rect = el.getBoundingClientRect();\n\tconst scrollTop = doc.documentElement.scrollTop;\n\tconst top = rect.top + scrollTop;\n\treturn {\n\t\ttop: ( top / scrollHeight ) * 100,\n\t\theight: ( rect.height / scrollHeight ) * 100,\n\t};\n}\n\n/**\n * Button component for a single diff marker.\n *\n * @param {Object} props Component props.\n * @param {string} props.clientId The block client ID.\n * @param {string} props.status The diff status (added/removed/modified).\n * @param {Function} props.subscribe Function to subscribe to position updates.\n * @return {React.JSX.Element} The diff marker button or null if position not calculated.\n */\nfunction DiffMarkerButton( { clientId, status, subscribe } ) {\n\tconst blockRef = useRef();\n\tuseBlockElementRef( clientId, blockRef );\n\tconst [ position, setPosition ] = useState( () =>\n\t\tcalculatePosition( blockRef.current )\n\t);\n\n\tuseEffect( () => {\n\t\treturn subscribe( () => {\n\t\t\tsetPosition( calculatePosition( blockRef.current ) );\n\t\t} );\n\t}, [ subscribe ] );\n\n\tuseEffect( () => {\n\t\tsetPosition( calculatePosition( blockRef.current ) );\n\t}, [ status ] );\n\n\tif ( ! position ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<button\n\t\t\tclassName={ `revision-diff-marker is-${ status }` }\n\t\t\tstyle={ {\n\t\t\t\ttop: `${ position.top }%`,\n\t\t\t\theight: `${ Math.max( position.height, 0.5 ) }%`,\n\t\t\t} }\n\t\t\tonClick={ () => blockRef.current?.focus() }\n\t\t\taria-label={ STATUS_LABELS[ status ] }\n\t\t/>\n\t);\n}\n\n/**\n * Hook that provides diff markers functionality.\n * Returns a ref callback for the content element and a DiffMarkers component.\n * Must be used inside a BlockEditorProvider context.\n *\n * @return {Array} Tuple of [contentRef, DiffMarkersComponent].\n */\nexport function useDiffMarkers() {\n\tconst [ isMounted, setIsMounted ] = useState( false );\n\tconst subscribersRef = useRef( new Set() );\n\tconst blocks = useSelect(\n\t\t( select ) => select( blockEditorStore ).getBlocks(),\n\t\t[]\n\t);\n\tconst diffBlocks = useMemo( () => collectDiffBlocks( blocks ), [ blocks ] );\n\tconst subscribe = useCallback( ( callback ) => {\n\t\tsubscribersRef.current.add( callback );\n\t\treturn () => subscribersRef.current.delete( callback );\n\t}, [] );\n\tconst contentRef = useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tconst { defaultView } = ownerDocument;\n\t\tconst resizeObserver = new defaultView.ResizeObserver( () => {\n\t\t\tsubscribersRef.current.forEach( ( cb ) => cb() );\n\t\t} );\n\t\tresizeObserver.observe( ownerDocument.body );\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [] );\n\treturn [\n\t\tuseMergeRefs( [ contentRef, setIsMounted ] ),\n\t\t<div\n\t\t\tkey=\"diff-markers\"\n\t\t\tclassName=\"revision-diff-markers\"\n\t\t\trole=\"navigation\"\n\t\t\taria-label={ __( 'Diff markers' ) }\n\t\t>\n\t\t\t{ isMounted &&\n\t\t\t\tdiffBlocks.map( ( { clientId, status } ) => (\n\t\t\t\t\t<DiffMarkerButton\n\t\t\t\t\t\tkey={ clientId }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tstatus={ status }\n\t\t\t\t\t\tsubscribe={ subscribe }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t</div>,\n\t];\n}\n"],
"mappings": "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",
"names": []
}