text-input-guard 1.0.0 → 1.0.2

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

@@ -112,11 +112,16 @@ class SwapState {
 
 		const UI_ATTRS = [
 			"placeholder",
+			"list",
 			"inputmode",
 			"autocomplete",
+			"autocapitalize",
+			"autocorrect",
 			"minlength",
 			"maxlength",
+			"size",
 			"pattern",
+			"dir",
 			"title",
 			"tabindex",
 			"style",
@@ -148,6 +153,7 @@ class SwapState {
 
 		for (const [k, v] of Object.entries(input.dataset)) {
 			if (k.startsWith("tig")) { continue; }
+			if (v == null) { continue; }
 			this.originalDataset[k] = v;
 		}
 	}
@@ -568,7 +574,7 @@ class InputGuard {
 
 		/**
 		 * attach時に登録されたバリデーション結果コールバック
-		 * @type {(result: ValidateResult) => void | undefined}
+		 * @type {((result: ValidateResult) => void) | undefined}
 		 */
 		this.onValidate = options.onValidate;
 
@@ -729,6 +735,11 @@ class InputGuard {
 		 */
 		this.beforeInputSnapshot = null;
 
+		/**
+		 * onBeforeInput イベントが発生したか否か
+		 */
+		this.existBeforeInputEvent = false;
+
 		/**
 		 * ルールからのrevert要求
 		 * @type {RevertRequest|null}
@@ -746,7 +757,7 @@ class InputGuard {
 		this.applySeparateValue();
 		this.bindEvents();
 		// 初期値を評価
-		this.evaluateInput();
+		this.evaluateCommit();
 	}
 
 	/**
@@ -985,12 +996,12 @@ class InputGuard {
 	 */
 	createCtx({ useSnapshot = true } = {}) {
 		const snap = useSnapshot ? this.beforeInputSnapshot : null;
-		const inputType = snap?.inputType ?? "";
-		const insertedText = snap?.insertedText ?? "";
+		let inputType = snap?.inputType ?? "";
+		let insertedText = snap?.insertedText ?? "";
 
 		// 受理済み（正規化済み）の全文を「今回の編集の基準」として使う
 		// display.value はブラウザ側の編集結果が混ざるので、差分再構成の基準にはしない
-		const beforeText = this.lastAcceptedValue ?? "";
+		let beforeText = this.lastAcceptedValue ?? "";
 
 		// selection は2系統ある：
 		// - snapSel: beforeinput 時点で取得した selection（今回の編集の基準点になり得る）
@@ -1026,6 +1037,38 @@ class InputGuard {
 			baseSel = lastSel;
 		}
 
+		// beforeinput がない環境では、差分再構成の基準が「前回の受理値」しかないため、そこから今回の編集内容を推測する必要がある。
+		if (beforeText.length === 0 || !this.existBeforeInputEvent) {
+			const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
+			const current = display.value;
+			// 前回の値がとれないものの、何かしら入力情報がある状態
+			if (current.length > 0) {
+				// 文字列の先頭が前回の受理値と同じなら、末尾に何かしら入力されたと考えられる（オートコンプリート等）
+				if (current.toLocaleLowerCase().startsWith(beforeText.toLocaleLowerCase())) {
+					if (!current.startsWith(beforeText)) {
+						// 文字は同じだが、大文字と小文字の情報が替わっているなどのパターン
+						// 差し代わりが起きているため、前回値は基準にならないと判断して、差分全体を insertedText とする
+						beforeText = "";
+						insertedText = current;
+					} else {
+						// 末尾に追加されたと考えられる部分を insertedText とする
+						// 例: beforeText="abc" → current="abcde" なら、"de" が insertedText
+						insertedText = current.slice(beforeText.length);
+					}
+					// キャレットは前回値の末尾にあると推測する
+					baseSel = /** @type {SelectionState} */ {
+						start: beforeText.length,
+						end: beforeText.length,
+						direction: "none"
+					};
+					inputType = "insertText";
+				}
+			}
+		}
+		// existBeforeInputEvent は、少なくとも1回 beforeinput が発生したかどうかのフラグ
+		// これが false の場合、上記のような「beforeinputがない環境での推測ロジック」を走らせる。
+		this.existBeforeInputEvent = false;
+
 		let replaceStart = baseSel.start ?? 0;
 		let replaceEnd = baseSel.end ?? 0;
 
@@ -1038,10 +1081,10 @@ class InputGuard {
 			if (inputType === "deleteContentBackward") {
 				// Backspace: キャレットの左側1文字を削除
 				replaceStart = Math.max(0, replaceStart - 1);
-				replaceEnd = snapSel.start ?? replaceEnd;
+				replaceEnd = snapSel?.start ?? replaceEnd;
 			} else if (inputType === "deleteContentForward") {
 				// Delete: キャレットの右側1文字を削除
-				replaceStart = snapSel.start ?? replaceStart;
+				replaceStart = snapSel?.start ?? replaceStart;
 				replaceEnd = Math.min(beforeText.length, replaceEnd + 1);
 			}
 			// 追加で拾うならここ：
@@ -1248,16 +1291,23 @@ class InputGuard {
 		// console.log("[text-input-guard] input");
 		// compositionend後に input が来た場合、フォールバックを無効化
 		this.pendingCompositionCommit = false;
-		this.evaluateInput();
+		try {
+			this.evaluateInput();
+		} finally {
+			this.existBeforeInputEvent = false;
+		}
 	}
 
 	/**
 	 * beforeinput：入力が反映される直前に呼ばれる
 	 * - ここでの value/selection が「今回の編集の基準点」になる
-	 * @param {InputEvent} e
+	 * @param {Event} e
 	 * @returns {void}
 	 */
 	onBeforeInput(e) {
+		if (!(e instanceof InputEvent)) {
+			return;
+		}
 		const el = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
 		// 現時点（反映前）の選択範囲
 		const selection = this.readSelection(el);
@@ -1265,6 +1315,7 @@ class InputGuard {
 		const inputType = typeof e.inputType === "string" ? e.inputType : null;
 		/** @type {string|null} */
 		const insertedText = typeof e.data === "string" ? e.data : null;
+		this.existBeforeInputEvent = true;
 		this.beforeInputSnapshot = { selection, inputType, insertedText };
 	}
 
@@ -7435,10 +7486,10 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""1.0.0"" を package.json の version に置換
+ * 例: rollup replace で ""1.0.2"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "1.0.0" ;
+const version = "1.0.2" ;
 
 export { ascii, attach, attachAll, autoAttach, bytes, comma, digits, filter, imeOff, kana, length, numeric, prefix, rules, suffix, trim, version, width };