@wordpress/editor 14.44.0 → 14.44.1-next.v.202604201441.0

package/src/components/collab-sidebar/board-store.js

@@ -0,0 +1,83 @@
+export function createBoardStore() {
+	const listeners = new Set();
+	const blockRefs = new Map();
+	const floatingRefs = new Map();
+	const idByElement = new WeakMap();
+	const heights = {};
+	let snapshot = {};
+
+	function emit() {
+		snapshot = { ...heights };
+		for ( const listener of listeners ) {
+			listener();
+		}
+	}
+
+	const observer = new window.ResizeObserver( ( entries ) => {
+		let changed = false;
+		for ( const entry of entries ) {
+			const id = idByElement.get( entry.target );
+			const newHeight = entry.borderBoxSize[ 0 ].blockSize;
+			if ( heights[ id ] !== newHeight ) {
+				heights[ id ] = newHeight;
+				changed = true;
+			}
+		}
+		if ( changed ) {
+			emit();
+		}
+	} );
+
+	return {
+		subscribe( listener ) {
+			listeners.add( listener );
+			return () => {
+				listeners.delete( listener );
+				if ( listeners.size === 0 ) {
+					observer.disconnect();
+				}
+			};
+		},
+
+		getSnapshot() {
+			return snapshot;
+		},
+
+		registerThread( id, blockEl, floatingEl ) {
+			blockRefs.set( id, blockEl );
+
+			const prev = floatingRefs.get( id );
+			if ( prev && prev !== floatingEl ) {
+				observer.unobserve( prev );
+				idByElement.delete( prev );
+			}
+			if ( floatingEl ) {
+				floatingRefs.set( id, floatingEl );
+				idByElement.set( floatingEl, id );
+				observer.observe( floatingEl );
+			}
+
+			emit();
+		},
+
+		unregisterThread( id ) {
+			blockRefs.delete( id );
+			const prev = floatingRefs.get( id );
+			if ( prev ) {
+				observer.unobserve( prev );
+				idByElement.delete( prev );
+				floatingRefs.delete( id );
+			}
+			delete heights[ id ];
+		},
+
+		getBlockRects() {
+			// Batch all rect reads before any writes to avoid layout thrashing.
+			return Object.fromEntries(
+				Array.from( blockRefs ).flatMap( ( [ id, el ] ) =>
+					el ? [ [ id, el.getBoundingClientRect() ] ] : []
+				)
+			);
+		},
+	};
+}

package/src/components/collab-sidebar/comment-form.js

@@ -15,13 +15,13 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId, useDebounce } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { isKeyboardEvent } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString, noop } from './utils';
+import { sanitizeCommentString } from './utils';
 
 function CommentForm( {
 	onSubmit,
@@ -29,19 +29,11 @@ function CommentForm( {
 	thread,
 	submitButtonText,
 	labelText,
-	reflowComments = noop,
 } ) {
 	const [ inputComment, setInputComment ] = useState(
 		thread?.content?.raw ?? ''
 	);
 
-	// Regularly trigger a reflow as the user types since the textarea may grow or shrink.
-	const debouncedCommentUpdated = useDebounce( reflowComments, 100 );
-
-	const updateComment = ( value ) => {
-		setInputComment( value );
-	};
-
 	const inputId = useInstanceId( CommentForm, 'comment-input' );
 	const isDisabled =
 		inputComment === thread?.content?.raw ||
@@ -64,10 +56,9 @@ function CommentForm( {
 			<TextareaAutosize
 				id={ inputId }
 				value={ inputComment ?? '' }
-				onChange={ ( comment ) => {
-					updateComment( comment.target.value );
-					debouncedCommentUpdated();
-				} }
+				onChange={ ( comment ) =>
+					setInputComment( comment.target.value )
+				}
 				rows={ 1 }
 				maxRows={ 20 }
 				onKeyDown={ ( event ) => {

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

@@ -10,7 +10,6 @@ import {
 	useState,
 	RawHTML,
 	useEffect,
-	useCallback,
 	useMemo,
 	useRef,
 } from '@wordpress/element';
@@ -41,7 +40,8 @@ import { unlock } from '../../lock-unlock';
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 import { focusCommentThread, getCommentExcerpt } from './utils';
-import { useFloatingThread } from './hooks';
+import { useFloatingBoard, useFloatingThread } from './hooks';
+import { FloatingContainer } from './floating-container';
 import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 
@@ -54,17 +54,9 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	commentSidebarRef,
-	reflowComments,
 	isFloating = false,
-	commentLastUpdated,
 } ) {
-	const [ heights, setHeights ] = useState( {} );
-	const [ boardOffsets, setBoardOffsets ] = useState( {} );
-	const [ blockRefs, setBlockRefs ] = useState( {} );
-
-	const { setCanvasMinHeight, selectNote } = unlock(
-		useDispatch( editorStore )
-	);
+	const { selectNote } = unlock( useDispatch( editorStore ) );
 	const { selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -182,151 +174,13 @@ export function Comments( {
 		}
 	}, [ noteFocused, selectedNote, selectNote, commentSidebarRef ] );
 
-	// Recalculate floating comment thread offsets whenever the heights change.
-	useEffect( () => {
-		/**
-		 * Calculate the y offsets for all comment threads. Account for potentially
-		 * overlapping threads and adjust their positions accordingly.
-		 */
-		const calculateAllOffsets = () => {
-			const offsets = {};
-
-			if ( ! isFloating ) {
-				return { offsets, minHeight: 0 };
-			}
-
-			// Find the index of the selected thread.
-			const selectedThreadIndex = threads.findIndex(
-				( t ) => t.id === selectedNote
-			);
-
-			const breakIndex =
-				selectedThreadIndex === -1 ? 0 : selectedThreadIndex;
-
-			// If there is a selected thread, push threads above up and threads below down.
-			const selectedThreadData = threads[ breakIndex ];
-
-			if (
-				! selectedThreadData ||
-				! blockRefs[ selectedThreadData.id ]
-			) {
-				return { offsets, minHeight: 0 };
-			}
-
-			let blockElement = blockRefs[ selectedThreadData.id ];
-			let blockRect = blockElement?.getBoundingClientRect();
-			const selectedThreadTop = blockRect?.top || 0;
-			const selectedThreadHeight = heights[ selectedThreadData.id ] || 0;
-
-			offsets[ selectedThreadData.id ] = -16;
-
-			let previousThreadData = {
-				threadTop: selectedThreadTop - 16,
-				threadHeight: selectedThreadHeight,
-			};
-
-			// Process threads after the selected thread, offsetting any overlapping
-			// threads downward.
-			for ( let i = breakIndex + 1; i < threads.length; i++ ) {
-				const thread = threads[ i ];
-				if ( ! blockRefs[ thread.id ] ) {
-					continue;
-				}
-
-				blockElement = blockRefs[ thread.id ];
-				blockRect = blockElement?.getBoundingClientRect();
-				const threadTop = blockRect?.top || 0;
-				const threadHeight = heights[ thread.id ] || 0;
-
-				let additionalOffset = -16;
-
-				// Check if the thread overlaps with the previous one.
-				const previousBottom =
-					previousThreadData.threadTop +
-					previousThreadData.threadHeight;
-				if ( threadTop < previousBottom + 16 ) {
-					// Shift down by the difference plus a margin to avoid overlap.
-					additionalOffset = previousBottom - threadTop + 20;
-				}
-
-				offsets[ thread.id ] = additionalOffset;
-
-				// Update for next iteration.
-				previousThreadData = {
-					threadTop: threadTop + additionalOffset,
-					threadHeight,
-				};
-			}
-
-			// Process threads before the selected thread, offsetting any overlapping
-			// threads upward.
-			let nextThreadData = {
-				threadTop: selectedThreadTop - 16,
-			};
-
-			for ( let i = selectedThreadIndex - 1; i >= 0; i-- ) {
-				const thread = threads[ i ];
-				if ( ! blockRefs[ thread.id ] ) {
-					continue;
-				}
-
-				blockElement = blockRefs[ thread.id ];
-				blockRect = blockElement?.getBoundingClientRect();
-				const threadTop = blockRect?.top || 0;
-				const threadHeight = heights[ thread.id ] || 0;
-
-				let additionalOffset = -16;
-
-				// Calculate the bottom position of this thread with default offset.
-				const threadBottom = threadTop + threadHeight;
-
-				// Check if this thread's bottom would overlap with the next thread's top.
-				if ( threadBottom > nextThreadData.threadTop ) {
-					// Shift up by the difference plus a margin to avoid overlap.
-					additionalOffset =
-						nextThreadData.threadTop -
-						threadTop -
-						threadHeight -
-						20;
-				}
-
-				offsets[ thread.id ] = additionalOffset;
-
-				// Update for next iteration (going upward).
-				nextThreadData = {
-					threadTop: threadTop + additionalOffset,
-				};
-			}
-
-			let editorMinHeight = 0;
-			// Take the calculated top of the final note plus its height as the editor min height.
-			const lastThread = threads[ threads.length - 1 ];
-			if ( blockRefs[ lastThread.id ] ) {
-				const lastBlockElement = blockRefs[ lastThread.id ];
-				const lastBlockRect = lastBlockElement?.getBoundingClientRect();
-				const lastThreadTop = lastBlockRect?.top || 0;
-				const lastThreadHeight = heights[ lastThread.id ] || 0;
-				const lastThreadOffset = offsets[ lastThread.id ] || 0;
-				editorMinHeight =
-					lastThreadTop + lastThreadHeight + lastThreadOffset + 32;
-			}
-
-			return { offsets, minHeight: editorMinHeight };
-		};
-		const { offsets: newOffsets, minHeight } = calculateAllOffsets();
-		if ( Object.keys( newOffsets ).length > 0 ) {
-			setBoardOffsets( newOffsets );
+	const { boardOffsets, registerThread, unregisterThread } = useFloatingBoard(
+		{
+			threads,
+			selectedNoteId: selectedNote,
+			isFloating,
 		}
-		// Ensure the editor has enough height to scroll to all notes.
-		setCanvasMinHeight( minHeight );
-	}, [
-		heights,
-		blockRefs,
-		isFloating,
-		threads,
-		selectedNote,
-		setCanvasMinHeight,
-	] );
+	);
 
 	const handleThreadNavigation = ( event, thread, isSelected ) => {
 		if ( event.defaultPrevented ) {
@@ -393,10 +247,6 @@ export function Comments( {
 		}
 	};
 
-	const setBlockRef = useCallback( ( id, blockRef ) => {
-		setBlockRefs( ( prev ) => ( { ...prev, [ id ]: blockRef } ) );
-	}, [] );
-
 	const hasThreads = Array.isArray( threads ) && threads.length > 0;
 	// A special case for `template-locked` mode - https://github.com/WordPress/gutenberg/pull/72646.
 	if ( ! hasThreads && ! isFloating ) {
@@ -425,12 +275,16 @@ export function Comments( {
 					onEditComment={ onEditComment }
 					isSelected={ selectedNote === thread.id }
 					commentSidebarRef={ commentSidebarRef }
-					reflowComments={ reflowComments }
-					isFloating={ isFloating }
-					calculatedOffset={ boardOffsets[ thread.id ] ?? 0 }
-					setHeights={ setHeights }
-					setBlockRef={ setBlockRef }
-					commentLastUpdated={ commentLastUpdated }
+					floating={
+						isFloating
+							? {
+									calculatedOffset:
+										boardOffsets[ thread.id ] ?? 0,
+									registerThread,
+									unregisterThread,
+							  }
+							: undefined
+					}
 					onKeyDown={ ( event ) =>
 						handleThreadNavigation(
 							event,
@@ -451,22 +305,14 @@ function Thread( {
 	onCommentDelete,
 	isSelected,
 	commentSidebarRef,
-	reflowComments,
-	isFloating,
-	calculatedOffset,
-	setHeights,
-	setBlockRef,
-	commentLastUpdated,
+	floating,
 	onKeyDown,
 } ) {
+	const isFloating = !! floating;
 	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
 	);
 	const { selectNote } = unlock( useDispatch( editorStore ) );
-	const selectedNote = useSelect(
-		( select ) => unlock( select( editorStore ) ).getSelectedNote(),
-		[]
-	);
 	const relatedBlockElement = useBlockElement( thread.blockClientId );
 	const debouncedToggleBlockHighlight = useDebounce(
 		toggleBlockHighlight,
@@ -474,11 +320,9 @@ function Thread( {
 	);
 	const { y, refs } = useFloatingThread( {
 		thread,
-		calculatedOffset,
-		setHeights,
-		setBlockRef,
-		selectedThread: selectedNote,
-		commentLastUpdated,
+		calculatedOffset: floating?.calculatedOffset ?? 0,
+		registerThread: floating?.registerThread,
+		unregisterThread: floating?.unregisterThread,
 	} );
 	const isKeyboardTabbingRef = useRef( false );
 
@@ -570,19 +414,16 @@ function Thread( {
 			<AddComment
 				onSubmit={ onAddReply }
 				commentSidebarRef={ commentSidebarRef }
-				reflowComments={ reflowComments }
-				isFloating={ isFloating }
-				y={ y }
-				refs={ refs }
+				floating={ { y, refs } }
 			/>
 		);
 	}
 
 	return (
-		<VStack
+		<FloatingContainer
+			floating={ isFloating ? { y, refs } : undefined }
 			className={ clsx( 'editor-collab-sidebar-panel__thread', {
 				'is-selected': isSelected,
-				'is-floating': isFloating,
 			} ) }
 			id={ `comment-thread-${ thread.id }` }
 			spacing="3"
@@ -607,8 +448,6 @@ function Thread( {
 			role="treeitem"
 			aria-label={ ariaLabel }
 			aria-expanded={ isSelected }
-			ref={ isFloating ? refs.setFloating : undefined }
-			style={ isFloating ? { top: y } : undefined }
 		>
 			<Button
 				className="editor-collab-sidebar-panel__skip-to-comment"
@@ -647,7 +486,6 @@ function Thread( {
 					}
 				} }
 				onDelete={ onCommentDelete }
-				reflowComments={ reflowComments }
 			/>
 			{ isSelected &&
 				allReplies.map( ( reply ) => (
@@ -658,7 +496,6 @@ function Thread( {
 						isExpanded={ isSelected }
 						onEdit={ onEditComment }
 						onDelete={ onCommentDelete }
-						reflowComments={ reflowComments }
 					/>
 				) ) }
 			{ ! isSelected && restReplies.length > 0 && (
@@ -694,7 +531,6 @@ function Thread( {
 					isExpanded={ isSelected }
 					onEdit={ onEditComment }
 					onDelete={ onCommentDelete }
-					reflowComments={ reflowComments }
 				/>
 			) }
 			{ isSelected && (
@@ -741,7 +577,6 @@ function Thread( {
 								thread.id,
 								thread.author_name
 							) }
-							reflowComments={ reflowComments }
 						/>
 					</VStack>
 				</VStack>
@@ -759,18 +594,11 @@ function Thread( {
 					{ __( 'Back to block' ) }
 				</Button>
 			) }
-		</VStack>
+		</FloatingContainer>
 	);
 }
 
-const CommentBoard = ( {
-	thread,
-	parent,
-	isExpanded,
-	onEdit,
-	onDelete,
-	reflowComments,
-} ) => {
+const CommentBoard = ( { thread, parent, isExpanded, onEdit, onDelete } ) => {
 	const [ actionState, setActionState ] = useState( false );
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 	const actionButtonRef = useRef( null );
@@ -930,7 +758,6 @@ const CommentBoard = ( {
 						thread.id,
 						thread.author_name
 					) }
-					reflowComments={ reflowComments }
 				/>
 			) : (
 				<RawHTML

package/src/components/collab-sidebar/floating-container.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+export function FloatingContainer( {
+	floating,
+	className,
+	style,
+	children,
+	...props
+} ) {
+	const isFloating = !! floating;
+	return (
+		<VStack
+			className={ clsx( className, { 'is-floating': isFloating } ) }
+			ref={ isFloating ? floating.refs.setFloating : undefined }
+			style={ isFloating ? { top: floating.y, ...style } : style }
+			{ ...props }
+		>
+			{ children }
+		</VStack>
+	);
+}

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

@@ -12,10 +12,10 @@ import {
  */
 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';
@@ -33,16 +33,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 { calculateAllOffsets } from './utils';
 
 const { useBlockElement, cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 export function useBlockComments( postId ) {
-	const [ commentLastUpdated, reflowComments ] = useReducer(
-		() => Date.now(),
-		0
-	);
-
 	const queryArgs = {
 		post: postId,
 		type: 'note',
@@ -165,12 +161,10 @@ export function useBlockComments( postId ) {
 	return {
 		resultComments,
 		unresolvedSortedThreads,
-		reflowComments,
-		commentLastUpdated,
 	};
 }
 
-export function useBlockCommentsActions( reflowComments = noop ) {
+export function useBlockCommentsActions() {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
 	const { getCurrentPostId } = useSelect( editorStore );
@@ -224,10 +218,8 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					isDismissible: true,
 				}
 			);
-			setTimeout( reflowComments, 300 );
 			return savedRecord;
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
@@ -292,9 +284,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					isDismissible: true,
 				}
 			);
-			reflowComments();
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
@@ -326,9 +316,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 				type: 'snackbar',
 				isDismissible: true,
 			} );
-			reflowComments();
 		} catch ( error ) {
-			reflowComments();
 			onError( error );
 		}
 	};
@@ -366,26 +354,55 @@ export function useEnableFloatingSidebar( enabled = false ) {
 	}, [ enabled, registry ] );
 }
 
+export function useFloatingBoard( { threads, selectedNoteId, isFloating } ) {
+	const [ boardOffsets, setBoardOffsets ] = useState( {} );
+	const [ store ] = useState( createBoardStore );
+	const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
+
+	const heights = useSyncExternalStore( store.subscribe, store.getSnapshot );
+
+	// Recalc is deferred to a rAF; the cleanup cancels the pending frame
+	// when deps change, so back-to-back updates collapse into one paint.
+	useEffect( () => {
+		if ( ! isFloating ) {
+			return;
+		}
+
+		const rafId = window.requestAnimationFrame( () => {
+			const { offsets, minHeight } = calculateAllOffsets( {
+				threads,
+				selectedNoteId,
+				blockRects: store.getBlockRects(),
+				heights,
+			} );
+			setBoardOffsets( offsets );
+			setCanvasMinHeight( minHeight );
+		} );
+
+		return () => window.cancelAnimationFrame( rafId );
+	}, [
+		heights,
+		isFloating,
+		selectedNoteId,
+		setCanvasMinHeight,
+		store,
+		threads,
+	] );
+
+	return {
+		boardOffsets,
+		registerThread: store.registerThread,
+		unregisterThread: store.unregisterThread,
+	};
+}
+
 export function useFloatingThread( {
 	thread,
 	calculatedOffset,
-	setHeights,
-	selectedThread,
-	setBlockRef,
-	commentLastUpdated,
+	registerThread,
+	unregisterThread,
 } ) {
 	const blockElement = useBlockElement( thread.blockClientId );
-	const updateHeight = useCallback(
-		( id, newHeight ) => {
-			setHeights( ( prev ) => {
-				if ( prev[ id ] !== newHeight ) {
-					return { ...prev, [ id ]: newHeight };
-				}
-				return prev;
-			} );
-		},
-		[ setHeights ]
-	);
 
 	// Use floating-ui to track the block element's position with the calculated offset.
 	const { y, refs } = useFloating( {
@@ -398,32 +415,27 @@ export function useFloatingThread( {
 		whileElementsMounted: autoUpdate,
 	} );
 
-	// Store the block reference for each thread.
+	// Set the floating-ui reference element.
 	useEffect( () => {
 		if ( blockElement ) {
 			refs.setReference( blockElement );
 		}
-	}, [ blockElement, refs, commentLastUpdated ] );
-
-	// Track thread heights.
-	useEffect( () => {
-		if ( refs.floating?.current ) {
-			setBlockRef( thread.id, blockElement );
-		}
-	}, [ blockElement, thread.id, refs.floating, setBlockRef ] );
+	}, [ blockElement, refs ] );
 
-	// When the selected thread changes, update heights, triggering offset recalculation.
+	// Register block + floating elements with the board.
+	// The board's ResizeObserver tracks height changes automatically.
 	useEffect( () => {
-		if ( refs.floating?.current ) {
-			const newHeight = refs.floating.current.scrollHeight;
-			updateHeight( thread.id, newHeight );
+		const floatingEl = refs.floating?.current;
+		if ( floatingEl && registerThread ) {
+			registerThread( thread.id, blockElement, floatingEl );
 		}
+		return () => unregisterThread?.( thread.id );
 	}, [
+		blockElement,
 		thread.id,
-		updateHeight,
 		refs.floating,
-		selectedThread,
-		commentLastUpdated,
+		registerThread,
+		unregisterThread,
 	] );
 
 	return {