@wordpress/editor 14.44.0 → 14.45.0

package/src/components/collab-sidebar/{comment-author-info.js → note-byline.js}

@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Tooltip, __experimentalVStack as VStack } from '@wordpress/components';
+import { Tooltip } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { __, _x } from '@wordpress/i18n';
 import {
 	dateI18n,
@@ -18,7 +19,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { getAvatarBorderColor } from './utils';
 
-function CommentAuthorInfo( { avatar, name, date, userId } ) {
+export function NoteByline( { avatar, name, date, userId } ) {
 	const hasAvatar = !! avatar;
 	const dateSettings = getDateSettings();
 	const {
@@ -89,7 +90,7 @@ function CommentAuthorInfo( { avatar, name, date, userId } ) {
 					),
 				} }
 			/>
-			<VStack spacing="0">
+			<Stack direction="column">
 				<span className="editor-collab-sidebar-panel__user-name">
 					{ name ?? currentUserName }
 				</span>
@@ -103,9 +104,7 @@ function CommentAuthorInfo( { avatar, name, date, userId } ) {
 						</time>
 					</Tooltip>
 				) }
-			</VStack>
+			</Stack>
 		</>
 	);
 }
-
-export default CommentAuthorInfo;

package/src/components/collab-sidebar/note-card.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { FlexItem } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { NoteByline } from './note-byline';
+
+export function NoteCard( { note, actions, className, children, ...props } ) {
+	return (
+		<Stack direction="column" gap="sm" className={ className } { ...props }>
+			<Stack direction="row" align="center" justify="flex-start" gap="md">
+				<NoteByline
+					avatar={ note?.author_avatar_urls?.[ 48 ] }
+					name={ note?.author_name }
+					date={ note?.date }
+					userId={ note?.author }
+				/>
+				{ actions && (
+					<FlexItem
+						className="editor-collab-sidebar-panel__note-actions"
+						onClick={ ( event ) => event.stopPropagation() }
+					>
+						<Stack direction="row" align="center">
+							{ actions }
+						</Stack>
+					</FlexItem>
+				) }
+			</Stack>
+			{ children }
+		</Stack>
+	);
+}

package/src/components/collab-sidebar/{comment-form.js → note-form.js}

@@ -8,66 +8,51 @@ import TextareaAutosize from 'react-autosize-textarea';
  */
 import { useState } from '@wordpress/element';
 import {
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
 	Button,
-	VisuallyHidden,
 } from '@wordpress/components';
+import { Stack, VisuallyHidden } from '@wordpress/ui';
 import { __ } from '@wordpress/i18n';
-import { useInstanceId, useDebounce } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { isKeyboardEvent } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import { sanitizeCommentString, noop } from './utils';
+import { sanitizeNoteContent } from './utils';
 
-function CommentForm( {
-	onSubmit,
-	onCancel,
-	thread,
-	submitButtonText,
-	labelText,
-	reflowComments = noop,
-} ) {
+export function NoteForm( { onSubmit, onCancel, note, labels } ) {
 	const [ inputComment, setInputComment ] = useState(
-		thread?.content?.raw ?? ''
+		note?.content?.raw ?? ''
 	);
 
-	// Regularly trigger a reflow as the user types since the textarea may grow or shrink.
-	const debouncedCommentUpdated = useDebounce( reflowComments, 100 );
-
-	const updateComment = ( value ) => {
-		setInputComment( value );
-	};
-
-	const inputId = useInstanceId( CommentForm, 'comment-input' );
+	const inputId = useInstanceId( NoteForm, 'comment-input' );
 	const isDisabled =
-		inputComment === thread?.content?.raw ||
-		! sanitizeCommentString( inputComment ).length;
+		inputComment === note?.content?.raw ||
+		! sanitizeNoteContent( inputComment ).length;
 
 	return (
-		<VStack
-			className="editor-collab-sidebar-panel__comment-form"
-			spacing="4"
-			as="form"
+		<Stack
+			className="editor-collab-sidebar-panel__note-form"
+			direction="column"
+			gap="lg"
+			render={ <form /> }
 			onSubmit={ ( event ) => {
 				event.preventDefault();
 				onSubmit( inputComment );
 				setInputComment( '' );
 			} }
 		>
-			<VisuallyHidden as="label" htmlFor={ inputId }>
-				{ labelText ?? __( 'Note' ) }
+			{ /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
+			<VisuallyHidden render={ <label htmlFor={ inputId } /> }>
+				{ labels?.input ?? __( 'Note' ) }
 			</VisuallyHidden>
 			<TextareaAutosize
 				id={ inputId }
 				value={ inputComment ?? '' }
-				onChange={ ( comment ) => {
-					updateComment( comment.target.value );
-					debouncedCommentUpdated();
-				} }
+				onChange={ ( comment ) =>
+					setInputComment( comment.target.value )
+				}
 				rows={ 1 }
 				maxRows={ 20 }
 				onKeyDown={ ( event ) => {
@@ -85,7 +70,13 @@ function CommentForm( {
 					}
 				} }
 			/>
-			<HStack spacing="2" justify="flex-end" wrap>
+			<Stack
+				direction="row"
+				align="center"
+				justify="flex-end"
+				gap="sm"
+				wrap="wrap"
+			>
 				<Button size="compact" variant="tertiary" onClick={ onCancel }>
 					<Truncate>{ __( 'Cancel' ) }</Truncate>
 				</Button>
@@ -96,11 +87,9 @@ function CommentForm( {
 					type="submit"
 					disabled={ isDisabled }
 				>
-					<Truncate>{ submitButtonText }</Truncate>
+					<Truncate>{ labels?.submit ?? __( 'Add note' ) }</Truncate>
 				</Button>
-			</HStack>
-		</VStack>
+			</Stack>
+		</Stack>
 	);
 }
-
-export default CommentForm;

package/src/components/collab-sidebar/{comment-indicator-toolbar.js → note-indicator-toolbar.js}

@@ -1,11 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarButton,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -16,38 +13,38 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../lock-unlock';
 import { getAvatarBorderColor } from './utils';
 
-const { CommentIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
+const { NoteIconToolbarSlotFill } = unlock( blockEditorPrivateApis );
 
-const CommentAvatarIndicator = ( { onClick, thread } ) => {
+export function NoteAvatarIndicator( { onClick, note } ) {
 	const threadParticipants = useMemo( () => {
-		if ( ! thread ) {
+		if ( ! note ) {
 			return [];
 		}
 
 		const participantsMap = new Map();
-		const allComments = [ thread, ...thread.reply ];
+		const allNotes = [ note, ...note.reply ];
 
 		// Sort by date to show participants in chronological order.
-		allComments.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );
+		allNotes.sort( ( a, b ) => new Date( a.date ) - new Date( b.date ) );
 
-		allComments.forEach( ( comment ) => {
-			// Track thread participants (original commenter + repliers).
-			if ( comment.author_name && comment.author_avatar_urls ) {
-				if ( ! participantsMap.has( comment.author ) ) {
-					participantsMap.set( comment.author, {
-						name: comment.author_name,
+		allNotes.forEach( ( entry ) => {
+			// Track thread participants (original author + repliers).
+			if ( entry.author_name && entry.author_avatar_urls ) {
+				if ( ! participantsMap.has( entry.author ) ) {
+					participantsMap.set( entry.author, {
+						name: entry.author_name,
 						avatar:
-							comment.author_avatar_urls?.[ '48' ] ||
-							comment.author_avatar_urls?.[ '96' ],
-						id: comment.author,
-						date: comment.date,
+							entry.author_avatar_urls?.[ '48' ] ||
+							entry.author_avatar_urls?.[ '96' ],
+						id: entry.author,
+						date: entry.date,
 					} );
 				}
 			}
 		} );
 
 		return Array.from( participantsMap.values() );
-	}, [ thread ] );
+	}, [ note ] );
 
 	if ( ! threadParticipants.length ) {
 		return null;
@@ -65,7 +62,7 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 	);
 	const threadHasMoreParticipants = threadParticipants.length > 100;
 
-	// If we hit the comment limit, show "100+" instead of exact overflow count.
+	// If we hit the note limit, show "100+" instead of exact overflow count.
 	const overflowText =
 		threadHasMoreParticipants && overflowCount > 0
 			? __( '100+' )
@@ -76,20 +73,20 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 			  );
 
 	return (
-		<CommentIconToolbarSlotFill.Fill>
+		<NoteIconToolbarSlotFill.Fill>
 			<ToolbarButton
-				className="comment-avatar-indicator"
+				className="editor-note-indicator"
 				label={ __( 'View notes' ) }
 				onClick={ () => onClick() }
 				showTooltip
 			>
-				<HStack spacing="1">
+				<Stack direction="row" align="center" gap="xs">
 					{ visibleParticipants.map( ( participant ) => (
 						<img
 							key={ participant.id }
 							src={ participant.avatar }
 							alt={ participant.name }
-							className="comment-avatar"
+							className="editor-note-indicator__avatar"
 							style={ {
 								borderColor: getAvatarBorderColor(
 									participant.id
@@ -98,12 +95,12 @@ const CommentAvatarIndicator = ( { onClick, thread } ) => {
 						/>
 					) ) }
 					{ overflowCount > 0 && (
-						<Text weight={ 500 }>{ overflowText }</Text>
+						<span className="editor-note-indicator__overflow">
+							{ overflowText }
+						</span>
 					) }
-				</HStack>
+				</Stack>
 			</ToolbarButton>
-		</CommentIconToolbarSlotFill.Fill>
+		</NoteIconToolbarSlotFill.Fill>
 	);
-};
-
-export default CommentAvatarIndicator;
+}

package/src/components/collab-sidebar/note-thread.js

@@ -0,0 +1,331 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useRef } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { Stack } from '@wordpress/ui';
+import { useDebounce } from '@wordpress/compose';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useDispatch } from '@wordpress/data';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { AddNote } from './add-note';
+import { Note } from './note';
+import { NoteCard } from './note-card';
+import { NoteForm } from './note-form';
+import { FloatingContainer } from './floating-container';
+import { focusNoteThread, getNoteExcerpt } from './utils';
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+const { useBlockElement } = unlock( blockEditorPrivateApis );
+
+export function NoteThread( {
+	note,
+	onEditNote,
+	onAddReply,
+	onDeleteNote,
+	isSelected,
+	sidebarRef,
+	floating,
+	onKeyDown,
+} ) {
+	const isFloating = !! floating;
+	const { toggleBlockHighlight, selectBlock, toggleBlockSpotlight } = unlock(
+		useDispatch( blockEditorStore )
+	);
+	const { selectNote } = unlock( useDispatch( editorStore ) );
+	const relatedBlockElement = useBlockElement( note.blockClientId );
+	const debouncedToggleBlockHighlight = useDebounce(
+		toggleBlockHighlight,
+		50
+	);
+	const floatingRef = useRef( null );
+	const isKeyboardTabbingRef = useRef( false );
+
+	const registerThread = floating?.registerThread;
+	const unregisterThread = floating?.unregisterThread;
+
+	// Register block + floating elements with the board.
+	// The board's ResizeObserver and autoUpdate track changes automatically.
+	useEffect( () => {
+		const floatingEl = floatingRef.current;
+		if ( floatingEl && registerThread ) {
+			registerThread( note.id, relatedBlockElement, floatingEl );
+		}
+		return () => unregisterThread?.( note.id );
+	}, [ relatedBlockElement, note.id, registerThread, unregisterThread ] );
+
+	const onMouseEnter = () => {
+		debouncedToggleBlockHighlight( note.blockClientId, true );
+	};
+
+	const onMouseLeave = () => {
+		debouncedToggleBlockHighlight( note.blockClientId, false );
+	};
+
+	const onFocus = () => {
+		toggleBlockHighlight( note.blockClientId, true );
+	};
+
+	const onBlur = ( event ) => {
+		// Don't deselect notes when the browser window/tab loses focus.
+		if ( ! document.hasFocus() ) {
+			return;
+		}
+
+		const isNoteFocused = event.relatedTarget?.closest(
+			'.editor-collab-sidebar-panel__thread'
+		);
+		const isDialogFocused =
+			event.relatedTarget?.closest( '[role="dialog"]' );
+		const isTabbing = isKeyboardTabbingRef.current;
+
+		// When another note is clicked, do nothing because the current note is automatically closed.
+		if ( isNoteFocused && ! isTabbing ) {
+			return;
+		}
+		// When deleting a note, a dialog appears, but the note should not be collapsed.
+		if ( isDialogFocused ) {
+			return;
+		}
+		// When tabbing, do nothing if the focus is within the current note.
+		if (
+			isTabbing &&
+			event.currentTarget.contains( event.relatedTarget )
+		) {
+			return;
+		}
+
+		// Closes a note that has lost focus when any of the following conditions are met:
+		// - An element other than a note is clicked.
+		// - Focus was lost by tabbing.
+		toggleBlockHighlight( note.blockClientId, false );
+		unselectNote();
+	};
+
+	const handleNoteSelect = () => {
+		selectNote( note.id );
+		toggleBlockSpotlight( note.blockClientId, true );
+		if ( !! note.blockClientId ) {
+			// Pass `null` as the second parameter to prevent focusing the block.
+			selectBlock( note.blockClientId, null );
+		}
+	};
+
+	const unselectNote = () => {
+		selectNote( undefined );
+		toggleBlockSpotlight( note.blockClientId, false );
+	};
+
+	const handleResolve = () => {
+		onEditNote( { id: note.id, status: 'approved' } );
+		unselectNote();
+		if ( isFloating ) {
+			relatedBlockElement?.focus();
+		} else {
+			focusNoteThread( note.id, sidebarRef.current );
+		}
+	};
+
+	const allReplies = note?.reply || [];
+	const lastReply =
+		allReplies.length > 0 ? allReplies[ allReplies.length - 1 ] : undefined;
+	const restReplies = allReplies.length > 0 ? allReplies.slice( 0, -1 ) : [];
+
+	const noteExcerpt = getNoteExcerpt(
+		stripHTML( note.content?.rendered ),
+		10
+	);
+	const ariaLabel = !! note.blockClientId
+		? sprintf(
+				// translators: %s: note excerpt
+				__( 'Note: %s' ),
+				noteExcerpt
+		  )
+		: sprintf(
+				// translators: %s: note excerpt
+				__( 'Original block deleted. Note: %s' ),
+				noteExcerpt
+		  );
+
+	if ( isFloating && note.id === 'new' ) {
+		return (
+			<AddNote
+				onSubmit={ onAddReply }
+				sidebarRef={ sidebarRef }
+				floating={ { y: floating.y, ref: floatingRef } }
+			/>
+		);
+	}
+
+	return (
+		<FloatingContainer
+			floating={
+				isFloating ? { y: floating.y, ref: floatingRef } : undefined
+			}
+			className={ clsx( 'editor-collab-sidebar-panel__thread', {
+				'is-selected': isSelected,
+			} ) }
+			id={ `note-thread-${ note.id }` }
+			gap="md"
+			onClick={ handleNoteSelect }
+			onMouseEnter={ onMouseEnter }
+			onMouseLeave={ onMouseLeave }
+			onFocus={ onFocus }
+			onBlur={ onBlur }
+			onKeyUp={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = false;
+				}
+			} }
+			onKeyDown={ ( event ) => {
+				if ( event.key === 'Tab' ) {
+					isKeyboardTabbingRef.current = true;
+				} else {
+					onKeyDown( event );
+				}
+			} }
+			tabIndex={ 0 }
+			role="treeitem"
+			aria-label={ ariaLabel }
+			aria-expanded={ isSelected }
+		>
+			<Button
+				className="editor-collab-sidebar-panel__skip-to-note"
+				variant="secondary"
+				size="compact"
+				onClick={ () => {
+					focusNoteThread( note.id, sidebarRef.current, 'textarea' );
+				} }
+			>
+				{ __( 'Add new reply' ) }
+			</Button>
+			{ ! note.blockClientId && (
+				<p className="editor-collab-sidebar-panel__deleted-block-notice">
+					{ __( 'Original block deleted.' ) }
+				</p>
+			) }
+			<Note
+				note={ note }
+				isSelected={ isSelected }
+				onEditNote={ onEditNote }
+				onDeleteNote={ onDeleteNote }
+				onResolve={ handleResolve }
+			/>
+			{ isSelected &&
+				allReplies.map( ( reply ) => (
+					<Note
+						key={ reply.id }
+						note={ reply }
+						parentNote={ note }
+						isSelected={ isSelected }
+						onEditNote={ onEditNote }
+						onDeleteNote={ onDeleteNote }
+					/>
+				) ) }
+			{ ! isSelected && restReplies.length > 0 && (
+				<Stack
+					direction="row"
+					align="center"
+					justify="space-between"
+					className="editor-collab-sidebar-panel__more-reply-separator"
+				>
+					<Button
+						size="compact"
+						variant="tertiary"
+						className="editor-collab-sidebar-panel__more-reply-button"
+						onClick={ () => {
+							selectNote( note.id );
+							focusNoteThread( note.id, sidebarRef.current );
+						} }
+					>
+						{ sprintf(
+							// translators: %s: number of replies.
+							_n(
+								'%s more reply',
+								'%s more replies',
+								restReplies.length
+							),
+							restReplies.length
+						) }
+					</Button>
+				</Stack>
+			) }
+			{ ! isSelected && lastReply && (
+				<Note
+					note={ lastReply }
+					parentNote={ note }
+					isSelected={ false }
+					onEditNote={ onEditNote }
+					onDeleteNote={ onDeleteNote }
+				/>
+			) }
+			{ isSelected && (
+				<NoteCard role="treeitem">
+					<NoteForm
+						onSubmit={ ( inputComment ) => {
+							if ( 'approved' === note.status ) {
+								// For reopening, include the content in the reopen action.
+								onEditNote( {
+									id: note.id,
+									status: 'hold',
+									content: inputComment,
+								} );
+							} else {
+								// For regular replies, add as separate comment.
+								onAddReply( {
+									content: inputComment,
+									parent: note.id,
+								} );
+							}
+						} }
+						onCancel={ ( event ) => {
+							// Prevent the parent onClick from being triggered.
+							event.stopPropagation();
+							unselectNote();
+							focusNoteThread( note.id, sidebarRef.current );
+						} }
+						labels={ {
+							submit:
+								'approved' === note.status
+									? __( 'Reopen & Reply' )
+									: __( 'Reply' ),
+							input: sprintf(
+								// translators: %1$s: note identifier, %2$s: author name
+								__( 'Reply to note %1$s by %2$s' ),
+								note.id,
+								note.author_name
+							),
+						} }
+					/>
+				</NoteCard>
+			) }
+			{ !! note.blockClientId && (
+				<Button
+					className="editor-collab-sidebar-panel__skip-to-block"
+					variant="secondary"
+					size="compact"
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						relatedBlockElement?.focus();
+					} }
+				>
+					{ __( 'Back to block' ) }
+				</Button>
+			) }
+		</FloatingContainer>
+	);
+}