text-input-guard 0.2.1 → 0.2.2

package/dist/esm/text-input-guard.js

@@ -163,6 +163,7 @@ class SwapState {
 		// raw化（送信担当）
 		input.type = "hidden";
 		input.removeAttribute("id");
+		input.removeAttribute("class");
 		input.className = "";
 		input.dataset.tigRole = "raw";
 
@@ -170,6 +171,9 @@ class SwapState {
 		if (this.originalId) {
 			input.dataset.tigOriginalId = this.originalId;
 		}
+		if (this.originalClass) {
+			input.dataset.tigOriginalClass = this.originalClass;
+		}
 		if (this.originalName) {
 			input.dataset.tigOriginalName = this.originalName;
 		}
@@ -190,7 +194,10 @@ class SwapState {
 			display.id = this.originalId;
 		}
 
-		display.className = this.originalClass ?? "";
+		if (this.originalClass) {
+			display.className = this.originalClass;
+		}
+
 		display.value = raw.value;
 
 		for (const [name, v] of Object.entries(this.originalUiAttrs)) {
@@ -251,6 +258,7 @@ class SwapState {
 
 		delete raw.dataset.tigRole;
 		delete raw.dataset.tigOriginalId;
+		delete raw.dataset.tigOriginalClass;
 		delete raw.dataset.tigOriginalName;
 	}
 }
@@ -444,6 +452,28 @@ function warnLog(msg, warn) {
 	}
 }
 
+/**
+ * input / textarea 要素と内部 Guard インスタンスの対応表
+ *
+ * - key: displayElement
+ * - value: InputGuard（内部実装）
+ *
+ * @type {WeakMap<HTMLInputElement|HTMLTextAreaElement, InputGuard>}
+ */
+const guardMap = new WeakMap();
+
+document.addEventListener("selectionchange", () => {
+	const el = document.activeElement;
+	if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+		return;
+	}
+	const inputGuard = guardMap.get(el);
+	if (!inputGuard) {
+		return;
+	}
+	inputGuard.onSelectionChange();
+});
+
 /**
  * 指定した1要素に対してガードを適用し、Guard API を返す
  * @param {HTMLInputElement|HTMLTextAreaElement} element
@@ -451,9 +481,12 @@ function warnLog(msg, warn) {
  * @returns {Guard}
  */
 function attach(element, options = {}) {
-	const guard = new InputGuard(element, options);
-	guard.init();
-	return guard.getGuard();
+	const inputGuard = new InputGuard(element, options);
+	inputGuard.init();
+	const guard = inputGuard.getGuard();
+	const display = guard.getDisplayElement();
+	guardMap.set(display, inputGuard);
+	return guard;
 }
 
 /**
@@ -549,7 +582,7 @@ class InputGuard {
 		/**
 		 * ユーザーが直接入力する表示側要素
 		 * swapしない場合は originalElement と同一
-		 * @type {HTMLElement}
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
 		 */
 		this.displayElement = element;
 
@@ -671,6 +704,12 @@ class InputGuard {
 		 */
 		this.pendingCompositionCommit = false;
 
+		/**
+		 * selection 更新のフレーム予約ID
+		 * @type {number|null}
+		 */
+		this.selectionFrameId = null;
+
 		/**
 		 * 直前に受理した表示値、正しい情報のスナップショットのような情報（block時の戻し先）
 		 * @type {string}
@@ -716,9 +755,11 @@ class InputGuard {
 	 * @returns {SelectionState}
 	 */
 	readSelection(el) {
+		const start = el.selectionStart ?? 0;
+		const end = el.selectionEnd ?? start;
 		return {
-			start: el.selectionStart,
-			end: el.selectionEnd,
+			start,
+			end,
 			direction: el.selectionDirection
 		};
 	}
@@ -832,6 +873,8 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	detach() {
+		// 管理マップから削除
+		guardMap.delete(this.displayElement);
 		// イベント解除（displayElementがswap後の可能性があるので先に外す）
 		this.unbindEvents();
 		// swap復元
@@ -892,15 +935,7 @@ class InputGuard {
 		this.displayElement.addEventListener("input", this.onInput);
 		this.displayElement.addEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.addEventListener("blur", this.onBlur);
-
-		// フォーカスで編集用に戻す
 		this.displayElement.addEventListener("focus", this.onFocus);
-
-		// キャレット/選択範囲の変化を拾う（block時の不自然ジャンプ対策）
-		this.displayElement.addEventListener("keyup", this.onSelectionChange);
-		this.displayElement.addEventListener("mouseup", this.onSelectionChange);
-		this.displayElement.addEventListener("select", this.onSelectionChange);
-		this.displayElement.addEventListener("focus", this.onSelectionChange);
 	}
 
 	/**
@@ -914,10 +949,6 @@ class InputGuard {
 		this.displayElement.removeEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.removeEventListener("blur", this.onBlur);
 		this.displayElement.removeEventListener("focus", this.onFocus);
-		this.displayElement.removeEventListener("keyup", this.onSelectionChange);
-		this.displayElement.removeEventListener("mouseup", this.onSelectionChange);
-		this.displayElement.removeEventListener("select", this.onSelectionChange);
-		this.displayElement.removeEventListener("focus", this.onSelectionChange);
 	}
 
 	/**
@@ -1285,12 +1316,41 @@ class InputGuard {
 	 * @returns {void}
 	 */
 	onSelectionChange() {
-		// IME変換中は無視（この間はキャレット位置が不安定になることがあるため）
-		if (this.composing) {
-			return;
+		const requestFrame =
+			typeof requestAnimationFrame === "function"
+				? requestAnimationFrame
+				: (
+					/** @param {FrameRequestCallback} cb */
+					(cb) => setTimeout(cb, 0)
+				);
+
+		const cancelFrame =
+			typeof cancelAnimationFrame === "function"
+				? cancelAnimationFrame
+				: clearTimeout;
+
+		// すでに予約済みならキャンセル（selectionchange は連続発火するため）
+		if (this.selectionFrameId != null) {
+			cancelFrame(this.selectionFrameId);
 		}
-		const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-		this.lastAcceptedSelection = this.readSelection(el);
+
+		this.selectionFrameId = requestFrame(() => {
+			this.selectionFrameId = null;
+
+			// IME変換中は無視（キャレット位置が不安定になるため）
+			if (this.composing) {
+				return;
+			}
+
+			const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
+
+			// 要素がフォーカスされていない場合は無視
+			if (document.activeElement !== el) {
+				return;
+			}
+
+			this.lastAcceptedSelection = this.readSelection(el);
+		});
 	}
 
 	/**
@@ -7029,7 +7089,7 @@ function bytes(options = {}) {
 					code: "bytes.max_overflow",
 					rule: "bytes",
 					phase: "validate",
-					detail: { max: opt.max, actual: len }
+					detail: { limit: opt.max, actual: len }
 				});
 			}
 		}
@@ -7375,10 +7435,10 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""0.2.1"" を package.json の version に置換
+ * 例: rollup replace で ""0.2.2"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "0.2.1" ;
+const version = "0.2.2" ;
 
 export { ascii, attach, attachAll, autoAttach, bytes, comma, digits, filter, imeOff, kana, length, numeric, prefix, rules, suffix, trim, version, width };