diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts index defb6c9572405..edce1df097ad5 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts +++ b/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 ); } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts index 48906d192aa33..87f83a68d7d9b 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/store/selectors.ts +++ b/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; } diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts index e314e5f02f4e9..b9913ea617b96 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/types.ts +++ b/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;