text-input-guard 1.0.2 → 1.2.0

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

@@ -418,7 +418,10 @@
 	 * @property {boolean} [warn] - 非対応ルールなどを console.warn するか
 	 * @property {string} [invalidClass="is-invalid"] - エラー時に付けるclass名
 	 * @property {SeparateValueOptions} [separateValue] - 表示値と内部値の分離設定
+	 * @property {number} [historySize = 50] - 記録する履歴の最大件数
 	 * @property {(result: ValidateResult) => void} [onValidate] - 評価完了時の通知（input/commitごと）
+	 * @property {(result: Guard) => void} [onInput] - 入力時に値が変更されていた場合の通知
+	 * @property {(result: Guard) => void} [onChange] - フォーカスが外れた値が変更されていた場合の通知
 	 */
 
 	/**
@@ -529,6 +532,100 @@
 		};
 	}
 
+	/**
+	 * UndoとRedoを実装用のキュー
+	 */
+	class HistoryQueue {
+		/**
+		 * 初期化する
+		 * @param {number} maxLength
+		 */
+		constructor(maxLength = 50) {
+			/**
+			 * キューの最大長（これ以上は古い履歴から削除される）
+			 */
+			this.maxLength = maxLength;
+
+			/**
+			 * @type {string[]} 履歴キュー（過去から未来の順で値が入る）
+			 */
+			this.queue = [];
+
+			/**
+			 * 現在の位置を示すインデックス（queue内のどこにいるか、-1は履歴なしを意味する）
+			 */
+			this.index = -1;
+		}
+
+		/**
+		 * 値を追加（新しい履歴）
+		 * @param {string} value
+		 */
+		push(value) {
+		// 現在位置の値と同じなら追加しない
+			if (this.queue[this.index] === value) {
+				return false;
+			}
+
+			// Undo後に新規入力した場合は、現在位置より後ろのRedo履歴を消す
+			if (this.index < this.queue.length - 1) {
+				this.queue = this.queue.slice(0, this.index + 1);
+			}
+
+			// 念のため、末尾と同じ値も追加しない
+			if (this.queue[this.queue.length - 1] === value) {
+				this.index = this.queue.length - 1;
+				return false;
+			}
+
+			this.queue.push(value);
+
+			// 最大長制限
+			if (this.queue.length > this.maxLength) {
+				this.queue.shift();
+			}
+
+			this.index = this.queue.length - 1;
+		}
+
+		/**
+		 * Undo（前の値）
+		 * @returns {string|null}
+		 */
+		undo() {
+			if (this.index <= 0) { return null; }
+			this.index--;
+			return this.queue[this.index];
+		}
+
+		/**
+		 * Redo（次の値）
+		 * @returns {string|null}
+		 */
+		redo() {
+			if (this.index >= this.queue.length - 1) { return null; }
+			this.index++;
+			return this.queue[this.index];
+		}
+
+		/**
+		 * 初期化して値をセット
+		 * @param {string} value
+		 */
+		reset(value) {
+			this.queue = [value];
+			this.index = 0;
+		}
+
+		/**
+		 * デバッグ用の文字列化
+		 * @returns {string}
+		 */
+		toString() {
+			return `HistoryQueue(index=${this.index}, queue=[${this.queue.join(" | ")}])`;
+		}
+	}
+
 	class InputGuard {
 		/**
 		 * InputGuard の内部状態を初期化する（DOM/設定/イベント/パイプラインを持つ）
@@ -582,7 +679,37 @@
 			 * attach時に登録されたバリデーション結果コールバック
 			 * @type {((result: ValidateResult) => void) | undefined}
 			 */
-			this.onValidate = options.onValidate;
+			this.onAttachValidate = options.onValidate;
+
+			/**
+			 * input時に値が変更されていた場合の通知
+			 * @type {((result: Guard) => void) | undefined}
+			 */
+			this.onAttachInput = options.onInput;
+
+			/**
+			 * onInput 判定のための直前の値（input時にこれと比較して変化を検知する）
+			 * @type {string}
+			 */
+			this.previousInputValue = "";
+
+			/**
+			 * blur時に値が変更されていた場合の通知
+			 * @type {((result: Guard) => void) | undefined}
+			 */
+			this.onAttachChange = options.onChange;
+
+			/**
+			 * onChange 判定のための直前の値（blur時にこれと比較して変化を検知する）
+			 * @type {string}
+			 */
+			this.previousBlurValue = "";
+
+			/**
+			 * Undo/Redo用の履歴キュー（入力値の履歴を保持して、revert要求に対応するために使用）
+			 * @type {HistoryQueue}
+			 */
+			this.history = new HistoryQueue(options.historySize ?? 50);
 
 			/**
 			 * 実際に送信を担う要素（swap時は hidden(raw) 側）
@@ -764,6 +891,10 @@
 			this.bindEvents();
 			// 初期値を評価
 			this.evaluateCommit();
+			// 初期値を記録（onInput/onChangeの比較用）
+			this.previousInputValue = this.getRawValue();
+			this.previousBlurValue = this.getDisplayValue();
+			this.history.push(this.getRawValue());
 		}
 
 		/**
@@ -996,11 +1127,49 @@
 			if (this.warn) ;
 		}
 
+		/**
+		 * 変更前後の文字列から置換範囲と挿入文字列を推測
+		 * @param {string} beforeText
+		 * @param {string} afterText
+		 * @returns {{ replaceStart: number, replaceEnd: number, insertedText: string }}
+		 */
+		detectTextDiff(beforeText, afterText) {
+			let start = 0;
+
+			while (
+				start < beforeText.length &&
+				start < afterText.length &&
+				beforeText[start] === afterText[start]
+			) {
+				start++;
+			}
+
+			let beforeEnd = beforeText.length;
+			let afterEnd = afterText.length;
+
+			while (
+				beforeEnd > start &&
+				afterEnd > start &&
+				beforeText[beforeEnd - 1] === afterText[afterEnd - 1]
+			) {
+				beforeEnd--;
+				afterEnd--;
+			}
+
+			return {
+				replaceStart: start,
+				replaceEnd: beforeEnd,
+				insertedText: afterText.slice(start, afterEnd)
+			};
+		}
+
 		/**
 		 * ルール実行に渡すコンテキストを作る（pushErrorで errors に積める）
 		 * @returns {GuardContext}
 		 */
 		createCtx({ useSnapshot = true } = {}) {
+			// 入力後のテキストを取得
+			let afterText = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement).value;
 			const snap = useSnapshot ? this.beforeInputSnapshot : null;
 			let inputType = snap?.inputType ?? "";
 			let insertedText = snap?.insertedText ?? "";
@@ -1043,23 +1212,23 @@
 				baseSel = lastSel;
 			}
 
-			// beforeinput がない環境では、差分再構成の基準が「前回の受理値」しかないため、そこから今回の編集内容を推測する必要がある。
+			// オートコンプリートの処理
+			// inputType が取得できないため existBeforeInputEvent 情報で判断
+			// 差分再構成の基準が「前回の受理値」しかないため、そこから今回の編集内容を推測する必要がある。
 			if (beforeText.length === 0 || !this.existBeforeInputEvent) {
-				const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-				const current = display.value;
 				// 前回の値がとれないものの、何かしら入力情報がある状態
-				if (current.length > 0) {
+				if (afterText.length > 0) {
 					// 文字列の先頭が前回の受理値と同じなら、末尾に何かしら入力されたと考えられる（オートコンプリート等）
-					if (current.toLocaleLowerCase().startsWith(beforeText.toLocaleLowerCase())) {
-						if (!current.startsWith(beforeText)) {
+					if (afterText.toLocaleLowerCase().startsWith(beforeText.toLocaleLowerCase())) {
+						if (!afterText.startsWith(beforeText)) {
 							// 文字は同じだが、大文字と小文字の情報が替わっているなどのパターン
 							// 差し代わりが起きているため、前回値は基準にならないと判断して、差分全体を insertedText とする
 							beforeText = "";
-							insertedText = current;
+							insertedText = afterText;
 						} else {
 							// 末尾に追加されたと考えられる部分を insertedText とする
-							// 例: beforeText="abc" → current="abcde" なら、"de" が insertedText
-							insertedText = current.slice(beforeText.length);
+							// 例: beforeText="abc" → afterText="abcde" なら、"de" が insertedText
+							insertedText = afterText.slice(beforeText.length);
 						}
 						// キャレットは前回値の末尾にあると推測する
 						baseSel = /** @type {SelectionState} */ {
@@ -1078,10 +1247,10 @@
 			let replaceStart = baseSel.start ?? 0;
 			let replaceEnd = baseSel.end ?? 0;
 
+			// 削除操作の特殊処理
 			// Backspace / Delete は「挿入文字がない（dataがnull）」ことが多い。
 			// そのままだと差分再構成で “何も変わらない” 扱いになって削除が効かなくなるため、
 			// 選択範囲が無い場合は「削除される1文字ぶん」の置換範囲をここで作る。
-			//
 			// ※ 選択範囲がある削除は replaceStart!=replaceEnd なので補正不要（その範囲を消すだけでよい）
 			if (replaceStart === replaceEnd) {
 				if (inputType === "deleteContentBackward") {
@@ -1097,6 +1266,25 @@
 				// deleteWordBackward / deleteWordForward / deleteByCut / deleteSoftLineBackward ... etc
 			}
 
+			// アンドゥリドゥの特殊処理
+			if (inputType === "historyUndo" || inputType === "historyRedo") {
+				let newText = null;
+				console.log(inputType);
+				console.log(this.history.toString());
+				if (inputType === "historyUndo") {
+					newText = this.history.undo();
+				} else if (inputType === "historyRedo") {
+					newText = this.history.redo();
+				}
+				if (newText !== null) {
+					afterText = newText;
+					const diff = this.detectTextDiff(beforeText, afterText);
+					replaceStart = diff.replaceStart;
+					replaceEnd = diff.replaceEnd;
+					insertedText = diff.insertedText;
+				}
+			}
+
 			return {
 				hostElement: this.hostElement,
 				displayElement: this.displayElement,
@@ -1110,7 +1298,7 @@
 				replaceStart,
 				replaceEnd,
 				insertedText,
-				afterText: null, // 後で代入する
+				afterText,
 				pushError: (e) => this.errors.push(e),
 				requestRevert: (req) => {
 					// 1回でもrevert要求が出たら採用（最初の理由を保持）
@@ -1140,13 +1328,13 @@
 		 * @returns {void}
 		 */
 		notifyValidate(source) {
-			if (!this.onValidate) {
+			if (!this.onAttachValidate) {
 				return;
 			}
 
 			const errors = this.getErrors();
 
-			this.onValidate({
+			this.onAttachValidate({
 				guard: this.getGuard(),
 				source,
 				errors,
@@ -1320,7 +1508,10 @@
 			/** @type {string|null} */
 			const inputType = typeof e.inputType === "string" ? e.inputType : null;
 			/** @type {string|null} */
-			const insertedText = typeof e.data === "string" ? e.data : null;
+			let insertedText = typeof e.data === "string" ? e.data : null;
+			if (insertedText === null && (inputType === "insertLineBreak" || inputType === "insertParagraph")) {
+				insertedText = "\n";
+			}
 			this.existBeforeInputEvent = true;
 			this.beforeInputSnapshot = { selection, inputType, insertedText };
 		}
@@ -1332,6 +1523,12 @@
 		onBlur() {
 			// console.log("[text-input-guard] blur");
 			this.evaluateCommit();
+			if (this.previousBlurValue !== this.getDisplayValue()) {
+				this.previousBlurValue = this.getDisplayValue();
+				if (this.onAttachChange) {
+					this.onAttachChange(this.getGuard());
+				}
+			}
 		}
 
 		/**
@@ -1350,21 +1547,27 @@
 			ctx.beforeText = "";
 			ctx.afterText = current;
 
-			let v = current;
-			v = this.runNormalizeChar(v, ctx);
-			v = this.runNormalizeStructure(v, ctx);
+			let raw = current;
+			raw = this.runNormalizeChar(raw, ctx);
+			raw = this.runNormalizeStructure(raw, ctx);
 
-			if (v !== current) {
-				this.setDisplayValuePreserveCaret(display, v, ctx);
-				this.syncRaw(v);
+			if (raw !== current) {
+				this.setDisplayValuePreserveCaret(display, raw, ctx);
+				this.syncRaw(raw);
 			}
 
 			// 受理値更新（blockで戻す位置も自然になる）
-			this.lastAcceptedValue = v;
+			this.lastAcceptedValue = raw;
 			this.lastAcceptedSelection = this.readSelection(display);
 
 			// キャレット/選択範囲の変化も反映しておく（blockで戻す位置も自然になる）
 			this.onSelectionChange();
+
+			// previousInputValueも更新（次の入力で差分再構成の基準になる）
+			this.previousInputValue = raw;
+
+			// 中の値が替わっている可能性を考えて、historyも更新しておく（undoしたときに不自然にならないように）
+			this.history.push(raw);
 		}
 
 		/**
@@ -1456,10 +1659,7 @@
 		 * @returns {GuardContext}
 		 */
 		createCtxAndNormalize() {
-			const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-			const current = display.value;
 			const ctx = this.createCtx();
-			ctx.afterText = current;
 
 			// 元のテキスト
 			const beforeText = ctx.beforeText;
@@ -1471,7 +1671,7 @@
 			const replaceStart = ctx.replaceStart;
 
 			// 現状のテキスト
-			const tempText = current;
+			const tempText = ctx.afterText;
 
 			// 作成する全体のテキスト
 			let newText = beforeText;
@@ -1516,7 +1716,7 @@
 
 			// 画面を更新
 			this.syncDisplay(newText);
-			this.writeSelection(display, newSelection);
+			this.writeSelection(this.displayElement, newSelection);
 
 			// CTX の情報を最新の情報へ更新する
 			ctx.afterText = newText;
@@ -1563,6 +1763,17 @@
 
 			// コールバック関数処理
 			this.notifyValidate("input");
+			if (this.previousInputValue !== raw) {
+				this.previousInputValue = raw;
+
+				// historyに積む（undoの基準になる）
+				this.history.push(raw);
+
+				// 変更コールバック
+				if (this.onAttachInput) {
+					this.onAttachInput(this.getGuard());
+				}
+			}
 		}
 
 		/**
@@ -6981,9 +7192,10 @@
 	/**
 	 * bytes ルールのオプション
 	 * @typedef {Object} BytesRuleOptions
-	 * @property {number} [max] - 最大長（グラフェム数）。未指定なら制限なし
+	 * @property {number} [max] - バイト数。未指定なら制限なし
 	 * @property {"block"|"error"} [mode="block"] - 入力中に最大長を超えたときの挙動
 	 * @property {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} [unit="utf-8"] - サイズの単位(sjis系を使用する場合はfilterも必須)
+	 * @property {"\n"|"\r"|"\r\n"} [newline="\n"] - 改行の扱い(バイト数計算に影響あり)
 	 */
 
 	/**
@@ -6992,25 +7204,28 @@
 	 */
 
 	/**
-	 * グラフェム/UTF-16コード単位/UTF-32コード単位の長さを調べる
+	 * テキストのバイト数を調べる
 	 * @param {string} text
 	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+	 * @param {"\n"|"\r"|"\r\n"} newline
 	 * @returns {number}
 	 */
-	const getTextBytesByUnit = function(text, unit) {
+	const getTextBytesByUnit = function(text, unit, newline) {
 		if (text.length === 0) {
 			return 0;
 		}
+
+		const normalizedText = text.replace(/\r?\n/g, newline);
+
 		if (unit === "utf-8") {
-			return Mojix.toUTF8Array(text).length;
+			return Mojix.toUTF8Array(normalizedText).length;
 		} else if (unit === "utf-16") {
-			return Mojix.toUTF16Array(text).length * 2;
+			return Mojix.toUTF16Array(normalizedText).length * 2;
 		} else if (unit === "utf-32") {
-			return Mojix.toUTF32Array(text).length * 4;
+			return Mojix.toUTF32Array(normalizedText).length * 4;
 		} else if (unit === "sjis" || unit === "cp932") {
-			return Mojix.encode(text, "Shift_JIS").length;
+			return Mojix.encode(normalizedText, "Shift_JIS").length;
 		} else {
-			// ここには来ない
 			throw new Error(`Invalid unit: ${unit}`);
 		}
 	};
@@ -7020,9 +7235,10 @@
 	 * @param {string} text
 	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
 	 * @param {number} max
+	 * @param {"\n"|"\r"|"\r\n"} newline
 	 * @returns {string}
 	 */
-	const cutTextByUnit = function(text, unit, max) {
+	const cutTextByUnit = function(text, unit, max, newline) {
 		/**
 		 * グラフェムの配列
 		 * @type {Grapheme[]}
@@ -7041,19 +7257,10 @@
 		const outputGraphemeArray = [];
 
 		for (let i = 0; i < graphemeArray.length; i++) {
-			const g = graphemeArray[i];
-
 			// 1グラフェムあたりの長さ
-			let byteCount = 0;
-			if (unit === "utf-8") {
-				byteCount = Mojix.toUTF8Array(Mojix.toStringFromMojiArray([g])).length;
-			} else if (unit === "utf-16") {
-				byteCount = Mojix.toUTF16Array(Mojix.toStringFromMojiArray([g])).length * 2;
-			} else if (unit === "utf-32") {
-				byteCount = Mojix.toUTF32Array(Mojix.toStringFromMojiArray([g])).length * 4;
-			} else if (unit === "sjis" || unit === "cp932") {
-				byteCount = Mojix.encode(Mojix.toStringFromMojiArray([g]), "Shift_JIS").length;
-			}
+			const g = graphemeArray[i];
+			const gText = Mojix.toStringFromMojiArray([g]);
+			const byteCount = getTextBytesByUnit(gText, unit, newline);
 
 			if (count + byteCount > max) {
 				// 空配列を渡すとNUL文字を返すため、空配列のときは空文字を返す
@@ -7078,15 +7285,16 @@
 	 * @param {string} insertedText 追加するテキスト
 	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
 	 * @param {number} max
+	 * @param {"\n"|"\r"|"\r\n"} newline
 	 * @returns {string} 追加するテキストを切ったもの（切る必要がない場合は insertedText をそのまま返す）
 	 */
-	const cutBytes = function(beforeText, insertedText, unit, max) {
-		const beforeTextLen = getTextBytesByUnit(beforeText, unit);
+	const cutBytes = function(beforeText, insertedText, unit, max, newline) {
+		const beforeTextLen = getTextBytesByUnit(beforeText, unit, newline);
 
 		// すでに最大長を超えている場合は追加のテキストを全て切る
 		if (beforeTextLen >= max) { return ""; }
 
-		const insertedTextLen = getTextBytesByUnit(insertedText, unit);
+		const insertedTextLen = getTextBytesByUnit(insertedText, unit, newline);
 		const totalLen = beforeTextLen + insertedTextLen;
 
 		if (totalLen <= max) {
@@ -7096,7 +7304,7 @@
 
 		// 超える場合は追加のテキストを切る
 		const allowedAddLen = max - beforeTextLen;
-		return cutTextByUnit(insertedText, unit, allowedAddLen);
+		return cutTextByUnit(insertedText, unit, allowedAddLen, newline);
 	};
 
 	/**
@@ -7105,12 +7313,10 @@
 	 * @returns {Rule}
 	 */
 	function bytes(options = {}) {
-		/** @type {BytesRuleOptions} */
-		const opt = {
-			max: typeof options.max === "number" ? options.max : undefined,
-			mode: options.mode ?? "block",
-			unit: options.unit ?? "utf-8"
-		};
+		const max = typeof options.max === "number" ? options.max : undefined;
+		const mode = options.mode ?? "block";
+		const unit = options.unit ?? "utf-8";
+		const newline = options.newline ?? "\n";
 
 		return {
 			name: "bytes",
@@ -7118,35 +7324,35 @@
 
 			normalizeChar(value, ctx) {
 				// block 以外は何もしない
-				if (opt.mode !== "block") {
+				if (mode !== "block") {
 					return value;
 				}
 				// max 未指定なら制限なし
-				if (typeof opt.max !== "number") {
+				if (typeof max !== "number") {
 					return value;
 				}
 
-				const cutText = cutBytes(ctx.beforeText, value, opt.unit, opt.max);
+				const cutText = cutBytes(ctx.beforeText, value, unit, max, newline);
 				return cutText;
 			},
 
 			validate(value, ctx) {
 				// error 以外は何もしない
-				if (opt.mode !== "error") {
+				if (mode !== "error") {
 					return;
 				}
 				// max 未指定なら制限なし
-				if (typeof opt.max !== "number") {
+				if (typeof max !== "number") {
 					return;
 				}
 
-				const len = getTextBytesByUnit(value, opt.unit);
-				if (len > opt.max) {
+				const len = getTextBytesByUnit(value, unit, newline);
+				if (len > max) {
 					ctx.pushError({
 						code: "bytes.max_overflow",
 						rule: "bytes",
 						phase: "validate",
-						detail: { limit: opt.max, actual: len }
+						detail: { limit: max, actual: len }
 					});
 				}
 			}
@@ -7163,6 +7369,7 @@
 	 * - data-tig-rules-bytes-max                 -> dataset.tigRulesBytesMax
 	 * - data-tig-rules-bytes-mode                -> dataset.tigRulesBytesMode
 	 * - data-tig-rules-bytes-unit                -> dataset.tigRulesBytesUnit
+	 * - data-tig-rules-bytes-newline             -> dataset.tigRulesBytesNewline
 	 *
 	 * @param {DOMStringMap} dataset
 	 * @param {HTMLInputElement|HTMLTextAreaElement} _el
@@ -7195,6 +7402,14 @@
 			options.unit = unit;
 		}
 
+		const newline = parseDatasetEnum(
+			dataset.tigRulesBytesNewline,
+			["\n", "\r", "\r\n"]
+		);
+		if (newline != null) {
+			options.newline = newline;
+		}
+
 		return bytes(options);
 	};
 
@@ -7492,12 +7707,37 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: rollup replace で ""1.0.2"" を package.json の version に置換
+	 * 例: rollup replace で ""1.2.0"" を package.json の version に置換
 	 */
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
-	const version = "1.0.2" ;
+	const version = "1.2.0" ;
+
+	/**
+	 * UMD公開時のグローバルオブジェクト
+	 */
+	const TextInputGuard = {
+		attach,
+		attachAll,
+		autoAttach,
+		rules,
+		numeric,
+		digits,
+		comma,
+		imeOff,
+		kana,
+		ascii,
+		filter,
+		length,
+		width,
+		bytes,
+		prefix,
+		suffix,
+		trim,
+		version
+	};
 
+	exports.TextInputGuard = TextInputGuard;
 	exports.ascii = ascii;
 	exports.attach = attach;
 	exports.attachAll = attachAll;