@wordpress/editor 14.44.0 → 14.45.0

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

@@ -0,0 +1,209 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { RawHTML, useRef, useState } from '@wordpress/element';
+import {
+	__experimentalConfirmDialog as ConfirmDialog,
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { moreVertical, published } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { NoteCard } from './note-card';
+import { NoteForm } from './note-form';
+import { unlock } from '../../lock-unlock';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function NoteActionsMenu( { items, buttonRef } ) {
+	return (
+		<Menu placement="bottom-end">
+			<Menu.TriggerButton
+				render={
+					<Button
+						ref={ buttonRef }
+						size="small"
+						icon={ moreVertical }
+						label={ __( 'Actions' ) }
+						disabled={ ! items.length }
+						accessibleWhenDisabled
+					/>
+				}
+			/>
+			<Menu.Popover
+				// The menu popover is rendered in a portal, which causes focus to be
+				// lost and the note to be collapsed unintentionally. To prevent this,
+				// the popover should be rendered as an inline.
+				modal={ false }
+			>
+				{ items.map( ( item ) => (
+					<Menu.Item key={ item.id } onClick={ item.onClick }>
+						<Menu.ItemLabel>{ item.title }</Menu.ItemLabel>
+					</Menu.Item>
+				) ) }
+			</Menu.Popover>
+		</Menu>
+	);
+}
+
+export function Note( {
+	note,
+	parentNote,
+	isSelected,
+	onEditNote,
+	onDeleteNote,
+	onResolve,
+} ) {
+	const [ actionState, setActionState ] = useState( null );
+	const actionButtonRef = useRef( null );
+
+	const canResolve = note.parent === 0;
+	const isResolutionNote =
+		note.type === 'note' &&
+		note.meta &&
+		( note.meta._wp_note_status === 'resolved' ||
+			note.meta._wp_note_status === 'reopen' );
+
+	const menuItems = [
+		{
+			id: 'edit',
+			title: __( 'Edit' ),
+			isEligible: ( { status } ) => status !== 'approved',
+			onClick: () => setActionState( 'edit' ),
+		},
+		{
+			id: 'reopen',
+			title: _x( 'Reopen', 'Reopen note' ),
+			isEligible: ( { status } ) => status === 'approved',
+			onClick: () => onEditNote( { id: note.id, status: 'hold' } ),
+		},
+		{
+			id: 'delete',
+			title: __( 'Delete' ),
+			isEligible: () => true,
+			onClick: () => setActionState( 'delete' ),
+		},
+	];
+	const availableItems =
+		parentNote?.status !== 'approved'
+			? menuItems.filter( ( item ) => item.isEligible( note ) )
+			: [];
+
+	const deleteConfirmMessage =
+		note.parent === 0
+			? __(
+					"Are you sure you want to delete this note? This will also delete all of this note's replies."
+			  )
+			: __( 'Are you sure you want to delete this reply?' );
+
+	const handleCancel = () => {
+		setActionState( null );
+		actionButtonRef.current?.focus();
+	};
+
+	let body;
+	if ( actionState === 'edit' ) {
+		body = (
+			<NoteForm
+				onSubmit={ ( value ) => {
+					onEditNote( { id: note.id, content: value } );
+					setActionState( null );
+					actionButtonRef.current?.focus();
+				} }
+				onCancel={ handleCancel }
+				note={ note }
+				labels={ {
+					submit: _x( 'Update', 'verb' ),
+					input: sprintf(
+						// translators: %1$s: note identifier, %2$s: author name.
+						__( 'Edit note %1$s by %2$s' ),
+						note.id,
+						note.author_name
+					),
+				} }
+			/>
+		);
+	} else if ( isResolutionNote ) {
+		const actionText =
+			note.meta._wp_note_status === 'resolved'
+				? __( 'Marked as resolved' )
+				: __( 'Reopened' );
+		const raw = note?.content?.raw;
+		const text =
+			raw && typeof raw === 'string' && raw.trim() !== ''
+				? sprintf(
+						// translators: %1$s: action label ("Marked as resolved" or "Reopened"); %2$s: note text.
+						__( '%1$s: %2$s' ),
+						actionText,
+						raw
+				  )
+				: actionText;
+		body = (
+			<RawHTML
+				className={ clsx(
+					'editor-collab-sidebar-panel__note-content',
+					'editor-collab-sidebar-panel__resolution-text'
+				) }
+			>
+				{ text }
+			</RawHTML>
+		);
+	} else {
+		body = (
+			<RawHTML className="editor-collab-sidebar-panel__note-content">
+				{ note?.content?.rendered }
+			</RawHTML>
+		);
+	}
+
+	const actions = isSelected ? (
+		<>
+			{ canResolve && onResolve && (
+				<Button
+					label={ _x( 'Resolve', 'Mark note as resolved' ) }
+					size="small"
+					icon={ published }
+					disabled={ note.status === 'approved' }
+					accessibleWhenDisabled={ note.status === 'approved' }
+					onClick={ onResolve }
+				/>
+			) }
+			<NoteActionsMenu
+				items={ availableItems }
+				buttonRef={ actionButtonRef }
+			/>
+		</>
+	) : null;
+
+	return (
+		<NoteCard
+			note={ note }
+			actions={ actions }
+			role={ note.parent !== 0 ? 'treeitem' : undefined }
+		>
+			{ body }
+			{ actionState === 'delete' && (
+				<ConfirmDialog
+					isOpen
+					onConfirm={ () => {
+						onDeleteNote( note );
+						setActionState( null );
+					} }
+					onCancel={ handleCancel }
+					confirmButtonText={ __( 'Delete' ) }
+				>
+					{ deleteConfirmMessage }
+				</ConfirmDialog>
+			) }
+		</NoteCard>
+	);
+}

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

@@ -0,0 +1,276 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { Stack } from '@wordpress/ui';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { NoteThread } from './note-thread';
+import { focusNoteThread } from './utils';
+import { useFloatingBoard, useNoteActions } from './hooks';
+import { AddNote } from './add-note';
+import { store as editorStore } from '../../store';
+
+const { useBlockElement } = unlock( blockEditorPrivateApis );
+
+export function Notes( { notes, sidebarRef, isFloating = false, styles } ) {
+	const {
+		onCreate: onAddReply,
+		onEdit: onEditNote,
+		onDelete,
+	} = useNoteActions();
+	const { selectNote } = unlock( useDispatch( editorStore ) );
+	const { selectBlock, toggleBlockSpotlight } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	const { blockNoteId, selectedBlockClientId, orderedBlockIds } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getSelectedBlockClientId,
+				getClientIdsWithDescendants,
+			} = select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				blockNoteId: clientId
+					? getBlockAttributes( clientId )?.metadata?.noteId
+					: null,
+				selectedBlockClientId: clientId,
+				orderedBlockIds: getClientIdsWithDescendants(),
+			};
+		},
+		[]
+	);
+	const { selectedNote, noteFocused } = useSelect( ( select ) => {
+		const { getSelectedNote, isNoteFocused } = unlock(
+			select( editorStore )
+		);
+		return {
+			selectedNote: getSelectedNote(),
+			noteFocused: isNoteFocused(),
+		};
+	}, [] );
+
+	const relatedBlockElement = useBlockElement( selectedBlockClientId );
+
+	const threads = useMemo( () => {
+		// In floating mode with a pending new note, splice a placeholder
+		// entry at the selected block's position so the board can float it
+		// alongside regular threads.
+		if ( ! isFloating || selectedNote !== 'new' ) {
+			return notes;
+		}
+		const newNoteThread = {
+			id: 'new',
+			blockClientId: selectedBlockClientId,
+			content: { rendered: '' },
+		};
+		const out = [];
+		orderedBlockIds.forEach( ( blockId ) => {
+			if ( blockId === selectedBlockClientId ) {
+				out.push( newNoteThread );
+			} else {
+				const threadForBlock = notes.find(
+					( t ) => t.blockClientId === blockId
+				);
+				if ( threadForBlock ) {
+					out.push( threadForBlock );
+				}
+			}
+		} );
+		return out;
+	}, [
+		notes,
+		isFloating,
+		selectedNote,
+		selectedBlockClientId,
+		orderedBlockIds,
+	] );
+
+	const handleDelete = async ( note ) => {
+		const currentIndex = threads.findIndex( ( t ) => t.id === note.id );
+		const nextThread = threads[ currentIndex + 1 ];
+		const prevThread = threads[ currentIndex - 1 ];
+
+		await onDelete( note );
+
+		if ( note.parent !== 0 ) {
+			// Move focus to the parent thread when a reply was deleted.
+			selectNote( note.parent );
+			focusNoteThread( note.parent, sidebarRef.current );
+			return;
+		}
+
+		if ( nextThread ) {
+			selectNote( nextThread.id );
+			focusNoteThread( nextThread.id, sidebarRef.current );
+		} else if ( prevThread ) {
+			selectNote( prevThread.id );
+			focusNoteThread( prevThread.id, sidebarRef.current );
+		} else {
+			selectNote( undefined );
+			toggleBlockSpotlight( note.blockClientId, false );
+			// Move focus to the related block.
+			relatedBlockElement?.focus();
+		}
+	};
+
+	// Auto-select the related note thread when a block is selected.
+	useEffect( () => {
+		selectNote( blockNoteId ?? undefined );
+	}, [ blockNoteId, selectNote ] );
+
+	// Focus the selected note when requested.
+	useEffect( () => {
+		if ( noteFocused && selectedNote ) {
+			focusNoteThread(
+				selectedNote,
+				sidebarRef.current,
+				selectedNote === 'new' ? 'textarea' : undefined
+			);
+			// Clear focus flag to avoid re-triggering.
+			selectNote( selectedNote );
+		}
+	}, [ noteFocused, selectedNote, selectNote, sidebarRef ] );
+
+	const { notePositions, registerThread, unregisterThread } =
+		useFloatingBoard( {
+			threads,
+			selectedNoteId: selectedNote,
+			isFloating,
+			sidebarRef,
+		} );
+
+	const hasThreads = Array.isArray( threads ) && threads.length > 0;
+
+	const navigate = ( event, thread, isSelected ) => {
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const currentIndex = threads.findIndex( ( t ) => t.id === thread.id );
+		const isSelfTarget = event.currentTarget === event.target;
+
+		if (
+			( event.key === 'Enter' || event.key === 'ArrowRight' ) &&
+			isSelfTarget &&
+			! isSelected
+		) {
+			// Expand thread.
+			selectNote( thread.id );
+			if ( !! thread.blockClientId ) {
+				// Pass `null` as the second parameter to prevent focusing the block.
+				selectBlock( thread.blockClientId, null );
+				toggleBlockSpotlight( thread.blockClientId, true );
+			}
+		} else if (
+			( ( event.key === 'Enter' || event.key === 'ArrowLeft' ) &&
+				isSelfTarget &&
+				isSelected ) ||
+			event.key === 'Escape'
+		) {
+			// Collapse thread.
+			selectNote( undefined );
+			if ( thread.blockClientId ) {
+				toggleBlockSpotlight( thread.blockClientId, false );
+			}
+			focusNoteThread( thread.id, sidebarRef.current );
+		} else if (
+			event.key === 'ArrowDown' &&
+			currentIndex < threads.length - 1 &&
+			isSelfTarget
+		) {
+			focusNoteThread(
+				threads[ currentIndex + 1 ].id,
+				sidebarRef.current
+			);
+		} else if (
+			event.key === 'ArrowUp' &&
+			currentIndex > 0 &&
+			isSelfTarget
+		) {
+			focusNoteThread(
+				threads[ currentIndex - 1 ].id,
+				sidebarRef.current
+			);
+		} else if ( event.key === 'Home' && isSelfTarget ) {
+			focusNoteThread( threads[ 0 ].id, sidebarRef.current );
+		} else if ( event.key === 'End' && isSelfTarget ) {
+			focusNoteThread(
+				threads[ threads.length - 1 ].id,
+				sidebarRef.current
+			);
+		}
+	};
+
+	return (
+		<Stack
+			className="editor-collab-sidebar-panel"
+			style={ styles }
+			role="tree"
+			direction="column"
+			gap="md"
+			justify="flex-start"
+			ref={ ( node ) => {
+				// Sometimes previous sidebar unmounts after the new one mounts.
+				// This ensures we always have the latest reference.
+				if ( node ) {
+					sidebarRef.current = node;
+				}
+			} }
+			aria-label={
+				isFloating ? __( 'Unresolved notes' ) : __( 'All notes' )
+			}
+		>
+			{ ! hasThreads && ! isFloating ? (
+				<AddNote onSubmit={ onAddReply } sidebarRef={ sidebarRef } />
+			) : (
+				<>
+					{ ! isFloating && selectedNote === 'new' && (
+						<AddNote
+							onSubmit={ onAddReply }
+							sidebarRef={ sidebarRef }
+						/>
+					) }
+					{ threads.map( ( thread ) => (
+						<NoteThread
+							key={ thread.id }
+							note={ thread }
+							onAddReply={ onAddReply }
+							onDeleteNote={ handleDelete }
+							onEditNote={ onEditNote }
+							isSelected={ selectedNote === thread.id }
+							sidebarRef={ sidebarRef }
+							floating={
+								isFloating
+									? {
+											y: notePositions[ thread.id ],
+											registerThread,
+											unregisterThread,
+									  }
+									: undefined
+							}
+							onKeyDown={ ( event ) =>
+								navigate(
+									event,
+									thread,
+									selectedNote === thread.id
+								)
+							}
+						/>
+					) ) }
+				</>
+			) }
+		</Stack>
+	);
+}

package/src/components/collab-sidebar/style.scss

@@ -16,6 +16,7 @@
 }
 
 .editor-collab-sidebar-panel {
+	position: relative;
 	padding: $grid-unit-20 $grid-unit-20 $grid-unit-30;
 	height: 100%;
 	overflow: hidden;
@@ -46,6 +47,10 @@
 		right: $grid-unit-20;
 		position: absolute;
 		margin-top: $grid-unit-20;
+		// Inherits `--canvas-scroll` from the panel (set by `useFloatingBoard`)
+		// so each thread tracks the canvas scroll.
+		transform: translateY(var(--canvas-scroll, 0));
+		will-change: transform;
 	}
 }
 
@@ -66,7 +71,7 @@
 	color: $gray-700;
 }
 
-.editor-collab-sidebar-panel__user-comment {
+.editor-collab-sidebar-panel__note-content {
 	p:last-child {
 		margin-bottom: 0;
 	}
@@ -81,7 +86,7 @@
 	background: $white;
 }
 
-.editor-collab-sidebar-panel__comment-status {
+.editor-collab-sidebar-panel__note-actions {
 	margin-left: auto;
 
 	button {
@@ -95,10 +100,6 @@
 	}
 }
 
-.editor-collab-sidebar-panel__comment-dropdown-menu {
-	flex-shrink: 0;
-}
-
 .editor-collab-sidebar-panel__more-reply-separator {
 	&::before,
 	&::after {
@@ -115,11 +116,16 @@
 	font-weight: $font-weight-medium;
 }
 
+.editor-collab-sidebar-panel__deleted-block-notice {
+	font-weight: $font-weight-medium;
+	color: $gray-700;
+}
+
 .editor-collab-sidebar-panel__resolution-text {
 	font-style: italic;
 }
 
-.editor-collab-sidebar-panel__comment-form textarea {
+.editor-collab-sidebar-panel__note-form textarea {
 	@include input-control;
 	// Vertical padding is to match the standard 40px control height when rows=1,
 	// in conjunction with the 20px line-height.
@@ -130,7 +136,7 @@
 }
 
 // Visually hidden until focused (skip link pattern)
-.editor-collab-sidebar-panel__skip-to-comment,
+.editor-collab-sidebar-panel__skip-to-note,
 .editor-collab-sidebar-panel__skip-to-block {
 	position: absolute;
 	top: -9999px;
@@ -147,7 +153,7 @@
 		right: $grid-unit-10;
 	}
 }
-.editor-collab-sidebar-panel__skip-to-comment:focus {
+.editor-collab-sidebar-panel__skip-to-note:focus {
 	top: $grid-unit-10;
 }
 .editor-collab-sidebar-panel__skip-to-block:focus {
@@ -155,7 +161,7 @@
 	bottom: $grid-unit-10;
 }
 
-.comment-avatar {
+.editor-note-indicator__avatar {
 	width: $icon-size;
 	border-radius: $radius-round;
 	margin-left: -12px;
@@ -170,8 +176,12 @@
 	}
 }
 
+.editor-note-indicator__overflow {
+	font-weight: $font-weight-medium;
+}
+
 .show-icon-labels {
-	.comment-avatar-indicator {
+	.editor-note-indicator {
 		width: auto;
 		// Hide the user avatars container when labels are set to display...
 		div {