@wordpress/core-data 7.39.1-next.v.202602091733.0 → 7.40.0

package/src/hooks/test/use-post-editor-awareness-state.ts

@@ -0,0 +1,477 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useActiveCollaborators,
+	useGetAbsolutePositionIndex,
+	useGetDebugData,
+	useIsDisconnected,
+} from '../use-post-editor-awareness-state';
+import { getSyncManager } from '../../sync';
+import { SelectionType } from '../../utils/crdt-user-selections';
+import type {
+	PostEditorAwarenessState,
+	YDocDebugData,
+} from '../../awareness/types';
+import type { SelectionCursor } from '../../types';
+
+// Mock the sync module
+jest.mock( '../../sync', () => ( {
+	getSyncManager: jest.fn(),
+} ) );
+
+const mockAvatarUrls = {
+	'24': 'https://example.com/avatar-24.png',
+	'48': 'https://example.com/avatar-48.png',
+	'96': 'https://example.com/avatar-96.png',
+};
+
+const createMockActiveUser = (
+	overrides: Partial< PostEditorAwarenessState > = {}
+): PostEditorAwarenessState => ( {
+	clientId: 12345,
+	isMe: false,
+	isConnected: true,
+	collaboratorInfo: {
+		id: 1,
+		name: 'Test User',
+		slug: 'test-user',
+		avatar_urls: mockAvatarUrls,
+		browserType: 'Chrome',
+		enteredAt: 1704067200000,
+	},
+	editorState: {
+		selection: {
+			type: SelectionType.None,
+		},
+	},
+	...overrides,
+} );
+
+const createMockDebugData = (): YDocDebugData => ( {
+	doc: { testKey: 'testValue' },
+	clients: {},
+	collaboratorMap: {},
+} );
+
+describe( 'use-post-editor-awareness-state hooks', () => {
+	let mockAwareness: {
+		setUp: jest.Mock;
+		getCurrentState: jest.Mock;
+		onStateChange: jest.Mock;
+		getAbsolutePositionIndex: jest.Mock;
+		getDebugData: jest.Mock;
+	};
+	let mockSyncManager: {
+		getAwareness: jest.Mock;
+	};
+	let stateChangeCallback:
+		| ( ( newState: PostEditorAwarenessState[] ) => void )
+		| null;
+
+	beforeEach( () => {
+		stateChangeCallback = null;
+
+		mockAwareness = {
+			setUp: jest.fn(),
+			getCurrentState: jest.fn().mockReturnValue( [] ),
+			onStateChange: jest.fn( ( callback ) => {
+				stateChangeCallback = callback;
+				return jest.fn(); // unsubscribe function
+			} ),
+			getAbsolutePositionIndex: jest.fn().mockReturnValue( null ),
+			getDebugData: jest.fn().mockReturnValue( createMockDebugData() ),
+		};
+
+		mockSyncManager = {
+			getAwareness: jest.fn().mockReturnValue( mockAwareness ),
+		};
+
+		( getSyncManager as jest.Mock ).mockReturnValue( mockSyncManager );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	describe( 'useActiveUsers', () => {
+		test( 'should return empty array when postId is null', () => {
+			const { result } = renderHook( () =>
+				useActiveCollaborators( null, 'post' )
+			);
+
+			expect( result.current ).toEqual( [] );
+			expect( mockSyncManager.getAwareness ).not.toHaveBeenCalled();
+		} );
+
+		test( 'should return empty array when postType is null', () => {
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, null )
+			);
+
+			expect( result.current ).toEqual( [] );
+			expect( mockSyncManager.getAwareness ).not.toHaveBeenCalled();
+		} );
+
+		test( 'should return empty array when getSyncManager returns undefined', () => {
+			( getSyncManager as jest.Mock ).mockReturnValue( undefined );
+
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( result.current ).toEqual( [] );
+		} );
+
+		test( 'should return empty array when awareness is not available', () => {
+			mockSyncManager.getAwareness.mockReturnValue( undefined );
+
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( result.current ).toEqual( [] );
+		} );
+
+		test( 'should call getAwareness with correct parameters', () => {
+			renderHook( () => useActiveCollaborators( 123, 'post' ) );
+
+			expect( mockSyncManager.getAwareness ).toHaveBeenCalledWith(
+				'postType/post',
+				'123'
+			);
+		} );
+
+		test( 'should call awareness.setUp', () => {
+			renderHook( () => useActiveCollaborators( 123, 'post' ) );
+
+			expect( mockAwareness.setUp ).toHaveBeenCalled();
+		} );
+
+		test( 'should return initial state from getCurrentState', () => {
+			const mockUsers = [ createMockActiveUser() ];
+			mockAwareness.getCurrentState.mockReturnValue( mockUsers );
+
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( result.current ).toEqual( mockUsers );
+		} );
+
+		test( 'should subscribe to state changes', () => {
+			renderHook( () => useActiveCollaborators( 123, 'post' ) );
+
+			expect( mockAwareness.onStateChange ).toHaveBeenCalled();
+		} );
+
+		test( 'should update state when awareness emits changes', async () => {
+			const initialUsers: PostEditorAwarenessState[] = [];
+			const updatedUsers = [ createMockActiveUser() ];
+
+			mockAwareness.getCurrentState.mockReturnValue( initialUsers );
+
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( result.current ).toEqual( initialUsers );
+
+			// Simulate awareness state change
+			act( () => {
+				stateChangeCallback?.( updatedUsers );
+			} );
+
+			await waitFor( () => {
+				expect( result.current ).toEqual( updatedUsers );
+			} );
+		} );
+
+		test( 'should unsubscribe when postId changes', () => {
+			const unsubscribe = jest.fn();
+			mockAwareness.onStateChange.mockReturnValue( unsubscribe );
+
+			const { rerender } = renderHook(
+				( { postId } ) => useActiveCollaborators( postId, 'post' ),
+				{ initialProps: { postId: 123 as number | null } }
+			);
+
+			expect( unsubscribe ).not.toHaveBeenCalled();
+
+			rerender( { postId: 456 } );
+
+			expect( unsubscribe ).toHaveBeenCalled();
+		} );
+
+		test( 'should unsubscribe when postType changes', () => {
+			const unsubscribe = jest.fn();
+			mockAwareness.onStateChange.mockReturnValue( unsubscribe );
+
+			const { rerender } = renderHook(
+				( { postType } ) => useActiveCollaborators( 123, postType ),
+				{ initialProps: { postType: 'post' as string | null } }
+			);
+
+			expect( unsubscribe ).not.toHaveBeenCalled();
+
+			rerender( { postType: 'page' } );
+
+			expect( unsubscribe ).toHaveBeenCalled();
+		} );
+
+		test( 'should reset state when postId becomes null', () => {
+			const mockUsers = [ createMockActiveUser() ];
+			mockAwareness.getCurrentState.mockReturnValue( mockUsers );
+
+			const { result, rerender } = renderHook(
+				( { postId } ) => useActiveCollaborators( postId, 'post' ),
+				{ initialProps: { postId: 123 as number | null } }
+			);
+
+			expect( result.current ).toEqual( mockUsers );
+
+			rerender( { postId: null } );
+
+			expect( result.current ).toEqual( [] );
+		} );
+	} );
+
+	describe( 'useGetAbsolutePositionIndex', () => {
+		test( 'should return function that returns null when postId is null', () => {
+			const { result } = renderHook( () =>
+				useGetAbsolutePositionIndex( null, 'post' )
+			);
+
+			const mockSelection: SelectionCursor = {
+				type: SelectionType.Cursor,
+				blockId: 'block-1',
+				cursorPosition: {
+					relativePosition: {} as any,
+					absoluteOffset: 5,
+				},
+			};
+
+			expect( result.current( mockSelection ) ).toBeNull();
+		} );
+
+		test( 'should call awareness.getAbsolutePositionIndex with selection', () => {
+			const mockSelection: SelectionCursor = {
+				type: SelectionType.Cursor,
+				blockId: 'block-1',
+				cursorPosition: {
+					relativePosition: {} as any,
+					absoluteOffset: 5,
+				},
+			};
+			mockAwareness.getAbsolutePositionIndex.mockReturnValue( 10 );
+
+			const { result } = renderHook( () =>
+				useGetAbsolutePositionIndex( 123, 'post' )
+			);
+
+			const position = result.current( mockSelection );
+
+			expect(
+				mockAwareness.getAbsolutePositionIndex
+			).toHaveBeenCalledWith( mockSelection );
+			expect( position ).toBe( 10 );
+		} );
+	} );
+
+	describe( 'useGetDebugData', () => {
+		test( 'should return default debug data when postId is null', () => {
+			const { result } = renderHook( () =>
+				useGetDebugData( null, 'post' )
+			);
+
+			expect( result.current ).toEqual( {
+				doc: {},
+				clients: {},
+				collaboratorMap: {},
+			} );
+		} );
+
+		test( 'should call awareness.getDebugData and return result', () => {
+			const mockDebugData = createMockDebugData();
+			mockAwareness.getDebugData.mockReturnValue( mockDebugData );
+
+			const { result } = renderHook( () =>
+				useGetDebugData( 123, 'post' )
+			);
+
+			expect( result.current ).toEqual( mockDebugData );
+		} );
+	} );
+
+	describe( 'useIsDisconnected', () => {
+		test( 'should return false when postId is null', () => {
+			const { result } = renderHook( () =>
+				useIsDisconnected( null, 'post' )
+			);
+
+			expect( result.current ).toBe( false );
+		} );
+
+		test( 'should return false when current user is connected', () => {
+			const connectedUser = createMockActiveUser( {
+				isMe: true,
+				isConnected: true,
+			} );
+			mockAwareness.getCurrentState.mockReturnValue( [ connectedUser ] );
+
+			const { result } = renderHook( () =>
+				useIsDisconnected( 123, 'post' )
+			);
+
+			expect( result.current ).toBe( false );
+		} );
+
+		test( 'should return true when current user is disconnected', () => {
+			const disconnectedUser = createMockActiveUser( {
+				isMe: true,
+				isConnected: false,
+			} );
+			mockAwareness.getCurrentState.mockReturnValue( [
+				disconnectedUser,
+			] );
+
+			const { result } = renderHook( () =>
+				useIsDisconnected( 123, 'post' )
+			);
+
+			expect( result.current ).toBe( true );
+		} );
+
+		test( 'should return false when no user is marked as me', () => {
+			const otherUser = createMockActiveUser( {
+				isMe: false,
+				isConnected: false,
+			} );
+			mockAwareness.getCurrentState.mockReturnValue( [ otherUser ] );
+
+			const { result } = renderHook( () =>
+				useIsDisconnected( 123, 'post' )
+			);
+
+			expect( result.current ).toBe( false );
+		} );
+
+		test( 'should update when state changes to disconnected', async () => {
+			const connectedUser = createMockActiveUser( {
+				isMe: true,
+				isConnected: true,
+			} );
+			const disconnectedUser = createMockActiveUser( {
+				isMe: true,
+				isConnected: false,
+			} );
+
+			mockAwareness.getCurrentState.mockReturnValue( [ connectedUser ] );
+
+			const { result } = renderHook( () =>
+				useIsDisconnected( 123, 'post' )
+			);
+
+			expect( result.current ).toBe( false );
+
+			// Simulate disconnection
+			act( () => {
+				stateChangeCallback?.( [ disconnectedUser ] );
+			} );
+
+			await waitFor( () => {
+				expect( result.current ).toBe( true );
+			} );
+		} );
+	} );
+
+	describe( 'hook cleanup', () => {
+		test( 'should unsubscribe on unmount', () => {
+			const unsubscribe = jest.fn();
+			mockAwareness.onStateChange.mockReturnValue( unsubscribe );
+
+			const { unmount } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( unsubscribe ).not.toHaveBeenCalled();
+
+			unmount();
+
+			expect( unsubscribe ).toHaveBeenCalled();
+		} );
+	} );
+
+	describe( 'multiple users scenario', () => {
+		test( 'should handle multiple active users', () => {
+			const user1 = createMockActiveUser( {
+				clientId: 1,
+				isMe: true,
+				collaboratorInfo: {
+					id: 1,
+					name: 'User One',
+					slug: 'user-one',
+					avatar_urls: mockAvatarUrls,
+					browserType: 'Chrome',
+					enteredAt: 1704067200000,
+				},
+			} );
+			const user2 = createMockActiveUser( {
+				clientId: 2,
+				isMe: false,
+				collaboratorInfo: {
+					id: 2,
+					name: 'User Two',
+					slug: 'user-two',
+					avatar_urls: mockAvatarUrls,
+					browserType: 'Firefox',
+					enteredAt: 1704067300000,
+				},
+			} );
+
+			mockAwareness.getCurrentState.mockReturnValue( [ user1, user2 ] );
+
+			const { result } = renderHook( () =>
+				useActiveCollaborators( 123, 'post' )
+			);
+
+			expect( result.current ).toHaveLength( 2 );
+			expect( result.current[ 0 ].collaboratorInfo.name ).toBe(
+				'User One'
+			);
+			expect( result.current[ 1 ].collaboratorInfo.name ).toBe(
+				'User Two'
+			);
+		} );
+
+		test( 'should identify correct user as disconnected among multiple', () => {
+			const meConnected = createMockActiveUser( {
+				clientId: 1,
+				isMe: true,
+				isConnected: true,
+			} );
+			const otherDisconnected = createMockActiveUser( {
+				clientId: 2,
+				isMe: false,
+				isConnected: false,
+			} );
+
+			mockAwareness.getCurrentState.mockReturnValue( [
+				meConnected,
+				otherDisconnected,
+			] );
+
+			const { result } = renderHook( () =>
+				useIsDisconnected( 123, 'post' )
+			);
+
+			// Should be false because *I* am connected (other user's status doesn't matter)
+			expect( result.current ).toBe( false );
+		} );
+	} );
+} );

package/src/hooks/use-entity-block-editor.js

@@ -13,7 +13,7 @@ import useEntityId from './use-entity-id';
 import { updateFootnotesFromMeta } from '../footnotes';
 
 const EMPTY_ARRAY = [];
-const parsedBlocksCache = new WeakMap();
+const parsedBlocksCache = new Map();
 
 /**
  * Hook that returns block content getters and setters for
@@ -36,7 +36,6 @@ const parsedBlocksCache = new WeakMap();
 export default function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
 	const providerId = useEntityId( kind, name );
 	const id = _id ?? providerId;
-	const { getEntityRecord, getEntityRecordEdits } = useSelect( STORE_NAME );
 	const { content, editedBlocks, meta } = useSelect(
 		( select ) => {
 			if ( ! id ) {
@@ -68,28 +67,21 @@ export default function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
 			return EMPTY_ARRAY;
 		}
 
-		// If there's an edit, cache the parsed blocks by the edit.
-		// If not, cache by the original entity record.
-		const edits = getEntityRecordEdits( kind, name, id );
-		const isUnedited = ! edits || ! Object.keys( edits ).length;
-		const cackeKey = isUnedited ? getEntityRecord( kind, name, id ) : edits;
-		let _blocks = parsedBlocksCache.get( cackeKey );
+		// Cache parsed blocks by entity identity. Store the content
+		// alongside the blocks so we can validate it hasn't changed.
+		const cacheKey = `${ kind }:${ name }:${ id }`;
+		const cached = parsedBlocksCache.get( cacheKey );
+		let _blocks;
 
-		if ( ! _blocks ) {
+		if ( cached && cached.content === content ) {
+			_blocks = cached.blocks;
+		} else {
 			_blocks = parse( content );
-			parsedBlocksCache.set( cackeKey, _blocks );
+			parsedBlocksCache.set( cacheKey, { content, blocks: _blocks } );
 		}
 
 		return _blocks;
-	}, [
-		kind,
-		name,
-		id,
-		editedBlocks,
-		content,
-		getEntityRecord,
-		getEntityRecordEdits,
-	] );
+	}, [ kind, name, id, editedBlocks, content ] );
 
 	const onChange = useCallback(
 		( newBlocks, options ) => {
@@ -128,8 +120,10 @@ export default function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
 	const onInput = useCallback(
 		( newBlocks, options ) => {
 			const { selection, ...rest } = options;
-			const footnotesChanges = updateFootnotesFromMeta( newBlocks, meta );
-			const edits = { selection, ...footnotesChanges };
+			const edits = {
+				selection,
+				...updateFootnotesFromMeta( newBlocks, meta ),
+			};
 
 			editEntityRecord( kind, name, id, edits, {
 				isCached: true,

package/src/index.js

@@ -133,6 +133,12 @@ unlock( store ).registerPrivateSelectors( privateSelectors );
 unlock( store ).registerPrivateActions( privateActions );
 register( store ); // Register store after unlocking private selectors to allow resolvers to use them.
 
+/**
+ * Enums cannot be exported private without losing the ability to narrow types
+ * based on their values (they blur to string type).
+ */
+export { SelectionType } from './utils/crdt-user-selections';
+
 export { default as EntityProvider } from './entity-provider';
 export * from './entity-provider';
 export * from './entity-types';
@@ -140,3 +146,4 @@ export * from './awareness/types';
 export * from './fetch';
 export * from './hooks';
 export * from './private-apis';
+export * from './types';

package/src/private-actions.js

@@ -160,3 +160,17 @@ export function receiveEditorAssets( assets ) {
 		assets,
 	};
 }
+
+/**
+ * Returns an action object used to receive icons.
+ *
+ * @param {Array} icons List of icons.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveIcons( icons ) {
+	return {
+		type: 'RECEIVE_ICONS',
+		icons,
+	};
+}

package/src/private-apis.js

@@ -3,7 +3,10 @@
  */
 import { useEntityRecordsWithPermissions } from './hooks/use-entity-records';
 import { RECEIVE_INTERMEDIATE_RESULTS } from './utils';
-import { useActiveCollaborators } from './hooks/use-post-editor-awareness-state';
+import {
+	useActiveCollaborators,
+	useGetAbsolutePositionIndex,
+} from './hooks/use-post-editor-awareness-state';
 import { lock } from './lock-unlock';
 
 export const privateApis = {};
@@ -11,4 +14,5 @@ lock( privateApis, {
 	useEntityRecordsWithPermissions,
 	RECEIVE_INTERMEDIATE_RESULTS,
 	useActiveCollaborators,
+	useGetAbsolutePositionIndex,
 } );

package/src/private-selectors.ts

@@ -6,7 +6,12 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { getDefaultTemplateId, getEntityRecord, type State } from './selectors';
+import {
+	getDefaultTemplateId,
+	getEntityRecord,
+	type State,
+	type Icon,
+} from './selectors';
 import { STORE_NAME } from './name';
 import { unlock } from './lock-unlock';
 import { getSyncManager } from './sync';
@@ -308,3 +313,13 @@ export function getEditorSettings(
 export function getEditorAssets( state: State ): Record< string, any > | null {
 	return state.editorAssets;
 }
+
+/**
+ * Returns the list of available icons.
+ *
+ * @param state Data state.
+ * @return The list of icons or empty array if not loaded.
+ */
+export function getIcons( state: State ): Icon[] {
+	return state.icons ?? [];
+}

package/src/reducer.js

@@ -660,6 +660,49 @@ export function editorAssets( state = null, action ) {
 	return state;
 }
 
+/**
+ * Reducer managing icons.
+ *
+ * @param {Array}  state  Current state.
+ * @param {Object} action Action object.
+ *
+ * @return {Array} Updated state.
+ */
+export function icons( state = [], action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_ICONS':
+			return action.icons;
+	}
+	return state;
+}
+
+/**
+ * Reducer managing sync connection states for entities.
+ * Keyed by "kind/name:id" (e.g., "postType/post:123").
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function syncConnectionStatuses( state = {}, action ) {
+	switch ( action.type ) {
+		case 'SET_SYNC_CONNECTION_STATUS': {
+			const key = `${ action.kind }/${ action.name }:${ action.key }`;
+			return {
+				...state,
+				[ key ]: action.status,
+			};
+		}
+		case 'CLEAR_SYNC_CONNECTION_STATUS': {
+			const key = `${ action.kind }/${ action.name }:${ action.key }`;
+			const { [ key ]: _, ...rest } = state;
+			return rest;
+		}
+	}
+	return state;
+}
+
 export default combineReducers( {
 	users,
 	currentTheme,
@@ -682,4 +725,6 @@ export default combineReducers( {
 	registeredPostMeta,
 	editorSettings,
 	editorAssets,
+	icons,
+	syncConnectionStatuses,
 } );