AI Proofread: Fix highlight on formatted texts (#38540)

* AI Proofread: Get closest highlight element * changelog
Automattic · Jul 25, 2024 · 8566bd5 · 8566bd5
1 parent 2fbdedb
commit 8566bd5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-ai-proofread-popover-hover b/projects/plugins/jetpack/changelog/fix-ai-proofread-popover-hover
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Fix highlight not working on formatted texts
diff --git a/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts b/...lugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/features/events.ts
@@ -18,6 +18,18 @@ let anchorTimeout: number;
 
 let isFirstHover = ! localStorage.getItem( 'jetpack-ai-breve-first-hover' );
 
+function getHighlightEl( el: HTMLElement ) {
+	if ( el === document.body ) {
+		return null;
+	}
+
+	if ( el.getAttribute( 'data-type' ) === null ) {
+		return getHighlightEl( el.parentElement );
+	}
+
+	return el;
+}
+
 async function handleMouseEnter( e: MouseEvent ) {
 	if ( isFirstHover ) {
 		await showAiAssistantSection();
@@ -45,7 +57,7 @@ async function handleMouseEnter( e: MouseEvent ) {
 			return;
 		}
 
-		const el = e.target as HTMLElement;
+		const el = getHighlightEl( e.target as HTMLElement );
 		let virtual = el;
 
 		const shouldPointToCursor = el.getAttribute( 'data-type' ) === 'long-sentences';
@@ -74,7 +86,7 @@ async function handleMouseEnter( e: MouseEvent ) {
 
 		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setHighlightHover( true );
 		( dispatch( 'jetpack/ai-breve' ) as BreveDispatch ).setPopoverAnchor( {
-			target: e.target as HTMLElement,
+			target: el,
 			virtual: virtual,
 		} as Anchor );
 	}, 100 );