Merge pull request #3090 from Parsely/fix/traffic-boost-permalinks

Traffic Boost: Fix permalinks and highlighting

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

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '5a2443845dcf94f0dfd5');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => 'ab56d2f1d28d0b1481e8');

src/UI/class-dashboard-page.php

@@ -132,7 +132,8 @@ public function add_parsely_preview_wrapper( string $content ): string {
 			return $content;
 		}
 
-		return '<div class="wp-parsely-preview-wrapper">' . $content . '</div>';
+		// Add a marker class to the content container and add the wrapper as a sibling.
+		return $content . '<div class="wp-parsely-preview-marker"></div>';
 	}
 
 	/**

src/content-helper/common/base-wordpress-provider.tsx

@@ -67,6 +67,7 @@ export interface Post extends CorePost {
  * @since 3.18.0
  */
 export type HydratedPost = Omit<Post, 'author' | 'categories' | 'tags'> & {
+	link: string;
 	author: User | null;
 	categories: Taxonomy[];
 	tags: Taxonomy[];

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

@@ -117,7 +117,7 @@ export const LinkOptionsPanel = ( {
 				<TextControl
 					label={ __( 'Link', 'wp-parsely' ) }
 					__nextHasNoMarginBottom
-					value={ post?.guid?.raw }
+					value={ post?.link }
 					disabled={ true }
 					onChange={ () => {} } // Disabled, so no need for implementation
 				/>

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

@@ -15,7 +15,7 @@ import { TrafficBoostLink } from '../../provider';
 import { TrafficBoostStore } from '../../store';
 import { useIframeHighlight } from '../hooks/use-iframe-highlight';
 import { TextSelection } from '../preview';
-import { isExternalURL } from '../utils';
+import { getContentArea, isExternalURL } from '../utils';
 import { TextSelectionTooltip } from './text-selection-tooltip';
 
 /**
@@ -242,16 +242,20 @@ export const PreviewIframe = ( {
 		};
 
 		const observer = new MutationObserver( watchForHighlightedElement );
-		observer.observe( iframeDocument.querySelector( '.wp-parsely-preview-wrapper' ) as Element, {
-			childList: true,
-			subtree: true,
-		} );
+		const contentArea = getContentArea( iframeDocument );
 
-		// Try to scroll to the highlighted element immediately.
-		scrollToHighlightedElement();
+		if ( contentArea ) {
+			observer.observe( contentArea, {
+				childList: true,
+				subtree: true,
+			} );
 
-		// Disconnect the observer after a short delay to prevent infinite observation.
-		setTimeout( () => observer.disconnect(), 1000 );
+			// Try to scroll to the highlighted element immediately.
+			scrollToHighlightedElement();
+
+			// Disconnect the observer after a short delay to prevent infinite observation.
+			setTimeout( () => observer.disconnect(), 1000 );
+		}
 	}, [] );
 
 	/**
@@ -269,7 +273,7 @@ export const PreviewIframe = ( {
 		injectHighlightStyles( iframe );
 
 		// Updates the content area ref to the iframe's content area.
-		const contentArea = iframe.contentWindow?.document.querySelector( '.wp-parsely-preview-wrapper' );
+		const contentArea = getContentArea( iframe.contentDocument );
 		if ( contentArea ) {
 			contentAreaRef.current = contentArea;
 		}

src/content-helper/dashboard-page/pages/traffic-boost/preview/components/text-selection-tooltip.tsx

@@ -6,6 +6,7 @@ import { debounce } from '@wordpress/compose';
 import { createRoot, useCallback, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { link, warning } from '@wordpress/icons';
+import { getContentArea } from '../utils';
 
 /**
  * Custom hook to inject styles into the iframe.
@@ -401,11 +402,16 @@ export const TextSelectionTooltip = ( {
 			return;
 		}
 
+		// Get the content area.
+		const contentArea = getContentArea( iframeDocument );
+		if ( ! contentArea ) {
+			return;
+		}
+
 		const range = docSelection.getRangeAt( 0 );
-		const previewWrapper = iframeDocument.querySelector( '.wp-parsely-preview-wrapper' );
 
-		// Check if selection is within preview wrapper.
-		if ( ! previewWrapper?.contains( range.commonAncestorContainer ) ) {
+		// Check if selection is within content area.
+		if ( ! contentArea.contains( range.commonAncestorContainer ) ) {
 			return;
 		}
 
@@ -450,7 +456,7 @@ export const TextSelectionTooltip = ( {
 				onSelect={ () => {
 					popoverContainer.classList.add( 'closing' );
 
-					const offset = calculateOffset( iframeDocument, docSelection, previewWrapper );
+					const offset = calculateOffset( iframeDocument, docSelection, contentArea );
 					onTextSelected( docSelection.toString().trim(), offset );
 					docSelection.removeAllRanges();
 
@@ -478,7 +484,7 @@ export const TextSelectionTooltip = ( {
 		};
 
 		updatePosition();
-		previewWrapper.appendChild( highlight );
+		contentArea.appendChild( highlight );
 
 		// Add scroll event listener.
 		const scrollHandler = () => {

src/content-helper/dashboard-page/pages/traffic-boost/preview/preview-post.php

@@ -40,9 +40,6 @@
 		a {
 			cursor: pointer !important;
 		}
-		.wp-parsely-preview-wrapper {
-			padding-bottom: 46px;
-		}
 	</style>
 	<script>
 		// Prevent right click, context menu, and other iframe-specific interactions.
@@ -72,8 +69,9 @@
 	<div class="wp-block editor-post-title editor-post-title__block">
 		<h1 class="editor-post-title__input"><?php echo esc_html( $post_title ?? '' ); ?></h1>
 	</div>
-	<div class="wp-parsely-preview-wrapper">
+	<div class="wp-parsely-preview-content">
 		<?php echo wp_kses_post( $block_content ?? '' ); ?>
+		<div class="wp-parsely-preview-marker"></div>
 	</div>
 	<?php wp_footer(); ?>
 </body>

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

@@ -143,7 +143,7 @@ export const TrafficBoostPreview = ( {
 				post_id: activePost.id,
 				_wpnonce: window._parsely_traffic_boost_preview_nonce ?? '',
 			} )
-			: addQueryArgs( activePost.guid.raw, {
+			: addQueryArgs( activePost.link, {
 				parsely_preview: 'true',
 				_wpnonce: window._parsely_traffic_boost_preview_nonce ?? '',
 			} );
@@ -161,11 +161,11 @@ export const TrafficBoostPreview = ( {
 	 * @since 3.18.0
 	 */
 	const openPostInNewTab = () => {
-		if ( ! activePost?.guid?.raw ) {
+		if ( ! activePost?.link ) {
 			return;
 		}
 
-		window.open( activePost.guid.raw, '_blank', 'noopener' );
+		window.open( activePost.link, '_blank', 'noopener' );
 	};
 
 	/**
@@ -187,11 +187,11 @@ export const TrafficBoostPreview = ( {
 	 * @since 3.18.0
 	 */
 	const openParselyDashboard = () => {
-		if ( ! activePost?.guid?.raw ) {
+		if ( ! activePost?.link ) {
 			return;
 		}
 
-		const parselyDashboardUrl = `https://dash.parsely.com/${ window.wpParselySiteId }/find?url=${ encodeURIComponent( activePost.guid.raw ) }`;
+		const parselyDashboardUrl = `https://dash.parsely.com/${ window.wpParselySiteId }/find?url=${ encodeURIComponent( activePost.link ) }`;
 		window.open( parselyDashboardUrl, '_blank', 'noopener' );
 	};
 

src/content-helper/dashboard-page/pages/traffic-boost/preview/utils.ts

@@ -14,7 +14,7 @@ import { TrafficBoostLink } from '../provider';
  */
 export const isExternalURL = ( link: TrafficBoostLink ): boolean => {
 	try {
-		const urlToCheck = new URL( link.targetPost.guid.raw );
+		const urlToCheck = new URL( link.targetPost.link );
 		const currentURL = new URL( window.location.href );
 
 		return urlToCheck.hostname !== currentURL.hostname;
@@ -23,3 +23,38 @@ export const isExternalURL = ( link: TrafficBoostLink ): boolean => {
 		return true;
 	}
 };
+
+/**
+ * The class name used to mark the content area in the preview.
+ *
+ * @since 3.18.0
+ */
+const PARSELY_PREVIEW_MARKER_CLASS = 'wp-parsely-preview-marker';
+
+/**
+ * Gets the content area element from the document.
+ *
+ * It tries to get the content area by checking for the PARSELY_PREVIEW_MARKER_CLASS.
+ * The content area is the element that contains the marker as a child.
+ *
+ * @since 3.18.0
+ *
+ * @param {Document} document The document to get the content area from.
+ *
+ * @return {Element | null} The content area element or null if not found.
+ */
+export const getContentArea = ( document: Document ): Element | null => {
+	// Get the content area by checking for the PARSELY_PREVIEW_MARKER_CLASS.
+	const contentArea = document.querySelector( `.${ PARSELY_PREVIEW_MARKER_CLASS }` );
+	if ( ! contentArea ) {
+		return null;
+	}
+
+	// If found, get the parent element.
+	const parentElement = contentArea.parentElement;
+	if ( ! parentElement ) {
+		return null;
+	}
+
+	return parentElement;
+};

src/content-helper/dashboard-page/pages/traffic-boost/provider.ts

@@ -88,7 +88,7 @@ export class TrafficBoostProvider extends BaseWordPressProvider {
 	 */
 	private populatePostLinks( post: HydratedPost ): PostLinks {
 		const postContent = post.content.raw;
-		const siteUrl = new URL( post.guid.raw ).hostname;
+		const siteUrl = new URL( post.link ).hostname;
 
 		// Create a new DOMParser instance.
 		const parser = new DOMParser();
@@ -158,7 +158,7 @@ export class TrafficBoostProvider extends BaseWordPressProvider {
 
 		return {
 			uid: sourcePost.id.toString(),
-			href: sourcePost.guid.raw,
+			href: sourcePost.link,
 			text: trimmedText,
 			title: sourcePost.title.raw,
 			offset: 0,