Store/read selector from URL

Author: sirreal

html-api-debugger/html-api-debugger.php

@@ -113,6 +113,7 @@ function () {
 
 					$options = array(
 						'context_html' => null,
+						'selector' => null,
 					);
 
 					$html = '';
@@ -123,6 +124,9 @@ function () {
 					if ( isset( $_GET['contextHTML'] ) && is_string( $_GET['contextHTML'] ) ) {
 						$options['context_html'] = stripslashes( $_GET['contextHTML'] );
 					}
+					if ( isset( $_GET['selector'] ) && is_string( $_GET['selector'] ) ) {
+						$options['selector'] = stripslashes( $_GET['selector'] );
+					}
 					// phpcs:enable WordPress.Security.NonceVerification.Recommended
 
 					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

html-api-debugger/interactivity.php

@@ -37,6 +37,7 @@ function generate_page( string $html, array $options ): string {
 			'showInvisible' => false,
 			'showVirtual' => false,
 			'contextHTML' => $options['context_html'] ?? '',
+			'selector' => $options['selector'] ?? '',
 
 			'hoverInfo' => 'breadcrumbs',
 			'hoverBreadcrumbs' => true,
@@ -152,7 +153,7 @@ class="context-html"
 				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" data-wp-on-async--input="handleShowInvisibleClick"></label>
 				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" data-wp-on-async--input="handleShowVirtualClick"></label></span>
 				<div data-wp-bind-hidden="!state.htmlapiResponse.supports.selectors">
-					<label>CSS Selectors <textarea placeholder="CSS selector: .my-class" data-wp-on-async--input="handleSelectorChange"></textarea></label>
+					<label>CSS Selectors <textarea placeholder="CSS selector: .my-class" data-wp-on-async--input="handleSelectorChange"><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['selector'] ?? '' ) ); ?></textarea></label>
 				</div>
 			</div>
 			<div>

html-api-debugger/view.js

@@ -49,6 +49,7 @@ let mutationObserver = null;
  *
  * @typedef Supports
  * @property {boolean} create_fragment_advanced
+ * @property {boolean} selectors
  *
  *
  * @typedef HtmlApiResponse
@@ -261,6 +262,9 @@ const store = createStore(NS, {
 			if (store.state.contextHTMLForUse) {
 				searchParams.set('contextHTML', store.state.contextHTMLForUse);
 			}
+			if (store.state.selector) {
+				searchParams.set('selector', store.state.selector);
+			}
 			const base = '/wp-admin/admin.php';
 			const u = new URL(
 				'https://playground.wordpress.net/?plugin=html-api-debugger',
@@ -502,6 +506,7 @@ const store = createStore(NS, {
 		for (const [param, prop] of /** @type {const} */ ([
 			['html', 'html'],
 			['contextHTML', 'contextHTMLForUse'],
+			['selector', 'selector'],
 		])) {
 			if (store.state[prop]) {
 				u.searchParams.set(param, store.state[prop]);