Merge pull request #231 from wpengine/enhancement-better-url-param-handle

fix: URL param handle and move inline JS to a separate file

Author: colinmurphy

plugins/hwp-previews/assets/css/hwp-previews.css

@@ -1,3 +1,9 @@
+.hwp-previews-tag-cloud {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 .form-table td input.hwp-previews-url {
 	width: calc(99% - 24px);
 	display: inline-block;

plugins/hwp-previews/assets/js/hwp-previews.js

@@ -0,0 +1,43 @@
+document.addEventListener("DOMContentLoaded", () => {
+	const buttons = document.querySelectorAll(".hwp-previews-insert-tag");
+	const input = document.querySelector(".hwp-previews-url");
+
+	function setTouched() {
+		this.setAttribute("data-touched", "true");
+		this.removeEventListener("focus", setTouched);
+	}
+
+	function insertTag() {
+		const tag = this.textContent.trim();
+		const isTouched = input.dataset.touched;
+
+		if (!input) return;
+
+		// Get cursor position
+		let cursorPos = input.selectionEnd;
+
+		// If cursor position is at the start, set it to the end of the input value
+		if (cursorPos === 0 && !isTouched) cursorPos = input.value.length;
+
+		// Split text at cursor position
+		const textBefore = input.value.substring(0, cursorPos);
+		const textAfter = input.value.substring(cursorPos);
+
+		// Insert link text at cursor position
+		input.value = textBefore + tag + textAfter;
+
+		// Set cursor position after inserted text
+		const newCursorPos = cursorPos + tag.length;
+		input.setSelectionRange(newCursorPos, newCursorPos);
+
+		// Focus the input
+		input.focus();
+	}
+
+	// Mark the input as touched to prevent inserting at the start
+	input.addEventListener("focus", setTouched);
+
+	for (const button of buttons) {
+		button.addEventListener("click", insertTag);
+	}
+});

plugins/hwp-previews/src/Admin/Settings/Templates/settings-page-main.php

@@ -45,32 +45,12 @@
 						<div class="postbox">
 							<h2><?php esc_html_e( 'Available Preview URL Parameters', 'hwp-previews' ); ?></h2>
 							<div class="inside">
-								<div class="tag-cloud">
+								<div class="hwp-previews-tag-cloud">
 									<?php foreach ( $hwp_previews_params as $hwp_previews_param_name => $hwp_previews_param_desc ) : ?>
-										<a href="#" class="button button-secondary"
-										   title="<?php echo esc_attr( $hwp_previews_param_desc ); ?>"
-										   style="margin:0 5px 10px 0; font-size: 16px" onclick="
-												const input = document.querySelector('.hwp-previews-url');
-												const linkText = this.textContent.trim();
-
-												// Get cursor position
-												const cursorPos = input.selectionStart;
-
-												// Split text at cursor position
-												const textBefore = input.value.substring(0, cursorPos);
-												const textAfter = input.value.substring(cursorPos);
-
-												// Insert link text at cursor position
-												input.value = textBefore + linkText + textAfter;
-
-												// Set cursor position after inserted text
-												const newCursorPos = cursorPos + linkText.length;
-												input.setSelectionRange(newCursorPos, newCursorPos);
-
-												// Focus the input
-												input.focus();">
+										<button type="button" class="button button-secondary hwp-previews-insert-tag"
+											title="<?php echo esc_attr( $hwp_previews_param_desc ); ?>">
 											<?php echo esc_html( "{{$hwp_previews_param_name}}" ); ?>
-										</a>
+										</button>
 									<?php endforeach; ?>
 								</div>
 							</div>