text-input-guard 0.2.1 → 0.2.2

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

@@ -169,6 +169,7 @@
 			// raw化（送信担当）
 			input.type = "hidden";
 			input.removeAttribute("id");
+			input.removeAttribute("class");
 			input.className = "";
 			input.dataset.tigRole = "raw";
 
@@ -176,6 +177,9 @@
 			if (this.originalId) {
 				input.dataset.tigOriginalId = this.originalId;
 			}
+			if (this.originalClass) {
+				input.dataset.tigOriginalClass = this.originalClass;
+			}
 			if (this.originalName) {
 				input.dataset.tigOriginalName = this.originalName;
 			}
@@ -196,7 +200,10 @@
 				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)) {
@@ -257,6 +264,7 @@
 
 			delete raw.dataset.tigRole;
 			delete raw.dataset.tigOriginalId;
+			delete raw.dataset.tigOriginalClass;
 			delete raw.dataset.tigOriginalName;
 		}
 	}
@@ -450,6 +458,28 @@
 		}
 	}
 
+	/**
+	 * 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
@@ -457,9 +487,12 @@
 	 * @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;
 	}
 
 	/**
@@ -555,7 +588,7 @@
 			/**
 			 * ユーザーが直接入力する表示側要素
 			 * swapしない場合は originalElement と同一
-			 * @type {HTMLElement}
+			 * @type {HTMLInputElement|HTMLTextAreaElement}
 			 */
 			this.displayElement = element;
 
@@ -677,6 +710,12 @@
 			 */
 			this.pendingCompositionCommit = false;
 
+			/**
+			 * selection 更新のフレーム予約ID
+			 * @type {number|null}
+			 */
+			this.selectionFrameId = null;
+
 			/**
 			 * 直前に受理した表示値、正しい情報のスナップショットのような情報（block時の戻し先）
 			 * @type {string}
@@ -722,9 +761,11 @@
 		 * @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
 			};
 		}
@@ -838,6 +879,8 @@
 		 * @returns {void}
 		 */
 		detach() {
+			// 管理マップから削除
+			guardMap.delete(this.displayElement);
 			// イベント解除（displayElementがswap後の可能性があるので先に外す）
 			this.unbindEvents();
 			// swap復元
@@ -898,15 +941,7 @@
 			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);
 		}
 
 		/**
@@ -920,10 +955,6 @@
 			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);
 		}
 
 		/**
@@ -1291,12 +1322,41 @@
 		 * @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);
+			});
 		}
 
 		/**
@@ -7035,7 +7095,7 @@
 						code: "bytes.max_overflow",
 						rule: "bytes",
 						phase: "validate",
-						detail: { max: opt.max, actual: len }
+						detail: { limit: opt.max, actual: len }
 					});
 				}
 			}
@@ -7381,11 +7441,11 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: 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" ;
 
 	exports.ascii = ascii;
 	exports.attach = attach;