Change how the post content area is fetched

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/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/utils.ts

@@ -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 first.
+	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;
+};