text-input-guard 1.2.1 → 1.3.0

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

@@ -12,10 +12,10 @@
  * SwapState
  *
  * separateValue.mode="swap" のときに使用する
- * 元 input 要素の状態スナップショットおよび復元ロジックを管理するクラス
+ * 元 input/textarea 要素の状態スナップショットおよび復元ロジックを管理するクラス
  *
  * 役割
- *  - swap前の input の属性状態を保持する
+ *  - swap前の input/textarea の属性状態を保持する
  *  - raw化および display生成時に必要な属性を適用する
  *  - detach時に元の状態へ復元する
  *
@@ -91,16 +91,16 @@ class SwapState {
 	 * swap時に生成された display 用 input 要素
 	 * detach時に削除するため保持する
 	 *
-	 * @type {HTMLInputElement|null}
+	 * @type {HTMLInputElement|HTMLTextAreaElement|null}
 	 */
 	createdDisplay;
 
 	/**
-	 * @param {HTMLInputElement} input
+	 * @param {HTMLInputElement|HTMLTextAreaElement} input
 	 * swap前の元 input 要素
 	 */
 	constructor(input) {
-		this.originalType = input.type;
+		this.originalType = input.type || "";
 		this.originalId = input.getAttribute("id");
 		this.originalName = input.getAttribute("name");
 		this.originalClass = input.className;
@@ -111,22 +111,30 @@ class SwapState {
 		this.createdDisplay = null;
 
 		const UI_ATTRS = [
-			"placeholder",
+			// input 有
 			"list",
+			"size",
+			"pattern",
+
+			// input / textarea 共有
+			"placeholder",
 			"inputmode",
 			"autocomplete",
 			"autocapitalize",
 			"autocorrect",
 			"minlength",
 			"maxlength",
-			"size",
-			"pattern",
 			"dir",
 			"title",
 			"tabindex",
 			"style",
 			"enterkeyhint",
-			"spellcheck"
+			"spellcheck",
+
+			// textarea 用
+			"rows",
+			"cols",
+			"wrap"
 		];
 
 		const UI_BOOL_ATTRS = [
@@ -162,12 +170,17 @@ class SwapState {
 	 * raw 元input を hidden 化する
 	 * 送信担当要素として扱う
 	 *
-	 * @param {HTMLInputElement} input
+	 * @param {HTMLInputElement|HTMLTextAreaElement} input
 	 * @returns {void}
 	 */
 	applyToRaw(input) {
 		// raw化（送信担当）
-		input.type = "hidden";
+		if (input instanceof HTMLInputElement) {
+			input.type = "hidden";
+		} else if (input instanceof HTMLTextAreaElement) {
+			input.setAttribute("hidden", "");
+			input.style.display = "none";
+		}
 		input.removeAttribute("id");
 		input.removeAttribute("class");
 		input.className = "";
@@ -188,12 +201,22 @@ class SwapState {
 	/**
 	 * display用 input を生成し UI属性 aria属性 data属性を適用
 	 *
-	 * @param {HTMLInputElement} raw hidden化された元input
-	 * @returns {HTMLInputElement}
+	 * @param {HTMLInputElement|HTMLTextAreaElement} raw hidden化された元input
+	 * @returns {HTMLInputElement|HTMLTextAreaElement}
 	 */
 	createDisplay(raw) {
-		const display = document.createElement("input");
-		display.type = "text";
+		/**
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
+		 */
+		let display;
+		if (raw instanceof HTMLInputElement) {
+			display = document.createElement("input");
+			display.type = "text";
+		} else if (raw instanceof HTMLTextAreaElement) {
+			display = document.createElement("textarea");
+		} else {
+			throw new Error("Unsupported element type for display creation");
+		}
 		display.dataset.tigRole = "display";
 
 		if (this.originalId) {
@@ -242,11 +265,16 @@ class SwapState {
 	/**
 	 * raw hidden化された元input を元の状態へ復元する
 	 *
-	 * @param {HTMLInputElement} raw
+	 * @param {HTMLInputElement|HTMLTextAreaElement} raw
 	 * @returns {void}
 	 */
 	restoreRaw(raw) {
-		raw.type = this.originalType;
+		if (raw instanceof HTMLInputElement) {
+			raw.type = this.originalType;
+		} else if (raw instanceof HTMLTextAreaElement) {
+			raw.removeAttribute("hidden");
+			raw.style.display = "";
+		}
 
 		if (this.originalId) {
 			raw.setAttribute("id", this.originalId);
@@ -270,7 +298,7 @@ class SwapState {
 }
 
 /**
- * The script is part of JPInputGuard.
+ * The script is part of TextInputGuard.
  *
  * AUTHOR:
  *  natade-jp (https://github.com/natade-jp)
@@ -359,7 +387,7 @@ class SwapState {
  * @typedef {Object} GuardContext
  * @property {HTMLElement} hostElement - 元の要素（swap時はraw側）
  * @property {HTMLElement} displayElement - ユーザーが操作する表示要素
- * @property {HTMLInputElement|null} rawElement - 送信用hidden要素（swap時のみ）
+ * @property {HTMLInputElement|HTMLTextAreaElement|null} rawElement - 送信用hidden要素（swap時のみ）
  * @property {ElementKind} kind - 要素種別（input / textarea）
  * @property {boolean} warn - warnログを出すかどうか
  * @property {string} invalidClass - エラー時に付与するclass名
@@ -620,6 +648,8 @@ class HistoryQueue {
 	}
 }
 
+let globalGuardId = 0; // デバッグ用のガードID生成
+
 class InputGuard {
 	/**
 	 * InputGuard の内部状態を初期化する（DOM/設定/イベント/パイプラインを持つ）
@@ -627,6 +657,12 @@ class InputGuard {
 	 * @param {AttachOptions} options
 	 */
 	constructor(element, options) {
+		/**
+		 * ガードID（デバッグ用、インスタンスごとにユニーク）
+		 * @type {number}
+		 */
+		this.id = ++globalGuardId;
+
 		/**
 		 * attach対象の元の要素（swap前の原本）
 		 * detach時の復元や基準参照に使う
@@ -708,7 +744,7 @@ class InputGuard {
 		/**
 		 * 実際に送信を担う要素（swap時は hidden(raw) 側）
 		 * swapしない場合は originalElement と同一
-		 * @type {HTMLElement}
+		 * @type {HTMLInputElement|HTMLTextAreaElement}
 		 */
 		this.hostElement = element;
 
@@ -722,7 +758,7 @@ class InputGuard {
 		/**
 		 * swap時に生成される hidden(raw) input
 		 * swapしない場合は null
-		 * @type {HTMLInputElement|null}
+		 * @type {HTMLInputElement|HTMLTextAreaElement|null}
 		 */
 		this.rawElement = null;
 
@@ -819,6 +855,11 @@ class InputGuard {
 		 */
 		this.onFocus = this.onFocus.bind(this);
 
+		/**
+		 * keydownイベントハンドラ（this固定）
+		 */
+		this.onKeyDown = this.onKeyDown.bind(this);
+
 		/**
 		 * キャレット/選択範囲の変化イベントハンドラ（this固定）
 		 */
@@ -874,6 +915,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}
@@ -928,7 +977,7 @@ class InputGuard {
 
 	/**
 	 * separateValue.mode="swap" のとき、input を hidden(raw) にして display(input[type=text]) を生成する
-	 * - textarea は非対応（warnして無視）
+	 * - textarea も対応（hidden属性とdisplay:noneを使用）
 	 * @returns {void}
 	 */
 	applySeparateValue() {
@@ -944,25 +993,20 @@ class InputGuard {
 			return;
 		}
 
-		if (this.kind !== "input") {
-			warnLog('[text-input-guard] separateValue.mode="swap" is not supported for <textarea>. ignored.', this.warn);
-			return;
-		}
+		const element = this.originalElement;
 
-		const input = /** @type {HTMLInputElement} */ (this.originalElement);
+		const state = new SwapState(element);
+		state.applyToRaw(element);
 
-		const state = new SwapState(input);
-		state.applyToRaw(input);
-
-		const display = state.createDisplay(input);
-		input.after(display);
+		const display = state.createDisplay(element);
+		element.after(display);
 
 		this.swapState = state;
 
 		// elements更新
-		this.hostElement = input;      // raw
+		this.hostElement = element;      // raw
 		this.displayElement = display; // display
-		this.rawElement = input;
+		this.rawElement = element;
 
 		// revert 機構
 		this.lastAcceptedValue = display.value;
@@ -1078,6 +1122,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 +1136,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);
 	}
 
 	/**
@@ -1508,6 +1554,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 +1623,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 +2011,7 @@ class InputGuard {
 
 	/**
 	 * 外部に公開する Guard API を生成して返す
-	 * - InputGuard 自体を公開せず、最小の操作だけを渡す
+	 * - TextInputGuard 自体を公開せず、最小の操作だけを渡す
 	 * @returns {Guard}
 	 */
 	getGuard() {
@@ -2346,7 +2450,7 @@ function numeric(options = {}) {
 
 	return {
 		name: "numeric",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 文字単位の正規化（全角→半角、記号統一、不要文字の除去）
@@ -2695,7 +2799,6 @@ function roundFraction(intPart, fracPart, fracLimit) {
  * @returns {Rule}
  */
 function digits(options = {}) {
-	/** @type {DigitsRuleOptions} */
 	const opt = {
 		int: typeof options.int === "number" ? options.int : undefined,
 		frac: typeof options.frac === "number" ? options.frac : undefined,
@@ -2709,7 +2812,7 @@ function digits(options = {}) {
 
 	return {
 		name: "digits",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 桁数チェック（入力中：エラーを積むだけ）
@@ -2962,7 +3065,7 @@ digits.fromDataset = function fromDataset(dataset, _el) {
 function comma() {
 	return {
 		name: "comma",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 表示整形（確定時のみ）
@@ -7441,7 +7544,7 @@ function prefix(options) {
 
 	return {
 		name: "prefix",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 手動入力された prefix を除去
@@ -7535,7 +7638,7 @@ function suffix(options) {
 
 	return {
 		name: "suffix",
-		targets: ["input"],
+		targets: ["input", "textarea"],
 
 		/**
 		 * 手動入力された suffix を除去
@@ -7701,11 +7804,11 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: rollup replace で ""1.2.1"" を package.json の version に置換
+ * 例: rollup replace で ""1.3.0"" を package.json の version に置換
  */
 // @ts-ignore
 // eslint-disable-next-line no-undef
-const version = "1.2.1" ;
+const version = "1.3.0" ;
 
 /**
  * UMD公開時のグローバルオブジェクト