text-input-guard 1.2.0 → 1.2.2

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

@@ -276,7 +276,7 @@
 	}
 
 	/**
-	 * The script is part of JPInputGuard.
+	 * The script is part of TextInputGuard.
 	 *
 	 * AUTHOR:
 	 *  natade-jp (https://github.com/natade-jp)
@@ -626,6 +626,8 @@
 		}
 	}
 
+	let globalGuardId = 0; // デバッグ用のガードID生成
+
 	class InputGuard {
 		/**
 		 * InputGuard の内部状態を初期化する（DOM/設定/イベント/パイプラインを持つ）
@@ -633,6 +635,12 @@
 		 * @param {AttachOptions} options
 		 */
 		constructor(element, options) {
+			/**
+			 * ガードID（デバッグ用、インスタンスごとにユニーク）
+			 * @type {number}
+			 */
+			this.id = ++globalGuardId;
+
 			/**
 			 * attach対象の元の要素（swap前の原本）
 			 * detach時の復元や基準参照に使う
@@ -714,7 +722,7 @@
 			/**
 			 * 実際に送信を担う要素（swap時は hidden(raw) 側）
 			 * swapしない場合は originalElement と同一
-			 * @type {HTMLElement}
+			 * @type {HTMLInputElement|HTMLTextAreaElement}
 			 */
 			this.hostElement = element;
 
@@ -825,6 +833,11 @@
 			 */
 			this.onFocus = this.onFocus.bind(this);
 
+			/**
+			 * keydownイベントハンドラ（this固定）
+			 */
+			this.onKeyDown = this.onKeyDown.bind(this);
+
 			/**
 			 * キャレット/選択範囲の変化イベントハンドラ（this固定）
 			 */
@@ -880,6 +893,14 @@
 			this.revertRequest = null;
 		}
 
+		/**
+		 * デバッグ用の文字列化
+		 * @returns {string}
+		 */
+		toString() {
+			return `[TextInputGuard#${this.id} kind=${this.kind} host=${this.hostElement.tagName.toLowerCase()}#${this.hostElement.id}] value=${this.hostElement.value}]`;
+		}
+
 		/**
 		 * 初期化処理（swap適用 → パイプライン構築 → イベント登録 → 初回評価）
 		 * @returns {void}
@@ -1084,6 +1105,7 @@
 			this.displayElement.addEventListener("beforeinput", this.onBeforeInput);
 			this.displayElement.addEventListener("blur", this.onBlur);
 			this.displayElement.addEventListener("focus", this.onFocus);
+			this.displayElement.addEventListener("keydown", this.onKeyDown);
 		}
 
 		/**
@@ -1097,6 +1119,7 @@
 			this.displayElement.removeEventListener("beforeinput", this.onBeforeInput);
 			this.displayElement.removeEventListener("blur", this.onBlur);
 			this.displayElement.removeEventListener("focus", this.onFocus);
+			this.displayElement.removeEventListener("keydown", this.onKeyDown);
 		}
 
 		/**
@@ -1269,8 +1292,8 @@
 			// アンドゥリドゥの特殊処理
 			if (inputType === "historyUndo" || inputType === "historyRedo") {
 				let newText = null;
-				console.log(inputType);
-				console.log(this.history.toString());
+				// console.log(inputType);
+				// console.log(this.history.toString());
 				if (inputType === "historyUndo") {
 					newText = this.history.undo();
 				} else if (inputType === "historyRedo") {
@@ -1514,6 +1537,19 @@
 			}
 			this.existBeforeInputEvent = true;
 			this.beforeInputSnapshot = { selection, inputType, insertedText };
+
+			// アンドゥリドゥの beforeinput はフォーカスされている要素以外にも発生することがあるため、
+			// 正しく判定するために onKeyDown で捕まえて、必要なときだけ onBeforeInput のスナップを作る
+			if (inputType === "historyUndo" || inputType === "historyRedo") {
+				e.preventDefault();
+
+				// フォーカス中ではない要素に飛んできたUndo/Redoは止めるだけ
+				if (document.activeElement !== this.displayElement) {
+					return;
+				}
+
+				this.evaluateInput();
+			}
 		}
 
 		/**
@@ -1570,6 +1606,51 @@
 			this.history.push(raw);
 		}
 
+		/**
+		 * keydownイベント：特殊な用途向けに提供（例：Enterで確定させたいなど）
+		 * @param {Event} e
+		 * @returns {void}
+		 */
+		onKeyDown(e) {
+			if (!(e instanceof KeyboardEvent)) {
+				return;
+			}
+
+			// アンドゥ及びリドゥの onBeforeInput はフォーカスされている要素以外にも発生することがあるため
+			// 正しく判定するために onKeyDown で捕まえて、必要なときだけ onBeforeInput のスナップを作る
+
+			const isUndo = (e.ctrlKey || e.metaKey) && !e.shiftKey && e.key.toLowerCase() === "z";
+			const isRedo =
+				((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "z") ||
+				((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y");
+
+			if (!isUndo && !isRedo) {
+				return;
+			}
+
+			// ここでチェックする
+			if (document.activeElement !== this.displayElement) {
+				return;
+			}
+
+			// ブラウザのデフォルトの undo/redo をキャンセルして、自前でUndo/Redo を発生させる
+			e.preventDefault();
+
+			// 擬似beforeinputのスナップを作る
+			this.beforeInputSnapshot = {
+				selection: this.readSelection(this.displayElement),
+				inputType: isUndo ? "historyUndo" : "historyRedo",
+				insertedText: ""
+			};
+
+			this.existBeforeInputEvent = true;
+			try {
+				this.evaluateInput();
+			} finally {
+				this.existBeforeInputEvent = false;
+			}
+		}
+
 		/**
 		 * キャレット/選択範囲の変化を lastAcceptedSelection に反映する
 		 * - 値が変わっていない状態でもキャレットは動くため、block時に自然な位置へ戻すために使う
@@ -1913,7 +1994,7 @@
 
 		/**
 		 * 外部に公開する Guard API を生成して返す
-		 * - InputGuard 自体を公開せず、最小の操作だけを渡す
+		 * - TextInputGuard 自体を公開せず、最小の操作だけを渡す
 		 * @returns {Guard}
 		 */
 		getGuard() {
@@ -7707,11 +7788,11 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: rollup replace で ""1.2.0"" を package.json の version に置換
+	 * 例: rollup replace で ""1.2.2"" を package.json の version に置換
 	 */
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
-	const version = "1.2.0" ;
+	const version = "1.2.2" ;
 
 	/**
 	 * UMD公開時のグローバルオブジェクト