@wordpress/editor 14.10.0 → 14.12.0

package/src/components/collab-sidebar/add-comment.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+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';
+
+/**
+ * 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.
+ * @return {JSX.Element} The rendered comment input UI.
+ */
+export function AddComment( {
+	onSubmit,
+	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( '' );
+	};
+
+	if ( ! showCommentBoard || ! clientId || undefined !== blockCommentId ) {
+		return null;
+	}
+
+	return (
+		<VStack
+			spacing="3"
+			className="editor-collab-sidebar-panel__thread editor-collab-sidebar-panel__active-thread"
+		>
+			<HStack alignment="left" spacing="3">
+				<img
+					src={ userAvatar }
+					// translators: alt text for user avatar image
+					alt={ __( 'User Avatar' ) }
+					className="editor-collab-sidebar-panel__user-avatar"
+					width={ 32 }
+					height={ 32 }
+				/>
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ currentUser?.name ?? '' }
+				</span>
+			</HStack>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				value={ inputComment }
+				onChange={ setInputComment }
+				placeholder={ _x( 'Comment', 'noun' ) }
+			/>
+			<HStack alignment="right" spacing="3">
+				<Button
+					__next40pxDefaultSize
+					variant="tertiary"
+					text={ _x( 'Cancel', 'Cancel comment button' ) }
+					onClick={ handleCancel }
+				/>
+				<Button
+					__next40pxDefaultSize
+					accessibleWhenDisabled
+					variant="primary"
+					text={ _x( 'Comment', 'Add comment button' ) }
+					disabled={
+						0 === sanitizeCommentString( inputComment ).length
+					}
+					onClick={ () => {
+						onSubmit( inputComment );
+						setInputComment( '' );
+					} }
+				/>
+			</HStack>
+		</VStack>
+	);
+}

package/src/components/collab-sidebar/comment-button-toolbar.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { __unstableCommentIconToolbarFill } = unlock( blockEditorPrivateApis );
+
+const AddCommentToolbarButton = ( { onClick } ) => {
+	return (
+		<__unstableCommentIconToolbarFill>
+			<ToolbarButton
+				accessibleWhenDisabled
+				icon={ commentIcon }
+				label={ _x( 'Comment', 'View comment' ) }
+				onClick={ onClick }
+			/>
+		</__unstableCommentIconToolbarFill>
+	);
+};
+
+export default AddCommentToolbarButton;

package/src/components/collab-sidebar/comment-button.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { comment as commentIcon } from '@wordpress/icons';
+
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { __unstableCommentIconFill } = unlock( blockEditorPrivateApis );
+
+const AddCommentButton = ( { onClick } ) => {
+	return (
+		<__unstableCommentIconFill>
+			<MenuItem
+				icon={ commentIcon }
+				onClick={ onClick }
+				aria-haspopup="dialog"
+			>
+				{ _x( 'Comment', 'Add comment button' ) }
+			</MenuItem>
+		</__unstableCommentIconFill>
+	);
+};
+
+export default AddCommentButton;

package/src/components/collab-sidebar/comments.js

@@ -0,0 +1,404 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, RawHTML } from '@wordpress/element';
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__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';
+
+/**
+ * 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.
+ * @return {JSX.Element} The rendered Comments component.
+ */
+export function Comments( {
+	threads,
+	onEditComment,
+	onAddReply,
+	onCommentDelete,
+	onCommentResolve,
+} ) {
+	const [ actionState, setActionState ] = useState( false );
+	const [ isConfirmDialogOpen, setIsConfirmDialogOpen ] = useState( false );
+
+	const handleConfirmDelete = () => {
+		onCommentDelete( actionState.id );
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const handleConfirmResolve = () => {
+		onCommentResolve( actionState.id );
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const handleCancelDelete = () => {
+		setActionState( false );
+		setIsConfirmDialogOpen( false );
+	};
+
+	const blockCommentId = useSelect( ( select ) => {
+		const clientID = select( blockEditorStore ).getSelectedBlockClientId();
+		return (
+			select( blockEditorStore ).getBlock( clientID )?.attributes
+				?.blockCommentId ?? false
+		);
+	}, [] );
+
+	const CommentBoard = ( { thread, parentThread } ) => {
+		return (
+			<>
+				<CommentHeader
+					thread={ thread }
+					onResolve={ () => {
+						setActionState( {
+							action: 'resolve',
+							id: parentThread?.id ?? thread.id,
+						} );
+						setIsConfirmDialogOpen( true );
+					} }
+					onEdit={ () =>
+						setActionState( { action: 'edit', id: thread.id } )
+					}
+					onDelete={ () => {
+						setActionState( { action: 'delete', id: thread.id } );
+						setIsConfirmDialogOpen( true );
+					} }
+					onReply={
+						! parentThread
+							? () =>
+									setActionState( {
+										action: 'reply',
+										id: thread.id,
+									} )
+							: undefined
+					}
+					status={ parentThread?.status ?? thread.status }
+				/>
+				<HStack
+					alignment="left"
+					spacing="3"
+					justify="flex-start"
+					className="editor-collab-sidebar-panel__user-comment"
+				>
+					<VStack
+						spacing="3"
+						className="editor-collab-sidebar-panel__comment-field"
+					>
+						{ 'edit' === actionState?.action &&
+							thread.id === actionState?.id && (
+								<CommentForm
+									onSubmit={ ( value ) => {
+										onEditComment( thread.id, value );
+										setActionState( false );
+									} }
+									onCancel={ () => setActionState( false ) }
+									thread={ thread }
+								/>
+							) }
+						{ ( ! actionState ||
+							'edit' !== actionState?.action ) && (
+							<RawHTML>{ thread?.content?.raw }</RawHTML>
+						) }
+					</VStack>
+				</HStack>
+				{ 'resolve' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmDialog
+							isOpen={ isConfirmDialogOpen }
+							onConfirm={ handleConfirmResolve }
+							onCancel={ handleCancelDelete }
+							confirmButtonText="Yes"
+							cancelButtonText="No"
+						>
+							{
+								// translators: message displayed when confirming an action
+								__(
+									'Are you sure you want to mark this comment as resolved?'
+								)
+							}
+						</ConfirmDialog>
+					) }
+				{ 'delete' === actionState?.action &&
+					thread.id === actionState?.id && (
+						<ConfirmDialog
+							isOpen={ isConfirmDialogOpen }
+							onConfirm={ handleConfirmDelete }
+							onCancel={ handleCancelDelete }
+							confirmButtonText="Yes"
+							cancelButtonText="No"
+						>
+							{
+								// translators: message displayed when confirming an action
+								__(
+									'Are you sure you want to delete this comment?'
+								)
+							}
+						</ConfirmDialog>
+					) }
+			</>
+		);
+	};
+
+	return (
+		<>
+			{
+				// If there are no comments, show a message indicating no comments are available.
+				( ! Array.isArray( threads ) || threads.length === 0 ) && (
+					<VStack
+						alignment="left"
+						className="editor-collab-sidebar-panel__thread"
+						justify="flex-start"
+						spacing="3"
+					>
+						{
+							// translators: message displayed when there are no comments available
+							__( 'No comments available' )
+						}
+					</VStack>
+				)
+			}
+
+			{ Array.isArray( threads ) &&
+				threads.length > 0 &&
+				threads.map( ( thread ) => (
+					<VStack
+						key={ thread.id }
+						className={ clsx(
+							'editor-collab-sidebar-panel__thread',
+							{
+								'editor-collab-sidebar-panel__active-thread':
+									blockCommentId &&
+									blockCommentId === thread.id,
+							}
+						) }
+						id={ thread.id }
+						spacing="3"
+					>
+						<CommentBoard thread={ thread } />
+						{ 'reply' === actionState?.action &&
+							thread.id === actionState?.id && (
+								<HStack
+									alignment="left"
+									spacing="3"
+									justify="flex-start"
+									className="editor-collab-sidebar-panel__user-comment"
+								>
+									<VStack
+										spacing="3"
+										className="editor-collab-sidebar-panel__comment-field"
+									>
+										<CommentForm
+											onSubmit={ ( inputComment ) => {
+												onAddReply(
+													inputComment,
+													thread.id
+												);
+												setActionState( false );
+											} }
+											onCancel={ () =>
+												setActionState( false )
+											}
+										/>
+									</VStack>
+								</HStack>
+							) }
+						{ 0 < thread?.reply?.length &&
+							thread.reply.map( ( reply ) => (
+								<VStack
+									key={ reply.id }
+									className="editor-collab-sidebar-panel__child-thread"
+									id={ reply.id }
+									spacing="2"
+								>
+									<CommentBoard
+										thread={ reply }
+										parentThread={ thread }
+									/>
+								</VStack>
+							) ) }
+					</VStack>
+				) ) }
+		</>
+	);
+}
+
+/**
+ * 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 (
+		<>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				value={ inputComment ?? '' }
+				onChange={ setInputComment }
+			/>
+			<VStack alignment="left" spacing="3" justify="flex-start">
+				<HStack alignment="left" spacing="3" justify="flex-start">
+					<Button
+						__next40pxDefaultSize
+						accessibleWhenDisabled
+						variant="primary"
+						onClick={ () => onSubmit( inputComment ) }
+						disabled={
+							0 === sanitizeCommentString( inputComment ).length
+						}
+					>
+						{ thread
+							? _x( 'Update', 'verb' )
+							: _x( 'Reply', 'Add reply comment' ) }
+					</Button>
+					<Button __next40pxDefaultSize onClick={ onCancel }>
+						{ _x( 'Cancel', 'Cancel comment edit' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</>
+	);
+}
+
+/**
+ * Renders the header of a comment in the collaboration sidebar.
+ *
+ * @param {Object}   props           - The component props.
+ * @param {Object}   props.thread    - The comment thread object.
+ * @param {Function} props.onResolve - The function to resolve the comment.
+ * @param {Function} props.onEdit    - The function to edit the comment.
+ * @param {Function} props.onDelete  - The function to delete the comment.
+ * @param {Function} props.onReply   - The function to reply to the comment.
+ * @param {string}   props.status    - The status of the comment.
+ * @return {JSX.Element} The rendered comment header.
+ */
+function CommentHeader( {
+	thread,
+	onResolve,
+	onEdit,
+	onDelete,
+	onReply,
+	status,
+} ) {
+	const dateSettings = getDateSettings();
+	const [ dateTimeFormat = dateSettings.formats.time ] = useEntityProp(
+		'root',
+		'site',
+		'time_format'
+	);
+
+	const actions = [
+		{
+			title: _x( 'Edit', 'Edit comment' ),
+			onClick: onEdit,
+		},
+		{
+			title: _x( 'Delete', 'Delete comment' ),
+			onClick: onDelete,
+		},
+		{
+			title: _x( 'Reply', 'Reply on a comment' ),
+			onClick: onReply,
+		},
+	];
+
+	const moreActions = actions.filter( ( item ) => item.onClick );
+
+	return (
+		<HStack alignment="left" spacing="3" justify="flex-start">
+			<img
+				src={ thread?.author_avatar_urls?.[ 48 ] }
+				className="editor-collab-sidebar-panel__user-avatar"
+				// translators: alt text for user avatar image
+				alt={ __( 'User avatar' ) }
+				width={ 32 }
+				height={ 32 }
+			/>
+			<VStack spacing="0">
+				<span className="editor-collab-sidebar-panel__user-name">
+					{ thread.author_name }
+				</span>
+				<time
+					dateTime={ format( 'h:i A', thread.date ) }
+					className="editor-collab-sidebar-panel__user-time"
+				>
+					{ dateI18n( dateTimeFormat, thread.date ) }
+				</time>
+			</VStack>
+			<span className="editor-collab-sidebar-panel__comment-status">
+				{ status !== 'approved' && (
+					<HStack alignment="right" justify="flex-end" spacing="0">
+						{ 0 === thread.parent && onResolve && (
+							<Button
+								label={ _x(
+									'Resolve',
+									'Mark comment as resolved'
+								) }
+								__next40pxDefaultSize
+								icon={ published }
+								onClick={ onResolve }
+								showTooltip
+							/>
+						) }
+						<DropdownMenu
+							icon={ moreVertical }
+							label={ _x(
+								'Select an action',
+								'Select comment action'
+							) }
+							className="editor-collab-sidebar-panel__comment-dropdown-menu"
+							controls={ moreActions }
+						/>
+					</HStack>
+				) }
+				{ status === 'approved' && (
+					// translators: tooltip for resolved comment
+					<Tooltip text={ __( 'Resolved' ) }>
+						<Icon icon={ check } />
+					</Tooltip>
+				) }
+			</span>
+		</HStack>
+	);
+}

package/src/components/collab-sidebar/constants.js

@@ -0,0 +1 @@
+export const collabSidebarName = 'edit-post/collab-sidebar';