@brandup/ui-textbox 1.0.36 → 1.0.39

package/README.md

@@ -8,7 +8,7 @@
 
 ## Установка
 
-```
+```bash
 npm i @brandup/ui-textbox
 ```
 
@@ -35,19 +35,19 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 `TextBox` принимает `<input>` со следующими значениями атрибута `type`:
 
 | Тип | Поведение |
-|---|---|
+| --- | --- |
 | `text` | Обычный текст |
-| `email` | Фильтрует недопустимые символы, ограничивает длину до 256 символов (RFC 5321) |
+| `email` | Оставляет буквы, цифры и `. - _ + @`; ограничивает длину до 256 символов (RFC 5321) — свой `maxlength` применяется, если он строже |
 | `url` | URL-адрес |
 | `tel` | Телефон |
-| `number` | Только цифры, вставка фильтруется |
+| `number` | Только цифры (целые неотрицательные), вставка фильтруется |
 
 Для многострочного ввода передайте `<textarea>`.
 
 ## Data-атрибуты
 
 | Атрибут | Описание |
-|---|---|
+| --- | --- |
 | `data-symbolcounter` | Показывает счётчик введённых символов (и максимума, если задан `maxlength`) |
 | `data-autofocus` | Автофокус при инициализации (игнорируется на touch-устройствах) |
 | `data-copy-button` | Добавляет кнопку копирования значения в буфер обмена |
@@ -55,6 +55,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-readonly` | Альтернативный способ задать режим только для чтения |
 | `data-format` | Включает форматирование текста (только для `type="text"`) |
 | `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
+| `data-editor-actions` | Кнопки действий в панели через пробел (по умолчанию нет): `erase undo redo` |
 | `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
 | `data-format-md-bold` | Markdown-маркер для жирного (по умолчанию `**`) |
 | `data-format-md-italic` | Markdown-маркер для курсива (по умолчанию `*`) |
@@ -83,6 +84,12 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
 
+### Кнопки действий — `data-editor-actions`
+
+Список через пробел из значений `erase` (очистить форматирование), `undo` (отменить), `redo` (повторить). В отличие от инструментов, действия подключаются явно: без атрибута кнопок действий нет. Они добавляются в панель после инструментов форматирования, отделяются разделителем и блокируются, когда действие недоступно (нечего отменять или очищать).
+
+`erase` снимает все форматы с выделения, а без выделения — со слова под кареткой. Чтобы очистить всё поле, выделите текст целиком (`Ctrl+A`) и нажмите кнопку.
+
 ### Применение формата
 
 - Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
@@ -100,7 +107,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 Значение синхронизируется в скрытое поле в выбранном формате:
 
 | Значение | Хранение | Поддерживаемые теги/маркеры |
-|---|---|---|
+| --- | --- | --- |
 | `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
 | `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
 
@@ -125,7 +132,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ### Методы
 
 | Метод | Описание |
-|---|---|
+| --- | --- |
 | `getValue(): string` | Возвращает текущее значение (обрезает пробелы по краям) |
 | `setValue(value: string): void` | Устанавливает значение программно |
 | `hasValue(): boolean` | `true`, если значение не пустое |
@@ -136,7 +143,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 ### Свойства
 
 | Свойство | Тип | Описание |
-|---|---|---|
+| --- | --- | --- |
 | `type` | `TextBoxType` | Тип ввода: `"text"` \| `"email"` \| `"url"` \| `"tel"` \| `"number"` |
 | `multyline` | `boolean` | `true` для `<textarea>` |
 | `maxlength` | `number` | Максимальная длина (из атрибута `maxlength`) |
@@ -176,7 +183,7 @@ textbox.onChange((data) => { ... });
 ## CSS-классы состояний
 
 | Класс | Условие |
-|---|---|
+| --- | --- |
 | `focused` | Поле в фокусе |
 | `invalid` | Значение не прошло валидацию |
 | `incorrect` | Введён недопустимый символ (мигает, затем снимается) |

package/package.json

@@ -24,15 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.36",
+  "version": "1.0.39",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^2.0.5",
-    "@brandup/ui-helpers": "^2.0.5",
-    "@brandup/ui-input": "^1.0.36",
-    "@brandup/ui-kit": "^1.0.36",
-    "@brandup/ui-richeditor": "^1.0.36"
+    "@brandup/ui": "^2.0.7",
+    "@brandup/ui-helpers": "^2.0.7",
+    "@brandup/ui-input": "^1.0.39",
+    "@brandup/ui-kit": "^1.0.39",
+    "@brandup/ui-richeditor": "^1.0.39"
   },
   "files": [
     "source",

package/source/index.ts

@@ -3,11 +3,15 @@ export * from "./textbox";
 
 // реэкспорт типов/утилит форматирования из @brandup/ui-richeditor для обратной совместимости
 export {
+	ALL_EDITOR_ACTIONS,
 	ALL_FORMAT_TOOLS,
+	EDITOR_ACTIONS,
 	FORMAT_TOOLS,
+	parseEditorActions,
 	parseFormatTools,
 	defaultFormatMarkers,
 	normalizeWhitespace,
+	type EditorAction,
 	type FormatTool,
 	type FormatStorage,
 	type FormatMarkers,

package/source/textbox.ts

@@ -6,6 +6,7 @@ import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
 import RichEditor, {
 	defaultFormatMarkers,
+	parseEditorActions,
 	parseFormatTools,
 	type FormatMarkers,
 	type FormatStorage,
@@ -23,6 +24,11 @@ export const MAX_EMAIL_LENGTH = 256; // https://www.rfc-editor.org/rfc/rfc5321#s
 
 export type TextBoxType = "text" | "email" | "url" | "tel" | "number";
 
+// Атрибуты поля, которые компонент подменяет под себя (фокус уходит на редактируемый элемент,
+// ограничения типа нормализуются). При destroy возвращаем их ровно в исходное состояние —
+// иначе после снятия компонента поле остаётся с чужими ограничениями.
+const ATTRS_TO_RESTORE = ["tabindex", "maxlength", "step"];
+
 type TextBoxEvents = {
 	[CHANGE_EVENT]: (data: ChangeEventData) => void;
 };
@@ -48,6 +54,11 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	readonly formatMarkers: FormatMarkers;
 
 	constructor(valueElem: HTMLInputElement | HTMLTextAreaElement) {
+		// исходные атрибуты запоминаем до любых правок — компонент их подменяет, а destroy возвращает
+		const originalAttrs = ATTRS_TO_RESTORE.map(
+			(name) => [name, valueElem.getAttribute(name)] as [string, string | null]
+		);
+
 		// определяем тип ввода и нормализуем валидационные атрибуты до super()
 		let type: TextBoxType = "text";
 		if (valueElem instanceof HTMLInputElement) {
@@ -57,7 +68,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 					break;
 				case "email":
 					type = "email";
-					if (!valueElem.maxLength || valueElem.maxLength > MAX_EMAIL_LENGTH)
+					// у поля без атрибута maxlength свойство равно -1, а не 0, поэтому проверять
+					// нужно именно «не задан положительный предел», иначе ограничение RFC не применялось бы
+					if (valueElem.maxLength <= 0 || valueElem.maxLength > MAX_EMAIL_LENGTH)
 						valueElem.maxLength = MAX_EMAIL_LENGTH;
 					break;
 				case "url":
@@ -75,8 +88,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			}
 		}
 
-		valueElem.classList.add(INPUT_CLASS);
-
 		const maxlength = valueElem.maxLength;
 		const symbolCounter = valueElem.hasAttribute("data-symbolcounter");
 		const autoFocus = valueElem.hasAttribute("data-autofocus");
@@ -93,6 +104,8 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const formatStorage: FormatStorage =
 			valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
 		const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
+		// кнопки действий панели (очистка формата, отмена, повтор) — подключаются явно
+		const editorActions = format ? parseEditorActions(valueElem.getAttribute("data-editor-actions")) : [];
 
 		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
 		const formatMarkers = defaultFormatMarkers();
@@ -107,13 +120,13 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const actionsElem = DOM.tag("div", { class: "actions" });
 		const symbolsCountElem = DOM.tag("div", { class: "symbols" });
 
-		const container = DOM.tag("div", { class: [ROOT_CLASS].concat(Array.from(valueElem.classList)) }, [
+		const container = DOM.tag("div", { class: ROOT_CLASS }, [
 			DOM.tag("div", { class: "decorator" }),
 			DOM.tag("div", { class: "editor" }, [inputElem, symbolsCountElem]),
 			actionsElem,
 		]);
 
-		container.classList.remove(INPUT_CLASS);
+		TextBox.prepareValueElem(valueElem, container, INPUT_CLASS);
 
 		inputElem.tabIndex = disabled ? -1 : valueElem.tabIndex;
 		valueElem.tabIndex = -1;
@@ -123,9 +136,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		if (inputmode) inputElem.inputMode = inputmode;
 
 		if (copyButton) {
+			// команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui
 			const buttonElem = DOM.tag(
 				"button",
-				{ command: "copy-text", title: "Скопировать в буфер обмена" },
+				{ "data-command": "copy-text", title: "Скопировать в буфер обмена" },
 				copyIcon
 			);
 			if (disabled) buttonElem.disabled = true;
@@ -140,7 +154,8 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		valueElem.insertAdjacentElement("afterend", container);
 		container.insertAdjacentElement("afterbegin", valueElem);
 
-		super("BrandUp.TextBox", container, valueElem);
+		// класс и подменённые атрибуты вернёт базовый класс при destroy
+		super("BrandUp.TextBox", container, valueElem, { class: INPUT_CLASS, attrs: originalAttrs });
 
 		this.type = type;
 		this.maxlength = maxlength;
@@ -164,6 +179,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const options: RichEditorOptions = {
 			format,
 			tools: formatTools,
+			actions: editorActions,
 			storage: formatStorage,
 			markers: formatMarkers,
 			placeholder,
@@ -176,10 +192,12 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			onEnter: () => this.__submitForm(),
 		};
 
-		// допустим ли вводимый символ по типу
+		// допустим ли вводимый символ по типу.
+		// `+` в адресе — обычное дело (подадреса вида user+tag@example.com), без него такие
+		// адреса нельзя было бы набрать; остальные разрешённые в local-part символы редки
 		const typeAllowsChar = (char: string) => {
 			if (type === "number") return /\d/.test(char);
-			if (type === "email") return /[a-zA-Z\d.\-_@]/.test(char);
+			if (type === "email") return /[a-zA-Z\d.\-_+@]/.test(char);
 			return true;
 		};
 
@@ -208,7 +226,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 				if (maxlength > 0) {
 					const selectionLength = window.getSelection()?.toString().length ?? 0;
 					const left = maxlength - this.__editor.getLength() + selectionLength;
-					if (pasted.length > left) pasted = pasted.substring(0, Math.max(0, left));
+					// не влезает ни одного символа — это отказ, а не пустая вставка: иначе
+					// вставка молча не делала бы ничего, тогда как ввод символа на пределе мигает ошибкой
+					if (left <= 0) return null;
+					if (pasted.length > left) pasted = pasted.substring(0, left);
 				}
 
 				return pasted;
@@ -247,6 +268,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			this.__onChange();
 		});
 
+		// Счётчик — на каждый ввод, а не по change: длина считается по textContent и стоит копейки,
+		// тогда как значение поля синхронизируется реже (см. RichEditor.flushChange).
+		editable.addEventListener("input", () => this.__refreshSymbolsCount(), { signal });
+
 		// состояние фокуса контрола (рамка/заливка) — на корневом элементе
 		editable.addEventListener("focus", () => !this.disabled && this.element.classList.add("focused"), { signal });
 		editable.addEventListener("blur", () => !this.disabled && this.element.classList.remove("focused"), { signal });
@@ -275,7 +300,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		}
 
 		this.registerCommand("copy-text", async (context) => {
-			if (!window.navigator.clipboard || this.disabled) return;
+			// повторный клик, пока показана галочка, запомнил бы её как исходную иконку —
+			// после возврата кнопка так и осталась бы с галочкой
+			if (!window.navigator.clipboard || this.disabled || context.target.classList.contains("success")) return;
 
 			await window.navigator.clipboard.writeText(this.__valueElem.value);
 
@@ -283,14 +310,26 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			context.target.innerHTML = doneIcon;
 			context.target.classList.add("success");
 
-			const abort = new AbortController();
-			await FuncHelper.delay(2000, abort.signal);
+			// возврат иконки отменяем вместе с компонентом: иначе таймер переживает destroy
+			// и дописывает в уже отсоединённую кнопку
+			try {
+				await FuncHelper.delay(2000, signal);
+			} catch {
+				return;
+			}
 
 			context.target.innerHTML = prevHtml;
 			context.target.classList.remove("success");
 		});
 	}
 
+	// Редактор откладывает событие изменения при печати, поэтому копия значения в поле формы
+	// отстаёт. Базовый класс зовёт этот хук перед каждым чтением значения снаружи —
+	// валидация, отправка формы, сбор FormData.
+	protected override __syncValue(): void {
+		this.__editor.flushChange();
+	}
+
 	private __toIncorrect() {
 		this.element.classList.add("incorrect");
 		window.setTimeout(() => this.element.classList.remove("incorrect"), 200);
@@ -337,6 +376,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	}
 
 	getValue(): string {
+		this.__syncValue(); // значение читают снаружи — отложенное изменение сюда обязано попасть
 		return this.__valueElem.value.trim();
 	}
 
@@ -346,7 +386,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	}
 
 	override validate(): boolean {
-		let isValid = super.validate();
+		let isValid = super.validate(); // super синхронизирует значение сам, через __syncValue
 		if (isValid) {
 			const value = this.getValue();
 
@@ -367,11 +407,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.__listenerAbort.abort();
 		this.__editor.destroy();
 
-		this.__valueElem.tabIndex = this.__inputElem.tabIndex;
-		this.element.insertAdjacentElement("afterend", this.__valueElem);
-		this.element.remove();
-
-		super.destroy();
+		super.destroy(); // снимет слушатели формы и вернёт поле-носитель в исходный вид
 	}
 }