Move existing link highlight-specific code to useExistingLinkHighlight()

Author: alecgeatches

build/content-helper/dashboard-page.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '2bf214d8db4f3289591c');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '1584528d4b5b04a117a7');

build/content-helper/dashboard-page.js

@@ -19,6 +19,7 @@ import { TextSelection } from '../preview';
 import { getContentArea, isExternalURL } from '../utils';
 import { PreviewActions } from './preview-actions';
 import { TextSelectionTooltip } from './text-selection-tooltip';
+import { useExistingLinkHighlight } from '../hooks/use-existing-link-highlight';
 
 /**
  * Props structure for PreviewIframe.
@@ -92,16 +93,18 @@ export const PreviewIframe = ( {
 	}, [ previewUrl ] );
 
 	// Create an actions bar to be mounted in the iframe with useIframeHighlight().
-	const actionsBar = <PreviewActions
-		activeLink={ activeLink }
-		onAccept={ onAccept }
-		onDiscard={ onDiscard }
-		onUpdateLink={ onUpdateLink }
-		onRemove={ onRemove }
-		onRestoreOriginal={ onRestoreOriginal }
-		selectedText={ selectedText ?? null }
-		iframeRef={ iframeRef }
-	/>;
+	const actionsBar = useMemo( () => (
+		<PreviewActions
+			activeLink={ activeLink }
+			onAccept={ onAccept }
+			onDiscard={ onDiscard }
+			onUpdateLink={ onUpdateLink }
+			onRemove={ onRemove }
+			onRestoreOriginal={ onRestoreOriginal }
+			selectedText={ selectedText ?? null }
+			iframeRef={ iframeRef }
+		/>
+	), [ activeLink, onAccept, onDiscard, onUpdateLink, onRemove, onRestoreOriginal, selectedText, iframeRef ] );
 
 	/**
 	 * Highlights the smart link in the iframe.
@@ -111,7 +114,6 @@ export const PreviewIframe = ( {
 	const {
 		injectHighlightStyles,
 		highlightSmartLink,
-		highlightLinkType,
 		removeSmartLinkHighlights,
 	} = useIframeHighlight( {
 		iframeRef,
@@ -123,6 +125,15 @@ export const PreviewIframe = ( {
 		actionsBar,
 	} );
 
+	const {
+		injectExistingLinkHighlightStyles,
+		highlightExistingLinkType,
+	} = useExistingLinkHighlight( {
+		iframeRef,
+		contentAreaRef,
+		activeLink,
+	} );
+
 	/**
 	 * Hides the admin bar from the iframe if the preview is in frontend mode.
 	 *
@@ -298,6 +309,7 @@ export const PreviewIframe = ( {
 		}
 
 		injectHighlightStyles( iframe );
+		injectExistingLinkHighlightStyles( iframe );
 
 		// Updates the content area ref to the iframe's content area.
 		const contentArea = getContentArea( iframe.contentDocument );
@@ -311,19 +323,17 @@ export const PreviewIframe = ( {
 		}
 
 		hideAdminBar( iframe );
-		highlightLinkType( iframe, selectedLinkType );
 		disableNavigation( iframe );
 
 		onLoadingChange( false );
 		jumpToSmartLink( iframe );
 	}, [ contentAreaRef,
 		disableNavigation,
 		hideAdminBar,
-		highlightLinkType,
 		injectHighlightStyles,
+		injectExistingLinkHighlightStyles,
 		jumpToSmartLink,
 		onLoadingChange,
-		selectedLinkType,
 	] );
 
 	/**
@@ -399,8 +409,8 @@ export const PreviewIframe = ( {
 			return;
 		}
 
-		highlightLinkType( iframe, selectedLinkType );
-	}, [ contentAreaRef, highlightLinkType, isLoading, selectedLinkType ] );
+		highlightExistingLinkType( iframe, selectedLinkType );
+	}, [ contentAreaRef, highlightExistingLinkType, isLoading, selectedLinkType ] );
 
 	return (
 		<div className="wp-parsely-preview">