@brandup/ui-textbox 1.0.48 → 1.0.50

package/README.md

@@ -56,7 +56,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-format` | Включает форматирование текста (только для `type="text"`) |
 | `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline spoiler code` |
 | `data-editor-actions` | Кнопки действий в панели через пробел (по умолчанию нет): `erase undo redo` |
-| `data-blocks` | Типы блоков многострочного поля через пробел (по умолчанию все): `quote code`; пустое значение оставляет только обычный текст |
+| `data-blocks` | Типы блоков многострочного поля через пробел: `quote code`. Подключаются только объявлением — без атрибута поле остаётся обычным текстом, и панель не показывается |
 | `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
 | `data-format-md-<tool>` | Markdown-маркер инструмента: `bold` — `**`, `italic` — `_`, `strike` — `~`, `underline` — `__`, `spoiler` — `\|\|`, `code` — `` ` `` |
 
@@ -64,8 +64,6 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 Атрибут `data-format` включает панель форматирования с инструментами: жирный, курсив, зачёркивание, подчёркивание, спойлер, моноширинный. Панель всплывает над контролом, пока он в фокусе (класс состояния `focused`). Работает поверх существующего `contenteditable`-редактора, поэтому доступно только для текстового ввода (`type="text"` и `<textarea>`).
 
-Кнопка спойлера в панели временно скрыта (см. [`@brandup/ui-richeditor`](../brandup-ui-richeditor)): сам инструмент работает — значение разбирается, показывается и сохраняется.
-
 ```html
 <!-- все инструменты, хранение в HTML -->
 <textarea data-content-script="textbox" data-format></textarea>
@@ -92,12 +90,14 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 
 ### Блоки — `data-blocks`
 
-В многострочном поле (`<textarea>`) верхний уровень состоит из блоков. Обычный текст доступен всегда, цитата (`quote`) и блок кода (`code`) — тоже; набор ограничивают списком через пробел:
+В многострочном поле (`<textarea>`) верхний уровень состоит из блоков. Обычный текст доступен всегда, а цитата (`quote`) и блок кода (`code`) подключаются явно — списком через пробел:
 
 ```html
 <textarea data-content-script="textbox" data-format data-blocks="quote"></textarea>
 ```
 
+Без атрибута поле остаётся обычным текстом, и панель форматирования сама по себе не появляется — как и действия, блоки включают объявлением. Пустое значение атрибута равносильно его отсутствию.
+
 **Enter** внутри блока заканчивает его, **Shift+Enter** переносит строку внутри, **Backspace** в начале блока возвращает обычный текст. Разбор, хранение и правку блоков описывает [`@brandup/ui-richeditor`](../brandup-ui-richeditor).
 
 ### Применение формата
@@ -150,7 +150,7 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `setValue(value: string): void` | Устанавливает значение программно |
 | `hasValue(): boolean` | `true`, если значение не пустое |
 | `validate(): boolean` | Валидирует значение, добавляет/снимает класс `invalid` |
-| `focus(): void` | Устанавливает фокус, прокручивает в видимую область |
+| `focus(): void` | Ведёт фокус в редактор и прокручивает контрол в видимую область. В выключенном поле ничего не делает — как нативный `disabled` input; поле только для чтения фокусируется |
 | `destroy(): void` | Восстанавливает исходный DOM-элемент и освобождает ресурсы |
 
 ### Свойства

package/package.json

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

package/source/textbox.less

@@ -1,26 +1,31 @@
+@import (reference) "@brandup/ui-input/source/input.less";
+
+// Значения по умолчанию у переменных кита — их же канонические значения (см. vars.less кита):
+// без темы кита контрол выглядит так же, как с темой по умолчанию, а не разваливается.
+
 :root {
 	--textbox-maxheight: 200px;
 	--textbox-multyline-height: 100px;
 }
 
 .ui-textbox {
-	min-height: var(--input-height);
+	min-height: var(--input-height, 46px);
 	max-height: var(--textbox-maxheight);
 	display: flex;
 	flex-flow: row nowrap;
 	align-items: stretch;
 	position: relative;
-	background-color: var(--input-fill);
-	border-radius: var(--input-border-radius); // чтобы заливка при состояниях не выходила за пределы импута
+	background-color: var(--input-fill, #fff);
+	border-radius: var(--input-border-radius, 0); // чтобы заливка при состояниях не выходила за пределы импута
 	box-sizing: border-box;
 	outline: none;
 	transition: background-color ease 60ms;
-	line-height: var(--input-line-height);
-	font-size: var(--input-font-size);
-	font-weight: var(--input-font-weight);
-	color: var(--input-color);
+	line-height: var(--input-line-height, 1.2rem);
+	font-size: var(--input-font-size, 14px);
+	font-weight: var(--input-font-weight, inherit);
+	color: var(--input-color, #222);
 
-	--svg-fill: var(--input-color);
+	--svg-fill: var(--input-color, #222);
 	--svg-size: 18px;
 
 	& .decorator {
@@ -30,8 +35,8 @@
 		top: 0;
 		width: 100%;
 		height: 100%;
-		border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
-		border-radius: var(--input-border-radius);
+		border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+		border-radius: var(--input-border-radius, 0);
 		z-index: 1;
 		box-sizing: border-box;
 		transition: border-color ease 120ms;
@@ -42,13 +47,11 @@
 		display: flex;
 		flex-flow: row nowrap;
 		gap: 15px;
-		padding: calc((var(--input-height) - var(--input-line-height)) / 2) var(--input-padding-lr);
+		padding: calc((var(--input-height, 46px) - var(--input-line-height, 1.2rem)) / 2) var(--input-padding-lr, 15px);
 		box-sizing: border-box;
 		cursor: text;
 		position: relative;
 		z-index: 2;
-		margin-right: 5px;
-		padding-right: calc(var(--input-padding-lr) - 5px);
 		overflow-y: auto; // полоса прокрутки — общая, от .ui-scrollable кита
 	}
 
@@ -81,15 +84,15 @@
 		display: flex;
 		flex-flow: row nowrap;
 		align-items: center;
-		height: var(--input-height);
+		height: var(--input-height, 46px);
 
 		& button {
 			display: flex;
 			flex-flow: row nowrap;
 			justify-content: center;
 			align-items: center;
-			width: var(--input-height);
-			height: var(--input-height);
+			width: var(--input-height, 46px);
+			height: var(--input-height, 46px);
 			background: transparent;
 			border: none;
 			padding: 0;
@@ -100,7 +103,7 @@
 			opacity: 0.7;
 
 			&.success {
-				--svg-fill: var(--color-success);
+				--svg-fill: var(--color-success, green);
 			}
 
 			&:hover,
@@ -143,30 +146,30 @@
 	}
 
 	&:hover {
-		--input-border-color: var(--hover--input-border-color);
-		--input-fill: var(--hover--input-fill);
-		--input-color: var(--hover--input-color);
-		--svg-fill: var(--hover--input-color);
+		--input-border-color: var(--hover--input-border-color, #666);
+		--input-fill: var(--hover--input-fill, #fff);
+		--input-color: var(--hover--input-color, inherit);
+		--svg-fill: var(--hover--input-color, inherit);
 	}
 
 	&.focused {
-		--input-border-color: var(--focus--input-border-color);
-		--input-fill: var(--focus--input-fill);
-		--input-color: var(--focus--input-color);
-		--svg-fill: var(--focus--input-color);
+		--input-border-color: var(--focus--input-border-color, #222);
+		--input-fill: var(--focus--input-fill, #fff);
+		--input-color: var(--focus--input-color, inherit);
+		--svg-fill: var(--focus--input-color, inherit);
 	}
 
 	&.readonly {
-		--input-fill: var(--readonly--input-fill);
-		--input-color: var(--readonly--input-color);
-		--svg-fill: var(--readonly--input-color);
+		--input-fill: var(--readonly--input-fill, #f7f7f7);
+		--input-color: var(--readonly--input-color, #222);
+		--svg-fill: var(--readonly--input-color, #222);
 	}
 
 	&.disabled {
-		--input-border-color: var(--disabled--input-border-color);
-		--input-fill: var(--disabled--input-fill);
-		--input-color: var(--disabled--input-color);
-		--svg-fill: var(--disabled--input-color);
+		--input-border-color: var(--disabled--input-border-color, #aaa);
+		--input-fill: var(--disabled--input-fill, #eee);
+		--input-color: var(--disabled--input-color, #a2a2a2);
+		--svg-fill: var(--disabled--input-color, #a2a2a2);
 
 		& .editor {
 			user-select: none;
@@ -178,42 +181,38 @@
 				cursor: default;
 
 				& svg {
-					fill: var(--disabled--input-color);
+					fill: var(--disabled--input-color, #a2a2a2);
 				}
 			}
 		}
 	}
 
 	&.invalid {
-		--input-border-color: var(--invalid--input-border-color);
-		--input-fill: var(--invalid--input-fill);
-		--input-color: var(--invalid--input-color);
-		--placeholder-color: var(--invalid--input-color);
-		--svg-fill: var(--invalid--input-color);
+		--input-border-color: var(--invalid--input-border-color, red);
+		--input-fill: var(--invalid--input-fill, rgb(255, 220, 220));
+		--input-color: var(--invalid--input-color, inherit);
+		--placeholder-color: var(--invalid--input-color, inherit);
+		--svg-fill: var(--invalid--input-color, inherit);
 
 		& .decorator {
-			transition-delay: 0;
+			transition-delay: 0s;
 		}
 	}
 
 	&.incorrect {
-		--input-fill: var(--incorrect--input-fill);
-		--input-color: var(--incorrect--input-color);
-		--svg-fill: var(--incorrect--input-color);
+		--input-fill: var(--incorrect--input-fill, rgb(255, 220, 220));
+		--input-color: var(--incorrect--input-color, #222);
+		--svg-fill: var(--incorrect--input-color, #222);
 
 		& .decorator {
-			transition-delay: 0;
+			transition-delay: 0s;
 		}
 	}
 }
 
+// поле уведено с экрана, но остаётся в форме — общий рецепт из @brandup/ui-input
 .textbox-input {
-	opacity: 0;
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	outline: none;
-	visibility: collapse;
+	.ui-input-hidden-value();
 }
 
 textarea.textbox-input ~ .textbox-miniature {
@@ -221,9 +220,9 @@ textarea.textbox-input ~ .textbox-miniature {
 }
 
 .textbox-miniature {
-	border: var(--input-border-type) var(--input-border-width) var(--input-border-color);
-	border-radius: var(--input-border-radius);
-	height: var(--input-height);
+	border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+	border-radius: var(--input-border-radius, 0);
+	height: var(--input-height, 46px);
 	background: white;
 	box-sizing: border-box;
 }

package/source/textbox.ts

@@ -1,10 +1,11 @@
 import "./textbox.less"; // стили компонента
 
-import { InputControl } from "@brandup/ui-input";
-import { IS_TOUCH_DEVICE, SCROLLABLE_CLASS } from "@brandup/ui-kit";
+import { EditorInputControl } from "@brandup/ui-input";
+import { IS_TOUCH_DEVICE, POPUP_CLASS, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
 import RichEditor, {
+	TOOLBAR_CLASS,
 	defaultFormatMarkers,
 	parseBlockTypes,
 	parseEditorActions,
@@ -34,11 +35,10 @@ type TextBoxEvents = {
 	[CHANGE_EVENT]: (data: ChangeEventData) => void;
 };
 
-export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAreaElement, TextBoxEvents> {
-	private __editor: RichEditor;
+export default class TextBox extends EditorInputControl<RichEditor, ChangeEventData, TextBoxEvents> {
 	private __inputElem: HTMLElement; // редактируемый элемент (им владеет RichEditor)
 	private __symbolsCountElem: HTMLElement;
-	private __listenerAbort = new AbortController();
+	private __incorrectTimer?: number;
 
 	readonly type: TextBoxType;
 	readonly allowEmptyStrings: boolean;
@@ -98,7 +98,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const multyline = valueElem instanceof HTMLTextAreaElement;
 		const copyButton = valueElem.hasAttribute("data-copy-button") || valueElem.hasAttribute("data-copybutton");
 		const disabled = valueElem.disabled;
-		const readonly = valueElem.hasAttribute("readonly") || valueElem.hasAttribute("data-readonly");
+		const readonly = TextBox.isReadonly(valueElem);
 
 		// форматирование доступно только для обычного текстового ввода
 		const format = type === "text" && valueElem.hasAttribute("data-format");
@@ -106,8 +106,11 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		const formatTools = format ? parseFormatTools(valueElem.dataset.formatTools ?? null) : [];
 		// кнопки действий панели (очистка формата, отмена, повтор) — подключаются явно
 		const editorActions = format ? parseEditorActions(valueElem.dataset.editorActions ?? null) : [];
-		// типы блоков (цитата, блок кода) — тоже явно и только в многострочном поле
-		const blocks = parseBlockTypes(multyline ? (valueElem.dataset.blocks ?? null) : null);
+		// Типы блоков (цитата, блок кода) — тоже явно и только в многострочном поле. Без атрибута
+		// список пуст, а не «не задан»: незаданный редактор понимает как «все», и в поле без единого
+		// объявления всплывала бы панель с кнопками цитаты и кода.
+		const blocks =
+			multyline && valueElem.dataset.blocks !== undefined ? parseBlockTypes(valueElem.dataset.blocks) : [];
 
 		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
 		const formatMarkers = defaultFormatMarkers();
@@ -129,36 +132,39 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			actionsElem,
 		]);
 
-		TextBox.prepareValueElem(valueElem, container, INPUT_CLASS);
-
-		inputElem.tabIndex = disabled ? -1 : valueElem.tabIndex;
-		valueElem.tabIndex = -1;
-
 		if (multyline) container.classList.add("multyline");
 		if (symbolCounter) container.classList.add("counter");
 		if (inputmode) inputElem.inputMode = inputmode;
 
 		if (copyButton) {
-			// команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui
+			// команда объявляется атрибутом data-command — по нему её ищет обработчик @brandup/ui;
+			// type обязателен: кнопка без него внутри формы — submit, и клик отправлял бы форму
 			const buttonElem = DOM.tag(
 				"button",
-				{ command: "copy-text", title: "Скопировать в буфер обмена" },
+				{ type: "button", command: "copy-text", title: "Скопировать в буфер обмена" },
 				copyIcon
 			);
 			if (disabled) buttonElem.disabled = true;
 			actionsElem.insertAdjacentElement("beforeend", buttonElem);
 		}
 
-		// убираем висящую миниатюру, если есть, и вставляем container на место valueElem
+		// убираем висящую миниатюру, если есть, — до обёртки поля: после неё соседом поля станет контейнер
 		if (valueElem.nextElementSibling) {
 			const nextElem = valueElem.nextElementSibling as HTMLElement;
 			if (nextElem.classList.contains(MINIATURE_CLASS)) nextElem.remove();
 		}
-		valueElem.insertAdjacentElement("afterend", container);
-		container.insertAdjacentElement("afterbegin", valueElem);
+
+		// скрыть поле, подменить tabindex и обернуть контейнером — общая механика базового класса
+		TextBox.wrapValueElem(valueElem, container, INPUT_CLASS, inputElem, disabled);
 
 		// класс и подменённые атрибуты вернёт базовый класс при destroy
-		super("BrandUp.TextBox", container, valueElem, { class: INPUT_CLASS, attrs: originalAttrs });
+		super(
+			"BrandUp.TextBox",
+			container,
+			valueElem,
+			{ class: INPUT_CLASS, attrs: originalAttrs },
+			{ changeEvent: CHANGE_EVENT }
+		);
 
 		this.type = type;
 		this.maxlength = maxlength;
@@ -189,6 +195,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			multiline: multyline,
 			blocks,
 			readonly,
+			// disabled редактор знает сам: запрет правок как в readonly, плюс снятый contenteditable —
+			// без фокуса и выделения (визуал даёт класс .disabled от InputControl)
+			disabled,
 			// тулбар позиционируется относительно контейнера TextBox (а не document.body)
 			toolbarContainer: container,
 			value: valueElem.value,
@@ -207,16 +216,11 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		if (type === "number" || type === "email" || maxlength > 0) {
 			options.filterChar = (char) => {
-				// достигнут лимит длины — отклоняем (выделение будет заменено, поэтому вычитаем его длину)
-				if (maxlength > 0) {
-					const selectionLength = window.getSelection()?.toString().length ?? 0;
-					if (this.__editor.getLength() - selectionLength >= maxlength) return false;
-				}
+				// достигнут лимит длины — отклоняем (выделение будет заменено, его длину учитывает helper)
+				if (maxlength > 0 && this.__lengthLeft() <= 0) return false;
 				return typeAllowsChar(char);
 			};
-		}
 
-		if (type === "number" || maxlength > 0) {
 			options.filterPaste = (text) => {
 				let pasted = text;
 
@@ -224,12 +228,16 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 					const numberData = /[\d\s]+/.exec(pasted);
 					if (!numberData || !numberData.length) return null;
 					pasted = numberData[0].replace(/\s/g, "");
+				} else if (type === "email") {
+					// вставка проходит тот же посимвольный фильтр, что и набор, — иначе запрещённые
+					// символы попадали бы в поле через буфер обмена
+					pasted = Array.from(pasted).filter(typeAllowsChar).join("");
+					if (!pasted) return null;
 				}
 
 				// обрезаем по количеству оставшихся символов (с учётом замены выделения)
 				if (maxlength > 0) {
-					const selectionLength = window.getSelection()?.toString().length ?? 0;
-					const left = maxlength - this.__editor.getLength() + selectionLength;
+					const left = this.__lengthLeft();
 					// не влезает ни одного символа — это отказ, а не пустая вставка: иначе
 					// вставка молча не делала бы ничего, тогда как ввод символа на пределе мигает ошибкой
 					if (left <= 0) return null;
@@ -240,17 +248,16 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			};
 		}
 
-		this.__editor = new RichEditor(inputElem, options);
-
-		// RichEditor не знает про disabled — отключаем редактирование на стороне TextBox
-		// (визуал даёт класс .disabled от InputControl: затемнение, user-select: none)
-		if (disabled) inputElem.contentEditable = "false";
+		this.__attachEditor(new RichEditor(inputElem, options));
 
 		// синхронизируем скрытое поле с нормализованным содержимым редактора (без события)
 		this.__valueElem.value = this.__editor.getValue();
 
 		this.__initLogic();
 		this.__refreshSymbolsCount();
+		// значение из разметки может уже нарушать лимит длины — объявляем это полю сразу,
+		// не дожидаясь первой синхронизации
+		this.__refreshValidity();
 
 		if (this.autoFocus && !IS_TOUCH_DEVICE && !disabled && !readonly) this.__editor.focus();
 	}
@@ -274,24 +281,19 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		// Счётчик — на каждый ввод, а не по 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 });
-
-		// гасим нативный change скрытого поля
-		this.__valueElem.addEventListener(
-			"change",
-			(e: Event) => {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-			},
-			{ signal }
-		);
+		// Выключенный счётчик скрыт — пересчитывать его на каждое нажатие незачем.
+		if (this.symbolCounter) editable.addEventListener("input", () => this.__refreshSymbolsCount(), { signal });
+
+		// Клик мимо текста — тоже клик по полю: контрол выглядит одним полем ввода, а его
+		// внутренние отступы, место справа от текста и полоса действий в редактируемый
+		// элемент не входят.
+		this.element.addEventListener("mousedown", (e) => this.__focusFromBox(e), { signal });
+
+		// таймер вспышки "incorrect" не должен переживать компонент — гасим его вместе со слушателями
+		signal.addEventListener("abort", () => window.clearTimeout(this.__incorrectTimer));
 
-		// двойной клик по readonly-полю с кнопкой копирования — выделить всё для копирования
 		if (this.copyButton) {
+			// двойной клик по readonly-полю с кнопкой копирования — выделить всё для копирования
 			editable.addEventListener(
 				"dblclick",
 				() => {
@@ -301,38 +303,56 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 				},
 				{ signal }
 			);
-		}
 
-		this.registerCommand("copy-text", async (context) => {
-			// повторный клик, пока показана галочка, запомнил бы её как исходную иконку —
-			// после возврата кнопка так и осталась бы с галочкой
-			if (!window.navigator.clipboard || this.disabled || context.target.classList.contains("success")) return;
+			this.registerCommand("copy-text", async (context) => {
+				// повторный клик, пока показана галочка, запомнил бы её как исходную иконку —
+				// после возврата кнопка так и осталась бы с галочкой
+				if (!window.navigator.clipboard || this.disabled || context.target.classList.contains("success"))
+					return;
+
+				// копия значения в поле отстаёт на окно троттлинга — доводим её перед чтением
+				this.__syncValue();
+				await window.navigator.clipboard.writeText(this.__valueElem.value);
+
+				const prevHtml = context.target.innerHTML;
+				context.target.innerHTML = doneIcon;
+				context.target.classList.add("success");
+
+				// возврат иконки отменяем вместе с компонентом: иначе таймер переживает destroy
+				// и дописывает в уже отсоединённую кнопку
+				try {
+					await FuncHelper.delay(2000, signal);
+				} catch {
+					return;
+				}
 
-			await window.navigator.clipboard.writeText(this.__valueElem.value);
+				context.target.innerHTML = prevHtml;
+				context.target.classList.remove("success");
+			});
+		}
+	}
 
-			const prevHtml = context.target.innerHTML;
-			context.target.innerHTML = doneIcon;
-			context.target.classList.add("success");
+	/**
+	 * Фокус по клику в контрол мимо текста: внутренние отступы, место справа от последней
+	 * строки и полоса действий в редактируемый элемент не входят, а выглядит всё это одним
+	 * полем ввода.
+	 *
+	 * Гасим нажатие: браузер иначе снял бы выделение и увёл фокус на корневой элемент, где
+	 * каретке места нет. Каретку редактор вернёт на прежнее место, а если её ещё не было —
+	 * в конец текста: клик мимо текста это клик за ним.
+	 */
+	private __focusFromBox(e: MouseEvent) {
+		// в выключенном поле редактируемого элемента нет вовсе — фокусировать нечего
+		if (this.disabled) return;
 
-			// возврат иконки отменяем вместе с компонентом: иначе таймер переживает destroy
-			// и дописывает в уже отсоединённую кнопку
-			try {
-				await FuncHelper.delay(2000, signal);
-			} catch {
-				return;
-			}
+		const target = e.target as HTMLElement | null;
+		if (!target || this.__inputElem.contains(target)) return; // в сам текст браузер попадёт и сам
 
-			context.target.innerHTML = prevHtml;
-			context.target.classList.remove("success");
-		});
-	}
+		// кнопка копирования, панель форматирования и её попапы живут внутри контрола и работают сами
+		if (target.closest(`button, a, input, textarea, select, .${TOOLBAR_CLASS}, .${POPUP_CLASS}`)) return;
 
-	// Редактор откладывает событие изменения при печати, поэтому копия значения в поле формы
-	// отстаёт. Базовый класс зовёт этот хук перед каждым чтением значения снаружи —
-	// валидация, отправка формы, сбор FormData.
-	protected override __syncValue(): void {
-		this.__editor.flushChange();
-		this.__refreshValidity();
+		e.preventDefault();
+		this.__editor.focus(true);
 	}
 
 	/**
@@ -344,20 +364,39 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	 * разделители абзацев. Нативный maxLength здесь не помощник: он ограничивает набор, но не
 	 * помечает значение, выставленное из кода.
 	 */
-	private __refreshValidity(): void {
+	protected override __refreshValidity(): void {
 		if (this.maxlength <= 0) return;
 
 		const tooLong = this.maxlength < this.__editor.getLength();
 		this.__valueElem.setCustomValidity(tooLong ? `Не больше ${this.maxlength} символов.` : "");
 	}
 
+	/**
+	 * Сколько символов ещё поместится с учётом того, что выделение будет заменено вводом.
+	 *
+	 * Выделение берём у самого редактора: чужое выделение страницы (например, при вставке
+	 * с отсоединённой кареткой) к содержимому отношения не имеет и ёмкость не освобождает.
+	 * Длину выделения меряем так же, как getLength(), — по textContent, без переносов на границах
+	 * блоков, которые toString() у Selection добавляет, — иначе многострочное выделение
+	 * считалось бы длиннее содержимого.
+	 */
+	private __lengthLeft(): number {
+		const selection = this.__editor.selection;
+		const selectionLength = selection ? (selection.getRangeAt(0).cloneContents().textContent?.length ?? 0) : 0;
+
+		return this.maxlength - this.__editor.getLength() + selectionLength;
+	}
+
 	private __toIncorrect() {
 		this.element.classList.add("incorrect");
-		window.setTimeout(() => this.element.classList.remove("incorrect"), 200);
+
+		// каждый отказ перезапускает таймер: иначе таймер предыдущего отказа гасил бы вспышку раньше
+		window.clearTimeout(this.__incorrectTimer);
+		this.__incorrectTimer = window.setTimeout(() => this.element.classList.remove("incorrect"), 200);
 	}
 
 	private __refreshSymbolsCount() {
-		if (!this.__symbolsCountElem) return;
+		if (!this.symbolCounter) return;
 
 		const textLength = this.__editor.getLength();
 		let counterValue: string;
@@ -388,24 +427,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		return this.__editor;
 	}
 
-	onChange(handler: (e: ChangeEventData) => void) {
-		this.on(CHANGE_EVENT, handler);
-	}
-
-	hasValue(): boolean {
-		return !!this.getValue();
-	}
-
-	getValue(): string {
-		this.__syncValue(); // значение читают снаружи — отложенное изменение сюда обязано попасть
-		return this.__valueElem.value.trim();
-	}
-
-	setValue(value: string): void {
-		// RichEditor нормализует и сгенерирует change — он синхронизирует скрытое поле и вызовет textbox-change
-		this.__editor.setValue(value?.trim() ?? "");
-	}
-
 	override validate(): boolean {
 		let isValid = super.validate(); // super синхронизирует значение сам, через __syncValue
 		if (isValid) {
@@ -423,13 +444,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		return isValid;
 	}
-
-	override destroy(): void {
-		this.__listenerAbort.abort();
-		this.__editor.destroy();
-
-		super.destroy(); // снимет слушатели формы и вернёт поле-носитель в исходный вид
-	}
 }
 
 export interface ChangeEventData {