Merge pull request #3469 from Parsely/fix/outbound-link-highlights

Author: acicovic

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' => 'd32bef74f4fde0b9ec6b');
+<?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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -67,6 +67,7 @@ export const LinkCounter = ( {
 		smart: 0,
 	} );
 
+	const storePreviewLinkType = useSelect( ( select ) => select( TrafficBoostStore ).getPreviewLinkType(), [] );
 	const { setPreviewLinkType } = useDispatch( TrafficBoostStore );
 
 	useEffect( () => {
@@ -108,6 +109,17 @@ export const LinkCounter = ( {
 		setPreviewLinkType( initialSelectedLinkType );
 	}, [ initialSelectedLinkType, setPreviewLinkType ] );
 
+	/**
+	 * Updates the selected link type when changed externally via the store.
+	 *
+	 * @since 3.20.1
+	 */
+	useEffect( () => {
+		if ( storePreviewLinkType !== selectedLinkType ) {
+			setSelectedLinkType( storePreviewLinkType );
+		}
+	}, [ selectedLinkType, storePreviewLinkType ] );
+
 	/**
 	 * Handles click events on link type buttons.
 	 *

src/content-helper/dashboard-page/pages/traffic-boost/preview/components/link-counter.tsx

@@ -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">