From 930dfa50ecc864f6dd60ca42fbb29461705d4f7b Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+akasunil@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:57:52 +0530
Subject: [PATCH] Inline Commenting: Update placement of reply input and add
author info header (#66580)
---
.../components/collab-sidebar/add-comment.js | 97 +++----------
.../collab-sidebar/comment-author-info.js | 68 +++++++++
.../components/collab-sidebar/comment-form.js | 62 ++++++++
.../src/components/collab-sidebar/comments.js | 136 +++++-------------
4 files changed, 187 insertions(+), 176 deletions(-)
create mode 100644 packages/editor/src/components/collab-sidebar/comment-author-info.js
create mode 100644 packages/editor/src/components/collab-sidebar/comment-form.js
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
index 01ee7aff0370e..fce47e821e206 100644
--- a/packages/editor/src/components/collab-sidebar/add-comment.js
+++ b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -1,22 +1,19 @@
/**
* WordPress dependencies
*/
-import { __, _x } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
- Button,
- TextControl,
} from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
/**
* Internal dependencies
*/
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
/**
* Renders the UI for adding a comment in the Gutenberg editor's collaboration sidebar.
@@ -32,39 +29,14 @@ export function AddComment( {
showCommentBoard,
setShowCommentBoard,
} ) {
- // State to manage the comment thread.
- const [ inputComment, setInputComment ] = useState( '' );
-
- const { defaultAvatar, clientId, blockCommentId, currentUser } = useSelect(
- ( select ) => {
- const { getSettings, getSelectedBlock } =
- select( blockEditorStore );
- const { __experimentalDiscussionSettings } = getSettings();
- const selectedBlock = getSelectedBlock();
- const userData = select( coreStore ).getCurrentUser();
- return {
- defaultAvatar: __experimentalDiscussionSettings?.avatarURL,
- clientId: selectedBlock?.clientId,
- blockCommentId: selectedBlock?.attributes?.blockCommentId,
- currentUser: userData,
- };
- },
- []
- );
-
- const userAvatar =
- currentUser && currentUser.avatar_urls && currentUser.avatar_urls[ 48 ]
- ? currentUser.avatar_urls[ 48 ]
- : defaultAvatar;
-
- useEffect( () => {
- setInputComment( '' );
- }, [ clientId ] );
-
- const handleCancel = () => {
- setShowCommentBoard( false );
- setInputComment( '' );
- };
+ 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;
@@ -76,46 +48,17 @@ export function AddComment( {
className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
>
- 
-
- { currentUser?.name ?? '' }
-
+
- {
+ onSubmit( inputComment );
+ } }
+ onCancel={ () => {
+ setShowCommentBoard( false );
+ } }
+ submitButtonText={ _x( 'Comment', 'Add comment button' ) }
/>
-
-
-
);
}
diff --git a/packages/editor/src/components/collab-sidebar/comment-author-info.js b/packages/editor/src/components/collab-sidebar/comment-author-info.js
new file mode 100644
index 0000000000000..89d09a2b52261
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-author-info.js
@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Render author information for a comment.
+ *
+ * @param {Object} props - Component properties.
+ * @param {string} props.avatar - URL of the author's avatar.
+ * @param {string} props.name - Name of the author.
+ * @param {string} props.date - Date of the comment.
+ *
+ * @return {JSX.Element} The JSX element representing the author's information.
+ */
+function CommentAuthorInfo( { avatar, name, date } ) {
+ const dateSettings = getDateSettings();
+ const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+ 'root',
+ 'site',
+ 'time_format'
+ );
+
+ const { currentUserAvatar, currentUserName } = useSelect( ( select ) => {
+ const userData = select( coreStore ).getCurrentUser();
+
+ const { getSettings } = select( blockEditorStore );
+ const { __experimentalDiscussionSettings } = getSettings();
+ const defaultAvatar = __experimentalDiscussionSettings?.avatarURL;
+ return {
+ currentUserAvatar: userData?.avatar_urls[ 48 ] ?? defaultAvatar,
+ currentUserName: userData?.name,
+ };
+ }, [] );
+
+ const currentDate = new Date();
+
+ return (
+ <>
+
+
+
+ { name ?? currentUserName }
+
+
+
+
+ );
+}
+
+export default CommentAuthorInfo;
diff --git a/packages/editor/src/components/collab-sidebar/comment-form.js b/packages/editor/src/components/collab-sidebar/comment-form.js
new file mode 100644
index 0000000000000..28622f9f52a6f
--- /dev/null
+++ b/packages/editor/src/components/collab-sidebar/comment-form.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import {
+ __experimentalHStack as HStack,
+ Button,
+ TextareaControl,
+} from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { sanitizeCommentString } from './utils';
+
+/**
+ * EditComment component.
+ *
+ * @param {Object} props - The component props.
+ * @param {Function} props.onSubmit - The function to call when updating the comment.
+ * @param {Function} props.onCancel - The function to call when canceling the comment update.
+ * @param {Object} props.thread - The comment thread object.
+ * @param {string} props.submitButtonText - The text to display on the submit button.
+ * @return {JSX.Element} The CommentForm component.
+ */
+function CommentForm( { onSubmit, onCancel, thread, submitButtonText } ) {
+ const [ inputComment, setInputComment ] = useState(
+ thread?.content?.raw ?? ''
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export default CommentForm;
diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
index c0b4bd3d4dc38..808ea0acf04b3 100644
--- a/packages/editor/src/components/collab-sidebar/comments.js
+++ b/packages/editor/src/components/collab-sidebar/comments.js
@@ -13,24 +13,18 @@ import {
__experimentalConfirmDialog as ConfirmDialog,
Button,
DropdownMenu,
- TextareaControl,
Tooltip,
} from '@wordpress/components';
-import {
- dateI18n,
- format,
- getSettings as getDateSettings,
-} from '@wordpress/date';
import { Icon, check, published, moreVertical } from '@wordpress/icons';
import { __, _x } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
-import { sanitizeCommentString } from './utils';
+import CommentAuthorInfo from './comment-author-info';
+import CommentForm from './comment-form';
/**
* Renders the Comments component.
@@ -127,6 +121,7 @@ export function Comments( {
} }
onCancel={ () => setActionState( false ) }
thread={ thread }
+ submitButtonText={ _x( 'Update', 'verb' ) }
/>
) }
{ ( ! actionState ||
@@ -209,14 +204,33 @@ export function Comments( {
spacing="3"
>
+ { 0 < thread?.reply?.length &&
+ thread.reply.map( ( reply ) => (
+
+
+
+ ) ) }
{ 'reply' === actionState?.action &&
thread.id === actionState?.id && (
-
+
+
+
setActionState( false )
}
+ submitButtonText={ _x(
+ 'Reply',
+ 'Add reply comment'
+ ) }
/>
-
- ) }
- { 0 < thread?.reply?.length &&
- thread.reply.map( ( reply ) => (
-
-
- ) ) }
+ ) }
) ) }
);
}
-/**
- * EditComment component.
- *
- * @param {Object} props - The component props.
- * @param {Function} props.onSubmit - The function to call when updating the comment.
- * @param {Function} props.onCancel - The function to call when canceling the comment update.
- * @param {Object} props.thread - The comment thread object.
- * @return {JSX.Element} The CommentForm component.
- */
-function CommentForm( { onSubmit, onCancel, thread } ) {
- const [ inputComment, setInputComment ] = useState(
- thread?.content?.raw ?? ''
- );
-
- return (
- <>
-
-
-
-
-
-
-
-
- );
-}
-
/**
* Renders the header of a comment in the collaboration sidebar.
*
@@ -321,13 +280,6 @@ function CommentHeader( {
onReply,
status,
} ) {
- const dateSettings = getDateSettings();
- const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
- 'root',
- 'site',
- 'time_format'
- );
-
const actions = [
{
title: _x( 'Edit', 'Edit comment' ),
@@ -347,29 +299,15 @@ function CommentHeader( {
return (
-
-
-
- { thread.author_name }
-
-
-
{ status !== 'approved' && (
- { 0 === thread.parent && onResolve && (
+ { 0 === thread?.parent && onResolve && (