Inline Commenting: Re-order the comments in sidebar in which blocks a…

…re listed (#66927)

Co-authored-by: akasunil <[email protected]>
Co-authored-by: ellatrix <[email protected]>

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

@@ -12,7 +12,7 @@ import { useState, useMemo } from '@wordpress/element';
 import { comment as commentIcon } from '@wordpress/icons';
 import { addFilter } from '@wordpress/hooks';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -27,6 +27,7 @@ import { store as editorStore } from '../../store';
 import AddCommentButton from './comment-button';
 import AddCommentToolbarButton from './comment-button-toolbar';
 import { useGlobalStylesContext } from '../global-styles-provider';
+import { getCommentIdsFromBlocks } from './utils';
 
 const isBlockCommentExperimentEnabled =
 	window?.__experimentalEnableBlockComment;
@@ -220,10 +221,24 @@ export default function CollabSidebar() {
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 
-	const { postStatus } = useSelect( ( select ) => {
+	const { postId, postType, postStatus, threads } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		const _postId = getCurrentPostId();
+		const data =
+			!! _postId && typeof _postId === 'number'
+				? select( coreStore ).getEntityRecords( 'root', 'comment', {
+						post: _postId,
+						type: 'block_comment',
+						status: 'any',
+						per_page: 100,
+				  } )
+				: null;
 		return {
+			postId: _postId,
+			postType: getCurrentPostType(),
 			postStatus:
 				select( editorStore ).getEditedPostAttribute( 'status' ),
+			threads: data,
 		};
 	}, [] );
 
@@ -244,26 +259,12 @@ export default function CollabSidebar() {
 		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
 	};
 
-	const { threads } = useSelect( ( select ) => {
-		const { getCurrentPostId } = select( editorStore );
-		const _postId = getCurrentPostId();
-		const data = !! _postId
-			? select( coreStore ).getEntityRecords( 'root', 'comment', {
-					post: _postId,
-					type: 'block_comment',
-					status: 'any',
-					per_page: 100,
-			  } )
-			: null;
-
-		return {
-			postId: _postId,
-			threads: data,
-		};
-	}, [] );
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
 
 	// Process comments to build the tree structure
-	const resultComments = useMemo( () => {
+	const { resultComments, sortedThreads } = useMemo( () => {
 		// Create a compare to store the references to all objects by id
 		const compare = {};
 		const result = [];
@@ -288,8 +289,22 @@ export default function CollabSidebar() {
 			}
 		} );
 
-		return result;
-	}, [ threads ] );
+		if ( 0 === result?.length ) {
+			return { resultComments: [], sortedThreads: [] };
+		}
+
+		const blockCommentIds = getCommentIdsFromBlocks( blocks );
+
+		const threadIdMap = new Map(
+			result.map( ( thread ) => [ thread.id, thread ] )
+		);
+
+		const sortedComments = blockCommentIds
+			.map( ( id ) => threadIdMap.get( id ) )
+			.filter( ( thread ) => thread !== undefined );
+
+		return { resultComments: result, sortedThreads: sortedComments };
+	}, [ threads, blocks ] );
 
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();
@@ -338,7 +353,7 @@ export default function CollabSidebar() {
 				headerClassName="editor-collab-sidebar__header"
 			>
 				<CollabSidebarContent
-					comments={ resultComments }
+					comments={ sortedThreads }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
 					styles={ {

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

@@ -7,3 +7,39 @@
 export function sanitizeCommentString( str ) {
 	return str.trim();
 }
+
+/**
+ * Extracts comment IDs from an array of blocks.
+ *
+ * This function recursively traverses the blocks and their inner blocks to
+ * collect all comment IDs found in the block attributes.
+ *
+ * @param {Array} blocks - The array of blocks to extract comment IDs from.
+ * @return {Array} An array of comment IDs extracted from the blocks.
+ */
+export function getCommentIdsFromBlocks( blocks ) {
+	// Recursive function to extract comment IDs from blocks
+	const extractCommentIds = ( items ) => {
+		return items.reduce( ( commentIds, block ) => {
+			// Check for comment IDs in the current block's attributes
+			if (
+				block.attributes &&
+				block.attributes.blockCommentId &&
+				! commentIds.includes( block.attributes.blockCommentId )
+			) {
+				commentIds.push( block.attributes.blockCommentId );
+			}
+
+			// Recursively check inner blocks
+			if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+				const innerCommentIds = extractCommentIds( block.innerBlocks );
+				commentIds.push( ...innerCommentIds );
+			}
+
+			return commentIds;
+		}, [] );
+	};
+
+	// Extract all comment IDs recursively
+	return extractCommentIds( blocks );
+}