@wordpress/editor 14.41.1-next.v.202603102151.0 → 14.42.0

package/src/components/collaborators-presence/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import {
 	privateApis,
 	type PostEditorAwarenessState,
@@ -40,11 +40,23 @@ export function CollaboratorsPresence( {
 		postType
 	) as PostEditorAwarenessState[];
 
-	// Filter out current user - we never show ourselves in the list
 	const otherActiveCollaborators = activeCollaborators.filter(
-		( collaborator ) => ! collaborator.isMe
+		( c ) => ! c.isMe
 	);
 
+	// Always include self in the list sorted first.
+	const collaboratorsForList = useMemo( () => {
+		return [ ...activeCollaborators ].sort( ( a, b ) => {
+			if ( a.isMe && ! b.isMe ) {
+				return -1;
+			}
+			if ( ! a.isMe && b.isMe ) {
+				return 1;
+			}
+			return 0;
+		} );
+	}, [ activeCollaborators ] );
+
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 	const [ popoverAnchor, setPopoverAnchor ] = useState< HTMLElement | null >(
 		null
@@ -57,6 +69,8 @@ export function CollaboratorsPresence( {
 		return null;
 	}
 
+	const me = activeCollaborators.find( ( c ) => c.isMe );
+
 	return (
 		<>
 			<div className="editor-collaborators-presence">
@@ -69,10 +83,21 @@ export function CollaboratorsPresence( {
 					aria-label={ sprintf(
 						// translators: %d: number of online collaborators.
 						__( 'Collaborators list, %d online' ),
-						otherActiveCollaborators.length
+						collaboratorsForList.length
 					) }
 				>
 					<AvatarGroup max={ 4 }>
+						{ me && (
+							<Avatar
+								key={ me.clientId }
+								src={ getAvatarUrl(
+									me.collaboratorInfo.avatar_urls
+								) }
+								name={ me.collaboratorInfo.name }
+								borderColor="var(--wp-admin-theme-color)"
+								size="small"
+							/>
+						) }
 						{ otherActiveCollaborators.map(
 							( collaboratorState ) => (
 								<Avatar
@@ -95,7 +120,7 @@ export function CollaboratorsPresence( {
 				</Button>
 				{ isPopoverVisible && (
 					<CollaboratorsList
-						activeCollaborators={ otherActiveCollaborators }
+						activeCollaborators={ collaboratorsForList }
 						popoverAnchor={ popoverAnchor }
 						setIsPopoverVisible={ setIsPopoverVisible }
 					/>

package/src/components/collaborators-presence/list.tsx

@@ -17,7 +17,8 @@ interface CollaboratorsListProps {
 
 /**
  * Renders a list showing all active collaborators with their details.
- * Note: activeUsers should already exclude the current user (filtered by parent component).
+ * When the showCollaborationCursor preference is enabled, the current user
+ * is included and expected to be first in the list.
  * @param props                     Component props
  * @param props.activeCollaborators List of active collaborators
  * @param props.popoverAnchor       Anchor element for the popover
@@ -53,30 +54,43 @@ export function CollaboratorsList( {
 					</div>
 				</div>
 				<div className="editor-collaborators-presence__list-items">
-					{ activeCollaborators.map( ( collaboratorState ) => (
-						<button
-							key={ collaboratorState.clientId }
-							className="editor-collaborators-presence__list-item"
-							disabled
-						>
-							<Avatar
-								src={ getAvatarUrl(
-									collaboratorState.collaboratorInfo
-										.avatar_urls
-								) }
-								name={ collaboratorState.collaboratorInfo.name }
-								borderColor={ getAvatarBorderColor(
-									collaboratorState.collaboratorInfo.id
-								) }
-								dimmed={ ! collaboratorState.isConnected }
-							/>
-							<div className="editor-collaborators-presence__list-item-info">
-								<div className="editor-collaborators-presence__list-item-name">
-									{ collaboratorState.collaboratorInfo.name }
+					{ activeCollaborators.map( ( collaboratorState ) => {
+						const isCurrentUser = collaboratorState.isMe;
+						return (
+							<button
+								key={ collaboratorState.clientId }
+								className="editor-collaborators-presence__list-item"
+								disabled
+							>
+								<Avatar
+									src={ getAvatarUrl(
+										collaboratorState.collaboratorInfo
+											.avatar_urls
+									) }
+									name={
+										collaboratorState.collaboratorInfo.name
+									}
+									borderColor={
+										isCurrentUser
+											? 'var(--wp-admin-theme-color)'
+											: getAvatarBorderColor(
+													collaboratorState
+														.collaboratorInfo.id
+											  )
+									}
+									dimmed={ ! collaboratorState.isConnected }
+								/>
+								<div className="editor-collaborators-presence__list-item-info">
+									<div className="editor-collaborators-presence__list-item-name">
+										{ isCurrentUser
+											? __( 'You' )
+											: collaboratorState.collaboratorInfo
+													.name }
+									</div>
 								</div>
-							</div>
-						</button>
-					) ) }
+							</button>
+						);
+					} ) }
 				</div>
 			</div>
 		</Popover>