From ff967cbaf08bb08de82665f72ba01729d765bc8f Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Thu, 5 Dec 2024 11:26:53 +0530
Subject: [PATCH 01/21] Export useBlockElement as private api

---
 packages/block-editor/src/private-apis.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 21b9f4bca7fc3d..d35f26f42f344c 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/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 { useBlockElement } from './components/block-list/use-block-props/use-block-refs';
+
 /**
  * Private @wordpress/block-editor APIs.
  */
@@ -97,4 +99,5 @@ lock( privateApis, {
 	sectionRootClientIdKey,
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
+	useBlockElement,
 } );

From 67f651d77e872f3d4c3f141099ae2739a6e59c13 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Thu, 5 Dec 2024 11:28:45 +0530
Subject: [PATCH 02/21] Set comment board position relative to the blocks

---
 .../src/components/collab-sidebar/comments.js | 73 +++++++++++++++++--
 1 file changed, 67 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 7a03068787c81e..c9fed5388c4cd8 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -18,13 +18,21 @@ import {
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEntityBlockEditor } from '@wordpress/core-data';
+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';
+import { store as editorStore } from '../../store';
+
+const { useBlockElement } = unlock( blockEditorPrivateApis );
 
 /**
  * Renders the Comments component.
@@ -72,6 +80,41 @@ export function Comments( {
 		);
 	}, [] );
 
+	const { postId, postType } = useSelect( ( select ) => {
+		const { getCurrentPostId, getCurrentPostType } = select( editorStore );
+		const _postId = getCurrentPostId();
+
+		return {
+			postId: _postId,
+			postType: getCurrentPostType(),
+		};
+	}, [] );
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	const getClientIdByCommentId = ( commentId ) => {
+		const extractClientId = ( blocksArray, commentID ) => {
+			for ( const block of blocksArray ) {
+				if ( block.attributes.blockCommentId === commentID ) {
+					return block.clientId;
+				}
+				if ( block.innerBlocks && block.innerBlocks.length > 0 ) {
+					const foundBlock = extractClientId(
+						block.innerBlocks,
+						commentID
+					);
+					if ( foundBlock ) {
+						return foundBlock;
+					}
+				}
+			}
+		};
+
+		return blocks ? extractClientId( blocks, commentId ) : null;
+	};
+
 	const CommentBoard = ( { thread, parentThread } ) => {
 		return (
 			<>
@@ -190,9 +233,10 @@ export function Comments( {
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread ) => (
-					<VStack
+					<ThreadWrapper
 						key={ thread.id }
-						className={ clsx(
+						clientId={ getClientIdByCommentId( thread.id ) }
+						classNames={ clsx(
 							'editor-collab-sidebar-panel__thread',
 							{
 								'editor-collab-sidebar-panel__active-thread':
@@ -200,8 +244,6 @@ export function Comments( {
 									blockCommentId === thread.id,
 							}
 						) }
-						id={ thread.id }
-						spacing="3"
 					>
 						<CommentBoard thread={ thread } />
 						{ 0 < thread?.reply?.length &&
@@ -254,7 +296,7 @@ export function Comments( {
 									</VStack>
 								</VStack>
 							) }
-					</VStack>
+					</ThreadWrapper>
 				) ) }
 		</>
 	);
@@ -340,3 +382,22 @@ function CommentHeader( {
 		</HStack>
 	);
 }
+
+const ThreadWrapper = ( { children, clientId, classNames } ) => {
+	const selectedBlockElement = useBlockElement( clientId );
+	const selectedBlockElementRect =
+		selectedBlockElement?.getBoundingClientRect();
+
+	const offsetTop = selectedBlockElementRect?.top + 'px';
+
+	// This is a temporary wrapper to handle the position of the comments.
+	return (
+		<VStack
+			className={ classNames }
+			spacing="3"
+			style={ { top: offsetTop } }
+		>
+			{ children }
+		</VStack>
+	);
+};

From c0165f07e1d6870b60f202a79297a9a2b37bc2ef Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Thu, 5 Dec 2024 17:34:21 +0530
Subject: [PATCH 03/21] Fix sidebar style background

---
 packages/editor/src/components/collab-sidebar/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
index 2c1426f1dd75df..2683ccd6017984 100644
--- a/packages/editor/src/components/collab-sidebar/style.scss
+++ b/packages/editor/src/components/collab-sidebar/style.scss
@@ -12,7 +12,7 @@
 
 .editor-collab-sidebar-panel {
 	padding: $grid-unit-20;
-	height: 100%;
+	height: 100vw;
 
 	&__thread {
 		position: relative;

From 0cc03def06e68a3739337e5209e96bd7fa69c8c9 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 6 Dec 2024 19:28:29 +0530
Subject: [PATCH 04/21] Export useBlockElement instead of useBlockElement

---
 packages/block-editor/src/private-apis.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index d35f26f42f344c..2288acc1e03553 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -50,7 +50,7 @@ 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 { useBlockElement } from './components/block-list/use-block-props/use-block-refs';
+import { useBlockElementRef } from './components/block-list/use-block-props/use-block-refs';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -99,5 +99,5 @@ lock( privateApis, {
 	sectionRootClientIdKey,
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
-	useBlockElement,
+	useBlockElementRef,
 } );

From 23ff73b18f5e843371a0285668aab6766ff3a021 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 6 Dec 2024 19:30:36 +0530
Subject: [PATCH 05/21] Add floating-ui dependacy to editor package

---
 packages/editor/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 59d3caded3d322..b799b53d312c9f 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -34,6 +34,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
+		"@floating-ui/react-dom": "^2.1.2",
 		"@wordpress/a11y": "*",
 		"@wordpress/api-fetch": "*",
 		"@wordpress/blob": "*",

From dacc2e75d25915c96752a357cdfa341941635bd4 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 6 Dec 2024 19:36:44 +0530
Subject: [PATCH 06/21] Bind board position to relative block using useFloating

---
 .../src/components/collab-sidebar/comments.js | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index c9fed5388c4cd8..be877ce4222db5 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { useFloating, autoUpdate } 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,
@@ -32,7 +33,7 @@ import CommentForm from './comment-form';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-const { useBlockElement } = unlock( blockEditorPrivateApis );
+const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 
 /**
  * Renders the Comments component.
@@ -384,18 +385,28 @@ function CommentHeader( {
 }
 
 const ThreadWrapper = ( { children, clientId, classNames } ) => {
-	const selectedBlockElement = useBlockElement( clientId );
-	const selectedBlockElementRect =
-		selectedBlockElement?.getBoundingClientRect();
+	const blockRef = useRef();
+	useBlockElementRef( clientId, blockRef );
 
-	const offsetTop = selectedBlockElementRect?.top + 'px';
+	const { y, refs } = useFloating( {
+		whileElementsMounted: autoUpdate,
+	} );
+
+	useEffect( () => {
+		if ( blockRef.current ) {
+			refs.setReference( blockRef.current ); // Bind reference element
+		}
+	}, [ blockRef, refs ] );
 
-	// This is a temporary wrapper to handle the position of the comments.
 	return (
 		<VStack
+			ref={ refs.setFloating }
 			className={ classNames }
 			spacing="3"
-			style={ { top: offsetTop } }
+			style={ {
+				position: 'absolute',
+				top: y ?? 0,
+			} }
 		>
 			{ children }
 		</VStack>

From 9067050448e3796bc4c2b4601ab902e566386c81 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 6 Dec 2024 20:00:39 +0530
Subject: [PATCH 07/21] Fix style of comment board

---
 packages/editor/src/components/collab-sidebar/comments.js | 1 +
 packages/editor/src/components/collab-sidebar/style.scss  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index be877ce4222db5..234be2254b91ba 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -389,6 +389,7 @@ const ThreadWrapper = ( { children, clientId, classNames } ) => {
 	useBlockElementRef( clientId, blockRef );
 
 	const { y, refs } = useFloating( {
+		placement: 'right-start',
 		whileElementsMounted: autoUpdate,
 	} );
 
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
index 2683ccd6017984..e3bf2225ff8fb3 100644
--- a/packages/editor/src/components/collab-sidebar/style.scss
+++ b/packages/editor/src/components/collab-sidebar/style.scss
@@ -21,6 +21,7 @@
 		border: 1px solid $gray-300;
 		background-color: $gray-100;
 		margin-bottom: $grid-unit-20;
+		width: calc(100% - 32px);
 	}
 
 	&__active-thread {

From 6c0256f00f1817f605110b2d5ef0962d1a4963bb Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Tue, 10 Dec 2024 19:13:01 +0530
Subject: [PATCH 08/21] Add client id inside comment object to reduce
 complexity

---
 package-lock.json                                      |  2 +-
 .../editor/src/components/collab-sidebar/comments.js   |  5 +++--
 packages/editor/src/components/collab-sidebar/index.js | 10 +++++++---
 packages/editor/src/components/collab-sidebar/utils.js |  5 ++++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b0dbbb0905cbd..e36caae6141759 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5178,7 +5178,6 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
 			"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/dom": "^1.0.0"
@@ -54368,6 +54367,7 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
+				"@floating-ui/react-dom": "^2.1.2",
 				"@wordpress/a11y": "*",
 				"@wordpress/api-fetch": "*",
 				"@wordpress/blob": "*",
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 252ddae77373f3..337c38781cf046 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -362,9 +362,9 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 			) }
 		</>
 	);
-}
+};
 
-const ThreadWrapper = ( { children, thread, classNames } ) => {
+const ThreadWrapper = ( { children, thread, classNames, onClick } ) => {
 	const blockRef = useRef();
 	useBlockElementRef( thread.clientId, blockRef );
 
@@ -384,6 +384,7 @@ const ThreadWrapper = ( { children, thread, classNames } ) => {
 			ref={ refs.setFloating }
 			className={ classNames }
 			spacing="3"
+			onclick={ onClick }
 			style={ {
 				position: 'absolute',
 				top: y ?? 0,
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index c53ee9e7e919c6..b8010aaea351be 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -296,19 +296,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 };
diff --git a/packages/editor/src/components/collab-sidebar/utils.js b/packages/editor/src/components/collab-sidebar/utils.js
index 51345392098ff2..020ab14790eef5 100644
--- a/packages/editor/src/components/collab-sidebar/utils.js
+++ b/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

From b3252ac12bb9a762df25ba77c790aede3d964314 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 11 Dec 2024 12:50:56 +0530
Subject: [PATCH 09/21] Conditionally align comment board with blocks

---
 .../src/components/collab-sidebar/comments.js | 19 ++++++++++++-------
 .../src/components/collab-sidebar/index.js    |  3 +++
 .../src/components/collab-sidebar/style.scss  |  9 ++++++++-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 337c38781cf046..c43e29b0a1020f 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -44,6 +44,7 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
  * @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( {
@@ -54,6 +55,7 @@ export function Comments( {
 	onCommentResolve,
 	showCommentBoard,
 	setShowCommentBoard,
+	canvasSidebar,
 } ) {
 	const { blockCommentId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
@@ -76,6 +78,8 @@ export function Comments( {
 		setShowCommentBoard( false );
 	};
 
+	const ParentWrapper = canvasSidebar ? ThreadWrapper : VStack;
+
 	return (
 		<>
 			{
@@ -97,10 +101,12 @@ export function Comments( {
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread ) => (
-					<ThreadWrapper
+					<ParentWrapper
 						key={ thread.id }
+						id={ thread.id }
 						thread={ thread }
-						classNames={ clsx(
+						spacing="3"
+						className={ clsx(
 							'editor-collab-sidebar-panel__thread',
 							{
 								'editor-collab-sidebar-panel__active-thread':
@@ -121,7 +127,7 @@ export function Comments( {
 							isFocused={ focusThread === thread.id }
 							clearThreadFocus={ clearThreadFocus }
 						/>
-					</ThreadWrapper>
+					</ParentWrapper>
 				) ) }
 		</>
 	);
@@ -364,7 +370,7 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 	);
 };
 
-const ThreadWrapper = ( { children, thread, classNames, onClick } ) => {
+const ThreadWrapper = ( { children, thread, className, onClick } ) => {
 	const blockRef = useRef();
 	useBlockElementRef( thread.clientId, blockRef );
 
@@ -382,12 +388,11 @@ const ThreadWrapper = ( { children, thread, classNames, onClick } ) => {
 	return (
 		<VStack
 			ref={ refs.setFloating }
-			className={ classNames }
+			className={ className }
 			spacing="3"
 			onclick={ onClick }
 			style={ {
-				position: 'absolute',
-				top: y ?? 0,
+				top: y,
 			} }
 		>
 			{ children }
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index b8010aaea351be..4a3f618ebddca6 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/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 );
@@ -211,6 +212,7 @@ function CollabSidebarContent( {
 				onCommentResolve={ onCommentResolve }
 				showCommentBoard={ showCommentBoard }
 				setShowCommentBoard={ setShowCommentBoard }
+				canvasSidebar={ canvasSidebar }
 			/>
 		</div>
 	);
@@ -371,6 +373,7 @@ export default function CollabSidebar() {
 					styles={ {
 						backgroundColor,
 					} }
+					canvasSidebar
 				/>
 			</PluginSidebar>
 		</>
diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
index e87300cea0e3ff..585b5e4580746f 100644
--- a/packages/editor/src/components/collab-sidebar/style.scss
+++ b/packages/editor/src/components/collab-sidebar/style.scss
@@ -8,6 +8,14 @@
 
 .editor-collab-sidebar {
 	height: 100%;
+	overflow: hidden;
+
+	.editor-collab-sidebar-panel {
+		&__thread {
+			position: absolute;
+			width: calc(100% - 32px);
+		}
+	}
 }
 
 .editor-collab-sidebar-panel {
@@ -21,7 +29,6 @@
 		border: 1.5px solid $gray-300;
 		background-color: $gray-100;
 		margin-bottom: $grid-unit-20;
-		width: calc(100% - 32px);
 	}
 
 	&__active-thread {

From 51d89e1f2cfaf5ae086426d43eef0ebf0812af2c Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 13 Dec 2024 10:41:47 +0530
Subject: [PATCH 10/21] Fix board focus issue

---
 packages/editor/src/components/collab-sidebar/comments.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index c43e29b0a1020f..f06f57e8dc0260 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -390,7 +390,7 @@ const ThreadWrapper = ( { children, thread, className, onClick } ) => {
 			ref={ refs.setFloating }
 			className={ className }
 			spacing="3"
-			onclick={ onClick }
+			onClick={ onClick }
 			style={ {
 				top: y,
 			} }

From 13c7a1e4c92e588b7ddb8e222c90ea16acc2c6be Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Tue, 17 Dec 2024 19:46:09 +0530
Subject: [PATCH 11/21] downgrade floating ui package to fix the error

---
 package-lock.json            | 2 +-
 packages/editor/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index deb06ac16f2712..15108ef9fa5456 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51189,7 +51189,7 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@floating-ui/react-dom": "^2.1.2",
+				"@floating-ui/react-dom": "^2.0.8",
 				"@wordpress/a11y": "*",
 				"@wordpress/api-fetch": "*",
 				"@wordpress/blob": "*",
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 1baf59e3bd0045..9b446567c9205e 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -34,7 +34,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@floating-ui/react-dom": "^2.1.2",
+		"@floating-ui/react-dom": "^2.0.8",
 		"@wordpress/a11y": "*",
 		"@wordpress/api-fetch": "*",
 		"@wordpress/blob": "*",

From 23a2a5c2d0982f6761b7891dd7e4341960984f3c Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Tue, 17 Dec 2024 19:48:27 +0530
Subject: [PATCH 12/21] Use offset in middleware to avoid board overlapping

---
 .../src/components/collab-sidebar/comments.js | 54 +++++++++++++++++--
 .../src/components/collab-sidebar/index.js    |  1 -
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index f06f57e8dc0260..124d73381eb089 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { useFloating, autoUpdate } from '@floating-ui/react-dom';
+import {
+	useFloating,
+	autoUpdate,
+	offset as offsetMiddleware,
+} from '@floating-ui/react-dom';
 
 /**
  * WordPress dependencies
@@ -73,6 +77,13 @@ 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 );
@@ -100,7 +111,7 @@ export function Comments( {
 			}
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
-				threads.map( ( thread ) => (
+				threads.map( ( thread, index ) => (
 					<ParentWrapper
 						key={ thread.id }
 						id={ thread.id }
@@ -117,6 +128,9 @@ export function Comments( {
 							}
 						) }
 						onClick={ () => setFocusThread( thread.id ) }
+						offsetsRef={ offsetsRef }
+						updateOffsets={ updateOffsets }
+						previousThread={ threads[ index - 1 ] }
 					>
 						<Thread
 							thread={ thread }
@@ -370,12 +384,40 @@ const CommentBoard = ( { thread, onResolve, onEdit, onDelete, status } ) => {
 	);
 };
 
-const ThreadWrapper = ( { children, thread, className, onClick } ) => {
+const ThreadWrapper = ( {
+	children,
+	thread,
+	className,
+	onClick,
+	offsetsRef,
+	updateOffsets,
+	previousThread,
+} ) => {
 	const blockRef = useRef();
 	useBlockElementRef( thread.clientId, blockRef );
 
+	const selectedBlockElementRect = blockRef.current?.getBoundingClientRect();
+
+	const initialOffsetTop = selectedBlockElementRect?.top;
+
+	const previousElementY = previousThread
+		? offsetsRef.current[ previousThread.id ]
+		: 0;
+
+	const calculateOffset = () => {
+		if ( initialOffsetTop < previousElementY + 100 ) {
+			return previousElementY - initialOffsetTop + 100 + 20;
+		}
+		return 0;
+	};
+
 	const { y, refs } = useFloating( {
 		placement: 'right-start',
+		middleware: [
+			offsetMiddleware( {
+				crossAxis: calculateOffset(),
+			} ),
+		],
 		whileElementsMounted: autoUpdate,
 	} );
 
@@ -385,6 +427,12 @@ const ThreadWrapper = ( { children, thread, className, onClick } ) => {
 		}
 	}, [ blockRef, refs ] );
 
+	useEffect( () => {
+		if ( y !== null && y !== 0 ) {
+			updateOffsets( thread.id, y ); // Pass the offset to the parent
+		}
+	}, [ y ] );
+
 	return (
 		<VStack
 			ref={ refs.setFloating }
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index 4a3f618ebddca6..d58a3f766d9dfa 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -204,7 +204,6 @@ function CollabSidebarContent( {
 				setShowCommentBoard={ setShowCommentBoard }
 			/>
 			<Comments
-				key={ getSelectedBlockClientId() }
 				threads={ comments }
 				onEditComment={ onEditComment }
 				onAddReply={ addNewComment }

From 7a0ab5929c5c3252a566cc02fce68797ebe7f645 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 23 Dec 2024 10:07:53 +0530
Subject: [PATCH 13/21] Fix first comment board position issue

---
 .../editor/src/components/collab-sidebar/comments.js  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 124d73381eb089..9d7fc4a77b76fd 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -405,7 +405,7 @@ const ThreadWrapper = ( {
 		: 0;
 
 	const calculateOffset = () => {
-		if ( initialOffsetTop < previousElementY + 100 ) {
+		if ( previousElementY && initialOffsetTop < previousElementY + 100 ) {
 			return previousElementY - initialOffsetTop + 100 + 20;
 		}
 		return 0;
@@ -433,6 +433,15 @@ const ThreadWrapper = ( {
 		}
 	}, [ y ] );
 
+	const previousBoard = refs.floating?.current?.previousElementSibling;
+	console.log( 'previousBoard', previousBoard );
+	console.log( 'previousBoard offsetTop', previousBoard?.offsetTop );
+	console.log( 'previousBoard clientHeight', previousBoard?.clientHeight );
+
+	console.log(
+		'current board clientHeight',
+		refs.floating?.current?.clientHeight
+	);
 	return (
 		<VStack
 			ref={ refs.setFloating }

From 0a73ea759e99bd1f4460517c0ad9014e787f6f30 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Fri, 27 Dec 2024 18:26:50 +0530
Subject: [PATCH 14/21] Resolve issue of board overlap when one board is
 focused

---
 .../src/components/collab-sidebar/comments.js | 50 +++++++++++++------
 1 file changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 9d7fc4a77b76fd..b166eb0fae2fef 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -61,6 +61,17 @@ export function Comments( {
 	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 );
@@ -130,7 +141,9 @@ export function Comments( {
 						onClick={ () => setFocusThread( thread.id ) }
 						offsetsRef={ offsetsRef }
 						updateOffsets={ updateOffsets }
-						previousThread={ threads[ index - 1 ] }
+						previousThreadId={ threads[ index - 1 ]?.id }
+						updateHeight={ updateHeight }
+						heights={ heights }
 					>
 						<Thread
 							thread={ thread }
@@ -391,7 +404,9 @@ const ThreadWrapper = ( {
 	onClick,
 	offsetsRef,
 	updateOffsets,
-	previousThread,
+	previousThreadId,
+	updateHeight,
+	heights,
 } ) => {
 	const blockRef = useRef();
 	useBlockElementRef( thread.clientId, blockRef );
@@ -400,13 +415,18 @@ const ThreadWrapper = ( {
 
 	const initialOffsetTop = selectedBlockElementRect?.top;
 
-	const previousElementY = previousThread
-		? offsetsRef.current[ previousThread.id ]
+	const previousOffset = previousThreadId
+		? offsetsRef.current[ previousThreadId ]
 		: 0;
 
+	const previousBoardHeight = heights[ previousThreadId ];
+
 	const calculateOffset = () => {
-		if ( previousElementY && initialOffsetTop < previousElementY + 100 ) {
-			return previousElementY - initialOffsetTop + 100 + 20;
+		if (
+			previousOffset &&
+			initialOffsetTop < previousOffset + previousBoardHeight
+		) {
+			return previousOffset - initialOffsetTop + previousBoardHeight + 20;
 		}
 		return 0;
 	};
@@ -429,19 +449,17 @@ const ThreadWrapper = ( {
 
 	useEffect( () => {
 		if ( y !== null && y !== 0 ) {
-			updateOffsets( thread.id, y ); // Pass the offset to the parent
+			updateOffsets( thread.id, y, refs.floating?.current?.clientHeight ); // Pass the offset to the parent
 		}
-	}, [ y ] );
+	}, [ y, updateOffsets ] );
 
-	const previousBoard = refs.floating?.current?.previousElementSibling;
-	console.log( 'previousBoard', previousBoard );
-	console.log( 'previousBoard offsetTop', previousBoard?.offsetTop );
-	console.log( 'previousBoard clientHeight', previousBoard?.clientHeight );
+	useEffect( () => {
+		if ( refs.floating?.current ) {
+			const newHeight = refs.floating?.current.scrollHeight;
+			updateHeight( thread.id, newHeight );
+		}
+	}, [ thread.id, updateHeight ] );
 
-	console.log(
-		'current board clientHeight',
-		refs.floating?.current?.clientHeight
-	);
 	return (
 		<VStack
 			ref={ refs.setFloating }

From 32ca2319d9b666d79c60633000252eae7591d1a6 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 30 Dec 2024 17:46:17 +0530
Subject: [PATCH 15/21] Fix floating ui package error

---
 packages/editor/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 9b446567c9205e..442d32b08e7d7b 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -34,7 +34,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@floating-ui/react-dom": "^2.0.8",
+		"@floating-ui/react-dom": "2.0.8",
 		"@wordpress/a11y": "*",
 		"@wordpress/api-fetch": "*",
 		"@wordpress/blob": "*",

From 8c0c2b995708c35ef5712bf7cf54e7ef33016170 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 30 Dec 2024 18:38:49 +0530
Subject: [PATCH 16/21] Update package lock

---
 package-lock.json | 37 +++++++++++++++++++++----------------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 247f434fe486db..efd5ed04bed52b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4473,6 +4473,7 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
 			"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+			"license": "MIT",
 			"dependencies": {
 				"@emotion/memoize": "^0.8.1"
 			}
@@ -4480,7 +4481,8 @@
 		"node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
 			"version": "0.8.1",
 			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+			"license": "MIT"
 		},
 		"node_modules/@emotion/jest": {
 			"version": "11.7.1",
@@ -5146,19 +5148,6 @@
 			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
 			"license": "MIT"
 		},
-		"node_modules/@floating-ui/react-dom": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-			"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-			"license": "MIT",
-			"dependencies": {
-				"@floating-ui/dom": "^1.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
 		"node_modules/@floating-ui/utils": {
 			"version": "0.1.6",
 			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
@@ -51190,7 +51179,7 @@
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "7.25.7",
-				"@floating-ui/react-dom": "^2.0.8",
+				"@floating-ui/react-dom": "2.0.8",
 				"@wordpress/a11y": "*",
 				"@wordpress/api-fetch": "*",
 				"@wordpress/blob": "*",
@@ -51247,6 +51236,19 @@
 				"react-dom": "^18.0.0"
 			}
 		},
+		"packages/editor/node_modules/@floating-ui/react-dom": {
+			"version": "2.0.8",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+			"integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.1"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
+			}
+		},
 		"packages/element": {
 			"name": "@wordpress/element",
 			"version": "6.14.0",
@@ -51870,6 +51872,7 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"browserslist": "^4.23.3",
 				"caniuse-lite": "^1.0.30001646",
@@ -51892,6 +51895,7 @@
 			"version": "4.3.7",
 			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
 			"integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+			"license": "MIT",
 			"engines": {
 				"node": "*"
 			},
@@ -51903,7 +51907,8 @@
 		"packages/postcss-plugins-preset/node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+			"license": "MIT"
 		},
 		"packages/postcss-themes": {
 			"name": "@wordpress/postcss-themes",

From 163b58ae3a8f02ab43c382ece52e73f114f96bc3 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Mon, 30 Dec 2024 19:42:49 +0530
Subject: [PATCH 17/21] Fix board comment board focus flow

---
 .../src/components/collab-sidebar/comments.js | 24 +++++++++++--------
 .../src/components/collab-sidebar/index.js    | 16 +++++++++----
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index b166eb0fae2fef..d7dadb083caf64 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -22,7 +22,7 @@ import {
 } from '@wordpress/components';
 import { Icon, check, published, moreVertical } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
@@ -84,10 +84,6 @@ export function Comments( {
 		};
 	}, [] );
 
-	const [ focusThread, setFocusThread ] = useState(
-		showCommentBoard && blockCommentId ? blockCommentId : null
-	);
-
 	// Object to store offsets for each board.
 	const offsetsRef = useRef( {} );
 
@@ -96,12 +92,19 @@ export function Comments( {
 	};
 
 	const clearThreadFocus = () => {
-		setFocusThread( null );
-		setShowCommentBoard( false );
+		setShowCommentBoard( null );
 	};
 
 	const ParentWrapper = canvasSidebar ? ThreadWrapper : VStack;
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const handleThreadClick = ( thread ) => {
+		if ( thread?.clientId ) {
+			selectBlock( thread.clientId ); // Use the action to select the block
+		}
+		setShowCommentBoard( thread.id );
+	};
+
 	return (
 		<>
 			{
@@ -135,10 +138,11 @@ export function Comments( {
 									blockCommentId &&
 									blockCommentId === thread.id,
 								'editor-collab-sidebar-panel__focus-thread':
-									focusThread && focusThread === thread.id,
+									showCommentBoard &&
+									showCommentBoard === thread.id,
 							}
 						) }
-						onClick={ () => setFocusThread( thread.id ) }
+						onClick={ () => handleThreadClick( thread ) }
 						offsetsRef={ offsetsRef }
 						updateOffsets={ updateOffsets }
 						previousThreadId={ threads[ index - 1 ]?.id }
@@ -151,7 +155,7 @@ export function Comments( {
 							onCommentDelete={ onCommentDelete }
 							onCommentResolve={ onCommentResolve }
 							onEditComment={ onEditComment }
-							isFocused={ focusThread === thread.id }
+							isFocused={ showCommentBoard === thread.id }
 							clearThreadFocus={ clearThreadFocus }
 						/>
 					</ParentWrapper>
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index d58a3f766d9dfa..0768d07d041a53 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -8,7 +8,7 @@ import {
 	resolveSelect,
 	subscribe,
 } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import { comment as commentIcon } from '@wordpress/icons';
 import { addFilter } from '@wordpress/hooks';
 import { store as noticesStore } from '@wordpress/notices';
@@ -221,7 +221,7 @@ function CollabSidebarContent( {
  * Renders the Collab sidebar.
  */
 export default function CollabSidebar() {
-	const [ showCommentBoard, setShowCommentBoard ] = useState( false );
+	const [ showCommentBoard, setShowCommentBoard ] = useState( null );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 
@@ -246,7 +246,7 @@ export default function CollabSidebar() {
 		};
 	}, [] );
 
-	const { blockCommentId } = useSelect( ( select ) => {
+	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
 		const _clientId = getSelectedBlockClientId();
@@ -255,14 +255,22 @@ export default function CollabSidebar() {
 			blockCommentId: _clientId
 				? getBlockAttributes( _clientId )?.blockCommentId
 				: null,
+			selectedBlockClientId: _clientId,
 		};
 	}, [] );
 
 	const openCollabBoard = () => {
-		setShowCommentBoard( true );
+		setShowCommentBoard( blockCommentId );
 		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
 	};
 
+	// clear board focus when block selection is changed.
+	useEffect( () => {
+		if ( showCommentBoard !== blockCommentId ) {
+			setShowCommentBoard( null );
+		}
+	}, [ selectedBlockClientId ] );
+
 	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
 		id: postId,
 	} );

From 353f785bcd53efb17f888b57600e700a6304aeec Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 1 Jan 2025 19:43:45 +0530
Subject: [PATCH 18/21] Added new state for new comment board visibility

---
 .../components/collab-sidebar/add-comment.js  | 29 ++++-----------
 .../src/components/collab-sidebar/index.js    | 35 +++++++++++++------
 2 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index f94891ada07109..6f3608c84c81cc 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -18,30 +18,12 @@ import CommentForm from './comment-form';
 /**
  * Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
  *
- * @param {Object}   props                     - The component props.
- * @param {Function} props.onSubmit            - A callback function to be called when the user submits a comment.
- * @param {boolean}  props.showCommentBoard    - The function to edit the comment.
- * @param {Function} props.setShowCommentBoard - The function to delete the comment.
+ * @param {Object}   props                 - The component props.
+ * @param {Function} props.onSubmit        - A callback function to be called when the user submits a comment.
+ * @param {Function} props.setIsNewComment - The function to set the new comment board visibility.
  * @return {React.ReactNode} The rendered comment input UI.
  */
-export function AddComment( {
-	onSubmit,
-	showCommentBoard,
-	setShowCommentBoard,
-} ) {
-	const { clientId, blockCommentId } = useSelect( ( select ) => {
-		const { getSelectedBlock } = select( blockEditorStore );
-		const selectedBlock = getSelectedBlock();
-		return {
-			clientId: selectedBlock?.clientId,
-			blockCommentId: selectedBlock?.attributes?.blockCommentId,
-		};
-	} );
-
-	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
-		return null;
-	}
-
+export function AddComment( { onSubmit, setIsNewComment } ) {
 	return (
 		<VStack
 			spacing="3"
@@ -53,9 +35,10 @@ export function AddComment( {
 			<CommentForm
 				onSubmit={ ( inputComment ) => {
 					onSubmit( inputComment );
+					setIsNewComment( false );
 				} }
 				onCancel={ () => {
-					setShowCommentBoard( false );
+					setIsNewComment( false );
 				} }
 				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
 			/>
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index 0768d07d041a53..f0ee6d633152c6 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -54,6 +54,8 @@ addFilter(
 function CollabSidebarContent( {
 	showCommentBoard,
 	setShowCommentBoard,
+	isNewComment,
+	setIsNewComment,
 	styles,
 	comments,
 	canvasSidebar = false,
@@ -198,11 +200,12 @@ function CollabSidebarContent( {
 
 	return (
 		<div className="editor-collab-sidebar-panel" style={ styles }>
-			<AddComment
-				onSubmit={ addNewComment }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
-			/>
+			{ isNewComment && (
+				<AddComment
+					onSubmit={ addNewComment }
+					setIsNewComment={ setIsNewComment }
+				/>
+			) }
 			<Comments
 				threads={ comments }
 				onEditComment={ onEditComment }
@@ -222,6 +225,7 @@ function CollabSidebarContent( {
  */
 export default function CollabSidebar() {
 	const [ showCommentBoard, setShowCommentBoard ] = useState( null );
+	const [ isNewComment, setIsNewComment ] = useState( false );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
 
@@ -259,9 +263,8 @@ export default function CollabSidebar() {
 		};
 	}, [] );
 
-	const openCollabBoard = () => {
+	const setCommentBoardFocus = () => {
 		setShowCommentBoard( blockCommentId );
-		enableComplementaryArea( 'core', 'edit-post/collab-sidebar' );
 	};
 
 	// clear board focus when block selection is changed.
@@ -347,13 +350,19 @@ export default function CollabSidebar() {
 		return null; // or maybe return some message indicating no threads are available.
 	}
 
-	const AddCommentComponent = blockCommentId
-		? AddCommentToolbarButton
-		: AddCommentButton;
+	// Open the comment board when the user clicks on the comment button.
+	const openNewCommentBoard = () => {
+		setIsNewComment( true );
+	};
 
 	return (
 		<>
-			<AddCommentComponent onClick={ openCollabBoard } />
+			{ blockCommentId && (
+				<AddCommentToolbarButton onClick={ setCommentBoardFocus } />
+			) }
+			{ ! blockCommentId && (
+				<AddCommentButton onClick={ openNewCommentBoard } />
+			) }
 			<PluginSidebar
 				identifier={ collabHistorySidebarName }
 				// translators: Comments sidebar title
@@ -364,6 +373,8 @@ export default function CollabSidebar() {
 					comments={ resultComments }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
+					isNewComment={ isNewComment }
+					setIsNewComment={ setIsNewComment }
 				/>
 			</PluginSidebar>
 			<PluginSidebar
@@ -377,6 +388,8 @@ export default function CollabSidebar() {
 					comments={ sortedThreads }
 					showCommentBoard={ showCommentBoard }
 					setShowCommentBoard={ setShowCommentBoard }
+					isNewComment={ isNewComment }
+					setIsNewComment={ setIsNewComment }
 					styles={ {
 						backgroundColor,
 					} }

From 7af540a827f5d3a3822e2b4994ed4dfca6df40f4 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Wed, 1 Jan 2025 19:50:06 +0530
Subject: [PATCH 19/21] Change state name to more appropriate

---
 .../src/components/collab-sidebar/comments.js | 32 +++++++++----------
 .../src/components/collab-sidebar/index.js    | 24 +++++++-------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index d7dadb083caf64..10369d646f32a5 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -40,15 +40,15 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 /**
  * Renders the Comments component.
  *
- * @param {Object}   props                     - The component props.
- * @param {Array}    props.threads             - The array of comment threads.
- * @param {Function} props.onEditComment       - The function to handle comment editing.
- * @param {Function} props.onAddReply          - The function to add a reply to a comment.
- * @param {Function} props.onCommentDelete     - The function to delete a comment.
- * @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.
+ * @param {Object}   props                  - The component props.
+ * @param {Array}    props.threads          - The array of comment threads.
+ * @param {Function} props.onEditComment    - The function to handle comment editing.
+ * @param {Function} props.onAddReply       - The function to add a reply to a comment.
+ * @param {Function} props.onCommentDelete  - The function to delete a comment.
+ * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
+ * @param {boolean}  props.activeComment    - Whether to show the comment board.
+ * @param {Function} props.setActiveComment - 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( {
@@ -57,8 +57,8 @@ export function Comments( {
 	onAddReply,
 	onCommentDelete,
 	onCommentResolve,
-	showCommentBoard,
-	setShowCommentBoard,
+	activeComment,
+	setActiveComment,
 	canvasSidebar,
 } ) {
 	const [ heights, setHeights ] = useState( {} );
@@ -92,7 +92,7 @@ export function Comments( {
 	};
 
 	const clearThreadFocus = () => {
-		setShowCommentBoard( null );
+		setActiveComment( null );
 	};
 
 	const ParentWrapper = canvasSidebar ? ThreadWrapper : VStack;
@@ -102,7 +102,7 @@ export function Comments( {
 		if ( thread?.clientId ) {
 			selectBlock( thread.clientId ); // Use the action to select the block
 		}
-		setShowCommentBoard( thread.id );
+		setActiveComment( thread.id );
 	};
 
 	return (
@@ -138,8 +138,8 @@ export function Comments( {
 									blockCommentId &&
 									blockCommentId === thread.id,
 								'editor-collab-sidebar-panel__focus-thread':
-									showCommentBoard &&
-									showCommentBoard === thread.id,
+									activeComment &&
+									activeComment === thread.id,
 							}
 						) }
 						onClick={ () => handleThreadClick( thread ) }
@@ -155,7 +155,7 @@ export function Comments( {
 							onCommentDelete={ onCommentDelete }
 							onCommentResolve={ onCommentResolve }
 							onEditComment={ onEditComment }
-							isFocused={ showCommentBoard === thread.id }
+							isFocused={ activeComment === thread.id }
 							clearThreadFocus={ clearThreadFocus }
 						/>
 					</ParentWrapper>
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index f0ee6d633152c6..c85785364b435b 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -52,8 +52,8 @@ addFilter(
 );
 
 function CollabSidebarContent( {
-	showCommentBoard,
-	setShowCommentBoard,
+	activeComment,
+	setActiveComment,
 	isNewComment,
 	setIsNewComment,
 	styles,
@@ -212,8 +212,8 @@ function CollabSidebarContent( {
 				onAddReply={ addNewComment }
 				onCommentDelete={ onCommentDelete }
 				onCommentResolve={ onCommentResolve }
-				showCommentBoard={ showCommentBoard }
-				setShowCommentBoard={ setShowCommentBoard }
+				activeComment={ activeComment }
+				setActiveComment={ setActiveComment }
 				canvasSidebar={ canvasSidebar }
 			/>
 		</div>
@@ -224,7 +224,7 @@ function CollabSidebarContent( {
  * Renders the Collab sidebar.
  */
 export default function CollabSidebar() {
-	const [ showCommentBoard, setShowCommentBoard ] = useState( null );
+	const [ activeComment, setActiveComment ] = useState( null );
 	const [ isNewComment, setIsNewComment ] = useState( false );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const { getActiveComplementaryArea } = useSelect( interfaceStore );
@@ -264,13 +264,13 @@ export default function CollabSidebar() {
 	}, [] );
 
 	const setCommentBoardFocus = () => {
-		setShowCommentBoard( blockCommentId );
+		setActiveComment( blockCommentId );
 	};
 
 	// clear board focus when block selection is changed.
 	useEffect( () => {
-		if ( showCommentBoard !== blockCommentId ) {
-			setShowCommentBoard( null );
+		if ( activeComment !== blockCommentId ) {
+			setActiveComment( null );
 		}
 	}, [ selectedBlockClientId ] );
 
@@ -371,8 +371,8 @@ export default function CollabSidebar() {
 			>
 				<CollabSidebarContent
 					comments={ resultComments }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
+					activeComment={ activeComment }
+					setActiveComment={ setActiveComment }
 					isNewComment={ isNewComment }
 					setIsNewComment={ setIsNewComment }
 				/>
@@ -386,8 +386,8 @@ export default function CollabSidebar() {
 			>
 				<CollabSidebarContent
 					comments={ sortedThreads }
-					showCommentBoard={ showCommentBoard }
-					setShowCommentBoard={ setShowCommentBoard }
+					activeComment={ activeComment }
+					setActiveComment={ setActiveComment }
 					isNewComment={ isNewComment }
 					setIsNewComment={ setIsNewComment }
 					styles={ {

From dd37b5e55f838f3902a2d9bbe5bb93cdc1219516 Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Thu, 2 Jan 2025 19:26:24 +0530
Subject: [PATCH 20/21] Highlight comment toolbar icon on click

---
 .../src/components/collab-sidebar/comment-button-toolbar.js    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js b/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
index b673ee87fe86ce..6e2b22826bbee8 100644
--- a/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
+++ b/packages/editor/src/components/collab-sidebar/comment-button-toolbar.js
@@ -13,7 +13,7 @@ import { unlock } from '../../lock-unlock';
 
 const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const AddCommentToolbarButton = ( { onClick } ) => {
+const AddCommentToolbarButton = ( { isActive, onClick } ) => {
 	return (
 		<CommentIconToolbarSlotFill.Fill>
 			<ToolbarButton
@@ -21,6 +21,7 @@ const AddCommentToolbarButton = ( { onClick } ) => {
 				icon={ commentIcon }
 				label={ _x( 'Comment', 'View comment' ) }
 				onClick={ onClick }
+				isActive={ isActive }
 			/>
 		</CommentIconToolbarSlotFill.Fill>
 	);

From 76a34b149d75f17c2315800933f8cd0a2ee65c9b Mon Sep 17 00:00:00 2001
From: akasunil <sdprajapati999@gmail.com>
Date: Thu, 2 Jan 2025 19:48:30 +0530
Subject: [PATCH 21/21] Set floating position for new comment board

---
 .../components/collab-sidebar/add-comment.js  | 14 ++------
 .../src/components/collab-sidebar/comments.js | 34 +++++++++++++++++--
 .../src/components/collab-sidebar/index.js    | 21 +++++++-----
 3 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index 6f3608c84c81cc..b73abd71875fdb 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -2,12 +2,7 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -25,10 +20,7 @@ import CommentForm from './comment-form';
  */
 export function AddComment( { onSubmit, setIsNewComment } ) {
 	return (
-		<VStack
-			spacing="3"
-			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread editor-collab-sidebar-panel__focus-thread"
-		>
+		<>
 			<HStack alignment="left" spacing="3">
 				<CommentAuthorInfo />
 			</HStack>
@@ -42,6 +34,6 @@ export function AddComment( { onSubmit, setIsNewComment } ) {
 				} }
 				submitButtonText={ _x( 'Comment', 'Add comment button' ) }
 			/>
-		</VStack>
+		</>
 	);
 }
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index 10369d646f32a5..cf76a31b40fbdb 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -34,6 +34,7 @@ import {
 import CommentAuthorInfo from './comment-author-info';
 import CommentForm from './comment-form';
 import { unlock } from '../../lock-unlock';
+import { AddComment } from './add-comment';
 
 const { useBlockElementRef } = unlock( blockEditorPrivateApis );
 
@@ -46,9 +47,11 @@ const { useBlockElementRef } = unlock( blockEditorPrivateApis );
  * @param {Function} props.onAddReply       - The function to add a reply to a comment.
  * @param {Function} props.onCommentDelete  - The function to delete a comment.
  * @param {Function} props.onCommentResolve - The function to mark a comment as resolved.
- * @param {boolean}  props.activeComment    - Whether to show the comment board.
- * @param {Function} props.setActiveComment - The function to set the comment board visibility.
+ * @param {boolean}  props.activeComment    - Active comment board id.
+ * @param {Function} props.setActiveComment - The function to set the active comment.
  * @param {boolean}  props.canvasSidebar    - Whether is this canvas sidebar or not.
+ * @param {Function} props.setIsNewComment  - The function to set the new comment board visibility.
+ * @param {boolean}  props.isNewComment     - Whether to show the new comment board.
  * @return {React.ReactNode} The rendered Comments component.
  */
 export function Comments( {
@@ -60,6 +63,8 @@ export function Comments( {
 	activeComment,
 	setActiveComment,
 	canvasSidebar,
+	isNewComment,
+	setIsNewComment,
 } ) {
 	const [ heights, setHeights ] = useState( {} );
 
@@ -72,7 +77,7 @@ export function Comments( {
 		} );
 	};
 
-	const { blockCommentId } = useSelect( ( select ) => {
+	const { blockCommentId, selectedBlockClientId } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } =
 			select( blockEditorStore );
 		const _clientId = getSelectedBlockClientId();
@@ -81,6 +86,7 @@ export function Comments( {
 			blockCommentId: _clientId
 				? getBlockAttributes( _clientId )?.blockCommentId
 				: null,
+			selectedBlockClientId: _clientId,
 		};
 	}, [] );
 
@@ -123,6 +129,28 @@ export function Comments( {
 					</VStack>
 				)
 			}
+			{ isNewComment && (
+				<ParentWrapper
+					thread={ {
+						id: 'new-comment',
+						clientId: selectedBlockClientId,
+					} }
+					spacing="3"
+					className={ clsx( 'editor-collab-sidebar-panel__thread', {
+						'editor-collab-sidebar-panel__active-thread': true,
+						'editor-collab-sidebar-panel__focus-thread': true,
+					} ) }
+					offsetsRef={ offsetsRef }
+					updateOffsets={ updateOffsets }
+					updateHeight={ updateHeight }
+					heights={ heights }
+				>
+					<AddComment
+						onSubmit={ onAddReply }
+						setIsNewComment={ setIsNewComment }
+					/>
+				</ParentWrapper>
+			) }
 			{ Array.isArray( threads ) &&
 				threads.length > 0 &&
 				threads.map( ( thread, index ) => (
diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
index c85785364b435b..6094f98bb193f2 100644
--- a/packages/editor/src/components/collab-sidebar/index.js
+++ b/packages/editor/src/components/collab-sidebar/index.js
@@ -22,7 +22,6 @@ import { store as interfaceStore } from '@wordpress/interface';
 import PluginSidebar from '../plugin-sidebar';
 import { collabHistorySidebarName, collabSidebarName } from './constants';
 import { Comments } from './comments';
-import { AddComment } from './add-comment';
 import { store as editorStore } from '../../store';
 import AddCommentButton from './comment-button';
 import AddCommentToolbarButton from './comment-button-toolbar';
@@ -200,12 +199,6 @@ function CollabSidebarContent( {
 
 	return (
 		<div className="editor-collab-sidebar-panel" style={ styles }>
-			{ isNewComment && (
-				<AddComment
-					onSubmit={ addNewComment }
-					setIsNewComment={ setIsNewComment }
-				/>
-			) }
 			<Comments
 				threads={ comments }
 				onEditComment={ onEditComment }
@@ -215,6 +208,8 @@ function CollabSidebarContent( {
 				activeComment={ activeComment }
 				setActiveComment={ setActiveComment }
 				canvasSidebar={ canvasSidebar }
+				isNewComment={ isNewComment }
+				setIsNewComment={ setIsNewComment }
 			/>
 		</div>
 	);
@@ -264,7 +259,9 @@ export default function CollabSidebar() {
 	}, [] );
 
 	const setCommentBoardFocus = () => {
-		setActiveComment( blockCommentId );
+		setActiveComment(
+			blockCommentId === activeComment ? null : blockCommentId
+		);
 	};
 
 	// clear board focus when block selection is changed.
@@ -272,6 +269,9 @@ export default function CollabSidebar() {
 		if ( activeComment !== blockCommentId ) {
 			setActiveComment( null );
 		}
+		if ( isNewComment ) {
+			setIsNewComment( false );
+		}
 	}, [ selectedBlockClientId ] );
 
 	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
@@ -358,7 +358,10 @@ export default function CollabSidebar() {
 	return (
 		<>
 			{ blockCommentId && (
-				<AddCommentToolbarButton onClick={ setCommentBoardFocus } />
+				<AddCommentToolbarButton
+					isActive={ !! activeComment }
+					onClick={ setCommentBoardFocus }
+				/>
 			) }
 			{ ! blockCommentId && (
 				<AddCommentButton onClick={ openNewCommentBoard } />