@brandup/ui-richeditor 1.0.36 → 1.0.39

package/source/richeditor.ts

@@ -4,35 +4,47 @@ import { DOM, UIElementBound } from "@brandup/ui";
 import {
 	ALL_FORMAT_TOOLS,
 	HOTKEY_TOOLS,
+	activeFormats,
+	clearAllFormat,
+	clearFormat,
 	defaultFormatMarkers,
 	deserialize,
 	ensureParagraphs,
+	hasAnyFormatting,
+	hasFormatting,
 	insertFormattedText,
 	isFormatActive,
+	documentSelection,
+	innerSelection,
+	mapCharOffset,
+	preserveCaret,
 	normalizeParagraphs,
 	normalizeWhitespace,
 	restoreSelection,
 	selectionCharBounds,
 	serialize,
 	toggleFormat,
+	type EditorAction,
 	type FormatMarkers,
 	type FormatStorage,
+	type ParagraphMode,
 	type FormatTool,
 } from "./format";
 import {
+	buildParagraphs,
 	caretToEnd,
-	expandSelectionToWords,
+	expandRangeToWords,
 	insertParagraph,
 	insertPastedParagraphs,
 	insertSoftBreak,
+	sanitizePastedHtml,
 	selectAllContent,
-	trimParagraphEdges,
 	trimSelectionWhitespace,
 } from "./editing";
 import { EditorHistory } from "./history";
-import { formatToolbar } from "./toolbar";
+import { formatToolbar, type ToolbarButton } from "./toolbar";
 
-export { TOOLBAR_CLASS, formatToolbar, type ToolbarHost } from "./toolbar";
+export { TOOLBAR_CLASS, formatToolbar, type ToolbarHost, type ToolbarButton } from "./toolbar";
 
 export const ROOT_CLASS = "ui-richeditor"; // редактируемый элемент, к нему привязан UIElement
 export const CHANGE_EVENT = "richeditor-change";
@@ -52,6 +64,16 @@ const NATIVE_EDIT_TYPES = new Set([
 	"deleteByCut",
 ]);
 
+// Ввод текста, который не проходит через keydown (IME, автозамена, автодополнение, диктовка), —
+// к нему применяем фильтр символов хоста в beforeinput.
+const FILTERED_INPUT_TYPES = new Set(["insertText", "insertReplacementText", "insertCompositionText"]);
+
+// Максимальное отставание события change от печати. Сериализация значения — самая дорогая
+// операция редактора (обход всего содержимого), а печать даёт input на каждый символ.
+// Это троттлинг, а не debounce: при непрерывном наборе значение всё равно обновляется
+// каждые CHANGE_THROTTLE_MS, а не откладывается до паузы.
+const CHANGE_THROTTLE_MS = 150;
+
 // Буква физической клавиши (KeyA…KeyZ) — не зависит от раскладки. Для не-латинских раскладок
 // (например, кириллицы) e.key даёт другую букву, поэтому хоткеи сверяем и по e.code.
 function codeLetter(e: KeyboardEvent): string {
@@ -68,6 +90,8 @@ export interface RichEditorOptions {
 	format?: boolean;
 	/** Состав инструментов (по умолчанию все). */
 	tools?: FormatTool[];
+	/** Кнопки действий в панели: очистка форматирования, отмена, повтор (по умолчанию нет). */
+	actions?: EditorAction[];
 	/** Формат хранения значения при форматировании. */
 	storage?: FormatStorage;
 	/** Переопределения markdown-маркеров. */
@@ -76,10 +100,14 @@ export interface RichEditorOptions {
 	placeholder?: string | null;
 	/** Многострочный режим. */
 	multiline?: boolean;
+	/** Что делает Enter: новый абзац (по умолчанию) или мягкий перенос, как в мессенджерах. */
+	paragraph?: ParagraphMode;
 	/** Только для чтения — запрещает ввод и изменение текста (но не выделение/копирование). */
 	readonly?: boolean;
 	/** Контейнер для панели форматирования; по умолчанию document.body (position: fixed над редактором). */
 	toolbarContainer?: HTMLElement | null;
+	/** Собственные кнопки хоста в панели — для действий, которых редактор не знает. */
+	buttons?: ToolbarButton[];
 	/** Начальное значение. */
 	value?: string;
 
@@ -107,15 +135,23 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	readonly editable: HTMLElement;
 	readonly format: boolean;
 	readonly formatTools: FormatTool[];
+	readonly editorActions: EditorAction[];
 	readonly formatStorage: FormatStorage;
 	readonly formatMarkers: FormatMarkers;
 	readonly multiline: boolean;
+	readonly paragraph: ParagraphMode;
 	readonly toolbarContainer: HTMLElement | null;
+	readonly toolbarButtons: ToolbarButton[];
 
 	private __opts: RichEditorOptions;
 	private __abort = new AbortController();
 	private __pendingFormats = new Set<FormatTool>();
 	private __hasInputClick = false;
+	private __changeTimer = 0; // отложенное change по печати — см. __emitChange/flushChange
+	// Окно редактируемого элемента, взятое при создании. Таймер отложенного change переживает
+	// снятие компонента и гасится в destroy, а тот случается когда угодно — к этому моменту
+	// до глобального окружения может быть уже не добраться, да и элемент мог жить в iframe.
+	private readonly __window: Window;
 	// собственная история undo/redo — только при форматировании (см. ./history)
 	private __history: EditorHistory | null = null;
 
@@ -125,6 +161,8 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const readonly = !!options.readonly;
 		// форматирование недоступно в режиме только для чтения
 		const tools = format && !readonly ? (options.tools ?? ALL_FORMAT_TOOLS.slice()) : [];
+		// действия подключаются явно — иначе панель у существующих хостов молча обзавелась бы кнопками
+		const actions = format && !readonly ? (options.actions ?? []) : [];
 
 		// тулбар общий и живёт в body (см. ./toolbar), поэтому обёртка не нужна —
 		// привязываем UIElement прямо к переданному элементу, он же и редактируемый
@@ -133,13 +171,18 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		super("BrandUp.RichEditor", editable);
 
 		this.editable = editable;
+		this.__window = editable.ownerDocument.defaultView ?? window;
 		this.__opts = options;
 		this.format = format;
 		this.formatTools = tools;
+		this.editorActions = actions;
 		this.formatStorage = options.storage === "markdown" ? "markdown" : "html";
 		this.formatMarkers = Object.assign(defaultFormatMarkers(), options.markers);
 		this.multiline = multiline;
+		this.paragraph = options.paragraph ?? "block";
 		this.toolbarContainer = options.toolbarContainer ?? null;
+		// кнопки хоста живут и без форматирования, но не в readonly — там панели нет вовсе
+		this.toolbarButtons = readonly ? [] : (options.buttons ?? []);
 		// история включается вместе с форматированием
 		this.__history = format ? new EditorHistory(editable) : null;
 
@@ -161,6 +204,16 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		return !!this.__opts.readonly;
 	}
 
+	/**
+	 * Работает ли редактор моделью абзацев. В режиме break абзацных блоков нет: значение — плоский
+	 * текст, где каждый \n это <br>. Иначе `a\n\nb` рисовалось бы двумя <p>, а на экране (без
+	 * отступов между абзацами) это неотличимо от одного переноса — значение расходилось бы
+	 * с видимым текстом.
+	 */
+	private get __blockParagraphs(): boolean {
+		return this.multiline && this.paragraph === "block";
+	}
+
 	// формат хранения значения: format → выбранный; plain → markdown без инструментов (\n\n/\n)
 	private get __valueStorage(): FormatStorage {
 		return this.format ? this.formatStorage : "markdown";
@@ -177,11 +230,53 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	setValue(value: string): void {
+		// каретка внутри относилась к прежнему содержимому — после замены ставим её в конец
+		const hadCaret = !!this.selection;
+
 		this.__render(value ?? "");
 		this.__normalize(false);
+		if (hadCaret) caretToEnd(this.editable, this.multiline);
+
 		this.__emitChange();
 	}
 
+	/**
+	 * Вставляет текст в каретку (или вместо выделения) с учётом ожидающих форматов режима набора.
+	 * Каретка сохраняется и после потери фокуса, поэтому метод работает и при вызове из кода —
+	 * например, кнопкой панели, которая не должна забирать фокус у редактора.
+	 */
+	insertText(text: string): void {
+		if (this.readonly || !text || !this.selection) return;
+
+		// вставка — такой же ввод, как с клавиатуры, поэтому проходит через filterChar хоста
+		// (ограничения по типу поля и длине). Обход символов идёт по кодпойнтам, чтобы эмодзи
+		// проверялся целиком; длина сверяется с текущим содержимым, так что многосимвольная
+		// вставка ограничивается по первому символу — для одного символа проверка точная.
+		const filterChar = this.__opts.filterChar;
+		if (filterChar && !Array.from(text).every((char) => filterChar(char))) {
+			this.__reject();
+			return;
+		}
+
+		this.__history?.record("op");
+		this.__insertText(text);
+	}
+
+	/**
+	 * Показать панель вставки смайлика у своей кнопки — когда она живёт не в тулбаре, а в разметке
+	 * хоста (например справа от поля ввода). Вызывать из обработчика `click`, погасив всплытие:
+	 * иначе попап закроется тем же кликом, которым открылся.
+	 *
+	 * @param initiator Кнопка, у которой показывается панель.
+	 * @param container Куда монтировать панель; по умолчанию — родитель кнопки.
+	 */
+	openEmojiPicker(initiator: HTMLElement, container?: HTMLElement): void {
+		if (this.readonly) return;
+
+		const target = container ?? initiator.parentElement;
+		if (target) formatToolbar.openEmoji(this, initiator, target);
+	}
+
 	getLength(): number {
 		// textContent (а не innerText) корректно считает multiline и работает в jsdom
 		return this.editable.textContent?.length ?? 0;
@@ -195,22 +290,62 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.on(CHANGE_EVENT, handler);
 	}
 
-	/** Переключить форматирование инструмента (вызывается общим тулбаром и хоткеями). */
-	applyFormat(tool: FormatTool): void {
-		if (!this.format || this.readonly || !this.formatTools.includes(tool)) return;
+	/**
+	 * Выделение, если оно находится внутри этого редактора. Браузер сохраняет выделение и после
+	 * blur, поэтому проверка работает и когда фокус ушёл на кнопку страницы.
+	 */
+	get selection(): Selection | null {
+		return innerSelection(this.editable);
+	}
 
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0) return;
-		if (!this.editable.contains(selection.anchorNode)) return;
+	/**
+	 * Выделить узел внутри редактора — например, чтобы следующая вставка заменила его целиком.
+	 * Не зависит от того, где стоит выделение сейчас: оно могло уйти, пока хост показывал
+	 * своё окно, а сам узел никуда не делся.
+	 */
+	selectNode(node: Node): void {
+		if (!this.editable.contains(node)) return;
+
+		const selection = documentSelection(this.editable);
+		if (!selection) return;
+
+		const range = this.editable.ownerDocument.createRange();
+		range.selectNode(node);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	/**
+	 * Цель правки форматирования: выделение, расширенное до целых слов, плюс исходные границы
+	 * для восстановления. Диапазон отдельный от выделения — пока операция не решила, что будет
+	 * править, каретка пользователя не двигается. null — правка недоступна или выделение вне редактора.
+	 */
+	private __formatTarget(): { selection: Selection; range: Range; original: () => [number, number] } | null {
+		if (!this.format || this.readonly) return null;
+
+		const selection = this.selection;
+		if (!selection) return null;
+
+		const current = selection.getRangeAt(0);
+
+		return {
+			selection,
+			// форматируем слова целиком: и при курсоре без выделения, и при выделении части слова
+			range: expandRangeToWords(this.editable, current),
+			// границы считаем по требованию: они нужны только правкам, а цель вычисляется ещё и
+			// на каждое обновление панели, где сбор всего текста в строку — самая дорогая операция
+			original: () => selectionCharBounds(this.editable, current),
+		};
+	}
 
-		// запоминаем исходное выделение, чтобы вернуть его после форматирования
-		const original = selectionCharBounds(this.editable, selection.getRangeAt(0));
+	/** Переключить форматирование инструмента (вызывается общим тулбаром и хоткеями). */
+	applyFormat(tool: FormatTool): void {
+		if (!this.formatTools.includes(tool)) return;
 
-		// форматируем слова целиком: и при курсоре без выделения, и при выделении части слова
-		expandSelectionToWords(this.editable, selection);
+		const target = this.__formatTarget();
+		if (!target) return;
 
-		const range = selection.getRangeAt(0);
-		if (range.collapsed) {
+		if (target.range.collapsed) {
 			// под кареткой нет слова — режим набора: формат для следующего ввода
 			if (this.__pendingFormats.has(tool)) this.__pendingFormats.delete(tool);
 			else this.__pendingFormats.add(tool);
@@ -222,24 +357,114 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__pendingFormats.clear();
 
 		this.__history?.record("op");
-		toggleFormat(this.editable, range, tool, selection, original);
+		toggleFormat(this.editable, target.range, tool, target.selection, target.original());
 
 		this.__emitChange();
 		formatToolbar.refresh();
 	}
 
+	/**
+	 * Снимает всё форматирование с выделения; без выделения — со слова под кареткой
+	 * (как и применение формата). Режим набора сбрасывается.
+	 */
+	clearFormat(): void {
+		const target = this.__formatTarget();
+		if (!target) return;
+
+		this.__clearPendingFormats();
+
+		// нечего очищать — не пишем в историю пустой шаг и не трогаем выделение
+		if (!hasFormatting(this.editable, target.range)) return;
+
+		this.__history?.record("op");
+		clearFormat(this.editable, target.range, target.selection, target.original());
+
+		this.__emitChange();
+		formatToolbar.refresh();
+	}
+
+	/** Снимает всё форматирование со всего содержимого (выделение не требуется). */
+	clearAllFormat(): void {
+		if (!this.format || this.readonly) return;
+
+		this.__clearPendingFormats();
+		if (!hasAnyFormatting(this.editable)) return;
+
+		this.__history?.record("op");
+		// разворачивание тегов рвёт выделение — сохраняем его по текстовым смещениям
+		preserveCaret(this.editable, () => clearAllFormat(this.editable));
+
+		this.__emitChange();
+		formatToolbar.refresh();
+	}
+
+	/** Доступна ли отмена (история ведётся только при включённом форматировании). */
+	get canUndo(): boolean {
+		return !this.readonly && !!this.__history?.canUndo;
+	}
+
+	/** Доступен ли повтор отменённого. */
+	get canRedo(): boolean {
+		return !this.readonly && !!this.__history?.canRedo;
+	}
+
 	/** Отменить последнее действие (история ведётся только при форматировании). */
-	private __undo(): void {
-		if (!this.__history?.undo()) return;
+	undo(): void {
+		if (this.readonly || !this.__history?.undo()) return;
 		this.__afterHistory();
 	}
 
 	/** Повторить отменённое действие. */
-	private __redo(): void {
-		if (!this.__history?.redo()) return;
+	redo(): void {
+		if (this.readonly || !this.__history?.redo()) return;
 		this.__afterHistory();
 	}
 
+	/** Выполнить действие панели (вызывается кнопками тулбара). */
+	applyAction(action: EditorAction): void {
+		if (!this.editorActions.includes(action)) return;
+
+		switch (action) {
+			case "erase":
+				this.clearFormat();
+				break;
+			case "undo":
+				this.undo();
+				break;
+			case "redo":
+				this.redo();
+				break;
+			case "emoji":
+				// панель вставки открывает тулбар: ей нужна кнопка как якорь попапа.
+				// Вставка символа приходит сюда через insertText.
+				break;
+		}
+	}
+
+	/** Доступно ли действие сейчас (для disabled-состояния кнопки тулбара). */
+	isActionEnabled(action: EditorAction): boolean {
+		switch (action) {
+			case "undo":
+				return this.canUndo;
+			case "redo":
+				return this.canRedo;
+			case "erase":
+				return this.__hasFormatting();
+			case "emoji":
+				return !this.readonly;
+		}
+	}
+
+	// Есть ли что очищать: ожидающий формат режима набора либо форматирование на цели очистки.
+	// Смотрим на тот же расширенный до слов диапазон, что возьмёт clearFormat, — иначе кнопка
+	// блокировалась бы в случаях, когда операция сработала бы (каретка на границе формата).
+	private __hasFormatting(): boolean {
+		if (this.__pendingFormats.size > 0) return true;
+
+		const target = this.__formatTarget();
+		return !!target && hasFormatting(this.editable, target.range);
+	}
+
 	private __afterHistory(): void {
 		this.__pendingFormats.clear();
 		this.__emitChange();
@@ -250,13 +475,29 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	isToolActive(tool: FormatTool): boolean {
 		if (this.__pendingFormats.has(tool)) return true;
 
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0 || !this.editable.contains(selection.anchorNode)) return false;
+		const selection = this.selection;
+		if (!selection) return false;
 
 		return isFormatActive(this.editable, selection.getRangeAt(0), tool);
 	}
 
+	/**
+	 * Активные форматы всех инструментов сразу — панель обновляется на каждое движение каретки,
+	 * а поинструментный опрос обходил бы содержимое столько раз, сколько кнопок.
+	 */
+	activeTools(): ReadonlySet<FormatTool> {
+		const selection = this.selection;
+		const active = selection
+			? activeFormats(this.editable, selection.getRangeAt(0), this.formatTools)
+			: new Set<FormatTool>();
+
+		for (const tool of this.__pendingFormats) active.add(tool);
+
+		return active;
+	}
+
 	override destroy(): void {
+		this.flushChange(); // хост не должен остаться с устаревшей копией значения
 		this.__abort.abort();
 		formatToolbar.detach(this);
 
@@ -275,19 +516,56 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		if (!value) return;
 
 		// multiline → <p>-абзацы; single-line → инлайновое содержимое
+		const paragraphs = this.__blockParagraphs;
+
 		this.editable.innerHTML = deserialize(
 			value,
 			this.__valueStorage,
 			this.__valueTools,
 			this.formatMarkers,
-			this.multiline
+			paragraphs
 		);
+
+		// в break инлайновое содержимое оборачивается в единственный абзац — модель абзацев
+		// нужна редактированию (каретка, вставка), а разделителем строк остаётся <br>
+		if (this.multiline && !paragraphs) ensureParagraphs(this.editable);
 	}
 
-	private __emitChange() {
+	/**
+	 * Событие изменения. При `defer` (печать) доставка откладывается — иначе каждый символ
+	 * стоил бы полной сериализации содержимого. Все прочие правки (вставка, формат, отмена,
+	 * setValue) сообщаются сразу: они разовые, а не посимвольные.
+	 *
+	 * `getValue()` считает значение по DOM и точен всегда; отложено только уведомление
+	 * и, как следствие, копия значения у хоста — её сбрасывает {@link flushChange}.
+	 */
+	private __emitChange(defer = false) {
+		if (defer) {
+			// троттлинг: первый ввод заводит таймер, последующие в этом окне его не сдвигают
+			this.__changeTimer ||= this.__window.setTimeout(() => this.__emitChange(), CHANGE_THROTTLE_MS);
+			return;
+		}
+
+		this.__cancelChange();
 		this.trigger(CHANGE_EVENT, <RichEditorChangeData>{ editor: this, value: this.getValue() });
 	}
 
+	private __cancelChange() {
+		if (!this.__changeTimer) return;
+
+		this.__window.clearTimeout(this.__changeTimer);
+		this.__changeTimer = 0;
+	}
+
+	/**
+	 * Доставить отложенное изменение немедленно. Вызывать перед тем, как значение читают
+	 * извне: отправка формы, валидация, чтение значения хостом. Если ничего не отложено —
+	 * ничего и не делает, лишнего события не будет.
+	 */
+	flushChange(): void {
+		if (this.__changeTimer) this.__emitChange();
+	}
+
 	private __reject() {
 		this.__opts.onReject?.();
 	}
@@ -298,11 +576,24 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private __normalize(notify: boolean) {
 		if (this.readonly) return;
 
+		// правка текстовых узлов рвёт живые Range — запоминаем выделение по текстовым смещениям
+		const selection = this.selection;
+		const bounds = selection ? selectionCharBounds(this.editable, selection.getRangeAt(0)) : null;
+
 		const before = this.editable.innerHTML;
+		const textBefore = this.editable.textContent ?? "";
 		normalizeWhitespace(this.editable);
 		if (this.multiline) normalizeParagraphs(this.editable);
 		if (this.editable.innerHTML === before) return;
 
+		if (bounds && selection) {
+			// схлопнутые пробелы сдвигают смещения — переносим их на новый текст
+			const textAfter = this.editable.textContent ?? "";
+			const start = mapCharOffset(textBefore, textAfter, bounds[0]);
+			const end = bounds[1] === bounds[0] ? start : mapCharOffset(textBefore, textAfter, bounds[1]);
+			restoreSelection(this.editable, start, end, selection);
+		}
+
 		if (notify) this.__emitChange();
 	}
 
@@ -312,8 +603,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const { signal } = this.__abort;
 		const editable = this.editable;
 
+		// перетаскивание в редактор проходит мимо истории и фильтров хоста — гасим саму вставку.
+		// dragenter/dragover отменять нельзя: в модели DnD отмена как раз и означает «сюда можно бросить»
 		this.element.addEventListener("drop", (e) => e.preventDefault(), { signal });
-		this.element.addEventListener("dragenter", (e) => e.preventDefault(), { signal });
 
 		editable.addEventListener(
 			"mousedown",
@@ -329,11 +621,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			() => {
 				this.element.classList.add("focused");
 
-				// показываем общий тулбар над этим редактором
-				if (this.format && this.formatTools.length) formatToolbar.attach(this);
+				// нужна ли панель этому редактору, решает она сама — иначе условие пришлось бы
+				// держать в двух местах, и стоило добавить кнопки хоста, как они разошлись бы
+				formatToolbar.attach(this);
 
 				if (this.readonly) selectAllContent(this.editable);
-				else if (!this.__hasInputClick) caretToEnd(this.editable, this.multiline);
+				// Каретку в конец ставим только когда её нет: клик ставит сам, а уже стоящую
+				// (фокус вернули из кода после вызова метода) двигать нельзя — уедет в конец текста.
+				else if (!this.__hasInputClick && !this.selection) caretToEnd(this.editable, this.multiline);
 			},
 			{ signal }
 		);
@@ -351,6 +646,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 				this.__clearPendingFormats();
 				this.__normalize(true); // редактирование завершено
+				this.flushChange(); // ввод закончен — отложенное изменение доставляем сразу
 			},
 			{ signal }
 		);
@@ -366,19 +662,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			"input",
 			() => {
 				if (this.multiline) {
-					// нормализация меняет структуру (обёртка в <p>, удаление <br>) и сбрасывает каретку —
-					// запоминаем её позицию по текстовому смещению и восстанавливаем после
-					const selection = window.getSelection();
-					const caret =
-						selection && selection.rangeCount > 0 && editable.contains(selection.anchorNode)
-							? selectionCharBounds(editable, selection.getRangeAt(0))
-							: null;
-					const before = editable.innerHTML;
-
-					ensureParagraphs(editable); // блуждающий текст/div → <p>
+					// приведение к абзацам меняет структуру (обёртка в <p>, удаление <br>) и сбрасывает
+					// каретку — сохраняем её; если структура не менялась, выделение живо и переставлять
+					// его не нужно (лишний сброс способен прервать IME-набор)
+					preserveCaret(editable, () => {
+						const before = editable.innerHTML;
+						ensureParagraphs(editable); // блуждающий текст/div → <p>
 
-					if (caret && selection && editable.innerHTML !== before)
-						restoreSelection(editable, caret[0], caret[1], selection);
+						return editable.innerHTML !== before;
+					});
 
 					// единственный пустой абзац → очищаем, чтобы показать placeholder
 					if (editable.children.length === 1) {
@@ -388,7 +680,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				} else if (editable.firstChild?.nodeName === "BR") {
 					editable.innerHTML = "";
 				}
-				this.__emitChange();
+				this.__emitChange(true); // печать — единственный посимвольный источник, его и откладываем
 			},
 			{ signal }
 		);
@@ -414,12 +706,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			const z = isHotkeyLetter(e, "z");
 			if (z && !e.shiftKey) {
 				e.preventDefault();
-				this.__undo();
+				this.undo();
 				return;
 			}
 			if (isHotkeyLetter(e, "y") || (z && e.shiftKey)) {
 				e.preventDefault();
-				this.__redo();
+				this.redo();
 				return;
 			}
 		}
@@ -450,9 +742,18 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				return;
 			}
 
-			// Shift/Ctrl/Cmd+Enter — мягкий перенос (<br>) внутри абзаца; Enter — новый абзац (<p>)
+			// Абзацы и переносы правятся вручную, мимо beforeinput, поэтому запрет на изменение
+			// текста проверяем здесь: иначе Enter добавлял бы строки и в режиме только для чтения.
+			if (this.readonly) return;
+
+			// В режиме block Enter — новый абзац (<p>), модификатор — мягкий перенос (<br>).
+			// В режиме break наоборот: Enter переносит строку, как в мессенджерах, а абзац
+			// набирается двумя переносами.
+			const withModifier = e.shiftKey || e.ctrlKey || e.metaKey;
+			const soft = this.paragraph === "break" ? !withModifier : withModifier;
+
 			this.__history?.record("op");
-			if (e.shiftKey || e.ctrlKey || e.metaKey) insertSoftBreak(this.editable);
+			if (soft) insertSoftBreak(this.editable);
 			else insertParagraph(this.editable);
 
 			this.__clearPendingFormats();
@@ -485,79 +786,55 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (filtered !== plain) plainOverride = filtered;
 		}
 
-		const selection = window.getSelection();
-		if (!selection || selection.rangeCount === 0) return;
+		// вставлять только в своё содержимое: выделение вне редактора нам не адресовано
+		const selection = this.selection;
+		if (!selection) return;
 
 		if (html && plainOverride == null && this.__pasteHtml(html, selection)) return;
 		this.__pastePlain(plainOverride ?? plain, selection);
 	}
 
-	// Простая вставка текста: переносы строк — мягкие <br> (multiline) или пробелы (single-line).
+	// Простая вставка текста: в multiline — та же модель абзацев и мягких переносов, что и при
+	// вставке форматированного (в режиме block пустая строка разделяет абзацы, в break все переносы
+	// мягкие); в single-line — одна строка через пробелы.
 	private __pastePlain(text: string, selection: Selection) {
 		if (!text) return;
 
-		const lines = text.split(/\n/);
-		const output = lines.map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
+		const lines = text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
 
-		const fragment = document.createDocumentFragment();
-		if (!this.multiline) {
-			fragment.appendChild(document.createTextNode(output.join(" ")));
-		} else {
-			output.forEach((line, index) => {
-				if (index > 0) fragment.appendChild(document.createElement("br"));
-				fragment.appendChild(document.createTextNode(line));
-			});
-		}
-
-		const range = selection.getRangeAt(0);
-		this.__history?.record("op");
-		range.deleteContents();
-		range.insertNode(fragment);
-		selection.setPosition(selection.focusNode, selection.focusOffset);
-
-		this.__emitChange();
+		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs), selection);
 	}
 
-	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего
-	// (тогда вызывающий откатывается на простую вставку). Санитизация до включённых инструментов;
-	// multiline сохраняет абзацы <p> и мягкие переносы <br>, single-line — инлайн с пробелами.
+	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
+	// тогда вызывающий откатывается на простую вставку.
 	private __pasteHtml(html: string, selection: Selection): boolean {
-		// убираем мусорные элементы (Word/браузер: стили, скрипты, заголовок документа)
-		const source = document.createElement("template");
-		source.innerHTML = html;
-		source.content
-			.querySelectorAll("script, style, head, meta, link, title, noscript")
-			.forEach((el) => el.remove());
-
-		// единый источник санитизации — deserialize (теги-синонимы → канонические, лишнее развёрнуто)
-		const clean = deserialize(source.innerHTML, "html", this.formatTools, this.formatMarkers, true);
-		const holder = document.createElement("template");
-		holder.innerHTML = clean;
-
-		// внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем,
-		// иначе литеральные \n (pre-wrap) и отступы дают лишние переносы
-		const textWalker = document.createTreeWalker(holder.content, NodeFilter.SHOW_TEXT);
-		for (let t = textWalker.nextNode(); t; t = textWalker.nextNode())
-			t.textContent = (t.textContent ?? "").replace(/\s+/g, " ");
-
-		const paras = Array.from(holder.content.children) as HTMLElement[];
-		for (const p of paras) trimParagraphEdges(p);
-
-		// отбрасываем пустые краевые абзацы (ведущие/хвостовые \n и <br>-обёртки из буфера),
-		// иначе перед и после вставленного текста появляются пустые строки
-		while (paras.length && (paras[0].textContent ?? "").trim() === "") paras.shift();
-		while (paras.length && (paras[paras.length - 1].textContent ?? "").trim() === "") paras.pop();
+		return this.__insertPasted(sanitizePastedHtml(html, this.formatTools, this.formatMarkers), selection);
+	}
+
+	/**
+	 * Вставляет разобранные абзацы в каретку (или вместо выделения) и ставит каретку в конец
+	 * вставленного. Возвращает false, если вставлять было нечего: в этом случае содержимое
+	 * не трогается вовсе — иначе выделение оказалось бы удалено без замены и без уведомления.
+	 *
+	 * multiline сохраняет абзацы <p> и мягкие переносы <br>, single-line сводит их к пробелам.
+	 * Каретку адресуем текстовым смещением: узлы вставки при разбиении абзаца переезжают.
+	 */
+	private __insertPasted(paras: HTMLElement[], selection: Selection): boolean {
 		if (!paras.length) return false;
 
 		const range = selection.getRangeAt(0);
 		this.__history?.record("op");
 		range.deleteContents();
 
-		// каретку ставим по абсолютному текстовому смещению (длина вставки), не отслеживая узлы
 		const start = selectionCharBounds(this.editable, range)[0];
-		let caretOffset: number;
+		let caret: number;
 
-		if (!this.multiline) {
+		if (this.multiline) {
+			caret = start + paras.reduce((length, p) => length + (p.textContent ?? "").length, 0);
+
+			insertPastedParagraphs(this.editable, paras, range);
+			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>
+		} else {
 			// инлайн: абзацы и переносы → пробелы, форматирование сохраняем
 			const fragment = document.createDocumentFragment();
 			paras.forEach((p, index) => {
@@ -565,16 +842,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				while (p.firstChild) fragment.appendChild(p.firstChild);
 			});
 			fragment.querySelectorAll("br").forEach((br) => br.replaceWith(document.createTextNode(" ")));
-			caretOffset = start + (fragment.textContent ?? "").length;
+
+			caret = start + (fragment.textContent ?? "").length;
 			range.insertNode(fragment);
-		} else {
-			caretOffset = start + paras.map((p) => p.textContent ?? "").join("").length;
-			insertPastedParagraphs(this.editable, paras, range);
-			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>
 		}
 
-		restoreSelection(this.editable, caretOffset, caretOffset, selection);
+		restoreSelection(this.editable, caret, caret, selection);
 		this.__emitChange();
+
 		return true;
 	}
 
@@ -597,11 +872,23 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			return;
 		}
 
+		// Фильтр хоста на keydown видит только физические нажатия. IME, автозамена, автодополнение
+		// и голосовой ввод приходят сразу сюда, поэтому те же ограничения проверяем и на beforeinput —
+		// иначе через них в поле попадает что угодно.
+		const filterChar = this.__opts.filterChar;
+		if (filterChar && FILTERED_INPUT_TYPES.has(e.inputType) && e.data) {
+			if (!Array.from(e.data).every((char) => filterChar(char))) {
+				e.preventDefault();
+				this.__reject();
+				return;
+			}
+		}
+
 		// режим набора: оборачиваем вводимый текст в ожидающие форматы
 		if (this.__pendingFormats.size > 0 && e.inputType === "insertText" && e.data != null) {
 			e.preventDefault();
 			this.__history?.record("op");
-			this.__insertPendingText(e.data);
+			this.__insertText(e.data);
 			return;
 		}
 
@@ -615,9 +902,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		formatToolbar.refresh();
 	}
 
-	private __insertPendingText(data: string) {
-		const selection = window.getSelection();
-		if (!selection || !this.editable.contains(selection.anchorNode)) return;
+	private __insertText(data: string) {
+		const selection = this.selection;
+		if (!selection) return;
 
 		insertFormattedText(this.editable, data, Array.from(this.__pendingFormats), selection);