Highlight spans on hover

Author: sirreal

html-api-debugger/interactivity.php

@@ -52,8 +52,6 @@ function generate_page( string $html, array $options ): string {
 			'hasMutatedDom' => false,
 			'html' => $html,
 			'htmlapiResponse' => $htmlapi_response,
-			'span' => false,
-			'hoverSpan' => $htmlapi_response['html'],
 
 			'showClosers' => false,
 			'showInvisible' => false,
@@ -131,13 +129,17 @@ class="html-api-debugger-container html-api-debugger--grid"
 	<div class="full-width html-api-debugger--grid">
 		<div>
 			<h2>Interpreted by HTML API</h2>
-			<div <?php wp_on_directive( 'click', 'handleSpanClick' ); ?>>
+			<div
+				<?php
+					wp_on_directive( 'mouseover', 'handleSpanOver' );
+					wp_on_directive( 'mouseleave', 'handleSpanClear' );
+				?>
+			>
 				<pre class="error-holder" data-wp-bind--hidden="!state.htmlapiResponse.error" data-wp-text="state.htmlapiResponse.error"></pre>
 				<div data-wp-bind--hidden="state.htmlapiResponse.error">
 					<ul id="html_api_result_holder" data-wp-ignore></ul>
 				</div>
 			</div>
-			<p>Click a node above to see its span details below.</p>
 		</div>
 		<div>
 			<h2>Interpreted from DOM</h2>
@@ -166,20 +168,8 @@ class="html-api-debugger-container html-api-debugger--grid"
 		</div>
 
 		<div>
-			<div data-wp-bind--hidden="state.span">
-				<h2>Processed HTML</h2>
-				<pre class="html-text" data-wp-text="state.hoverSpan"></pre>
-			</div>
-
-			<div data-wp-bind--hidden="!state.span">
-				<h2>Processed HTML selected span</h2>
-				<button <?php wp_on_directive( 'click', 'clearSpan' ); ?> type="button">Clear span selection 🧹</button>
-				<div class="htmlSpanContainer">
-					<pre class="html-text html-span" data-wp-text="state.hoverSpanSplit.0"></pre>
-					<pre class="html-text html-span html selected span" data-wp-text="state.hoverSpanSplit.1"></pre>
-					<pre class="html-text html-span" data-wp-text="state.hoverSpanSplit.2"></pre>
-				</div>
-			</div>
+			<h2>Processed HTML</h2>
+			<pre class="html-text" id="processed-html" data-wp-ignore><?php echo esc_html( $html ); ?></pre>
 		</div>
 
 		<div>

html-api-debugger/readme.txt

@@ -87,3 +87,4 @@ Add a page to wp-admin for debugging the HTML API.
 * Register script modules unconditionally.
 
 = 1.8 =
+* Highlight spans in HTML input on hover.

html-api-debugger/style.css

@@ -78,6 +78,12 @@
       color: white;
     }
   }
+
+  .highlight-span {
+    box-shadow:
+      0 0 2px 1px hotpink,
+      inset 0 0 2px 1px hotpink;
+  }
 }
 
 #rendered_iframe {
@@ -91,19 +97,6 @@
   text-wrap: pretty;
 }
 
-.htmlSpanContainer {
-  display: flex;
-  gap: 0.2em;
-}
-
-.html-span {
-  flex: 1 1 0;
-}
-
-.html-span:nth-child(2) {
-  box-shadow: 3px 3px 3px hotpink;
-}
-
 #html_api_result_holder,
 #dom_tree {
   border: inset 1px;

html-api-debugger/view.js

@@ -76,7 +76,7 @@ let mutationObserver = null;
  * @property {boolean} hasMutatedDom
  * @property {HTMLAPISpan|false} span
  * @property {string} hoverSpan
- * @property {readonly []|readonly [string,string,string]} hoverSpanSplit
+ * @property {(span:HTMLAPISpan) => readonly [string,string,string]} hoverSpanSplit
  */
 
 /**
@@ -200,16 +200,17 @@ const store = createStore(NS, {
 			return store.state.showInvisible ? replaceInvisible(html) : html;
 		},
 
-		get hoverSpanSplit() {
+		/** @param {HTMLAPISpan} span */
+		hoverSpanSplit(span) {
 			/** @type {string | undefined} */
 			const html = store.state.htmlapiResponse.html;
-			if (!html || !store.state.span) {
-				return /** @type {const} */ ([]);
+			if (!html) {
+				return /** @type {const} */ (['', '', '']);
 			}
 			const buf = new TextEncoder().encode(html);
 			const decoder = new TextDecoder();
 
-			const { start: spanStart, length } = store.state.span;
+			const { start: spanStart, length } = span;
 			const spanEnd = spanStart + length;
 			const split = /** @type {const} */ ([
 				decoder.decode(buf.slice(0, spanStart)),
@@ -223,6 +224,42 @@ const store = createStore(NS, {
 				: split;
 		},
 	},
+
+	/** @param {MouseEvent} e */
+	handleSpanClear(e) {
+		/** @type {HTMLElement} */ (
+			document.getElementById('processed-html')
+		).textContent = store.state.hoverSpan;
+	},
+
+	/** @param {MouseEvent} e */
+	handleSpanOver(e) {
+		const t = /** @type {HTMLElement} */ (e.target);
+		const { spanStart, spanLength } = t.dataset;
+		if (!t || !spanStart || !spanLength) {
+			return;
+		}
+
+		console.log('t: %o, ct: %o', e.target, e.currentTarget);
+		// @ts-expect-error 3-tuple to 3-tuple
+		const [before, current, after] = /** @type {readonly [Text,Text,Text]} */ (
+			store.state
+				.hoverSpanSplit({
+					start: Number(spanStart),
+					length: Number(spanLength),
+				})
+				.map((text) => document.createTextNode(text))
+		);
+		const highlightCurrent = document.createElement('span');
+		highlightCurrent.className = 'highlight-span';
+		highlightCurrent.appendChild(current);
+
+		const el = /** @type {HTMLElement} */ (
+			document.getElementById('processed-html')
+		);
+		el.replaceChildren(before, highlightCurrent, after);
+	},
+
 	run() {
 		// The HTML parser will replace null bytes from the HTML.
 		// Force print them if we have null bytes.
@@ -292,10 +329,6 @@ const store = createStore(NS, {
 		);
 	},
 
-	clearSpan() {
-		store.state.span = false;
-	},
-
 	/** @param {InputEvent} e */
 	handleInput: function* (e) {
 		const val = /** @type {HTMLTextAreaElement} */ (e.target).value;
@@ -340,20 +373,6 @@ const store = createStore(NS, {
 		}
 	},
 
-	/** @param {Event} e */
-	handleSpanClick(e) {
-		const t = e.target;
-		if (t && t instanceof HTMLElement) {
-			/** @type {HTMLElement|null} */
-			const spanEl = t.closest('[data-span-start]');
-			if (spanEl) {
-				const start = Number(spanEl.dataset['spanStart']);
-				const length = Number(spanEl.dataset['spanLength']);
-				store.state.span = { start, length };
-			}
-		}
-	},
-
 	handleShowInvisibleClick: getToggleHandler('showInvisible'),
 	handleShowClosersClick: getToggleHandler('showClosers'),
 	handleShowVirtualClick: getToggleHandler('showVirtual'),