@brandup/ui-textbox 1.0.30 → 1.0.36

package/README.md

@@ -2,7 +2,9 @@
 
 [![Build Status](https://dev.azure.com/brandup/BrandUp%20Core/_apis/build/status%2FBrandUp%2Fbrandup-ui-kit?branchName=main)](https://dev.azure.com/brandup/BrandUp%20Core/_build/latest?definitionId=81&branchName=main)
 
-Компонент текстового поля на базе `contenteditable`. Заменяет стандартные `<input>` и `<textarea>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу и валидацию.
+Компонент текстового поля. Заменяет стандартные `<input>` и `<textarea>`, добавляя расширенное поведение: счётчик символов, кнопку копирования, фильтрацию ввода по типу, валидацию и опциональное форматирование текста (жирный, курсив, зачёркивание, подчёркивание).
+
+Вся работа с редактируемой областью вынесена в [`@brandup/ui-richeditor`](../brandup-ui-richeditor): `TextBox` создаёт скрытое поле формы и компонует над ним `RichEditor`. Экземпляр редактора доступен через свойство `editor`.
 
 ## Установка
 
@@ -51,6 +53,72 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `data-copy-button` | Добавляет кнопку копирования значения в буфер обмена |
 | `data-allow-empty-strings` | Разрешает значение из одних пробелов |
 | `data-readonly` | Альтернативный способ задать режим только для чтения |
+| `data-format` | Включает форматирование текста (только для `type="text"`) |
+| `data-format-tools` | Состав инструментов форматирования через пробел (по умолчанию все): `bold italic strike underline` |
+| `data-format-storage` | Формат хранения значения: `html` (по умолчанию) или `markdown` |
+| `data-format-md-bold` | Markdown-маркер для жирного (по умолчанию `**`) |
+| `data-format-md-italic` | Markdown-маркер для курсива (по умолчанию `*`) |
+| `data-format-md-strike` | Markdown-маркер для зачёркивания (по умолчанию `~~`) |
+| `data-format-md-underline` | Markdown-маркер для подчёркивания (по умолчанию `++`) |
+
+## Форматирование текста
+
+Атрибут `data-format` включает панель форматирования с инструментами: жирный, курсив, зачёркивание, подчёркивание. Панель всплывает над контролом, пока он в фокусе (класс состояния `focused`). Работает поверх существующего `contenteditable`-редактора, поэтому доступно только для текстового ввода (`type="text"` и `<textarea>`).
+
+```html
+<!-- все инструменты, хранение в HTML -->
+<textarea data-content-script="textbox" data-format></textarea>
+
+<!-- только жирный и курсив, хранение в Markdown -->
+<input
+    type="text"
+    data-content-script="textbox"
+    data-format
+    data-format-tools="bold italic"
+    data-format-storage="markdown"
+/>
+```
+
+### Состав инструментов — `data-format-tools`
+
+Список через пробел из значений `bold`, `italic`, `strike`, `underline`. Неизвестные значения игнорируются. Если атрибут не задан — включаются все инструменты.
+
+### Применение формата
+
+- Формат — **переключатель** (toggle): повторное применение к уже отформатированному тексту снимает его.
+- Форматирование применяется **к слову целиком**: если курсор стоит внутри слова без выделения или выделена лишь его часть — формат охватывает всё слово. При выделении части нескольких слов каждая граница доводится до целого слова. Исходное выделение/каретка после применения сохраняются (слово не выделяется автоматически).
+- **Режим набора**: если под кареткой нет слова (курсор между пробелами или поле пустое), кнопка/хоткей не форматируют текст, а включают «ожидающий» формат — он подсветится активным и применится к следующему введённому тексту. Режим сбрасывается при перемещении каретки, клике или потере фокуса.
+- Кнопка инструмента подсвечивается (`active`), когда выделение целиком отформатировано этим инструментом или активен режим набора.
+- Реализация работает на стандартном Selection/Range API — без устаревшего `document.execCommand`, поэтому разметка всегда семантическая (`<b>`, `<i>`, `<s>`, `<u>`) и предсказуема между браузерами.
+
+### Хоткеи
+
+`Ctrl/Cmd+B` — жирный, `Ctrl/Cmd+I` — курсив, `Ctrl/Cmd+U` — подчёркивание. Зачёркивание включается только кнопкой. Хоткеи отключённых инструментов перехватываются, чтобы не срабатывало форматирование браузера.
+
+### Формат хранения — `data-format-storage`
+
+Значение синхронизируется в скрытое поле в выбранном формате:
+
+| Значение | Хранение | Поддерживаемые теги/маркеры |
+|---|---|---|
+| `html` (по умолчанию) | Санитизированный HTML | `<b>`, `<i>`, `<s>`, `<u>`, переводы строк через `<br>` |
+| `markdown` | Лёгкая разметка | `**жирный**`, `*курсив*`, `~~зачёркнутый~~`, `++подчёркнутый++` |
+
+Маркеры для каждого инструмента настраиваются атрибутами `data-format-md-<tool>` (актуально только при `data-format-storage="markdown"`):
+
+```html
+<textarea
+    data-content-script="textbox"
+    data-format
+    data-format-storage="markdown"
+    data-format-md-italic="_"
+    data-format-md-bold="__"
+></textarea>
+```
+
+При разборе маркеры применяются по убыванию длины, поэтому более длинный маркер (`__`) корректно срабатывает раньше короткого-префикса (`_`). Маркеры разных инструментов должны различаться.
+
+> Markdown-режим не имеет стандартного маркера для подчёркивания — по умолчанию используется `++текст++`. Глубоко вложенные комбинации форматов (например, жирный внутри курсива) гарантированно сохраняются только в режиме `html`.
 
 ## API
 
@@ -75,6 +143,10 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 | `copyButton` | `boolean` | Наличие кнопки копирования |
 | `symbolCounter` | `boolean` | Наличие счётчика символов |
 | `placeholder` | `string \| null` | Текст-заглушка |
+| `format` | `boolean` | Включено ли форматирование |
+| `formatStorage` | `FormatStorage` | Формат хранения: `"html"` \| `"markdown"` |
+| `formatTools` | `FormatTool[]` | Включённые инструменты форматирования |
+| `formatMarkers` | `FormatMarkers` | Markdown-маркеры по инструментам (с учётом переопределений) |
 
 ### Событие textbox-change
 
@@ -92,6 +164,15 @@ textbox.on(CHANGE_EVENT, (data: ChangeEventData) => {
 textbox.onChange((data) => { ... });
 ```
 
+## Нормализация пробелов
+
+Когда редактирование логически завершено (поле теряет фокус), а также после инициализации и `setValue`, текст нормализуется:
+
+- повторяющиеся пробелы/табы схлопываются в один;
+- пробелы по краям каждой строки обрезаются.
+
+Форматирование и переносы строк (`<br>`/блоки) при этом сохраняются. Во время набора текста пробелы не трогаются — нормализация выполняется только по завершении. Если нормализация изменила значение, при потере фокуса генерируется событие [`textbox-change`](#событие-textbox-change).
+
 ## CSS-классы состояний
 
 | Класс | Условие |
@@ -102,3 +183,4 @@ textbox.onChange((data) => { ... });
 | `required` | Атрибут `required` задан |
 | `readonly` | Режим только для чтения |
 | `disabled` | Элемент отключён |
+| `active` | На кнопке панели форматирования — формат активен для текущего выделения |

package/package.json

@@ -1,4 +1,7 @@
 {
+  "publishConfig": {
+    "access": "public"
+  },
   "name": "@brandup/ui-textbox",
   "description": "Textbox control type and styles.",
   "keywords": [
@@ -21,14 +24,15 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.30",
+  "version": "1.0.36",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
-    "@brandup/ui": "^2.0.3",
-    "@brandup/ui-helpers": "^2.0.3",
-    "@brandup/ui-input": "^1.0.30",
-    "@brandup/ui-kit": "^1.0.30"
+    "@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"
   },
   "files": [
     "source",

package/source/index.ts

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

package/source/textbox.less

@@ -46,11 +46,11 @@
 		box-sizing: border-box;
 		cursor: text;
 		position: relative;
-		overflow-y: auto;
 		z-index: 2;
 		margin-right: 5px;
 		padding-right: calc(var(--input-padding-lr) - 5px);
 		scrollbar-width: 6px;
+		overflow-y: auto;
 
 		&::-webkit-scrollbar {
 			width: 6px;
@@ -71,35 +71,15 @@
 		}
 	}
 
-	& .input {
-		appearance: none;
-		position: relative;
+	// редактор (@brandup/ui-richeditor) — занимает доступное место; внутреннее оформление в richeditor.less
+	& .ui-richeditor {
 		flex: 1 1 auto;
-		box-sizing: border-box;
-		word-wrap: anywhere;
-		outline: none;
-
-		&:empty {
-			&:after {
-				content: attr(data-placeholder);
-				display: block;
-				position: absolute;
-				left: 0;
-				top: 0;
-				right: 0;
-				color: var(--placeholder-color);
-				font-weight: var(--placeholder-font-weight);
-				font-style: var(--placeholder-font-style);
-				box-sizing: border-box;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
+		min-width: 0;
+	}
 
-			& ~ .symbols {
-				display: none;
-			}
-		}
+	// скрываем счётчик, пока редактор пуст (показан placeholder)
+	& .editor:has(.ui-richeditor:empty) .symbols {
+		display: none;
 	}
 
 	& .symbols {
@@ -136,6 +116,16 @@
 			outline: none;
 			transition: all ease 100ms;
 			cursor: pointer;
+			opacity: 0.7;
+
+			&.success {
+				--svg-fill: var(--color-success);
+			}
+
+			&:hover,
+			&.success {
+				opacity: 1;
+			}
 		}
 
 		&:empty {
@@ -153,15 +143,8 @@
 			gap: 2px;
 		}
 
-		& .input {
+		& .ui-richeditor {
 			flex: 1 10 auto;
-
-			&:empty {
-				&:after {
-					white-space: normal;
-					text-overflow: unset;
-				}
-			}
 		}
 	}
 

package/source/textbox.ts

@@ -4,6 +4,14 @@ import { InputControl } from "@brandup/ui-input";
 import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
 import { DOM } from "@brandup/ui";
 import { FuncHelper } from "@brandup/ui-helpers";
+import RichEditor, {
+	defaultFormatMarkers,
+	parseFormatTools,
+	type FormatMarkers,
+	type FormatStorage,
+	type FormatTool,
+	type RichEditorOptions,
+} from "@brandup/ui-richeditor";
 import copyIcon from "../svg/copy.svg";
 import doneIcon from "../svg/tick.svg";
 
@@ -20,7 +28,8 @@ type TextBoxEvents = {
 };
 
 export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAreaElement, TextBoxEvents> {
-	private __inputElem: HTMLElement;
+	private __editor: RichEditor;
+	private __inputElem: HTMLElement; // редактируемый элемент (им владеет RichEditor)
 	private __symbolsCountElem: HTMLElement;
 	private __listenerAbort = new AbortController();
 
@@ -33,6 +42,10 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	readonly inputmode: string;
 	readonly symbolCounter: boolean;
 	readonly autoFocus: boolean;
+	readonly format: boolean;
+	readonly formatStorage: FormatStorage;
+	readonly formatTools: FormatTool[];
+	readonly formatMarkers: FormatMarkers;
 
 	constructor(valueElem: HTMLInputElement | HTMLTextAreaElement) {
 		// определяем тип ввода и нормализуем валидационные атрибуты до super()
@@ -73,8 +86,24 @@ 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 format = type === "text" && valueElem.hasAttribute("data-format");
+		const formatStorage: FormatStorage =
+			valueElem.getAttribute("data-format-storage") === "markdown" ? "markdown" : "html";
+		const formatTools = format ? parseFormatTools(valueElem.getAttribute("data-format-tools")) : [];
+
+		// markdown-маркеры с дефолтами, переопределяются атрибутами data-format-md-<tool>
+		const formatMarkers = defaultFormatMarkers();
+		if (format) {
+			for (const tool of Object.keys(formatMarkers) as FormatTool[]) {
+				const marker = valueElem.getAttribute(`data-format-md-${tool}`)?.trim();
+				if (marker) formatMarkers[tool] = marker;
+			}
+		}
 
-		const inputElem = DOM.tag("div", { class: "input" });
+		const inputElem = DOM.tag("div");
 		const actionsElem = DOM.tag("div", { class: "actions" });
 		const symbolsCountElem = DOM.tag("div", { class: "symbols" });
 
@@ -86,15 +115,11 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		container.classList.remove(INPUT_CLASS);
 
-		inputElem.tabIndex = valueElem.tabIndex;
+		inputElem.tabIndex = disabled ? -1 : valueElem.tabIndex;
 		valueElem.tabIndex = -1;
 
 		if (multyline) container.classList.add("multyline");
 		if (symbolCounter) container.classList.add("counter");
-
-		if (disabled) inputElem.tabIndex = -1;
-		else inputElem.contentEditable = "true";
-
 		if (inputmode) inputElem.inputMode = inputmode;
 
 		if (copyButton) {
@@ -107,8 +132,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			actionsElem.insertAdjacentElement("beforeend", buttonElem);
 		}
 
-		inputElem.setAttribute("data-placeholder", placeholder ?? "");
-
 		// убираем висящую миниатюру, если есть, и вставляем container на место valueElem
 		if (valueElem.nextElementSibling) {
 			const nextElem = valueElem.nextElementSibling as HTMLElement;
@@ -128,218 +151,129 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.inputmode = inputmode;
 		this.multyline = multyline;
 		this.copyButton = copyButton;
+		this.format = format;
+		this.formatStorage = formatStorage;
+		this.formatTools = formatTools;
+		this.formatMarkers = formatMarkers;
 
 		this.__inputElem = inputElem;
 		this.__symbolsCountElem = symbolsCountElem;
 
-		this.__initLogic();
-		this.__initText();
-	}
-
-	private __initLogic() {
-		const { signal } = this.__listenerAbort; // один AbortController отписывает все listener'ы в destroy
-
-		this.element.addEventListener("drop", (e) => e.preventDefault(), { signal });
-		this.element.addEventListener("dragenter", (e) => e.preventDefault(), { signal });
-
-		this.__valueElem.addEventListener(
-			"change",
-			(e: Event) => {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-			},
-			{ signal }
-		);
-
-		let hasInputClick = false;
-		this.__inputElem.addEventListener(
-			"mousedown",
-			() => {
-				if (this.disabled) return;
-
-				hasInputClick = true;
-			},
-			{ signal }
-		);
-
-		this.__inputElem.addEventListener(
-			"focus",
-			() => {
-				if (this.disabled) return;
-
-				this.element.classList.add("focused");
-
-				if (this.readonly) this.__selectAll();
-				else if (!hasInputClick) this.__carretToEnd(); // пыремещаем курсов в конец, если клик не по строке
-			},
-			{ signal }
-		);
-
-		this.__inputElem.addEventListener(
-			"blur",
-			() => {
-				hasInputClick = false;
-
-				if (this.disabled) return;
-
-				this.element.classList.remove("focused");
-
-				// когда удаляем весь текст, то браузер оставляет один BR, что означает что текста нет
-				// удалить BR нужно, чтобы появился placeholder
-				if (this.__inputElem.firstChild?.nodeName === "BR") DOM.empty(this.__inputElem);
-			},
-			{ signal }
-		);
-
-		this.__inputElem.addEventListener(
-			"dblclick",
-			() => {
-				if (this.disabled) return;
-
-				if (this.copyButton && this.readonly) this.__selectAll();
-			},
-			{ signal }
-		);
-
-		this.element.addEventListener(
-			"paste",
-			(e: ClipboardEvent) => {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (this.readonly || this.disabled) return false;
-
-				let pastedData = e.clipboardData?.getData("text/plain");
-				if (!pastedData) return false;
-
-				if (this.type == "number") {
-					const numberData = /[\d\s]+/.exec(pastedData);
-					if (numberData && numberData.length) pastedData = numberData[0].replace(/\s/g, "");
-					else {
-						this.element.classList.add("incorrect");
-						window.setTimeout(() => this.element.classList.remove("incorrect"), 300);
-						return false;
-					}
+		// фильтрация ввода по типу, ограничение длины и обработка submit/ошибок — через хуки RichEditor
+		// (RichEditor про maxlength/типы не знает; всё это контролирует TextBox)
+		const options: RichEditorOptions = {
+			format,
+			tools: formatTools,
+			storage: formatStorage,
+			markers: formatMarkers,
+			placeholder,
+			multiline: multyline,
+			readonly,
+			// тулбар позиционируется относительно контейнера TextBox (а не document.body)
+			toolbarContainer: container,
+			value: valueElem.value,
+			onReject: () => this.__toIncorrect(),
+			onEnter: () => this.__submitForm(),
+		};
+
+		// допустим ли вводимый символ по типу
+		const typeAllowsChar = (char: string) => {
+			if (type === "number") return /\d/.test(char);
+			if (type === "email") return /[a-zA-Z\d.\-_@]/.test(char);
+			return true;
+		};
+
+		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;
 				}
+				return typeAllowsChar(char);
+			};
+		}
 
-				const selection = window.getSelection();
-				if (!selection) return false; // TODO
-
-				if (this.maxlength > 0) {
-					// обрезаем вставляемый текст по кол-ву оставшихся символов для ввода
-
-					const selectionLength = selection.toString().length;
-					const currentTextLength = this.__getTextLength();
-					const leftSymbols = this.maxlength - currentTextLength + selectionLength; // осталось символов для ввода
+		if (type === "number" || maxlength > 0) {
+			options.filterPaste = (text) => {
+				let pasted = text;
 
-					if (pastedData.length > leftSymbols) pastedData = pastedData.substring(0, leftSymbols);
+				if (type === "number") {
+					const numberData = /[\d\s]+/.exec(pasted);
+					if (!numberData || !numberData.length) return null;
+					pasted = numberData[0].replace(/\s/g, "");
 				}
 
-				const lines = pastedData.split(/\n/);
-				// тримим все строки, кроме начала первой строки, вдруг так нужно
-				const output = lines.map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
-
-				const fragment = document.createDocumentFragment();
-				if (!this.multyline) {
-					fragment.appendChild(document.createTextNode(output.join(" ")));
-				} else {
-					output.forEach((line, index) => {
-						if (index > 0) fragment.appendChild(document.createElement("br"));
-
-						fragment.appendChild(document.createTextNode(line));
-					});
+				// обрезаем по количеству оставшихся символов (с учётом замены выделения)
+				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));
 				}
 
-				// Удаляем выделенную область
-				selection.getRangeAt(0).deleteContents();
-
-				// Вставляем текст
-				selection.getRangeAt(0).insertNode(fragment);
-
-				// Перемещаем курсор в конец вставленной области
-				selection.setPosition(selection.focusNode, selection.focusOffset);
-
-				this.__applyValue();
+				return pasted;
+			};
+		}
 
-				return true;
-			},
-			{ signal }
-		);
+		this.__editor = new RichEditor(inputElem, options);
 
-		this.__inputElem.addEventListener(
-			"keydown",
-			(e: KeyboardEvent) => {
-				const isChar = e.key.length === 1;
+		// RichEditor не знает про disabled — отключаем редактирование на стороне TextBox
+		// (визуал даёт класс .disabled от InputControl: затемнение, user-select: none)
+		if (disabled) inputElem.contentEditable = "false";
 
-				if ((this.readonly || this.disabled) && isChar && !e.ctrlKey) {
-					e.preventDefault();
-					e.stopPropagation();
-					return false;
-				}
+		// синхронизируем скрытое поле с нормализованным содержимым редактора (без события)
+		this.__valueElem.value = this.__editor.getValue();
 
-				if (this.maxlength > 0 && isChar && !e.ctrlKey) {
-					const currentTextLength = this.__getTextLength();
-					if (currentTextLength >= this.maxlength) {
-						e.preventDefault();
-						e.stopPropagation();
+		this.__initLogic();
+		this.__refreshSymbolsCount();
 
-						this.__toIncorrect();
-						return false;
-					}
-				}
+		if (this.autoFocus && !IS_TOUCH_DEVICE && !disabled && !readonly) this.__editor.focus();
+	}
 
-				if (isChar && !e.ctrlKey) {
-					let isIncorrect = false;
-
-					switch (this.type) {
-						case "number":
-							if (!/\d/.test(e.key)) isIncorrect = true;
-							break;
-						case "email":
-							if (!/[a-zA-Z\d.\-_@]/.test(e.key)) isIncorrect = true;
-							break;
-					}
-
-					if (isIncorrect) {
-						e.preventDefault();
-						e.stopPropagation();
-
-						this.__toIncorrect();
-						return false;
-					}
-				}
+	private __initLogic() {
+		const { signal } = this.__listenerAbort;
+		const editable = this.__inputElem;
 
-				if (!this.multyline && (e.key == "U+000A" || e.key == "Enter")) {
-					// Если однострочный режим и нажат enter, то отправляем submit формы
-					e.preventDefault();
-					this.__submitForm();
-					return false;
-				}
+		// изменения редактора → значение формы, счётчик, валидность, событие
+		this.__editor.onChange((data) => {
+			this.__valueElem.value = data.value;
 
-				return true;
-			},
-			{ signal }
-		);
-
-		this.__inputElem.addEventListener(
-			"input",
-			() => {
-				if (this.multyline && this.__inputElem.children.length === 1) {
-					const child = this.__inputElem.children.item(0);
-					if (child && child.tagName === "BR") this.__inputElem.innerHTML = "";
-				}
+			this.__refreshSymbolsCount();
 
-				this.__applyValue();
+			let clearInvalidState = true;
+			if (this.element.classList.contains("invalid")) clearInvalidState = this.validate();
+			if (clearInvalidState) this.element.classList.remove("invalid");
 
-				let clearInvalidState = true;
+			this.__onChange();
+		});
 
-				if (this.element.classList.contains("invalid")) clearInvalidState = this.validate(); // Если уже не валидно, то перепроверяем
+		// состояние фокуса контрола (рамка/заливка) — на корневом элементе
+		editable.addEventListener("focus", () => !this.disabled && this.element.classList.add("focused"), { signal });
+		editable.addEventListener("blur", () => !this.disabled && this.element.classList.remove("focused"), { signal });
 
-				if (clearInvalidState) this.element.classList.remove("invalid");
+		// гасим нативный change скрытого поля
+		this.__valueElem.addEventListener(
+			"change",
+			(e: Event) => {
+				e.preventDefault();
+				e.stopImmediatePropagation();
 			},
 			{ signal }
 		);
 
+		// двойной клик по readonly-полю с кнопкой копирования — выделить всё для копирования
+		if (this.copyButton) {
+			editable.addEventListener(
+				"dblclick",
+				() => {
+					if (this.disabled || !this.readonly) return;
+					editable.focus();
+					window.getSelection()?.selectAllChildren(editable);
+				},
+				{ signal }
+			);
+		}
+
 		this.registerCommand("copy-text", async (context) => {
 			if (!window.navigator.clipboard || this.disabled) return;
 
@@ -357,37 +291,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		});
 	}
 
-	private __initText() {
-		DOM.empty(this.__inputElem);
-
-		const text = this.__valueElem.value;
-		if (text) {
-			const lines = text.split(/\n/);
-			lines.forEach((line, index) => {
-				line = line.trim();
-
-				if (index === 0) this.__inputElem.append(document.createTextNode(line));
-				else {
-					const lineElem = document.createElement("div");
-					lineElem.textContent = line;
-					this.__inputElem.append(lineElem);
-				}
-			});
-		}
-
-		this.__refreshSymbolsCount();
-
-		if (this.autoFocus && !IS_TOUCH_DEVICE && !this.disabled && !this.readonly) this.__inputElem.focus();
-	}
-
-	private __applyValue() {
-		const newValue = this.__inputElem.innerText.trim();
-		this.__valueElem.value = newValue;
-
-		this.__refreshSymbolsCount();
-		this.__onChange();
-	}
-
 	private __toIncorrect() {
 		this.element.classList.add("incorrect");
 		window.setTimeout(() => this.element.classList.remove("incorrect"), 200);
@@ -396,7 +299,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	private __refreshSymbolsCount() {
 		if (!this.__symbolsCountElem) return;
 
-		const textLength = this.__getTextLength();
+		const textLength = this.__editor.getLength();
 		let counterValue: string;
 
 		if (this.maxlength > 0) {
@@ -408,29 +311,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.__symbolsCountElem.textContent = counterValue;
 	}
 
-	private __selectAll() {
-		this.__inputElem.focus();
-
-		window.getSelection()?.selectAllChildren(this.__inputElem);
-	}
-
-	private __carretToEnd() {
-		const range = document.createRange();
-		range.selectNodeContents(this.__inputElem);
-		range.collapse(false);
-		const sel = window.getSelection();
-		if (sel) {
-			sel.removeAllRanges();
-			sel.addRange(range);
-		}
-	}
-
-	private __getTextLength() {
-		// textContent не вставляет \n между блочными детьми (в отличие от innerText), так что multiline-контент считается корректно;
-		// заодно работает в jsdom, где innerText не реализован.
-		return this.__inputElem.textContent?.length ?? 0;
-	}
-
 	private __onChange() {
 		this.trigger(CHANGE_EVENT, <ChangeEventData>{
 			textbox: this,
@@ -438,6 +318,16 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		});
 	}
 
+	/** Многострочный режим (textarea). Псевдоним без опечатки в имени. */
+	get multiline(): boolean {
+		return this.multyline;
+	}
+
+	/** Доступ к встроенному редактору (форматирование, выделение и т.п.). */
+	get editor(): RichEditor {
+		return this.__editor;
+	}
+
 	onChange(handler: (e: ChangeEventData) => void) {
 		this.on(CHANGE_EVENT, handler);
 	}
@@ -451,10 +341,8 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 	}
 
 	setValue(value: string): void {
-		this.__valueElem.value = value?.trim() ?? "";
-
-		this.__initText();
-		this.__onChange();
+		// RichEditor нормализует и сгенерирует change — он синхронизирует скрытое поле и вызовет textbox-change
+		this.__editor.setValue(value?.trim() ?? "");
 	}
 
 	override validate(): boolean {
@@ -464,7 +352,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 			if (this.required && !value) isValid = false;
 
-			if (this.maxlength > 0 && this.maxlength < value.length) isValid = false;
+			// длина — по видимому тексту (getLength), а не по сериализованному value:
+			// при format/html в value есть теги, в multiline — разделители абзацев \n\n
+			if (this.maxlength > 0 && this.maxlength < this.__editor.getLength()) isValid = false;
 		}
 
 		if (!isValid) this.element.classList.add("invalid");
@@ -475,8 +365,9 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 	override destroy(): void {
 		this.__listenerAbort.abort();
-		this.__valueElem.tabIndex = this.__inputElem.tabIndex;
+		this.__editor.destroy();
 
+		this.__valueElem.tabIndex = this.__inputElem.tabIndex;
 		this.element.insertAdjacentElement("afterend", this.__valueElem);
 		this.element.remove();