Inline commenting: Comment board alignment to relative blocks

packages/block-editor/src/private-apis.js

@@ -50,6 +50,8 @@ import useBlockDisplayTitle from './components/block-title/use-block-display-tit
 import TabbedSidebar from './components/tabbed-sidebar';
 import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
 import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+import { useBlockElementRef } from './components/block-list/use-block-props/use-block-refs';
+
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -97,4 +99,5 @@ lock( privateApis, {
 	sectionRootClientIdKey,
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
+	useBlockElementRef,
 } );

packages/editor/package.json

@@ -34,6 +34,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
+		"@floating-ui/react-dom": "^2.0.8",
 		"@wordpress/a11y": "*",
 		"@wordpress/api-fetch": "*",
 		"@wordpress/blob": "*",

packages/editor/src/components/collab-sidebar/comments.js

@@ -2,11 +2,16 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import {
+	useFloating,
+	autoUpdate,
+	offset as offsetMiddleware,
+} from '@floating-ui/react-dom';
 
 /**
  * WordPress dependencies
  */
-import { useState, RawHTML } from '@wordpress/element';
+import { useState, RawHTML, useRef, useEffect } from '@wordpress/element';
 import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -18,13 +23,19 @@ import {
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 
 /**
  * Renders the Comments component.
@@ -37,6 +48,7 @@ import CommentForm from './comment-form';
  * @param {Function} props.onCommentResolve    - The function to mark a comment as resolved.
  * @param {boolean}  props.showCommentBoard    - Whether to show the comment board.
  * @param {Function} props.setShowCommentBoard - The function to set the comment board visibility.
+ * @param {boolean}  props.canvasSidebar       - Whether is this canvas sidebar or not.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -47,7 +59,19 @@ export function Comments( {
 	onCommentResolve,
 	showCommentBoard,
 	setShowCommentBoard,
+	canvasSidebar,
 } ) {
+	const [ heights, setHeights ] = useState( {} );
+
+	const updateHeight = ( id, newHeight ) => {
+		setHeights( ( prev ) => {
+			if ( prev[ id ] !== newHeight ) {
+				return { ...prev, [ id ]: newHeight };
+			}
+			return prev;
+		} );
+	};
+
 	const { blockCommentId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
@@ -64,11 +88,20 @@ export function Comments( {
 		showCommentBoard && blockCommentId ? blockCommentId : null
 	);
 
+	// Object to store offsets for each board.
+	const offsetsRef = useRef( {} );
+
+	const updateOffsets = ( id, offset ) => {
+		offsetsRef.current[ id ] = offset;
+	};
+
 	const clearThreadFocus = () => {
 		setFocusThread( null );
 		setShowCommentBoard( false );
 	};
 
+	const ParentWrapper = canvasSidebar ? ThreadWrapper : VStack;
+
 	return (
 		<>
 			{
@@ -89,9 +122,12 @@ export function Comments( {
 			}
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
-				threads.map( ( thread ) => (
-					<VStack
+				threads.map( ( thread, index ) => (
+					<ParentWrapper
 						key={ thread.id }
+						id={ thread.id }
+						thread={ thread }
+						spacing="3"
 						className={ clsx(
 							'editor-collab-sidebar-panel__thread',
 							{
@@ -102,9 +138,12 @@ export function Comments( {
 									focusThread && focusThread === thread.id,
 							}
 						) }
-						id={ thread.id }
-						spacing="3"
 						onClick={ () => setFocusThread( thread.id ) }
+						offsetsRef={ offsetsRef }
+						updateOffsets={ updateOffsets }
+						previousThreadId={ threads[ index - 1 ]?.id }
+						updateHeight={ updateHeight }
+						heights={ heights }
 					>
 						<Thread
 							thread={ thread }
@@ -115,7 +154,7 @@ export function Comments( {
 							isFocused={ focusThread === thread.id }
 							clearThreadFocus={ clearThreadFocus }
 						/>
-					</VStack>
+					</ParentWrapper>
 				) ) }
 		</>
 	);
@@ -357,3 +396,81 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 		</>
 	);
 };
+
+const ThreadWrapper = ( {
+	children,
+	thread,
+	className,
+	onClick,
+	offsetsRef,
+	updateOffsets,
+	previousThreadId,
+	updateHeight,
+	heights,
+} ) => {
+	const blockRef = useRef();
+	useBlockElementRef( thread.clientId, blockRef );
+
+	const selectedBlockElementRect = blockRef.current?.getBoundingClientRect();
+
+	const initialOffsetTop = selectedBlockElementRect?.top;
+
+	const previousOffset = previousThreadId
+		? offsetsRef.current[ previousThreadId ]
+		: 0;
+
+	const previousBoardHeight = heights[ previousThreadId ];
+
+	const calculateOffset = () => {
+		if (
+			previousOffset &&
+			initialOffsetTop < previousOffset + previousBoardHeight
+		) {
+			return previousOffset - initialOffsetTop + previousBoardHeight + 20;
+		}
+		return 0;
+	};
+
+	const { y, refs } = useFloating( {
+		placement: 'right-start',
+		middleware: [
+			offsetMiddleware( {
+				crossAxis: calculateOffset(),
+			} ),
+		],
+		whileElementsMounted: autoUpdate,
+	} );
+
+	useEffect( () => {
+		if ( blockRef.current ) {
+			refs.setReference( blockRef.current ); // Bind reference element
+		}
+	}, [ blockRef, refs ] );
+
+	useEffect( () => {
+		if ( y !== null && y !== 0 ) {
+			updateOffsets( thread.id, y, refs.floating?.current?.clientHeight ); // Pass the offset to the parent
+		}
+	}, [ y, updateOffsets ] );
+
+	useEffect( () => {
+		if ( refs.floating?.current ) {
+			const newHeight = refs.floating?.current.scrollHeight;
+			updateHeight( thread.id, newHeight );
+		}
+	}, [ thread.id, updateHeight ] );
+
+	return (
+		<VStack
+			ref={ refs.setFloating }
+			className={ className }
+			spacing="3"
+			onClick={ onClick }
+			style={ {
+				top: y,
+			} }
+		>
+			{ children }
+		</VStack>
+	);
+};

packages/editor/src/components/collab-sidebar/index.js

@@ -56,6 +56,7 @@ function CollabSidebarContent( {
 	setShowCommentBoard,
 	styles,
 	comments,
+	canvasSidebar = false,
 } ) {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
@@ -203,14 +204,14 @@ function CollabSidebarContent( {
 				setShowCommentBoard={ setShowCommentBoard }
 			/>
 			<Comments
-				key={ getSelectedBlockClientId() }
 				threads={ comments }
 				onEditComment={ onEditComment }
 				onAddReply={ addNewComment }
 				onCommentDelete={ onCommentDelete }
 				onCommentResolve={ onCommentResolve }
 				showCommentBoard={ showCommentBoard }
 				setShowCommentBoard={ setShowCommentBoard }
+				canvasSidebar={ canvasSidebar }
 			/>
 		</div>
 	);
@@ -296,19 +297,23 @@ export default function CollabSidebar() {
 			return { resultComments: [], sortedThreads: [] };
 		}
 
+		const blockCommentIds = getCommentIdsFromBlocks( blocks );
+		const blockCommentIdMap = new Map(
+			blockCommentIds.map( ( item ) => [ item.commentID, item ] )
+		);
+
 		const updatedResult = result.map( ( item ) => ( {
 			...item,
 			reply: [ ...item.reply ].reverse(),
+			clientId: blockCommentIdMap.get( item.id )?.clientID,
 		} ) );
 
-		const blockCommentIds = getCommentIdsFromBlocks( blocks );
-
 		const threadIdMap = new Map(
 			updatedResult.map( ( thread ) => [ thread.id, thread ] )
 		);
 
 		const sortedComments = blockCommentIds
-			.map( ( id ) => threadIdMap.get( id ) )
+			.map( ( item ) => threadIdMap.get( item.commentID ) )
 			.filter( ( thread ) => thread !== undefined );
 
 		return { resultComments: updatedResult, sortedThreads: sortedComments };
@@ -367,6 +372,7 @@ export default function CollabSidebar() {
 					styles={ {
 						backgroundColor,
 					} }
+					canvasSidebar
 				/>
 			</PluginSidebar>
 		</>

packages/editor/src/components/collab-sidebar/style.scss

@@ -8,11 +8,19 @@
 
 .editor-collab-sidebar {
 	height: 100%;
+	overflow: hidden;
+
+	.editor-collab-sidebar-panel {
+		&__thread {
+			position: absolute;
+			width: calc(100% - 32px);
+		}
+	}
 }
 
 .editor-collab-sidebar-panel {
 	padding: $grid-unit-20;
-	height: 100%;
+	height: 100vw;
 
 	&__thread {
 		position: relative;

packages/editor/src/components/collab-sidebar/utils.js

@@ -27,7 +27,10 @@ export function getCommentIdsFromBlocks( blocks ) {
 				block.attributes.blockCommentId &&
 				! commentIds.includes( block.attributes.blockCommentId )
 			) {
-				commentIds.push( block.attributes.blockCommentId );
+				commentIds.push( {
+					clientID: block.clientId,
+					commentID: block.attributes.blockCommentId,
+				} );
 			}
 
 			// Recursively check inner blocks