AI Proofread: Improve Popover UX

projects/plugins/jetpack/changelog/update-ai-proofread-popover-ux

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Improve Popover UX on AI Proofread

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { dispatch, select } from '@wordpress/data';
+import { dispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
@@ -10,31 +10,55 @@ import features from './index';
 /**
  * Types
  */
-import type { BreveDispatch, BreveSelect } from '../types';
+import type { BreveDispatch, Anchor } from '../types';
 
 let highlightTimeout: number;
+let anchorTimeout: number;
 
-function handleMouseEnter( e: React.MouseEvent ) {
-	e.stopPropagation();
+function handleMouseEnter( e: MouseEvent ) {
 	clearTimeout( highlightTimeout );
-	( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).increasePopoverLevel();
-	( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( true );
-	( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setPopoverAnchor( e.target );
-}
+	clearTimeout( anchorTimeout );
 
-function handleMouseLeave( e: React.MouseEvent ) {
-	e.stopPropagation();
-	( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).decreasePopoverLevel();
+	anchorTimeout = setTimeout( () => {
+		const el = e.target as HTMLElement;
+		let virtual = el;
 
-	highlightTimeout = setTimeout( () => {
-		// If the mouse is still over any highlight, don't hide the popover
-		const { getPopoverLevel } = select( 'jetpack/ai-breve' ) as BreveSelect;
-		if ( getPopoverLevel() > 0 ) {
-			return;
+		const shouldPointToCursor = el.getAttribute( 'data-type' ) === 'long-sentences';
+
+		if ( shouldPointToCursor ) {
+			const rect = el.getBoundingClientRect();
+			const diff = e.clientY - Math.floor( rect.top );
+			const offset = diff === 0 ? 10 : 0;
+
+			virtual = {
+				getBoundingClientRect() {
+					return {
+						top: e.clientY + offset,
+						left: e.clientX,
+						bottom: e.clientY,
+						right: e.clientX,
+						width: 0,
+						height: 0,
+						x: e.clientX,
+						y: e.clientY,
+					} as DOMRect;
+				},
+				contextElement: e.target as HTMLElement,
+			} as unknown as HTMLElement;
 		}
 
+		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( true );
+		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setPopoverAnchor( {
+			target: e.target as HTMLElement,
+			virtual: virtual,
+		} as Anchor );
+	}, 100 );
+}
+
+function handleMouseLeave() {
+	highlightTimeout = setTimeout( () => {
 		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( false );
-	}, 50 );
+	}, 100 );
 }
 
 export default function registerEvents( clientId: string ) {
@@ -43,12 +67,14 @@ export default function registerEvents( clientId: string ) {
 	const block = container?.querySelector?.( `#${ id }` );
 
 	features.forEach( ( { config } ) => {
-		const items = block?.querySelectorAll?.( `[data-type='${ config.name }']` ) || [];
+		const items: NodeListOf< HTMLElement > | undefined = block?.querySelectorAll?.(
+			`[data-type='${ config.name }']`
+		);
 
-		if ( items?.length > 0 ) {
+		if ( items && items?.length > 0 ) {
 			items.forEach( highlightEl => {
-				highlightEl?.removeEventListener?.( 'mouseenter', handleMouseEnter );
-				highlightEl?.addEventListener?.( 'mouseenter', handleMouseEnter );
+				highlightEl?.removeEventListener?.( 'mouseover', handleMouseEnter );
+				highlightEl?.addEventListener?.( 'mouseover', handleMouseEnter );
 				highlightEl?.removeEventListener?.( 'mouseleave', handleMouseLeave );
 				highlightEl?.addEventListener?.( 'mouseleave', handleMouseLeave );
 			} );

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx

@@ -32,11 +32,16 @@ export default function Highlight() {
 		return isHighlightHover || isPopoverHover;
 	}, [] );
 
-	const anchor = useSelect( select => {
-		return ( select( 'jetpack/ai-breve' ) as BreveSelect ).getPopoverAnchor();
+	const { target: anchor, virtual } = useSelect( select => {
+		return (
+			( select( 'jetpack/ai-breve' ) as BreveSelect ).getPopoverAnchor() ?? {
+				target: null,
+				virtual: null,
+			}
+		);
 	}, [] );
 
-	const isPopoverOpen = popoverOpen && anchor;
+	const isPopoverOpen = popoverOpen && virtual;
 
 	const selectedFeatured = anchor ? ( anchor as HTMLElement )?.getAttribute?.( 'data-type' ) : null;
 
@@ -60,10 +65,10 @@ export default function Highlight() {
 		<>
 			{ isPopoverOpen && (
 				<Popover
-					anchor={ anchor }
+					anchor={ virtual }
 					placement="bottom"
-					offset={ -3 }
 					className="highlight-popover"
+					offset={ 2 }
 					variant="tooltip"
 					animate={ false }
 					focusOnMount={ false }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss

@@ -1,6 +1,6 @@
 @import '../features/features.colors';
 
-[class^="has-proofread-highlight"] {
+[class^='has-proofread-highlight'] {
 	border-bottom: 3px solid;
 	@include features-colors( ( 'border-bottom-color' ) );
 }
@@ -63,6 +63,5 @@
 		display: flex;
 		padding: 8px 12px;
 		white-space: nowrap;
-		margin-top: 8px;
 	}
 }

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/actions.ts

@@ -19,23 +19,10 @@ export function setPopoverHover( isHover: boolean ) {
 	};
 }
 
-export function setPopoverAnchor( anchor: HTMLElement | EventTarget, level: number ) {
+export function setPopoverAnchor( anchor: HTMLElement | EventTarget ) {
 	return {
 		type: 'SET_POPOVER_ANCHOR',
 		anchor,
-		level,
-	};
-}
-
-export function increasePopoverLevel() {
-	return {
-		type: 'INCREASE_POPOVER_LEVEL',
-	};
-}
-
-export function decreasePopoverLevel() {
-	return {
-		type: 'DECREASE_POPOVER_LEVEL',
 	};
 }
 

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/reducer.ts

@@ -77,41 +77,16 @@ export function popover(
 			return {
 				...state,
 				isPopoverHover: action.isHover,
-				frozenAnchor: action.isHover ? ( state.anchors ?? [] )[ ( state.level ?? 1 ) - 1 ] : null,
 			};
 
 		case 'SET_POPOVER_ANCHOR': {
 			if ( ! action.anchor ) {
 				return state;
 			}
 
-			const anchors = [ ...( state.anchors ?? [] ) ];
-
-			anchors[ Math.max( ( state.level ?? 1 ) - 1, 0 ) ] = action.anchor;
-
-			return {
-				...state,
-				anchors,
-			};
-		}
-
-		case 'INCREASE_POPOVER_LEVEL': {
-			const level = ( state.level ?? 0 ) + 1;
-
-			return {
-				...state,
-				level,
-			};
-		}
-
-		case 'DECREASE_POPOVER_LEVEL': {
-			const level = Math.max( ( state.level ?? 1 ) - 1, 0 );
-			const anchors = ( state.anchors ?? [] ).slice( 0, level );
-
 			return {
 				...state,
-				level,
-				anchors,
+				anchor: action.anchor,
 			};
 		}
 	}

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts

@@ -1,7 +1,7 @@
 /**
  * Types
  */
-import type { BreveState } from '../types';
+import type { Anchor, BreveState } from '../types';
 
 // POPOVER
 
@@ -13,15 +13,8 @@ export function isPopoverHover( state: BreveState ) {
 	return state.popover?.isPopoverHover;
 }
 
-export function getPopoverAnchor( state: BreveState ): HTMLElement | EventTarget | null {
-	if ( state.popover?.frozenAnchor ) {
-		return state.popover.frozenAnchor;
-	}
-
-	// Returns the last non-nullish anchor in the array
-	return (
-		( state.popover?.anchors ?? [] ) as Array< HTMLElement | EventTarget | null >
-	 ).reduceRight( ( acc, anchor ) => acc ?? anchor, null );
+export function getPopoverAnchor( state: BreveState ): Anchor | null {
+	return state?.popover?.anchor ?? null;
 }
 
 export function getPopoverLevel( state: BreveState ) {

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts

@@ -1,12 +1,19 @@
 export type BreveControls = () => React.JSX.Element;
 
+export type Anchor = {
+	target: HTMLElement;
+	virtual: {
+		getBoundingClientRect: () => DOMRect;
+		contextElement?: HTMLElement;
+	};
+};
+
 export type BreveState = {
 	popover?: {
 		isHighlightHover?: boolean;
 		isPopoverHover?: boolean;
-		anchors?: Array< HTMLElement | EventTarget >;
+		anchor?: Anchor;
 		level?: number;
-		frozenAnchor?: HTMLElement | EventTarget;
 	};
 	configuration?: {
 		enabled?: boolean;
@@ -17,7 +24,7 @@ export type BreveState = {
 export type BreveSelect = {
 	isHighlightHover: () => boolean;
 	isPopoverHover: () => boolean;
-	getPopoverAnchor: () => HTMLElement | EventTarget;
+	getPopoverAnchor: () => Anchor | null;
 	getPopoverLevel: () => number;
 	isProofreadEnabled: () => boolean;
 	isFeatureEnabled: ( feature: string ) => boolean;
@@ -27,7 +34,7 @@ export type BreveSelect = {
 export type BreveDispatch = {
 	setHighlightHover: ( isHover: boolean ) => void;
 	setPopoverHover: ( isHover: boolean ) => void;
-	setPopoverAnchor: ( anchor: HTMLElement | EventTarget ) => void;
+	setPopoverAnchor: ( anchor: Anchor ) => void;
 	increasePopoverLevel: () => void;
 	decreasePopoverLevel: () => void;
 	toggleProofread: ( force?: boolean ) => void;