@brandup/ui-textbox 1.0.34 → 1.0.38

package/source/textbox.ts

@@ -4,35 +4,17 @@ 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 {
-	FORMAT_TOOLS,
-	HOTKEY_TOOLS,
+import RichEditor, {
 	defaultFormatMarkers,
-	deserialize,
-	insertFormattedText,
-	isFormatActive,
-	normalizeWhitespace,
+	parseEditorActions,
 	parseFormatTools,
-	selectionCharBounds,
-	serialize,
-	toggleFormat,
 	type FormatMarkers,
 	type FormatStorage,
 	type FormatTool,
-} from "./format";
+	type RichEditorOptions,
+} from "@brandup/ui-richeditor";
 import copyIcon from "../svg/copy.svg";
 import doneIcon from "../svg/tick.svg";
-import boldIcon from "../svg/bold.svg";
-import italicIcon from "../svg/italic.svg";
-import strikeIcon from "../svg/strike.svg";
-import underlineIcon from "../svg/underline.svg";
-
-const FORMAT_ICONS: Record<FormatTool, string> = {
-	bold: boldIcon,
-	italic: italicIcon,
-	strike: strikeIcon,
-	underline: underlineIcon,
-};
 
 export const ROOT_CLASS = "ui-textbox";
 export const INPUT_CLASS = "textbox-input";
@@ -47,11 +29,10 @@ 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();
-	private __formatButtons: Array<[FormatTool, HTMLButtonElement]> = [];
-	private __pendingFormats = new Set<FormatTool>(); // режим набора: форматы для следующего ввода
 
 	readonly type: TextBoxType;
 	readonly allowEmptyStrings: boolean;
@@ -113,6 +94,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();
@@ -123,7 +106,7 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 			}
 		}
 
-		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" });
 
@@ -135,53 +118,24 @@ 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;
 
-		// панель форматирования — кнопки в той же области, что и кнопка копирования
-		const formatButtons: Array<[FormatTool, HTMLButtonElement]> = [];
-		if (format && formatTools.length && !disabled && !readonly) {
-			const toolbarElem = DOM.tag("div", { class: "format-toolbar" });
-			for (const tool of formatTools) {
-				const def = FORMAT_TOOLS[tool];
-				const buttonElem = DOM.tag(
-					"button",
-					{
-						type: "button",
-						class: "format-button",
-						command: def.command,
-						"data-format-tool": tool,
-						title: def.title,
-					},
-					FORMAT_ICONS[tool]
-				);
-				toolbarElem.insertAdjacentElement("beforeend", buttonElem);
-				formatButtons.push([tool, buttonElem]);
-			}
-			// плавающая панель над контролом, видимость управляется классом .focused
-			container.insertAdjacentElement("beforeend", toolbarElem);
-		}
-
 		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;
 			actionsElem.insertAdjacentElement("beforeend", buttonElem);
 		}
 
-		inputElem.setAttribute("data-placeholder", placeholder ?? "");
-
 		// убираем висящую миниатюру, если есть, и вставляем container на место valueElem
 		if (valueElem.nextElementSibling) {
 			const nextElem = valueElem.nextElementSibling as HTMLElement;
@@ -208,238 +162,122 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 
 		this.__inputElem = inputElem;
 		this.__symbolsCountElem = symbolsCountElem;
-		this.__formatButtons = formatButtons;
-
-		this.__initLogic();
-		this.__initFormat();
-		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);
-
-				// редактирование завершено — нормализуем пробелы (с событием change, если что-то изменилось)
-				this.__normalizeWhitespace(true);
-			},
-			{ signal }
-		);
-
-		this.__inputElem.addEventListener(
-			"dblclick",
-			() => {
-				if (this.disabled) return;
-
-				if (this.copyButton && this.readonly) {
-					this.__selectAll();
-					return;
-				}
-
-				// браузер при выделении слова может захватить пробел у границы — убираем его
-				this.__trimSelectionWhitespace();
-			},
-			{ 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,
+			actions: editorActions,
+			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();
+				return pasted;
+			};
+		}
 
-				// Вставляем текст
-				selection.getRangeAt(0).insertNode(fragment);
+		this.__editor = new RichEditor(inputElem, options);
 
-				// Перемещаем курсор в конец вставленной области
-				selection.setPosition(selection.focusNode, selection.focusOffset);
+		// RichEditor не знает про disabled — отключаем редактирование на стороне TextBox
+		// (визуал даёт класс .disabled от InputControl: затемнение, user-select: none)
+		if (disabled) inputElem.contentEditable = "false";
 
-				this.__applyValue();
+		// синхронизируем скрытое поле с нормализованным содержимым редактора (без события)
+		this.__valueElem.value = this.__editor.getValue();
 
-				return true;
-			},
-			{ signal }
-		);
+		this.__initLogic();
+		this.__refreshSymbolsCount();
 
-		this.__inputElem.addEventListener(
-			"keydown",
-			(e: KeyboardEvent) => {
-				// хоткеи форматирования (Ctrl/Cmd+B/I/U); зачёркивание — только кнопкой
-				if (this.format && (e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey) {
-					const tool = HOTKEY_TOOLS[e.key.toLowerCase()];
-					if (tool) {
-						e.preventDefault();
-						e.stopPropagation();
-
-						// перехватываем даже отключённый инструмент, чтобы не сработало форматирование браузера
-						if (this.formatTools.includes(tool)) this.__applyFormat(tool);
-						return false;
-					}
-				}
+		if (this.autoFocus && !IS_TOUCH_DEVICE && !disabled && !readonly) this.__editor.focus();
+	}
 
-				const isChar = e.key.length === 1;
+	private __initLogic() {
+		const { signal } = this.__listenerAbort;
+		const editable = this.__inputElem;
 
-				if ((this.readonly || this.disabled) && isChar && !e.ctrlKey) {
-					e.preventDefault();
-					e.stopPropagation();
-					return false;
-				}
+		// изменения редактора → значение формы, счётчик, валидность, событие
+		this.__editor.onChange((data) => {
+			this.__valueElem.value = data.value;
 
-				if (this.maxlength > 0 && isChar && !e.ctrlKey) {
-					const currentTextLength = this.__getTextLength();
-					if (currentTextLength >= this.maxlength) {
-						e.preventDefault();
-						e.stopPropagation();
+			this.__refreshSymbolsCount();
 
-						this.__toIncorrect();
-						return false;
-					}
-				}
+			let clearInvalidState = true;
+			if (this.element.classList.contains("invalid")) clearInvalidState = this.validate();
+			if (clearInvalidState) this.element.classList.remove("invalid");
 
-				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;
-					}
-				}
+			this.__onChange();
+		});
 
-				if (!this.multyline && (e.key == "U+000A" || e.key == "Enter")) {
-					// Если однострочный режим и нажат enter, то отправляем submit формы
-					e.preventDefault();
-					this.__submitForm();
-					return false;
-				}
+		// состояние фокуса контрола (рамка/заливка) — на корневом элементе
+		editable.addEventListener("focus", () => !this.disabled && this.element.classList.add("focused"), { signal });
+		editable.addEventListener("blur", () => !this.disabled && this.element.classList.remove("focused"), { signal });
 
-				return true;
+		// гасим нативный change скрытого поля
+		this.__valueElem.addEventListener(
+			"change",
+			(e: Event) => {
+				e.preventDefault();
+				e.stopImmediatePropagation();
 			},
 			{ 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.__applyValue();
-
-				let clearInvalidState = true;
-
-				if (this.element.classList.contains("invalid")) clearInvalidState = this.validate(); // Если уже не валидно, то перепроверяем
-
-				if (clearInvalidState) this.element.classList.remove("invalid");
-			},
-			{ 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;
@@ -458,216 +296,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		});
 	}
 
-	private __initFormat() {
-		if (!this.format || !this.__formatButtons.length) return;
-
-		const { signal } = this.__listenerAbort;
-
-		for (const [tool, buttonElem] of this.__formatButtons) {
-			// не даём кнопке забрать фокус, иначе теряется выделение в редакторе
-			buttonElem.addEventListener("mousedown", (e) => e.preventDefault(), { signal });
-
-			this.registerCommand(FORMAT_TOOLS[tool].command, () => this.__applyFormat(tool));
-		}
-
-		// подсветка активных инструментов по текущему выделению
-		document.addEventListener(
-			"selectionchange",
-			() => {
-				if (document.activeElement === this.element || this.element.contains(document.activeElement))
-					this.__refreshFormatState();
-			},
-			{ signal }
-		);
-
-		// режим набора: оборачиваем вводимый текст в ожидающие форматы
-		this.__inputElem.addEventListener(
-			"beforeinput",
-			(e: InputEvent) => {
-				if (this.disabled || this.readonly || this.__pendingFormats.size === 0) return;
-				if (e.inputType !== "insertText" || e.data == null) return;
-
-				e.preventDefault();
-				this.__insertPendingText(e.data);
-			},
-			{ signal }
-		);
-
-		// перемещение каретки/клик/потеря фокуса — выходим из режима набора
-		const navKeys = [
-			"ArrowLeft",
-			"ArrowRight",
-			"ArrowUp",
-			"ArrowDown",
-			"Home",
-			"End",
-			"PageUp",
-			"PageDown",
-			"Escape",
-		];
-		this.__inputElem.addEventListener(
-			"keydown",
-			(e: KeyboardEvent) => {
-				if (navKeys.includes(e.key)) this.__clearPendingFormats();
-			},
-			{ signal }
-		);
-		this.__inputElem.addEventListener("mousedown", () => this.__clearPendingFormats(), { signal });
-		this.__inputElem.addEventListener("blur", () => this.__clearPendingFormats(), { signal });
-	}
-
-	private __clearPendingFormats() {
-		if (!this.__pendingFormats.size) return;
-
-		this.__pendingFormats.clear();
-		this.__refreshFormatState();
-	}
-
-	private __insertPendingText(data: string) {
-		const selection = window.getSelection();
-		if (!selection || !this.__inputElem.contains(selection.anchorNode)) return;
-
-		insertFormattedText(this.__inputElem, data, Array.from(this.__pendingFormats), selection);
-
-		this.__applyValue();
-		this.__refreshFormatState();
-	}
-
-	private __applyFormat(tool: FormatTool) {
-		if (!this.format || this.readonly || this.disabled || !this.formatTools.includes(tool)) return;
-
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0) return;
-
-		// выделение должно быть внутри редактора (не вызываем focus() — он схлопнул бы выделение)
-		if (!this.__inputElem.contains(selection.anchorNode)) return;
-
-		// запоминаем исходное выделение/каретку, чтобы вернуть его после форматирования
-		const original = selectionCharBounds(this.__inputElem, selection.getRangeAt(0));
-
-		// форматируем слова целиком: и при курсоре без выделения, и при выделении части слова
-		this.__expandSelectionToWords(selection);
-
-		const range = selection.getRangeAt(0);
-		if (range.collapsed) {
-			// под кареткой нет слова (пробелы/пустое поле) — режим набора: запоминаем формат для следующего ввода
-			if (this.__pendingFormats.has(tool)) this.__pendingFormats.delete(tool);
-			else this.__pendingFormats.add(tool);
-
-			this.__refreshFormatState();
-			return;
-		}
-
-		this.__pendingFormats.clear(); // есть что форматировать — режим набора не нужен
-
-		// формат применяется к слову, но восстанавливаем исходное выделение пользователя
-		toggleFormat(this.__inputElem, range, tool, selection, original);
-
-		this.__applyValue();
-		this.__refreshFormatState();
-	}
-
-	private __expandSelectionToWords(selection: Selection) {
-		const range = selection.getRangeAt(0);
-
-		const { startContainer, endContainer } = range;
-		let startOffset = range.startOffset;
-		let endOffset = range.endOffset;
-
-		// начало выделения — влево до начала слова
-		if (startContainer.nodeType === Node.TEXT_NODE && this.__inputElem.contains(startContainer)) {
-			const text = startContainer.textContent ?? "";
-			while (startOffset > 0 && !/\s/.test(text[startOffset - 1])) startOffset--;
-		}
-
-		// конец выделения — вправо до конца слова
-		if (endContainer.nodeType === Node.TEXT_NODE && this.__inputElem.contains(endContainer)) {
-			const text = endContainer.textContent ?? "";
-			while (endOffset < text.length && !/\s/.test(text[endOffset])) endOffset++;
-		}
-
-		if (startOffset === range.startOffset && endOffset === range.endOffset) return; // границы не изменились
-
-		const expanded = document.createRange();
-		expanded.setStart(startContainer, startOffset);
-		expanded.setEnd(endContainer, endOffset);
-		selection.removeAllRanges();
-		selection.addRange(expanded);
-	}
-
-	private __refreshFormatState() {
-		if (!this.format) return;
-
-		const selection = window.getSelection();
-		const range =
-			selection && selection.rangeCount > 0 && this.__inputElem.contains(selection.anchorNode)
-				? selection.getRangeAt(0)
-				: null;
-
-		for (const [tool, buttonElem] of this.__formatButtons) {
-			const active =
-				this.__pendingFormats.has(tool) || (range ? isFormatActive(this.__inputElem, range, tool) : false);
-			buttonElem.classList.toggle("active", active);
-		}
-	}
-
-	private __initText() {
-		DOM.empty(this.__inputElem);
-
-		const text = this.__valueElem.value;
-		if (text) {
-			if (this.format) {
-				this.__inputElem.innerHTML = deserialize(
-					text,
-					this.formatStorage,
-					this.formatTools,
-					this.formatMarkers
-				);
-			} else {
-				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.__normalizeWhitespace(false); // нормализация после инициализации/setValue (без события)
-
-		this.__refreshSymbolsCount();
-
-		if (this.autoFocus && !IS_TOUCH_DEVICE && !this.disabled && !this.readonly) this.__inputElem.focus();
-	}
-
-	private __applyValue(silent = false) {
-		const newValue = this.format
-			? serialize(this.__inputElem, this.formatStorage, this.formatTools, this.formatMarkers)
-			: this.__inputElem.innerText.trim();
-		this.__valueElem.value = newValue;
-
-		this.__refreshSymbolsCount();
-		if (!silent) this.__onChange();
-	}
-
-	// Нормализация пробелов редактора (схлопывание повторов + обрезка краёв строк).
-	// Значение пересинхронизируется только если содержимое изменилось; notify=true — c событием change.
-	private __normalizeWhitespace(notify: boolean) {
-		if (this.disabled || this.readonly) return;
-
-		const before = this.__inputElem.textContent ?? "";
-		normalizeWhitespace(this.__inputElem);
-		if ((this.__inputElem.textContent ?? "") === before) return;
-
-		this.__applyValue(true);
-		if (notify) this.__onChange();
-	}
-
 	private __toIncorrect() {
 		this.element.classList.add("incorrect");
 		window.setTimeout(() => this.element.classList.remove("incorrect"), 200);
@@ -676,7 +304,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) {
@@ -688,65 +316,6 @@ export default class TextBox extends InputControl<HTMLInputElement | HTMLTextAre
 		this.__symbolsCountElem.textContent = counterValue;
 	}
 
-	private __selectAll() {
-		this.__inputElem.focus();
-
-		window.getSelection()?.selectAllChildren(this.__inputElem);
-	}
-
-	private __trimSelectionWhitespace() {
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
-
-		const range = selection.getRangeAt(0);
-
-		// выделение должно оставаться внутри редактора
-		if (!this.__inputElem.contains(range.startContainer) || !this.__inputElem.contains(range.endContainer)) return;
-
-		const { startContainer, endContainer } = range;
-		let startOffset = range.startOffset;
-		let endOffset = range.endOffset;
-
-		// убираем пробелы в начале
-		if (startContainer.nodeType === Node.TEXT_NODE) {
-			const text = startContainer.textContent ?? "";
-			while (startOffset < text.length && /\s/.test(text[startOffset])) startOffset++;
-		}
-
-		// убираем пробелы в конце
-		if (endContainer.nodeType === Node.TEXT_NODE) {
-			const text = endContainer.textContent ?? "";
-			while (endOffset > 0 && /\s/.test(text[endOffset - 1])) endOffset--;
-		}
-
-		// в пределах одного узла выделение не должно схлопнуться или вывернуться
-		if (startContainer === endContainer && startOffset >= endOffset) return;
-		if (startOffset === range.startOffset && endOffset === range.endOffset) return;
-
-		const trimmed = document.createRange();
-		trimmed.setStart(startContainer, startOffset);
-		trimmed.setEnd(endContainer, endOffset);
-		selection.removeAllRanges();
-		selection.addRange(trimmed);
-	}
-
-	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,
@@ -754,6 +323,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);
 	}
@@ -767,10 +346,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 {
@@ -780,7 +357,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");
@@ -791,8 +370,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();