@wordpress/editor 14.40.2-next.v.202602271551.0 → 14.40.2

package/src/components/collaborators-overlay/use-render-cursors.ts

@@ -1,15 +1,28 @@
-import {
-	privateApis as coreDataPrivateApis,
-	SelectionType,
+import { privateApis as coreDataPrivateApis } from '@wordpress/core-data';
+import type {
+	CoreDataPrivateApis,
+	ResolvedSelection,
+	PostEditorAwarenessState as ActiveCollaborator,
 } from '@wordpress/core-data';
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 import { unlock } from '../../lock-unlock';
 import { getAvatarUrl } from './get-avatar-url';
 import { getAvatarBorderColor } from '../collab-sidebar/utils';
+import { computeSelectionVisual } from './compute-selection';
+import { useDebouncedRecompute } from './use-debounced-recompute';
+import type { SelectionRect } from './cursor-dom-utils';
 
 const { useActiveCollaborators, useResolvedSelection } =
 	unlock( coreDataPrivateApis );
+const { SelectionType } = unlock( coreDataPrivateApis ) as Pick<
+	CoreDataPrivateApis,
+	'SelectionType'
+>;
+
+export type { SelectionRect };
 
 export interface CursorData {
 	userName: string;
@@ -19,6 +32,8 @@ export interface CursorData {
 	x: number;
 	y: number;
 	height: number;
+	isMe?: boolean;
+	selectionRects?: SelectionRect[];
 }
 
 /**
@@ -28,13 +43,15 @@ export interface CursorData {
  * @param blockEditorDocument - The block editor document
  * @param postId              - The ID of the post
  * @param postType            - The type of the post
+ * @param delayMs             - Milliseconds to wait before recomputing cursor positions.
  * @return An array of cursor data for rendering, and a function to trigger a delayed recompute.
  */
 export function useRenderCursors(
 	overlayElement: HTMLElement | null,
 	blockEditorDocument: Document | null,
 	postId: number | null,
-	postType: string | null
+	postType: string | null,
+	delayMs: number
 ): { cursors: CursorData[]; rerenderCursorsAfterDelay: () => () => void } {
 	const sortedUsers = useActiveCollaborators(
 		postId ?? null,
@@ -45,302 +62,123 @@ export function useRenderCursors(
 		postType ?? null
 	);
 
+	const showOwnCursor = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showCollaborationCursor' ),
+		[]
+	);
+
 	const [ cursorPositions, setCursorPositions ] = useState< CursorData[] >(
 		[]
 	);
 
-	const computeCursors = useMemo(
-		() => () => {
-			if ( ! overlayElement || ! blockEditorDocument ) {
-				setCursorPositions( [] );
-				return;
-			}
+	// Bump this counter to force the effect to re-run (e.g. after a layout shift).
+	const [ recomputeToken, rerenderCursorsAfterDelay ] =
+		useDebouncedRecompute( delayMs );
 
-			const results: CursorData[] = [];
+	// All DOM position computations live inside useEffect.
+	useEffect( () => {
+		if ( ! overlayElement || ! blockEditorDocument ) {
+			setCursorPositions( [] );
+			return;
+		}
 
-			sortedUsers.forEach( ( user: any ) => {
-				if ( user.isMe ) {
-					return;
-				}
+		// Pre-compute the overlay rect once, same for every user.
+		const overlayRect = overlayElement.getBoundingClientRect();
+		const overlayContext = {
+			editorDocument: blockEditorDocument,
+			overlayRect,
+		};
 
-				const selection = user.editorState?.selection ?? {
-					type: SelectionType.None,
-				};
-				const userName = user.collaboratorInfo.name;
-				const clientId = user.clientId;
-				const color = getAvatarBorderColor( user.collaboratorInfo.id );
-				const avatarUrl = getAvatarUrl(
-					user.collaboratorInfo.avatar_urls
-				);
+		const results: CursorData[] = [];
 
-				let coords: {
-					x: number;
-					y: number;
-					height: number;
-				} | null = null;
+		const hasOtherCollaborators = sortedUsers.some(
+			( u: ActiveCollaborator ) => ! u.isMe
+		);
 
-				if ( selection.type === SelectionType.None ) {
-					// Nothing selected.
-				} else if ( selection.type === SelectionType.WholeBlock ) {
-					// Don't draw a cursor for a whole block selection.
-				} else if ( selection.type === SelectionType.Cursor ) {
-					const { textIndex, localClientId } =
-						resolveSelection( selection );
-					if ( localClientId ) {
-						coords = getCursorPosition(
-							textIndex,
-							localClientId,
-							blockEditorDocument,
-							overlayElement
-						);
-					}
-				} else if (
-					selection.type === SelectionType.SelectionInOneBlock ||
-					selection.type === SelectionType.SelectionInMultipleBlocks
-				) {
-					const { textIndex, localClientId } = resolveSelection( {
+		sortedUsers.forEach( ( user: ActiveCollaborator ) => {
+			if ( user.isMe && ( ! showOwnCursor || ! hasOtherCollaborators ) ) {
+				return;
+			}
+
+			const selection = user.editorState?.selection ?? {
+				type: SelectionType.None,
+			};
+
+			let start: ResolvedSelection = {
+				richTextOffset: null,
+				localClientId: null,
+			};
+			let end: ResolvedSelection | undefined;
+
+			if ( selection.type === SelectionType.Cursor ) {
+				try {
+					start = resolveSelection( selection );
+				} catch {
+					// Selection may reference a stale Yjs position.
+					return;
+				}
+			} else if (
+				selection.type === SelectionType.SelectionInOneBlock ||
+				selection.type === SelectionType.SelectionInMultipleBlocks
+			) {
+				try {
+					start = resolveSelection( {
 						type: SelectionType.Cursor,
 						cursorPosition: selection.cursorStartPosition,
 					} );
-					if ( localClientId ) {
-						coords = getCursorPosition(
-							textIndex,
-							localClientId,
-							blockEditorDocument,
-							overlayElement
-						);
-					}
-				}
 
-				if ( coords ) {
-					results.push( {
-						userName,
-						clientId,
-						color,
-						avatarUrl,
-						...coords,
+					end = resolveSelection( {
+						type: SelectionType.Cursor,
+						cursorPosition: selection.cursorEndPosition,
 					} );
+				} catch {
+					// Selection may reference a stale Yjs position.
+					return;
 				}
-			} );
-
-			setCursorPositions( results );
-		},
-		[ blockEditorDocument, resolveSelection, overlayElement, sortedUsers ]
-	);
-
-	useEffect( computeCursors, [ computeCursors ] );
-
-	const rerenderCursorsAfterDelay = useMemo(
-		() => () => {
-			const timeout = setTimeout( computeCursors, 500 );
-			return () => clearTimeout( timeout );
-		},
-		[ computeCursors ]
-	);
-
-	return { cursors: cursorPositions, rerenderCursorsAfterDelay };
-}
-
-/**
- * Given a selection, returns the coordinates of the cursor in the block.
- *
- * @param absolutePositionIndex - The absolute position index
- * @param blockId               - The block ID
- * @param editorDocument        - The editor document
- * @param overlay               - The overlay element
- * @return The position of the cursor
- */
-const getCursorPosition = (
-	absolutePositionIndex: number | null,
-	blockId: string,
-	editorDocument: Document,
-	overlay: HTMLElement
-): { x: number; y: number; height: number } | null => {
-	if ( absolutePositionIndex === null ) {
-		// An absolute position index can be null if a cursor was set in a block that
-		// has since been deleted.
-		// Return null so we don't try to draw it.
-		return null;
-	}
-
-	const blockElement = editorDocument.querySelector(
-		`[data-block="${ blockId }"]`
-	) as HTMLElement;
-
-	if ( ! blockElement ) {
-		return null;
-	}
-
-	return (
-		getOffsetPositionInBlock(
-			blockElement,
-			absolutePositionIndex,
-			editorDocument,
-			overlay
-		) ?? null
-	);
-};
-
-/**
- * Given a block element and a character offset, returns the coordinates for drawing a visual cursor in the block.
- *
- * @param blockElement   - The block element
- * @param charOffset     - The character offset
- * @param editorDocument - The editor document
- * @param overlay        - The overlay element
- * @return The position of the cursor
- */
-const getOffsetPositionInBlock = (
-	blockElement: HTMLElement,
-	charOffset: number,
-	editorDocument: Document,
-	overlay: HTMLElement
-) => {
-	const { node, offset } = findInnerBlockOffset(
-		blockElement,
-		charOffset,
-		editorDocument
-	);
-
-	const cursorRange = editorDocument.createRange();
-
-	try {
-		cursorRange.setStart( node, offset );
-	} catch ( error ) {
-		return null;
-	}
-
-	// Ensure the range only represents single point in the DOM.
-	cursorRange.collapse( true );
-
-	const cursorRect = cursorRange.getBoundingClientRect();
-	const overlayRect = overlay.getBoundingClientRect();
-	const blockRect = blockElement.getBoundingClientRect();
-
-	let cursorX = 0;
-	let cursorY = 0;
-
-	if (
-		cursorRect.x === 0 &&
-		cursorRect.y === 0 &&
-		cursorRect.width === 0 &&
-		cursorRect.height === 0
-	) {
-		// This can happen for empty blocks.
-		cursorX = blockRect.left - overlayRect.left;
-		cursorY = blockRect.top - overlayRect.top;
-	} else {
-		cursorX = cursorRect.left - overlayRect.left;
-		cursorY = cursorRect.top - overlayRect.top;
-	}
-
-	let cursorHeight = cursorRect.height;
-	if ( cursorHeight === 0 ) {
-		cursorHeight =
-			parseInt(
-				window.getComputedStyle( blockElement ).lineHeight,
-				10
-			) || blockRect.height;
-	}
-
-	return {
-		x: cursorX,
-		y: cursorY,
-		height: cursorHeight,
-	};
-};
-
-const MAX_NODE_OFFSET_COUNT = 1000;
-
-/**
- * Given a block element and a character offset, returns an exact inner node and offset for use in a range.
- *
- * @param blockElement   - The block element
- * @param offset         - The character offset
- * @param editorDocument - The editor document
- * @return The node and offset of the character at the offset
- */
-const findInnerBlockOffset = (
-	blockElement: HTMLElement,
-	offset: number,
-	editorDocument: Document
-) => {
-	const treeWalker = editorDocument.createTreeWalker(
-		blockElement,
-		NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT // eslint-disable-line no-bitwise
-	);
-
-	let currentOffset = 0;
-	let lastTextNode: Node | null = null;
-
-	let node: Node | null = null;
-	let nodeCount = 1;
-
-	while ( ( node = treeWalker.nextNode() ) ) {
-		nodeCount++;
-
-		if ( nodeCount > MAX_NODE_OFFSET_COUNT ) {
-			// If we've walked too many nodes, return the last text node or the beginning of the block.
-			if ( lastTextNode ) {
-				return { node: lastTextNode, offset: 0 };
 			}
-			return { node: blockElement, offset: 0 };
-		}
-
-		const nodeLength = node.nodeValue?.length ?? 0;
 
-		if ( node.nodeType === Node.ELEMENT_NODE ) {
-			if ( node.nodeName === 'BR' ) {
-				// Treat <br> as a single "\n" character.
-
-				if ( currentOffset + 1 >= offset ) {
-					// If the <br> occurs right on the target offset, return the next text node.
-					const nodeAfterBr = treeWalker.nextNode();
+			const userName = user.collaboratorInfo.name;
+			const clientId = user.clientId;
+			const color = user.isMe
+				? 'var(--wp-admin-theme-color)'
+				: getAvatarBorderColor( user.collaboratorInfo.id );
+			const avatarUrl = getAvatarUrl( user.collaboratorInfo.avatar_urls );
+
+			const selectionVisual = computeSelectionVisual(
+				selection,
+				start,
+				end,
+				overlayContext
+			);
+
+			if ( selectionVisual.coords ) {
+				const cursorData: CursorData = {
+					userName,
+					clientId,
+					color,
+					avatarUrl,
+					isMe: user.isMe,
+					...selectionVisual.coords,
+				};
 
-					if ( nodeAfterBr?.nodeType === Node.TEXT_NODE ) {
-						return { node: nodeAfterBr, offset: 0 };
-					} else if ( lastTextNode ) {
-						// If there's no text node after the <br>, return the end offset of the last text node.
-						return {
-							node: lastTextNode,
-							offset: lastTextNode.nodeValue?.length ?? 0,
-						};
-					}
-					// Just in case, if there's no last text node, return the beginning of the block.
-					return { node: blockElement, offset: 0 };
+				if ( selectionVisual.selectionRects ) {
+					cursorData.selectionRects = selectionVisual.selectionRects;
 				}
 
-				// The <br> is before the target offset. Count it as a single character.
-				currentOffset += 1;
-				continue;
-			} else {
-				// Skip other element types.
-				continue;
+				results.push( cursorData );
 			}
-		}
-
-		if ( nodeLength === 0 ) {
-			// Skip empty nodes.
-			continue;
-		}
-
-		if ( currentOffset + nodeLength >= offset ) {
-			// This node exceeds the target offset. Return the node and the position of the offset within it.
-			return { node, offset: offset - currentOffset };
-		}
+		} );
+
+		setCursorPositions( results );
+	}, [
+		blockEditorDocument,
+		resolveSelection,
+		overlayElement,
+		sortedUsers,
+		showOwnCursor,
+		recomputeToken,
+	] );
 
-		currentOffset += nodeLength;
-
-		if ( node.nodeType === Node.TEXT_NODE ) {
-			lastTextNode = node;
-		}
-	}
-
-	if ( lastTextNode && lastTextNode.nodeValue?.length ) {
-		// We didn't reach the target offset. Return the last text node's last character.
-		return { node: lastTextNode, offset: lastTextNode.nodeValue.length };
-	}
-
-	// We didn't find any text nodes. Return the beginning of the block.
-	return { node: blockElement, offset: 0 };
-};
+	return { cursors: cursorPositions, rerenderCursorsAfterDelay };
+}

package/src/components/collaborators-presence/avatar/component.tsx

@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+
+extend( [ a11yPlugin ] );
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, Tooltip } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { AvatarProps } from './types';
+import { useImageLoadingStatus } from './use-image-loading-status';
+
+// Runtime equivalents of @wordpress/base-styles tokens ($gray-900, $white).
+const GRAY_900 = '#1e1e1e';
+const WHITE = '#fff';
+
+function Avatar( {
+	className,
+	src,
+	name,
+	label,
+	variant,
+	size = 'default',
+	borderColor,
+	dimmed = false,
+	statusIndicator,
+	style,
+	...props
+}: AvatarProps &
+	Omit< React.HTMLAttributes< HTMLDivElement >, keyof AvatarProps > ) {
+	const {
+		status: imageStatus,
+		handleLoad,
+		handleError,
+	} = useImageLoadingStatus( src );
+	const imageLoaded = imageStatus === 'loaded';
+
+	const showBadge = variant === 'badge' && !! name;
+	const initials = name
+		? name
+				.split( /\s+/ )
+				.slice( 0, 2 )
+				.map( ( word ) => word[ 0 ] )
+				.join( '' )
+				.toUpperCase()
+		: undefined;
+	const nameColor = useMemo(
+		() =>
+			borderColor &&
+			colord( borderColor ).isReadable( GRAY_900, {
+				level: 'AA',
+				size: 'normal',
+			} )
+				? GRAY_900
+				: WHITE,
+		[ borderColor ]
+	);
+
+	const customProperties = {
+		...style,
+		...( borderColor
+			? {
+					'--editor-avatar-outline-color': borderColor,
+					'--editor-avatar-name-color': nameColor,
+			  }
+			: {} ),
+	} as React.CSSProperties;
+
+	const avatar = (
+		<div
+			className={ clsx( 'editor-avatar', className, {
+				'has-avatar-border-color': !! borderColor,
+				'has-src': imageLoaded,
+				'is-badge': showBadge,
+				'is-small': size === 'small',
+				'is-dimmed': dimmed,
+			} ) }
+			style={ customProperties }
+			role={ name ? 'img' : undefined }
+			aria-label={ name || undefined }
+			{ ...props }
+		>
+			<span className="editor-avatar__image">
+				{ src && (
+					<img
+						src={ src }
+						alt=""
+						crossOrigin="anonymous"
+						className="editor-avatar__img"
+						onLoad={ handleLoad }
+						onError={ handleError }
+					/>
+				) }
+				{ ! imageLoaded && initials }
+			</span>
+			{ dimmed && !! statusIndicator && (
+				<span className="editor-avatar__status-indicator">
+					<Icon icon={ statusIndicator } />
+				</span>
+			) }
+			{ showBadge && (
+				<span className="editor-avatar__name">{ label || name }</span>
+			) }
+		</div>
+	);
+
+	if ( name && ( ! showBadge || label ) ) {
+		return <Tooltip text={ name }>{ avatar }</Tooltip>;
+	}
+
+	return avatar;
+}
+
+export default Avatar;

package/src/components/collaborators-presence/avatar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './component';
+export type { AvatarProps } from './types';