Notes position alignment in HTML

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

@@ -69,22 +69,29 @@ export function Comments( {
 	const { selectBlock, toggleBlockSpotlight } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
-		useSelect( ( select ) => {
-			const {
-				getBlockAttributes,
-				getSelectedBlockClientId,
-				getClientIdsWithDescendants,
-			} = select( blockEditorStore );
-			const clientId = getSelectedBlockClientId();
-			return {
-				blockCommentId: clientId
-					? getBlockAttributes( clientId )?.metadata?.noteId
-					: null,
-				selectedBlockClientId: clientId,
-				orderedBlockIds: getClientIdsWithDescendants(),
-			};
-		}, [] );
+
+	const {
+		blockCommentId,
+		selectedBlockClientId,
+		orderedBlockIds,
+		blockMode,
+	} = useSelect( ( select ) => {
+		const {
+			getBlockAttributes,
+			getSelectedBlockClientId,
+			getClientIdsWithDescendants,
+			getBlockMode,
+		} = select( blockEditorStore );
+		const clientId = getSelectedBlockClientId();
+		return {
+			blockCommentId: clientId
+				? getBlockAttributes( clientId )?.metadata?.noteId
+				: null,
+			selectedBlockClientId: clientId,
+			orderedBlockIds: getClientIdsWithDescendants(),
+			blockMode: clientId ? getBlockMode( clientId ) : null,
+		};
+	}, [] );
 
 	const relatedBlockElement = useBlockElement( selectedBlockClientId );
 
@@ -311,6 +318,7 @@ export function Comments( {
 		threads,
 		selectedThread,
 		setCanvasMinHeight,
+		blockMode,
 	] );
 
 	const handleThreadNavigation = ( event, thread, isSelected ) => {

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

@@ -372,6 +372,17 @@ export function useFloatingThread( {
 	const blockRef = useRef();
 	useBlockElementRef( thread.blockClientId, blockRef );
 
+	const blockMode = useSelect(
+		( select ) => {
+			return thread.blockClientId
+				? select( blockEditorStore ).getBlockMode(
+						thread.blockClientId
+				  )
+				: null;
+		},
+		[ thread.blockClientId ]
+	);
+
 	const updateHeight = useCallback(
 		( id, newHeight ) => {
 			setHeights( ( prev ) => {
@@ -400,7 +411,7 @@ export function useFloatingThread( {
 		if ( blockRef.current ) {
 			refs.setReference( blockRef.current );
 		}
-	}, [ blockRef, refs, commentLastUpdated ] );
+	}, [ blockRef, refs, commentLastUpdated, blockMode ] );
 
 	// Track thread heights.
 	useEffect( () => {