[Experimental] Notes: Support partial text selection notes

lib/compat/wordpress-6.9/block-comments.php

@@ -48,6 +48,34 @@ function gutenberg_register_block_comment_metadata() {
 			},
 		)
 	);
+	register_meta(
+		'comment',
+		'_wp_note_selection',
+		array(
+			'type'          => 'object',
+			'description'   => __( 'Note text selection', 'gutenberg' ),
+			'single'        => true,
+			'show_in_rest'  => array(
+				'schema' => array(
+					'type'       => 'object',
+					'properties' => array(
+						'attributeKey' => array(
+							'type' => 'string',
+						),
+						'start'        => array(
+							'type' => 'integer',
+						),
+						'end'          => array(
+							'type' => 'integer',
+						),
+					),
+				),
+			),
+			'auth_callback' => function ( $allowed, $meta_key, $object_id ) {
+				return current_user_can( 'edit_comment', $object_id );
+			},
+		)
+	);
 }
 add_action( 'init', 'gutenberg_register_block_comment_metadata' );
 

packages/editor/package.json

@@ -62,6 +62,7 @@
 	"dependencies": {
 		"@floating-ui/react-dom": "2.0.8",
 		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/annotations": "file:../annotations",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/base-styles": "file:../base-styles",
 		"@wordpress/blob": "file:../blob",

packages/editor/src/components/collab-sidebar/hooks.js

@@ -26,6 +26,7 @@ import {
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as annotationsStore } from '@wordpress/annotations';
 
 /**
  * Internal dependencies
@@ -174,8 +175,12 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 	const { createNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord, deleteEntityRecord } = useDispatch( coreStore );
 	const { getCurrentPostId } = useSelect( editorStore );
-	const { getBlockAttributes, getSelectedBlockClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockAttributes,
+		getSelectedBlockClientId,
+		getSelectionStart,
+		getSelectionEnd,
+	} = useSelect( blockEditorStore );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const onError = ( error ) => {
@@ -191,6 +196,21 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 
 	const onCreate = async ( { content, parent } ) => {
 		try {
+			const selectionStart = getSelectionStart();
+			const selectionEnd = getSelectionEnd();
+			const hasValidSelection =
+				selectionStart.clientId === selectionEnd.clientId &&
+				selectionStart.offset !== selectionEnd.offset;
+			const textSelection = hasValidSelection
+				? {
+						_wp_note_selection: {
+							attributeKey: selectionStart.attributeKey,
+							start: selectionStart.offset,
+							end: selectionEnd.offset,
+						},
+				  }
+				: undefined;
+
 			const savedRecord = await saveEntityRecord(
 				'root',
 				'comment',
@@ -200,6 +220,7 @@ export function useBlockCommentsActions( reflowComments = noop ) {
 					status: 'hold',
 					type: 'note',
 					parent: parent || 0,
+					meta: textSelection,
 				},
 				{ throwOnError: true }
 			);
@@ -429,3 +450,81 @@ export function useFloatingThread( {
 		refs,
 	};
 }
+
+export function useAnnotateBlocks( threads ) {
+	const {
+		__experimentalAddAnnotation,
+		__experimentalRemoveAnnotationsBySource,
+	} = useDispatch( annotationsStore );
+	const selections = useMemo( () => {
+		const values = [];
+
+		if ( ! threads?.length ) {
+			return values;
+		}
+
+		function getSelectionMeta( thread ) {
+			// Empty object meta data is returned as array.
+			if (
+				! thread?.meta?._wp_note_selection ||
+				Array.isArray( thread.meta._wp_note_selection )
+			) {
+				return null;
+			}
+
+			return {
+				id: thread.id,
+				...thread.meta._wp_note_selection,
+			};
+		}
+
+		for ( const thread of threads ) {
+			const threadSelection = getSelectionMeta( thread );
+			if ( threadSelection ) {
+				values.push( {
+					clientId: thread.blockClientId,
+					...threadSelection,
+				} );
+			}
+
+			for ( const reply of thread.reply ) {
+				const replySelection = getSelectionMeta( reply );
+				if ( replySelection ) {
+					values.push( {
+						clientId: thread.blockClientId,
+						...replySelection,
+					} );
+				}
+			}
+		}
+
+		return values;
+	}, [ threads ] );
+
+	useEffect( () => {
+		if ( ! selections.length ) {
+			return;
+		}
+
+		selections.forEach( ( selection ) => {
+			__experimentalAddAnnotation( {
+				id: selection.id,
+				source: 'core-note',
+				blockClientId: selection.clientId,
+				richTextIdentifier: selection.attributeKey,
+				range: {
+					start: selection.start,
+					end: selection.end,
+				},
+			} );
+		} );
+
+		return () => {
+			__experimentalRemoveAnnotationsBySource( 'core-note' );
+		};
+	}, [
+		selections,
+		__experimentalAddAnnotation,
+		__experimentalRemoveAnnotationsBySource,
+	] );
+}

packages/editor/src/components/collab-sidebar/index.js

@@ -29,6 +29,7 @@ import {
 	useBlockComments,
 	useBlockCommentsActions,
 	useEnableFloatingSidebar,
+	useAnnotateBlocks,
 } from './hooks';
 import { focusCommentThread } from './utils';
 import PostTypeSupportCheck from '../post-type-support-check';
@@ -121,6 +122,7 @@ function NotesSidebar( { postId } ) {
 			( unresolvedSortedThreads.length > 0 ||
 				newNoteFormState !== 'closed' )
 	);
+	useAnnotateBlocks( unresolvedSortedThreads );
 
 	// Get the global styles to set the background color of the sidebar.
 	const { merged: GlobalStyles } = useGlobalStylesContext();