text-input-guard 0.1.5 → 0.1.6

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

@@ -925,8 +925,8 @@
 		 * ルール実行に渡すコンテキストを作る（pushErrorで errors に積める）
 		 * @returns {GuardContext}
 		 */
-		createCtx() {
-			const snap = this.beforeInputSnapshot;
+		createCtx({ useSnapshot = true } = {}) {
+			const snap = useSnapshot ? this.beforeInputSnapshot : null;
 			const inputType = snap?.inputType ?? "";
 			const insertedText = snap?.insertedText ?? "";
 
@@ -1206,6 +1206,8 @@
 			const current = display.value;
 
 			const ctx = this.createCtx();
+
+			ctx.beforeText = "";
 			ctx.afterText = current;
 
 			let v = current;
@@ -1406,10 +1408,11 @@
 			this.revertRequest = null;
 
 			const display = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (this.displayElement);
-			const ctx = this.createCtx();
+			const ctx = this.createCtx({ useSnapshot: false });
 
 			// 1) raw候補（displayから取得）
 			let raw = display.value;
+			ctx.beforeText = "";
 			ctx.afterText = raw;
 
 			// 2) 正規化（rawとして扱う形に揃える）
@@ -6390,7 +6393,7 @@
 	 * @param {number} max
 	 * @returns {string}
 	 */
-	const cutTextByUnit = function(text, unit, max) {
+	const cutTextByUnit$1 = function(text, unit, max) {
 		/**
 		 * グラフェムの配列
 		 * @type {Grapheme[]}
@@ -6450,13 +6453,13 @@
 	 * @returns {string} 追加するテキストを切ったもの（切る必要がない場合は insertedText をそのまま返す）
 	 */
 	const cutLength = function(beforeText, insertedText, unit, max) {
-		const orgLen = getTextLengthByUnit(beforeText, unit);
+		const beforeTextLen = getTextLengthByUnit(beforeText, unit);
 
 		// すでに最大長を超えている場合は追加のテキストを全て切る
-		if (orgLen >= max) { return ""; }
+		if (beforeTextLen >= max) { return ""; }
 
-		const addLen = getTextLengthByUnit(insertedText, unit);
-		const totalLen = orgLen + addLen;
+		const insertedTextLen = getTextLengthByUnit(insertedText, unit);
+		const totalLen = beforeTextLen + insertedTextLen;
 
 		if (totalLen <= max) {
 			// 今回の追加で範囲内に収まるなら何もしない
@@ -6464,8 +6467,8 @@
 		}
 
 		// 超える場合は追加のテキストを切る
-		const allowedAddLen = max - orgLen;
-		return cutTextByUnit(insertedText, unit, allowedAddLen);
+		const allowedAddLen = max - beforeTextLen;
+		return cutTextByUnit$1(insertedText, unit, allowedAddLen);
 	};
 
 	/**
@@ -6495,13 +6498,7 @@
 					return value;
 				}
 
-				const beforeText = ctx.beforeText;
-				const insertedText = ctx.insertedText;
-				if (insertedText === "") {
-					return value;
-				}
-
-				const cutText = cutLength(beforeText, insertedText, opt.unit, opt.max);
+				const cutText = cutLength(ctx.beforeText, value, opt.unit, opt.max);
 				return cutText;
 			},
 
@@ -6576,6 +6573,376 @@
 		return length(options);
 	};
 
+	/**
+	 * The script is part of TextInputGuard.
+	 *
+	 * AUTHOR:
+	 *  natade-jp (https://github.com/natade-jp)
+	 *
+	 * LICENSE:
+	 *  The MIT license https://opensource.org/licenses/MIT
+	 */
+
+
+	/**
+	 * width ルールのオプション
+	 * @typedef {Object} WidthRuleOptions
+	 * @property {number} [max] - 最大長（全角は2, 半角は1）
+	 * @property {"block"|"error"} [overflowInput="block"] - 入力中に最大長を超えたときの挙動
+	 *
+	 * block   : 最大長を超える部分を切る
+	 * error   : エラーを積むだけ（値は変更しない）
+	 */
+
+	/**
+	 * width ルールを生成する
+	 * @param {WidthRuleOptions} [options]
+	 * @returns {Rule}
+	 */
+	function width(options = {}) {
+		/** @type {WidthRuleOptions} */
+		const opt = {
+			max: typeof options.max === "number" ? options.max : undefined,
+			overflowInput: options.overflowInput ?? "block"
+		};
+
+		return {
+			name: "length",
+			targets: ["input", "textarea"],
+
+			normalizeChar(value, ctx) {
+				// block 以外は何もしない
+				if (opt.overflowInput !== "block") {
+					return value;
+				}
+				// max 未指定なら制限なし
+				if (typeof opt.max !== "number") {
+					return value;
+				}
+
+				/*
+				 * 指定したテキストを切り出す
+				 * - 0幅 ... グラフェムを構成する要素
+				 *           （結合文字, 異体字セレクタ, スキントーン修飾子,
+				 *            Tag Sequence 構成文字, ZWSP, ZWNJ, ZWJ, WJ）
+				 * - 1幅 ... ASCII文字, 半角カタカナ, Regional Indicator（単体）
+				 * - 2幅 ... 上記以外
+				 * ※ Unicode が配布してる EastAsianWidth.txt は使用していません。
+				 * （目的としては Shift_JIS 時代の半角全角だと思われるため）
+				 */
+				const cutText = Mojix.cutTextForWidth(value, 0, opt.max);
+				return cutText;
+			},
+
+			validate(value, ctx) {
+				// error 以外は何もしない
+				if (opt.overflowInput !== "error") {
+					return value;
+				}
+				// max 未指定なら制限なし
+				if (typeof opt.max !== "number") {
+					return;
+				}
+
+				/*
+				* 指定したテキストの横幅を半角／全角でカウント
+				* - 0幅 ... グラフェムを構成する要素
+				*           （結合文字, 異体字セレクタ, スキントーン修飾子,
+				*            Tag Sequence 構成文字, ZWSP, ZWNJ, ZWJ, WJ）
+				* - 1幅 ... ASCII文字, 半角カタカナ, Regional Indicator（単体）
+				* - 2幅 ... 上記以外
+				* ※ Unicode が配布してる EastAsianWidth.txt は使用していません。
+				* （目的としては Shift_JIS 時代の半角全角だと思われるため）
+				*/
+				const len = Mojix.getWidth(value);
+				if (len > opt.max) {
+					ctx.pushError({
+						code: "length.max_overflow",
+						rule: "length",
+						phase: "validate",
+						detail: { max: opt.max, actual: len }
+					});
+				}
+			}
+		};
+	}
+
+	/**
+	 * datasetから length ルールを生成する
+	 * - data-tig-rules-length が無ければ null
+	 * - オプションは data-tig-rules-length-xxx から読む
+	 *
+	 * 対応する data 属性（dataset 名）
+	 * - data-tig-rules-length                     -> dataset.tigRulesWidth
+	 * - data-tig-rules-length-max                 -> dataset.tigRulesWidthMax
+	 * - data-tig-rules-length-overflow-input      -> dataset.tigRulesWidthOverflowInput
+	 *
+	 * @param {DOMStringMap} dataset
+	 * @param {HTMLInputElement|HTMLTextAreaElement} _el
+	 * @returns {Rule|null}
+	 */
+	width.fromDataset = function fromDataset(dataset, _el) {
+		// ON判定
+		if (dataset.tigRulesWidth == null) {
+			return null;
+		}
+
+		/** @type {WidthRuleOptions} */
+		const options = {};
+
+		const max = parseDatasetNumber(dataset.tigRulesWidthMax);
+		if (max != null) {
+			options.max = max;
+		}
+
+		const overflowInput = parseDatasetEnum(
+			dataset.tigRulesWidthOverflowInput,
+			["block", "error"]
+		);
+		if (overflowInput != null) {
+			options.overflowInput = overflowInput;
+		}
+
+		return width(options);
+	};
+
+	/**
+	 * The script is part of TextInputGuard.
+	 *
+	 * AUTHOR:
+	 *  natade-jp (https://github.com/natade-jp)
+	 *
+	 * LICENSE:
+	 *  The MIT license https://opensource.org/licenses/MIT
+	 */
+
+
+	/**
+	 * bytes ルールのオプション
+	 * @typedef {Object} BytesRuleOptions
+	 * @property {number} [max] - 最大長（グラフェム数）。未指定なら制限なし
+	 * @property {"block"|"error"} [overflowInput="block"] - 入力中に最大長を超えたときの挙動
+	 * @property {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} [unit="utf-8"] - サイズの単位(sjis系を使用する場合はfilterも必須)
+	 *
+	 * block   : 最大長を超える部分を切る
+	 * error   : エラーを積むだけ（値は変更しない）
+	 */
+
+	/**
+	 * グラフェム（1グラフェムは、UTF-32の配列）
+	 * @typedef {number[]} Grapheme
+	 */
+
+	/**
+	 * グラフェム/UTF-16コード単位/UTF-32コード単位の長さを調べる
+	 * @param {string} text
+	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+	 * @returns {number}
+	 */
+	const getTextBytesByUnit = function(text, unit) {
+		if (text.length === 0) {
+			return 0;
+		}
+		if (unit === "utf-8") {
+			return Mojix.toUTF8Array(text).length;
+		} else if (unit === "utf-16") {
+			return Mojix.toUTF16Array(text).length * 2;
+		} else if (unit === "utf-32") {
+			return Mojix.toUTF32Array(text).length * 4;
+		} else if (unit === "sjis" || unit === "cp932") {
+			return Mojix.encode(text, "Shift_JIS").length;
+		} else {
+			// ここには来ない
+			throw new Error(`Invalid unit: ${unit}`);
+		}
+	};
+
+	/**
+	 * グラフェム/UTF-16コード単位/UTF-32コード単位でテキストを切る
+	 * @param {string} text
+	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+	 * @param {number} max
+	 * @returns {string}
+	 */
+	const cutTextByUnit = function(text, unit, max) {
+		/**
+		 * グラフェムの配列
+		 * @type {Grapheme[]}
+		 */
+		const graphemeArray = Mojix.toMojiArrayFromString(text);
+
+		/**
+		 * 現在の位置
+		 */
+		let count = 0;
+
+		/**
+		 * グラフェムの配列（出力用）
+		 * @type {Grapheme[]}
+		 */
+		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;
+			}
+
+			if (count + byteCount > max) {
+				// 空配列を渡すとNUL文字を返すため、空配列のときは空文字を返す
+				if (outputGraphemeArray.length === 0) {
+					return "";
+				}
+				// 超える前の位置で文字列化して返す
+				return Mojix.toStringFromMojiArray(outputGraphemeArray);
+			}
+
+			count += byteCount;
+			outputGraphemeArray.push(g);
+		}
+
+		// 全部入るなら元の text を返す
+		return text;
+	};
+
+	/**
+	 * 元のテキストと追加のテキストの合計が max を超える場合、追加のテキストを切って合計が max に収まるようにする
+	 * @param {string} beforeText 元のテキスト
+	 * @param {string} insertedText 追加するテキスト
+	 * @param {"utf-8"|"utf-16"|"utf-32"|"sjis"|"cp932"} unit
+	 * @param {number} max
+	 * @returns {string} 追加するテキストを切ったもの（切る必要がない場合は insertedText をそのまま返す）
+	 */
+	const cutBytes = function(beforeText, insertedText, unit, max) {
+		const beforeTextLen = getTextBytesByUnit(beforeText, unit);
+
+		// すでに最大長を超えている場合は追加のテキストを全て切る
+		if (beforeTextLen >= max) { return ""; }
+
+		const insertedTextLen = getTextBytesByUnit(insertedText, unit);
+		const totalLen = beforeTextLen + insertedTextLen;
+
+		if (totalLen <= max) {
+			// 今回の追加で範囲内に収まるなら何もしない
+			return insertedText;
+		}
+
+		// 超える場合は追加のテキストを切る
+		const allowedAddLen = max - beforeTextLen;
+		return cutTextByUnit(insertedText, unit, allowedAddLen);
+	};
+
+	/**
+	 * bytes ルールを生成する
+	 * @param {BytesRuleOptions} [options]
+	 * @returns {Rule}
+	 */
+	function bytes(options = {}) {
+		/** @type {BytesRuleOptions} */
+		const opt = {
+			max: typeof options.max === "number" ? options.max : undefined,
+			overflowInput: options.overflowInput ?? "block",
+			unit: options.unit ?? "utf-8"
+		};
+
+		return {
+			name: "bytes",
+			targets: ["input", "textarea"],
+
+			normalizeChar(value, ctx) {
+				// block 以外は何もしない
+				if (opt.overflowInput !== "block") {
+					return value;
+				}
+				// max 未指定なら制限なし
+				if (typeof opt.max !== "number") {
+					return value;
+				}
+
+				const cutText = cutBytes(ctx.beforeText, value, opt.unit, opt.max);
+				return cutText;
+			},
+
+			validate(value, ctx) {
+				// error 以外は何もしない
+				if (opt.overflowInput !== "error") {
+					return value;
+				}
+				// max 未指定なら制限なし
+				if (typeof opt.max !== "number") {
+					return;
+				}
+
+				const len = getTextBytesByUnit(value, opt.unit);
+				if (len > opt.max) {
+					ctx.pushError({
+						code: "bytes.max_overflow",
+						rule: "bytes",
+						phase: "validate",
+						detail: { max: opt.max, actual: len }
+					});
+				}
+			}
+		};
+	}
+
+	/**
+	 * datasetから bytes ルールを生成する
+	 * - data-tig-rules-bytes が無ければ null
+	 * - オプションは data-tig-rules-bytes-xxx から読む
+	 *
+	 * 対応する data 属性（dataset 名）
+	 * - data-tig-rules-bytes                     -> dataset.tigRulesBytes
+	 * - data-tig-rules-bytes-max                 -> dataset.tigRulesBytesMax
+	 * - data-tig-rules-bytes-overflow-input      -> dataset.tigRulesBytesOverflowInput
+	 * - data-tig-rules-bytes-unit                -> dataset.tigRulesBytesUnit
+	 *
+	 * @param {DOMStringMap} dataset
+	 * @param {HTMLInputElement|HTMLTextAreaElement} _el
+	 * @returns {Rule|null}
+	 */
+	bytes.fromDataset = function fromDataset(dataset, _el) {
+		// ON判定
+		if (dataset.tigRulesBytes == null) {
+			return null;
+		}
+
+		/** @type {BytesRuleOptions} */
+		const options = {};
+
+		const max = parseDatasetNumber(dataset.tigRulesBytesMax);
+		if (max != null) {
+			options.max = max;
+		}
+
+		const overflowInput = parseDatasetEnum(
+			dataset.tigRulesBytesOverflowInput,
+			["block", "error"]
+		);
+		if (overflowInput != null) {
+			options.overflowInput = overflowInput;
+		}
+
+		const unit = parseDatasetEnum(
+			dataset.tigRulesBytesUnit,
+			["utf-8", "utf-16", "utf-32", "sjis", "cp932"]
+		);
+		if (unit != null) {
+			options.unit = unit;
+		}
+
+		return bytes(options);
+	};
+
 	/**
 	 * The script is part of TextInputGuard.
 	 *
@@ -6835,6 +7202,8 @@
 		{ name: "ascii", fromDataset: ascii.fromDataset },
 		{ name: "filter", fromDataset: filter.fromDataset },
 		{ name: "length", fromDataset: length.fromDataset },
+		{ name: "width", fromDataset: width.fromDataset },
+		{ name: "bytes", fromDataset: bytes.fromDataset },
 		{ name: "prefix", fromDataset: prefix.fromDataset },
 		{ name: "suffix", fromDataset: suffix.fromDataset },
 		{ name: "trim", fromDataset: trim.fromDataset }
@@ -6857,6 +7226,8 @@
 		ascii,
 		filter,
 		length,
+		width,
+		bytes,
 		prefix,
 		suffix,
 		trim
@@ -6864,16 +7235,17 @@
 
 	/**
 	 * バージョン（ビルド時に置換したいならここを差し替える）
-	 * 例: rollup replace で ""0.1.5"" を package.json の version に置換
+	 * 例: rollup replace で ""0.1.6"" を package.json の version に置換
 	 */
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
-	const version = "0.1.5" ;
+	const version = "0.1.6" ;
 
 	exports.ascii = ascii;
 	exports.attach = attach;
 	exports.attachAll = attachAll;
 	exports.autoAttach = autoAttach;
+	exports.bytes = bytes;
 	exports.comma = comma;
 	exports.digits = digits;
 	exports.filter = filter;
@@ -6885,5 +7257,6 @@
 	exports.suffix = suffix;
 	exports.trim = trim;
 	exports.version = version;
+	exports.width = width;
 
 }));