text-input-guard 0.1.5 → 0.1.6

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

@@ -919,8 +919,8 @@ class InputGuard {
 	 * ルール実行に渡すコンテキストを作る（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 ?? "";
 
@@ -1200,6 +1200,8 @@ class InputGuard {
 		const current = display.value;
 
 		const ctx = this.createCtx();
+
+		ctx.beforeText = "";
 		ctx.afterText = current;
 
 		let v = current;
@@ -1400,10 +1402,11 @@ class InputGuard {
 		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として扱う形に揃える）
@@ -6384,7 +6387,7 @@ const getTextLengthByUnit = function(text, unit) {
  * @param {number} max
  * @returns {string}
  */
-const cutTextByUnit = function(text, unit, max) {
+const cutTextByUnit$1 = function(text, unit, max) {
 	/**
 	 * グラフェムの配列
 	 * @type {Grapheme[]}
@@ -6444,13 +6447,13 @@ const cutTextByUnit = function(text, unit, max) {
  * @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) {
 		// 今回の追加で範囲内に収まるなら何もしない
@@ -6458,8 +6461,8 @@ const cutLength = function(beforeText, insertedText, unit, max) {
 	}
 
 	// 超える場合は追加のテキストを切る
-	const allowedAddLen = max - orgLen;
-	return cutTextByUnit(insertedText, unit, allowedAddLen);
+	const allowedAddLen = max - beforeTextLen;
+	return cutTextByUnit$1(insertedText, unit, allowedAddLen);
 };
 
 /**
@@ -6489,13 +6492,7 @@ function length(options = {}) {
 				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;
 		},
 
@@ -6570,6 +6567,376 @@ length.fromDataset = function fromDataset(dataset, _el) {
 	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.
  *
@@ -6829,6 +7196,8 @@ const auto = new InputGuardAutoAttach(attach, [
 	{ 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 }
@@ -6851,6 +7220,8 @@ const rules = {
 	ascii,
 	filter,
 	length,
+	width,
+	bytes,
 	prefix,
 	suffix,
 	trim
@@ -6858,10 +7229,10 @@ const rules = {
 
 /**
  * バージョン（ビルド時に置換したいならここを差し替える）
- * 例: 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" ;
 
-export { ascii, attach, attachAll, autoAttach, comma, digits, filter, kana, length, numeric, prefix, rules, suffix, trim, version };
+export { ascii, attach, attachAll, autoAttach, bytes, comma, digits, filter, kana, length, numeric, prefix, rules, suffix, trim, version, width };