@wordpress/editor 14.44.0 → 14.45.0

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

@@ -1,21 +1,12 @@
-/**
- * External dependencies
- */
-import {
-	useFloating,
-	offset as offsetMiddleware,
-	autoUpdate,
-} from '@floating-ui/react-dom';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
+	useState,
 	useEffect,
 	useMemo,
-	useCallback,
-	useReducer,
+	useSyncExternalStore,
 } from '@wordpress/element';
 import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
@@ -24,6 +15,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
+import { getScrollContainer } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -33,16 +25,12 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as editorStore } from '../../store';
 import { FLOATING_NOTES_SIDEBAR } from './constants';
 import { unlock } from '../../lock-unlock';
-import { noop } from './utils';
+import { createBoardStore } from './board-store';
+import { calculateNotePositions } from './utils';
 
-const { useBlockElement, cleanEmptyObject } = unlock( blockEditorPrivateApis );
-
-export function useBlockComments( postId ) {
-	const [ commentLastUpdated, reflowComments ] = useReducer(
-		() => Date.now(),
-		0
-	);
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
+export function useNoteThreads( postId ) {
 	const queryArgs = {
 		post: postId,
 		type: 'note',
@@ -65,112 +53,89 @@ export function useBlockComments( postId ) {
 		};
 	}, [] );
 
-	// Process comments to build the tree structure.
-	const { resultComments, unresolvedSortedThreads } = useMemo( () => {
+	// Process notes to build the tree structure.
+	const { notes, unresolvedNotes } = useMemo( () => {
 		if ( ! threads || threads.length === 0 ) {
-			return { resultComments: [], unresolvedSortedThreads: [] };
+			return { notes: [], unresolvedNotes: [] };
 		}
 
-		const blocksWithComments = clientIds.reduce( ( results, clientId ) => {
-			const commentId = getBlockAttributes( clientId )?.metadata?.noteId;
-			if ( commentId ) {
-				results[ clientId ] = commentId;
+		// Single pass over clientIds: build clientId->noteId map AND reverse lookup.
+		const blocksWithNotes = {};
+		const clientIdByNoteId = new Map();
+		for ( const clientId of clientIds ) {
+			const noteId = getBlockAttributes( clientId )?.metadata?.noteId;
+			if ( noteId ) {
+				const key = String( noteId );
+				blocksWithNotes[ clientId ] = key;
+				clientIdByNoteId.set( key, clientId );
 			}
-			return results;
-		}, {} );
-
-		// Create a compare to store the references to all objects by id.
-		const compare = {};
-		const result = [];
-
-		// Create a reverse map for faster lookup.
-		const commentIdToBlockClientId = Object.keys(
-			blocksWithComments
-		).reduce( ( mapping, clientId ) => {
-			mapping[ blocksWithComments[ clientId ] ] = clientId;
-			return mapping;
-		}, {} );
-
-		// Initialize each object with an empty `reply` array and map blockClientId.
-		threads.forEach( ( item ) => {
-			const itemBlock = commentIdToBlockClientId[ item.id ];
-
-			compare[ item.id ] = {
+		}
+
+		// Materialize threads; collect roots; replies linked in a second pass
+		// via unshift to invert order (matches prior reverse semantics).
+		const threadsById = new Map();
+		const rootThreads = [];
+		for ( const item of threads ) {
+			const thread = {
 				...item,
 				reply: [],
-				blockClientId: item.parent === 0 ? itemBlock : null,
+				blockClientId:
+					item.parent === 0
+						? clientIdByNoteId.get( String( item.id ) ) ?? null
+						: null,
 			};
-		} );
-
-		// Iterate over the data to build the tree structure.
-		threads.forEach( ( item ) => {
+			threadsById.set( item.id, thread );
 			if ( item.parent === 0 ) {
-				// If parent is 0, it's a root item, push it to the result array.
-				result.push( compare[ item.id ] );
-			} else if ( compare[ item.parent ] ) {
-				// Otherwise, find its parent and push it to the parent's `reply` array.
-				compare[ item.parent ].reply.push( compare[ item.id ] );
+				rootThreads.push( thread );
+			}
+		}
+		for ( const item of threads ) {
+			if ( item.parent !== 0 ) {
+				threadsById
+					.get( item.parent )
+					?.reply.unshift( threadsById.get( item.id ) );
 			}
-		} );
-
-		if ( 0 === result?.length ) {
-			return { resultComments: [], unresolvedSortedThreads: [] };
 		}
 
-		const updatedResult = result.map( ( item ) => ( {
-			...item,
-			reply: [ ...item.reply ].reverse(),
-		} ) );
-
-		const threadIdMap = new Map(
-			updatedResult.map( ( thread ) => [ String( thread.id ), thread ] )
-		);
-
-		// Prepare sets to determine which threads are linked to existing blocks.
-		const mappedIds = new Set(
-			Object.values( blocksWithComments ).map( ( id ) => String( id ) )
-		);
-
-		// Get comments by block order, first unresolved, then resolved.
-		const unresolvedSortedComments = Object.values( blocksWithComments )
-			.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
-			.filter(
-				( thread ) => thread !== undefined && thread.status === 'hold'
-			);
+		if ( rootThreads.length === 0 ) {
+			return { notes: [], unresolvedNotes: [] };
+		}
 
-		const resolvedSortedComments = Object.values( blocksWithComments )
-			.map( ( commentId ) => threadIdMap.get( String( commentId ) ) )
-			.filter(
-				( thread ) =>
-					thread !== undefined && thread.status === 'approved'
-			);
+		// Single partition over notes-in-block-order.
+		const unresolved = [];
+		const resolved = [];
+		for ( const noteId of Object.values( blocksWithNotes ) ) {
+			const thread =
+				threadsById.get( Number( noteId ) ) ??
+				threadsById.get( noteId );
+			if ( ! thread ) {
+				continue;
+			}
+			if ( thread.status === 'hold' ) {
+				unresolved.push( thread );
+			} else if ( thread.status === 'approved' ) {
+				resolved.push( thread );
+			}
+		}
 
-		// Append orphaned notes (whose related block was deleted or missing).
-		const orphanedComments = updatedResult.filter(
-			( thread ) => ! mappedIds.has( String( thread.id ) )
+		// Orphans: root threads without a linked block. They only need to come last.
+		const orphans = rootThreads.filter(
+			( thread ) => ! thread.blockClientId
 		);
 
-		const allSortedComments = [
-			...unresolvedSortedComments,
-			...resolvedSortedComments,
-			...orphanedComments,
-		];
-
 		return {
-			resultComments: allSortedComments,
-			unresolvedSortedThreads: unresolvedSortedComments,
+			notes: [ ...unresolved, ...resolved, ...orphans ],
+			unresolvedNotes: unresolved,
 		};
 	}, [ clientIds, threads, getBlockAttributes ] );
 
 	return {
-		resultComments,
-		unresolvedSortedThreads,
-		reflowComments,
-		commentLastUpdated,
+		notes,
+		unresolvedNotes,
 	};
 }
 
-export function useBlockCommentsActions( reflowComments = noop ) {
+export function useNoteActions() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
 	const { getCurrentPostId } = useSelect( editorStore );
@@ -204,7 +169,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 				{ throwOnError: true }
 			);
 
-			// If it's a main comment, update the block attributes with the comment id.
+			// If it's a top-level note, update the block attributes with the note id.
 			if ( ! parent && savedRecord?.id ) {
 				const clientId = getSelectedBlockClientId();
 				const metadata = getBlockAttributes( clientId )?.metadata;
@@ -224,10 +189,8 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					isDismissible: true,
 				}
 			);
-			setTimeout( reflowComments, 300 );
 			return savedRecord;
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
@@ -256,8 +219,8 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					}
 				);
 
-				// Then create a new comment with the metadata.
-				const newCommentData = {
+				// Then create a new note with the metadata.
+				const newNoteData = {
 					post: getCurrentPostId(),
 					content: content || '', // Empty content for resolve, content for reopen.
 					type: 'note',
@@ -269,7 +232,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					},
 				};
 
-				await saveEntityRecord( 'root', 'comment', newCommentData, {
+				await saveEntityRecord( 'root', 'comment', newNoteData, {
 					throwOnError: true,
 				} );
 			} else {
@@ -292,26 +255,18 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					isDismissible: true,
 				}
 			);
-			reflowComments();
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
 
-	const onDelete = async ( comment ) => {
+	const onDelete = async ( note ) => {
 		try {
-			await deleteEntityRecord(
-				'root',
-				'comment',
-				comment.id,
-				undefined,
-				{
-					throwOnError: true,
-				}
-			);
+			await deleteEntityRecord( 'root', 'comment', note.id, undefined, {
+				throwOnError: true,
+			} );
 
-			if ( ! comment.parent ) {
+			if ( ! note.parent ) {
 				const clientId = getSelectedBlockClientId();
 				const metadata = getBlockAttributes( clientId )?.metadata;
 				updateBlockAttributes( clientId, {
@@ -326,9 +281,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 				type: 'snackbar',
 				isDismissible: true,
 			} );
-			reflowComments();
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
@@ -366,68 +319,67 @@ export function useEnableFloatingSidebar( enabled = false ) {
 	}, [ enabled, registry ] );
 }
 
-export function useFloatingThread( {
-	thread,
-	calculatedOffset,
-	setHeights,
-	selectedThread,
-	setBlockRef,
-	commentLastUpdated,
+export function useFloatingBoard( {
+	threads,
+	selectedNoteId,
+	isFloating,
+	sidebarRef,
 } ) {
-	const blockElement = useBlockElement( thread.blockClientId );
-	const updateHeight = useCallback(
-		( id, newHeight ) => {
-			setHeights( ( prev ) => {
-				if ( prev[ id ] !== newHeight ) {
-					return { ...prev, [ id ]: newHeight };
-				}
-				return prev;
-			} );
-		},
-		[ setHeights ]
-	);
+	const [ notePositions, setNotePositions ] = useState( {} );
+	const [ store ] = useState( createBoardStore );
 
-	// Use floating-ui to track the block element's position with the calculated offset.
-	const { y, refs } = useFloating( {
-		placement: 'right-start',
-		middleware: [
-			offsetMiddleware( {
-				crossAxis: calculatedOffset || -16,
-			} ),
-		],
-		whileElementsMounted: autoUpdate,
-	} );
-
-	// Store the block reference for each thread.
-	useEffect( () => {
-		if ( blockElement ) {
-			refs.setReference( blockElement );
-		}
-	}, [ blockElement, refs, commentLastUpdated ] );
+	const heights = useSyncExternalStore( store.subscribe, store.getSnapshot );
 
-	// Track thread heights.
+	// Notes are positioned in canvas content-space; CSS inherits
+	// `--canvas-scroll` to translate each thread in sync with the canvas.
 	useEffect( () => {
-		if ( refs.floating?.current ) {
-			setBlockRef( thread.id, blockElement );
+		if ( ! isFloating || ! sidebarRef?.current ) {
+			return;
 		}
-	}, [ blockElement, thread.id, refs.floating, setBlockRef ] );
 
-	// When the selected thread changes, update heights, triggering offset recalculation.
-	useEffect( () => {
-		if ( refs.floating?.current ) {
-			const newHeight = refs.floating.current.scrollHeight;
-			updateHeight( thread.id, newHeight );
-		}
-	}, [
-		thread.id,
-		updateHeight,
-		refs.floating,
-		selectedThread,
-		commentLastUpdated,
-	] );
+		const panel = sidebarRef.current;
+		const blockEl = store.getFirstBlockElement();
+		// Climb to the block-list root so nested scroll containers
+		// (e.g. a Group with overflow:auto) don't shadow the canvas.
+		const rootEl = blockEl?.closest( '.is-root-container' ) ?? blockEl;
+		const canvas = rootEl ? getScrollContainer( rootEl ) : null;
+
+		const applyScroll = () => {
+			panel.style.setProperty(
+				'--canvas-scroll',
+				`${ -( canvas?.scrollTop ?? 0 ) }px`
+			);
+		};
+
+		// Recalc is deferred to a rAF; back-to-back updates collapse into one paint.
+		const rafId = window.requestAnimationFrame( () => {
+			const result = calculateNotePositions( {
+				threads,
+				selectedNoteId,
+				blockRects: store.getBlockRects(),
+				heights,
+				scrollTop: canvas?.scrollTop ?? 0,
+			} );
+
+			setNotePositions( result.positions );
+			applyScroll();
+		} );
+
+		// Root scrolling elements (documentElement/body) don't fire scroll
+		// on themselves; capture on the window catches them in either canvas.
+		const view = canvas?.ownerDocument?.defaultView;
+		const listenerOptions = { passive: true, capture: true };
+		view?.addEventListener( 'scroll', applyScroll, listenerOptions );
+
+		return () => {
+			window.cancelAnimationFrame( rafId );
+			view?.removeEventListener( 'scroll', applyScroll, listenerOptions );
+		};
+	}, [ sidebarRef, heights, isFloating, selectedNoteId, store, threads ] );
 
 	return {
-		y,
-		refs,
+		notePositions,
+		registerThread: store.registerThread,
+		unregisterThread: store.unregisterThread,
 	};
 }

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

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -21,63 +20,15 @@ import {
 	FLOATING_NOTES_SIDEBAR,
 	SIDEBARS,
 } from './constants';
-import { Comments } from './comments';
+import { Notes } from './notes';
 import { store as editorStore } from '../../store';
-import AddCommentMenuItem from './comment-menu-item';
-import CommentAvatarIndicator from './comment-indicator-toolbar';
+import { AddNoteMenuItem } from './add-note-menu-item';
+import { NoteAvatarIndicator } from './note-indicator-toolbar';
 import { useGlobalStylesContext } from '../global-styles-provider';
-import {
-	useBlockComments,
-	useBlockCommentsActions,
-	useEnableFloatingSidebar,
-} from './hooks';
+import { useNoteThreads, useEnableFloatingSidebar } from './hooks';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { unlock } from '../../lock-unlock';
 
-function NotesSidebarContent( {
-	styles,
-	comments,
-	commentSidebarRef,
-	reflowComments,
-	commentLastUpdated,
-	isFloating = false,
-} ) {
-	const { onCreate, onEdit, onDelete } =
-		useBlockCommentsActions( reflowComments );
-
-	return (
-		<VStack
-			className="editor-collab-sidebar-panel"
-			style={ styles }
-			role="tree"
-			spacing="3"
-			justify="flex-start"
-			ref={ ( node ) => {
-				// Sometimes previous sidebar unmounts after the new one mounts.
-				// This ensures we always have the latest reference.
-				if ( node ) {
-					// eslint-disable-next-line react-compiler/react-compiler
-					commentSidebarRef.current = node;
-				}
-			} }
-			aria-label={
-				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
-			}
-		>
-			<Comments
-				threads={ comments }
-				onEditComment={ onEdit }
-				onAddReply={ onCreate }
-				onCommentDelete={ onDelete }
-				commentSidebarRef={ commentSidebarRef }
-				reflowComments={ reflowComments }
-				commentLastUpdated={ commentLastUpdated }
-				isFloating={ isFloating }
-			/>
-		</VStack>
-	);
-}
-
 function NotesSidebar( { postId } ) {
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
@@ -86,28 +37,22 @@ function NotesSidebar( { postId } ) {
 	);
 	const { selectNote } = unlock( useDispatch( editorStore ) );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const commentSidebarRef = useRef( null );
+	const sidebarRef = useRef( null );
 
-	const { clientId, blockCommentId, isClassicBlock } = useSelect(
-		( select ) => {
-			const {
-				getBlockAttributes,
-				getSelectedBlockClientId,
-				getBlockName,
-			} = select( blockEditorStore );
-			const _clientId = getSelectedBlockClientId();
-			return {
-				clientId: _clientId,
-				blockCommentId: _clientId
-					? getBlockAttributes( _clientId )?.metadata?.noteId
-					: null,
-				isClassicBlock: _clientId
-					? getBlockName( _clientId ) === 'core/freeform'
-					: false,
-			};
-		},
-		[]
-	);
+	const { clientId, noteId, isClassicBlock } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId, getBlockName } =
+			select( blockEditorStore );
+		const _clientId = getSelectedBlockClientId();
+		return {
+			clientId: _clientId,
+			noteId: _clientId
+				? getBlockAttributes( _clientId )?.metadata?.noteId
+				: null,
+			isClassicBlock: _clientId
+				? getBlockName( _clientId ) === 'core/freeform'
+				: false,
+		};
+	}, [] );
 	const { isDistractionFree } = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		return {
@@ -119,21 +64,15 @@ function NotesSidebar( { postId } ) {
 		[]
 	);
 
-	const {
-		resultComments,
-		unresolvedSortedThreads,
-		reflowComments,
-		commentLastUpdated,
-	} = useBlockComments( postId );
+	const { notes, unresolvedNotes } = useNoteThreads( postId );
 
 	// Only enable the floating sidebar for large viewports.
 	const showFloatingSidebar = isLargeViewport;
 	// Fallback to "All notes" sidebar on smaller viewports.
-	const showAllNotesSidebar =
-		resultComments.length > 0 || ! showFloatingSidebar;
+	const showAllNotesSidebar = notes.length > 0 || ! showFloatingSidebar;
 	useEnableFloatingSidebar(
 		showFloatingSidebar &&
-			( unresolvedSortedThreads.length > 0 || selectedNote !== undefined )
+			( unresolvedNotes.length > 0 || selectedNote !== undefined )
 	);
 
 	useShortcut(
@@ -146,10 +85,7 @@ function NotesSidebar( { postId } ) {
 			// When multiple notes per block are supported. Remove note ID check.
 			// See: https://github.com/WordPress/gutenberg/pull/75147.
 			isDisabled:
-				isDistractionFree ||
-				isClassicBlock ||
-				! clientId ||
-				!! blockCommentId,
+				isDistractionFree || isClassicBlock || ! clientId || !! noteId,
 		}
 	);
 
@@ -158,8 +94,8 @@ function NotesSidebar( { postId } ) {
 	const backgroundColor = GlobalStyles?.styles?.color?.background;
 
 	// Find the current thread for the selected block.
-	const currentThread = blockCommentId
-		? resultComments.find( ( thread ) => thread.id === blockCommentId )
+	const currentThread = noteId
+		? notes.find( ( thread ) => thread.id === noteId )
 		: null;
 
 	async function openTheSidebar( selectedClientId ) {
@@ -169,7 +105,7 @@ function NotesSidebar( { postId } ) {
 			selectedClientId && selectedClientId !== clientId
 				? selectedClientId
 				: clientId;
-		const targetNote = resultComments.find(
+		const targetNote = notes.find(
 			( note ) => note.blockClientId === targetClientId
 		);
 
@@ -196,18 +132,18 @@ function NotesSidebar( { postId } ) {
 	}
 
 	if ( isDistractionFree ) {
-		return <AddCommentMenuItem isDistractionFree />;
+		return <AddNoteMenuItem isDistractionFree />;
 	}
 
 	return (
 		<>
 			{ !! currentThread && (
-				<CommentAvatarIndicator
-					thread={ currentThread }
+				<NoteAvatarIndicator
+					note={ currentThread }
 					onClick={ openTheSidebar }
 				/>
 			) }
-			<AddCommentMenuItem onClick={ openTheSidebar } />
+			<AddNoteMenuItem onClick={ openTheSidebar } />
 			{ showAllNotesSidebar && (
 				<PluginSidebar
 					identifier={ ALL_NOTES_SIDEBAR }
@@ -221,10 +157,7 @@ function NotesSidebar( { postId } ) {
 					icon={ commentIcon }
 					closeLabel={ __( 'Close Notes' ) }
 				>
-					<NotesSidebarContent
-						comments={ resultComments }
-						commentSidebarRef={ commentSidebarRef }
-					/>
+					<Notes notes={ notes } sidebarRef={ sidebarRef } />
 				</PluginSidebar>
 			) }
 			{ isLargeViewport && (
@@ -236,14 +169,10 @@ function NotesSidebar( { postId } ) {
 					headerClassName="editor-collab-sidebar__header"
 					backgroundColor={ backgroundColor }
 				>
-					<NotesSidebarContent
-						comments={ unresolvedSortedThreads }
-						commentSidebarRef={ commentSidebarRef }
-						reflowComments={ reflowComments }
-						commentLastUpdated={ commentLastUpdated }
-						styles={ {
-							backgroundColor,
-						} }
+					<Notes
+						notes={ unresolvedNotes }
+						sidebarRef={ sidebarRef }
+						styles={ { backgroundColor } }
 						isFloating
 					/>
 				</PluginSidebar>