diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 0fe46c549cff0f..aa1b9ac6c45609 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/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" > { + 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 ); +}