text-input-guard 1.2.0 → 1.2.2

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

@@ -270,7 +270,7 @@ class SwapState {
 }
 
 /**
- * The script is part of JPInputGuard.
+ * The script is part of TextInputGuard.
  *
  * AUTHOR:
  *  natade-jp (https://github.com/natade-jp)
@@ -620,6 +620,8 @@ class HistoryQueue {
 	}
 }
 
+let globalGuardId = 0; // デバッグ用のガードID生成
+
 class InputGuard {
 	/**
 	 * InputGuard の内部状態を初期化する（DOM/設定/イベント/パイプラインを持つ）
@@ -627,6 +629,12 @@ class InputGuard {
 	 * @param {AttachOptions} options
 	 */
 	constructor(element, options) {
+		/**
+		 * ガードID（デバッグ用、インスタンスごとにユニーク）
+		 * @type {number}
+		 */
+		this.id = ++globalGuardId;
+
 		/**
 		 * attach対象の元の要素（swap前の原本）
 		 * detach時の復元や基準参照に使う
@@ -708,7 +716,7 @@ class InputGuard {
 		/**
 		 * 実際に送信を担う要素（swap時は hidden(raw) 側）
 		 * swapしない場合は originalElement と同一
-		 * @type {HTMLElement}
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
 		 */
 		this.hostElement = element;
 
@@ -819,6 +827,11 @@ class InputGuard {
 		 */
 		this.onFocus = this.onFocus.bind(this);
 
+		/**
+		 * keydownイベントハンドラ（this固定）
+		 */
+		this.onKeyDown = this.onKeyDown.bind(this);
+
 		/**
 		 * キャレット/選択範囲の変化イベントハンドラ（this固定）
 		 */
@@ -874,6 +887,14 @@ class InputGuard {
 		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}
@@ -1078,6 +1099,7 @@ class InputGuard {
 		this.displayElement.addEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.addEventListener("blur", this.onBlur);
 		this.displayElement.addEventListener("focus", this.onFocus);
+		this.displayElement.addEventListener("keydown", this.onKeyDown);
 	}
 
 	/**
@@ -1091,6 +1113,7 @@ class InputGuard {
 		this.displayElement.removeEventListener("beforeinput", this.onBeforeInput);
 		this.displayElement.removeEventListener("blur", this.onBlur);
 		this.displayElement.removeEventListener("focus", this.onFocus);
+		this.displayElement.removeEventListener("keydown", this.onKeyDown);
 	}
 
 	/**
@@ -1263,8 +1286,8 @@ class InputGuard {
 		// アンドゥリドゥの特殊処理
 		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") {
@@ -1508,6 +1531,19 @@ class InputGuard {
 		}
 		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();
+		}
 	}
 
 	/**
@@ -1564,6 +1600,51 @@ class InputGuard {
 		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時に自然な位置へ戻すために使う
@@ -1907,7 +1988,7 @@ class InputGuard {
 
 	/**
 	 * 外部に公開する Guard API を生成して返す
-	 * - InputGuard 自体を公開せず、最小の操作だけを渡す
+	 * - TextInputGuard 自体を公開せず、最小の操作だけを渡す
 	 * @returns {Guard}
 	 */
 	getGuard() {
@@ -7701,11 +7782,11 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: 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公開時のグローバルオブジェクト