AI Proofread: Only point to cursor if long sentence

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

@@ -10,7 +10,7 @@ import features from './index';
 /**
  * Types
  */
-import type { BreveDispatch } from '../types';
+import type { BreveDispatch, Anchor } from '../types';
 
 let highlightTimeout: number;
 let anchorTimeout: number;
@@ -21,14 +21,17 @@ function handleMouseEnter( e: React.MouseEvent ) {
 
 	anchorTimeout = setTimeout( () => {
 		const el = e.target as HTMLElement;
-		const rect = el.getBoundingClientRect();
-		const diff = e.clientY - Math.floor( rect.top );
-		const offset = diff === 0 ? 10 : 0;
+		let virtual = el;
 
-		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( true );
-		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setPopoverAnchor( {
-			target: e.target as HTMLElement,
-			virtual: {
+		const words = el?.innerText?.match?.( /\b\w+\b/g );
+		const shouldPointToCursor = words?.length > 3;
+
+		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,
@@ -42,8 +45,14 @@ function handleMouseEnter( e: React.MouseEvent ) {
 					} as DOMRect;
 				},
 				contextElement: e.target as HTMLElement,
-			},
-		} as unknown 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 );
 }
 

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,7 +13,7 @@ export function isPopoverHover( state: BreveState ) {
 	return state.popover?.isPopoverHover;
 }
 
-export function getPopoverAnchor( state: BreveState ): HTMLElement | EventTarget | null {
+export function getPopoverAnchor( state: BreveState ): Anchor {
 	return state?.popover?.anchor ?? null;
 }
 

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

@@ -1,10 +1,10 @@
 export type BreveControls = () => React.JSX.Element;
 
-type Anchor = {
+export type Anchor = {
 	target: HTMLElement;
 	virtual: {
 		getBoundingClientRect: () => DOMRect;
-		contextElement: HTMLElement;
+		contextElement?: HTMLElement;
 	};
 };
 
@@ -34,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;