import React, { forwardRef, useState, useEffect, useRef, useCallback } from 'react'; import debounce from 'lodash/debounce'; import TextInput from '@/components/Inputs/TextInput'; import FieldWrapper from '@/components/Fields/FieldWrapper'; import { __, _n, sprintf } from '@wordpress/i18n'; import { addQueryArgs } from '@wordpress/url'; import useWordPressData from '@/hooks/useWordPressData'; import Icon from '@/utils/Icon'; import HelpTooltip from '@/components/Common/HelpTooltip'; const DEBOUNCE_DELAY = 300; const SelectorField = forwardRef( ( { field, label, context: originalContext, className, goal, onChange, ...props }, ref ) => { const inputId = props.id || field.name; const { siteInfo } = useWordPressData(); const [ previewDisplayLoggedOut, setPreviewDisplayLoggedOut ] = useState( true ); const siteUrl = siteInfo?.url; const baseUrl = 'page' === goal.page_or_website ? siteUrl + goal.specific_page : siteUrl; const previewURL = addQueryArgs( baseUrl, { burst_preview: '1', burst_force_logged_out: previewDisplayLoggedOut ? '1' : '0', nonce: burst_settings.burst_nonce }); const displayPreviewURL = addQueryArgs( baseUrl, {}); const [ inputValue, setInputValue ] = useState( field.value || '' ); const [ error, setError ] = useState( '' ); const [ isLoading, setIsLoading ] = useState( false ); const [ previewData, setPreviewData ] = useState({ count: null, previews: [], currentIndex: 0 }); const [ warning, setWarning ] = useState( '' ); const hiddenIframeRef = useRef( null ); const previewRef = useRef( null ); const validateSyntax = useCallback( ( selector ) => { if ( ! selector ) { return ''; } try { document.querySelectorAll( selector ); return ''; } catch ( e ) { return `Invalid selector: ${e.message}`; } }, []); const runTest = useCallback( ( selector ) => { if ( ! selector ) { setPreviewData({ count: null, previews: [], currentIndex: 0 }); return; } const syntaxError = validateSyntax( selector ); if ( syntaxError ) { setError( syntaxError ); setPreviewData({ count: null, previews: [], currentIndex: 0 }); return; } const iframe = hiddenIframeRef.current; if ( ! iframe ) { return; } try { const doc = iframe.contentDocument || iframe.contentWindow.document; const nodes = Array.from( doc.querySelectorAll( selector ) ); const count = nodes.length; if ( 0 === count ) { setPreviewData({ count: 0, previews: [], currentIndex: 0 }); setWarning( '' ); return; } const headHTML = '' + Array.from( doc.head.children ) .map( ( el ) => el.outerHTML ) .join( '' ) + ''; const previews = nodes.map( ( node ) => { const bodyHTML = `${node.outerHTML}`; return ` ${headHTML} ${bodyHTML} `; }); setPreviewData({ count, previews, currentIndex: 0 }); setError( '' ); if ( 0 < nodes.length ) { const style = getComputedStyle( nodes[0]); if ( 'none' === style.display || 'hidden' === style.visibility ) { setWarning( __( 'Warning: The current element is hidden via CSS.', 'burst-statistics' ) ); } else { setWarning( '' ); } } } catch ( e ) { setError( `Error testing selector: ${e.message}` ); setPreviewData({ count: null, previews: [], currentIndex: 0 }); } }, [ validateSyntax ] ); const debouncedTestRef = useRef( null ); useEffect( () => { const fn = debounce( ( selector ) => { runTest( selector ); setIsLoading( false ); }, DEBOUNCE_DELAY ); debouncedTestRef.current = fn; return () => fn.cancel(); }, [ runTest ]); const triggerDebouncedTest = useCallback( ( selector ) => { debouncedTestRef.current?.( selector ); }, []); // When input changes: trigger debounced test useEffect( () => { setIsLoading( true ); triggerDebouncedTest( inputValue ); }, [ inputValue, triggerDebouncedTest ]); const handleInputChange = ( e ) => { const selector = e.target.value; setInputValue( selector ); onChange( selector ); setError( validateSyntax( selector ) ); }; // Navigate between previews const navigatePreview = ( direction ) => { setPreviewData( ( prev ) => { const { previews, currentIndex } = prev; if ( ! previews.length ) { return prev; } const newIndex = 'next' === direction ? ( currentIndex + 1 ) % previews.length : ( currentIndex - 1 + previews.length ) % previews.length; // Update preview data with new index const updatedData = { ...prev, currentIndex: newIndex }; // Check visibility of the current element in original document const iframe = hiddenIframeRef.current; if ( iframe ) { try { const doc = iframe.contentDocument || iframe.contentWindow.document; const nodes = Array.from( doc.querySelectorAll( inputValue ) ); const node = nodes[newIndex]; if ( node ) { const style = getComputedStyle( node ); if ( 'none' === style.display || 'hidden' === style.visibility ) { setWarning( __( 'Warning: this element might be hidden via CSS.', 'burst-statistics' ) ); } else { setWarning( '' ); } } } catch ( e ) {} // eslint-disable-line no-empty, @typescript-eslint/no-unused-vars } return updatedData; }); }; // Build context message const computedContext = error ? originalContext : null != previewData.count ? sprintf( /* translators: 1: number of elements found 2: the URL of the preview 3: logged in/out status */ _n( 'Found %1$d element on %2$s %3$s', 'Found %1$d elements on %2$s %3$s', previewData.count, 'burst-statistics' ), previewData.count, displayPreviewURL, previewDisplayLoggedOut ? __( '(Logged out)', 'burst-statistics' ) : __( '(Logged in)', 'burst-statistics' ) ) : originalContext; const helpText = ( <>

{__( 'Selector Examples:', 'burst-statistics' )}

); return ( {/* Input field with loading indicator */}
{/* Loading indicator */} {isLoading && (
)}
{/* Preview section */}
{/* Preview navigation header */}
{computedContext}
{1 < previewData.previews.length && (
{previewData.currentIndex + 1}/ {previewData.previews.length}
)} {/* always last column in case there are no previews */}
{/* Logged out mode */}
{/* Preview iframe */} {0 < previewData.previews.length && ! error && (