From 1d4217594b07120c9b967cef66fe98d73aa9b3ec Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 12 Nov 2024 16:24:55 +0530 Subject: [PATCH 1/6] Re-order the comments in sidebar in which blocks are listed --- .../src/components/collab-sidebar/index.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 17a23a227424a..6d28a1b179cf7 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -67,7 +67,8 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { }; }, [] ); - const { getSelectedBlockClientId } = useSelect( blockEditorStore ); + const { getSelectedBlockClientId, getBlocks } = + useSelect( blockEditorStore ); const { updateBlockAttributes } = useDispatch( blockEditorStore ); // Process comments to build the tree structure @@ -96,7 +97,20 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { } } ); - return result; + const blockCommentIds = getBlocks() + ?.filter( ( block ) => !! block?.attributes?.blockCommentId ) + ?.map( ( block ) => block.attributes.blockCommentId ); + + const uniqueIds = [ ...new Set( blockCommentIds.values() ) ]; + + const threadIdMap = new Map( + filteredComments?.map( ( thread ) => [ thread.id, thread ] ) + ); + const sortedThreads = uniqueIds + .map( ( id ) => threadIdMap.get( id ) ) + .filter( ( thread ) => thread !== undefined ); + + return sortedThreads; }, [ threads ] ); // Function to save the comment. From 67441dead95605937c8a1a481b41bee366d657ff Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 19 Nov 2024 15:42:17 +0530 Subject: [PATCH 2/6] Fix comment order for posts with template --- .../src/components/collab-sidebar/index.js | 45 +++++++++++++++---- 1 file changed, 36 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 6d28a1b179cf7..56195bf5e87a7 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -7,7 +7,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'; @@ -49,8 +49,8 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore ); const { getEntityRecord } = resolveSelect( coreStore ); - const { postId, threads } = useSelect( ( select ) => { - const { getCurrentPostId } = select( editorStore ); + const { postId, postType, threads } = useSelect( ( select ) => { + const { getCurrentPostId, getCurrentPostType } = select( editorStore ); const _postId = getCurrentPostId(); const data = !! _postId ? select( coreStore ).getEntityRecords( 'root', 'comment', { @@ -63,14 +63,43 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { return { postId: _postId, + postType: getCurrentPostType(), threads: data, }; }, [] ); - const { getSelectedBlockClientId, getBlocks } = - useSelect( blockEditorStore ); + const { getSelectedBlockClientId } = useSelect( blockEditorStore ); const { updateBlockAttributes } = useDispatch( blockEditorStore ); + const [ blocks ] = useEntityBlockEditor( 'postType', postType, { + id: postId, + } ); + + const getCommentIdsFromBlocks = () => { + // 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.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 ); + }; + // Process comments to build the tree structure const resultComments = useMemo( () => { // Create a compare to store the references to all objects by id @@ -97,14 +126,12 @@ function CollabSidebarContent( { showCommentBoard, setShowCommentBoard } ) { } } ); - const blockCommentIds = getBlocks() - ?.filter( ( block ) => !! block?.attributes?.blockCommentId ) - ?.map( ( block ) => block.attributes.blockCommentId ); + const blockCommentIds = getCommentIdsFromBlocks(); const uniqueIds = [ ...new Set( blockCommentIds.values() ) ]; const threadIdMap = new Map( - filteredComments?.map( ( thread ) => [ thread.id, thread ] ) + result?.map( ( thread ) => [ thread.id, thread ] ) ); const sortedThreads = uniqueIds .map( ( id ) => threadIdMap.get( id ) ) From eb4e907f736c166366bf628312ccc8b70bb986f6 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 13:26:35 +0530 Subject: [PATCH 3/6] Apply re-order of comments to only canvas sidebar for comments --- .../src/components/collab-sidebar/index.js | 53 +++++++++++++++++-- 1 file changed, 48 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 0fe46c549cff0..a68b36589d2b1 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'; @@ -220,8 +220,11 @@ export default function CollabSidebar() { const { enableComplementaryArea } = useDispatch( interfaceStore ); const { getActiveComplementaryArea } = useSelect( interfaceStore ); - const { postStatus } = useSelect( ( select ) => { + const { postId, postType, postStatus } = useSelect( ( select ) => { + const { getCurrentPostId, getCurrentPostType } = select( editorStore ); return { + postId: getCurrentPostId(), + postType: getCurrentPostType(), postStatus: select( editorStore ).getEditedPostAttribute( 'status' ), }; @@ -262,8 +265,37 @@ export default function CollabSidebar() { }; }, [] ); + const [ blocks ] = useEntityBlockEditor( 'postType', postType, { + id: postId, + } ); + + const getCommentIdsFromBlocks = () => { + // 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.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 ); + }; + // 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,7 +320,18 @@ export default function CollabSidebar() { } } ); - return result; + const blockCommentIds = getCommentIdsFromBlocks(); + + const uniqueIds = [ ...new Set( blockCommentIds.values() ) ]; + + const threadIdMap = new Map( + result?.map( ( thread ) => [ thread.id, thread ] ) + ); + const sortedComments = uniqueIds + .map( ( id ) => threadIdMap.get( id ) ) + .filter( ( thread ) => thread !== undefined ); + + return { resultComments: result, sortedThreads: sortedComments }; }, [ threads ] ); // Get the global styles to set the background color of the sidebar. @@ -338,7 +381,7 @@ export default function CollabSidebar() { headerClassName="editor-collab-sidebar__header" > Date: Tue, 3 Dec 2024 16:41:48 +0530 Subject: [PATCH 4/6] Moved getCommentIdsFromBlocks out of component --- .../src/components/collab-sidebar/utils.js | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js index 7e73344c5dc0e..51345392098ff 100644 --- a/packages/editor/src/components/collab-sidebar/utils.js +++ b/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 ); +} From b5c41f79f17c0fb2d94d29c6a71435052737c123 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 16:43:39 +0530 Subject: [PATCH 5/6] Cleanup --- .../src/components/collab-sidebar/index.js | 37 ++++--------------- 1 file changed, 8 insertions(+), 29 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index a68b36589d2b1..0e5497c2ebd2b 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -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; @@ -269,31 +270,6 @@ export default function CollabSidebar() { id: postId, } ); - const getCommentIdsFromBlocks = () => { - // 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.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 ); - }; - // Process comments to build the tree structure const { resultComments, sortedThreads } = useMemo( () => { // Create a compare to store the references to all objects by id @@ -320,19 +296,22 @@ export default function CollabSidebar() { } } ); - const blockCommentIds = getCommentIdsFromBlocks(); + if ( 0 === result?.length ) { + return { resultComments: [], sortedThreads: [] }; + } - const uniqueIds = [ ...new Set( blockCommentIds.values() ) ]; + const blockCommentIds = getCommentIdsFromBlocks( blocks ); const threadIdMap = new Map( result?.map( ( thread ) => [ thread.id, thread ] ) ); - const sortedComments = uniqueIds + + const sortedComments = blockCommentIds .map( ( id ) => threadIdMap.get( id ) ) .filter( ( thread ) => thread !== undefined ); return { resultComments: result, sortedThreads: sortedComments }; - }, [ threads ] ); + }, [ threads, blocks ] ); // Get the global styles to set the background color of the sidebar. const { merged: GlobalStyles } = useGlobalStylesContext(); From 7da59a07a3c0c11d2447d1b020b1811369f764eb Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 17:42:18 +0530 Subject: [PATCH 6/6] Refactor and improve code --- .../src/components/collab-sidebar/index.js | 35 ++++++++----------- 1 file changed, 14 insertions(+), 21 deletions(-) diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js index 0e5497c2ebd2b..aa1b9ac6c4560 100644 --- a/packages/editor/src/components/collab-sidebar/index.js +++ b/packages/editor/src/components/collab-sidebar/index.js @@ -221,13 +221,24 @@ export default function CollabSidebar() { const { enableComplementaryArea } = useDispatch( interfaceStore ); const { getActiveComplementaryArea } = useSelect( interfaceStore ); - const { postId, postType, 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: getCurrentPostId(), + postId: _postId, postType: getCurrentPostType(), postStatus: select( editorStore ).getEditedPostAttribute( 'status' ), + threads: data, }; }, [] ); @@ -248,24 +259,6 @@ 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, } ); @@ -303,7 +296,7 @@ export default function CollabSidebar() { const blockCommentIds = getCommentIdsFromBlocks( blocks ); const threadIdMap = new Map( - result?.map( ( thread ) => [ thread.id, thread ] ) + result.map( ( thread ) => [ thread.id, thread ] ) ); const sortedComments = blockCommentIds