@brandup/ui-richeditor 1.0.38 → 1.0.39

package/source/selection.ts

@@ -14,25 +14,94 @@ const MATCH_TAG_NAMES = Array.from(new Set(ALL_FORMAT_TOOLS.flatMap((t) => FORMA
 const FORMAT_SELECTOR = FORMAT_TAG_NAMES.join(",").toLowerCase();
 const MATCH_SELECTOR = MATCH_TAG_NAMES.join(",").toLowerCase();
 
+// Проверка тега идёт на каждого предка каждого текстового узла при каждом обходе — храним
+// множествами, а не массивами: подсветка панели опрашивает их на каждое движение каретки.
+const FORMAT_TAG_SET = new Set(FORMAT_TAG_NAMES);
+const MATCH_TAG_SET = new Set(MATCH_TAG_NAMES);
+const TOOL_TAG_SETS = ALL_FORMAT_TOOLS.reduce(
+	(map, tool) => {
+		map[tool] = new Set(FORMAT_TOOLS[tool].matchTags);
+		return map;
+	},
+	{} as Record<FormatTool, Set<string>>
+);
+
 /** Ближайший предок-элемент с одним из тегов (в пределах root, не включая root). */
-function formatAncestor(node: Node, tags: string[], root: HTMLElement): HTMLElement | null {
+function formatAncestor(node: Node, tags: ReadonlySet<string>, root: HTMLElement): HTMLElement | null {
 	let el = node.parentElement;
 	while (el && el !== root) {
-		if (tags.includes(el.tagName)) return el;
+		if (tags.has(el.tagName)) return el;
 		el = el.parentElement;
 	}
 	return null;
 }
 
+/**
+ * Поддерево, которого достаточно для обхода диапазона. Обход всего редактора на каждый
+ * запрос состояния панели стоит слишком дорого, а за пределами общего предка границ
+ * диапазона попасть в него нечему.
+ */
+function rangeScope(root: HTMLElement, range: Range): Node {
+	const scope = range.commonAncestorContainer;
+	if (!root.contains(scope)) return root;
+
+	// от текстового узла обходить нечего — берём его родителя (сам узел walker не вернёт)
+	return scope.nodeType === Node.TEXT_NODE ? (scope.parentNode ?? root) : scope;
+}
+
+/**
+ * Выделение документа, которому принадлежит узел, — для операций, которые выделение
+ * устанавливают, а не читают.
+ *
+ * Окно берём у самого узла, а не глобальное: редактор может жить в iframe, где глобальный
+ * `window` чужой и его выделение к нашему содержимому отношения не имеет; к тому же добраться
+ * до глобального окружения можно не всегда (например, при разрушении контрола).
+ */
+export function documentSelection(node: Node): Selection | null {
+	return node.ownerDocument?.defaultView?.getSelection() ?? null;
+}
+
+/**
+ * Выделение, если оно стоит внутри root, иначе null. Единственная проверка «правка относится
+ * к этому содержимому» — по ней работают и правки абзацев, и история, и хосты редактора.
+ */
+export function innerSelection(root: HTMLElement): Selection | null {
+	const selection = documentSelection(root);
+	if (!selection || selection.rangeCount === 0 || !root.contains(selection.anchorNode)) return null;
+
+	return selection;
+}
+
+/**
+ * Выполняет правку, сохраняя каретку: положение запоминается текстовым смещением до правки
+ * и возвращается после. Пропустить восстановление нельзя — правки пересоздают узлы, и прежнее
+ * выделение указывало бы на те, которых в дереве уже нет.
+ *
+ * Если правка вернула false, значит DOM она не трогала: выделение живо, и переставлять его
+ * незачем — лишний сброс способен прервать IME-набор.
+ */
+export function preserveCaret(root: HTMLElement, mutate: () => boolean | void): void {
+	const selection = innerSelection(root);
+	const bounds = selection ? selectionCharBounds(root, selection.getRangeAt(0)) : null;
+
+	const touched = mutate();
+
+	if (touched !== false && bounds && selection) restoreSelection(root, bounds[0], bounds[1], selection);
+}
+
 /** Абсолютные текстовые смещения границ выделения внутри root (для восстановления после правок DOM). */
 export function selectionCharBounds(root: HTMLElement, range: Range): [number, number] {
 	const probe = document.createRange();
 	probe.selectNodeContents(root);
 	probe.setEnd(range.startContainer, range.startOffset);
 	const start = probe.toString().length;
+	if (range.collapsed) return [start, start];
+
+	// длину выделения меряем от его начала, а не от начала редактора: иначе весь текст
+	// до каретки собирается в строку дважды
+	probe.setStart(range.startContainer, range.startOffset);
 	probe.setEnd(range.endContainer, range.endOffset);
-	const end = probe.toString().length;
-	return [start, end];
+	return [start, start + probe.toString().length];
 }
 
 /**
@@ -55,26 +124,42 @@ export function mapCharOffset(before: string, after: string, offset: number): nu
 	return j;
 }
 
-/** Находит текстовый узел и локальное смещение по абсолютному текстовому смещению. */
-function locateChar(root: HTMLElement, target: number): { node: Text; offset: number } | null {
+type CharPosition = { node: Text; offset: number };
+
+/**
+ * Находит текстовые узлы и локальные смещения для пары абсолютных смещений за один обход.
+ * Смещение за пределами текста прижимается к его концу.
+ */
+function locateChars(root: HTMLElement, lower: number, upper: number): [CharPosition, CharPosition] | null {
 	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
 	let count = 0;
 	let last: Text | null = null;
-	let n = walker.nextNode() as Text | null;
-	while (n) {
+	let low: CharPosition | null = null;
+	let high: CharPosition | null = null;
+
+	for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) {
 		last = n;
-		if (count + n.length >= target) return { node: n, offset: Math.max(0, target - count) };
+		if (!low && count + n.length >= lower) low = { node: n, offset: lower - count };
+		if (count + n.length >= upper) {
+			high = { node: n, offset: upper - count };
+			break;
+		}
 		count += n.length;
-		n = walker.nextNode() as Text | null;
 	}
-	return last ? { node: last, offset: last.length } : null;
+
+	if (!last) return null;
+
+	const tail: CharPosition = { node: last, offset: last.length };
+	return [low ?? tail, high ?? tail];
 }
 
 // Восстанавливает выделение по абсолютным текстовым смещениям (см. selectionCharBounds).
 export function restoreSelection(root: HTMLElement, start: number, end: number, selection: Selection) {
-	const s = locateChar(root, start);
-	const e = locateChar(root, end);
-	if (!s || !e) return;
+	const forward = start <= end;
+	const found = locateChars(root, forward ? start : end, forward ? end : start);
+	if (!found) return;
+
+	const [s, e] = forward ? found : [found[1], found[0]];
 
 	const range = document.createRange();
 	range.setStart(s.node, s.offset);
@@ -125,15 +210,29 @@ function nodeWithinRange(node: Node, range: Range): boolean {
 	);
 }
 
+/**
+ * Непустые текстовые узлы, задетые диапазоном. Единственный обход содержимого в модуле:
+ * по нему работают и правки формата, и опрос состояния для панели.
+ */
+function* touchedTextNodes(root: HTMLElement, range: Range): Generator<Text> {
+	const walker = document.createTreeWalker(rangeScope(root, range), NodeFilter.SHOW_TEXT);
+
+	for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null)
+		if (n.length && range.intersectsNode(n)) yield n;
+}
+
+/** Узел под схлопнутой кареткой — от него и ищется формат. */
+function caretProbe(range: Range): Node {
+	const node = range.startContainer;
+	return node.nodeType === Node.TEXT_NODE ? node : (node.childNodes[range.startOffset] ?? node);
+}
+
 /** Непустые текстовые узлы, целиком попавшие в диапазон (частично задетые правке не подлежат). */
 function collectTextNodes(root: HTMLElement, range: Range): Text[] {
 	const nodes: Text[] = [];
-	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-	let n = walker.nextNode() as Text | null;
-	while (n) {
-		if (n.length > 0 && nodeWithinRange(n, range)) nodes.push(n);
-		n = walker.nextNode() as Text | null;
-	}
+	// intersectsNode в обходе дешевле пары compareBoundaryPoints и отсекает почти всё лишнее
+	for (const n of touchedTextNodes(root, range)) if (nodeWithinRange(n, range)) nodes.push(n);
+
 	return nodes;
 }
 
@@ -163,7 +262,7 @@ function unwrapAround(fmt: HTMLElement, node: Node) {
 	if (!fmt.firstChild) parent.removeChild(fmt);
 }
 
-function removeFormatFromNode(node: Text, tags: string[], root: HTMLElement) {
+function removeFormatFromNode(node: Text, tags: ReadonlySet<string>, root: HTMLElement) {
 	let fmt = formatAncestor(node, tags, root);
 	while (fmt) {
 		unwrapAround(fmt, node);
@@ -178,38 +277,55 @@ function unwrapElement(el: HTMLElement) {
 	parent.removeChild(el);
 }
 
-/** Чистит разметку: убирает пустые теги, схлопывает вложенные и соседние одинаковые, склеивает текст. */
+/**
+ * Чистит разметку: убирает пустые теги, схлопывает вложенные и соседние одинаковые, склеивает текст.
+ *
+ * Правка одного тега может сделать «грязными» его соседей и потомков, поэтому обход идёт очередью:
+ * заново перебирается только затронутое, а не всё содержимое редактора. Вызывается на каждый символ
+ * в режиме набора, поэтому повторные выборки по всему дереву тут заметны.
+ */
 export function cleanupFormatting(root: HTMLElement) {
-	let changed = true;
-	while (changed) {
-		changed = false;
-
-		for (const el of Array.from(root.querySelectorAll<HTMLElement>(FORMAT_SELECTOR))) {
-			if (!el.isConnected) continue;
-
-			// пустой тег
-			if (el.textContent === "") {
-				el.remove();
-				changed = true;
-				continue;
-			}
-
-			// вложен в такой же тег
-			const parent = el.parentElement;
-			if (parent && parent !== root && parent.tagName === el.tagName) {
-				unwrapElement(el);
-				changed = true;
-				continue;
-			}
-
-			// соседний такой же тег слева — склеиваем
-			const prev = el.previousSibling;
-			if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as HTMLElement).tagName === el.tagName) {
-				while (el.firstChild) prev.appendChild(el.firstChild);
-				el.remove();
-				changed = true;
-				continue;
-			}
+	const queue: HTMLElement[] = Array.from(root.querySelectorAll<HTMLElement>(FORMAT_SELECTOR));
+
+	const enqueue = (node: Node | null | undefined) => {
+		if (node && node.nodeType === Node.ELEMENT_NODE && FORMAT_TAG_SET.has((node as HTMLElement).tagName))
+			queue.push(node as HTMLElement);
+	};
+
+	while (queue.length) {
+		const el = queue.pop()!;
+		if (!el.isConnected || !root.contains(el)) continue;
+
+		// пустой тег: после удаления его соседи могут стать смежными одинаковыми,
+		// а родитель — опустеть
+		if (el.textContent === "") {
+			enqueue(el.nextSibling);
+			enqueue(el.parentElement);
+			el.remove();
+			continue;
+		}
+
+		// вложен в такой же тег — разворачиваем, поднятые дети попадают в новое окружение
+		const parent = el.parentElement;
+		if (parent && parent !== root && parent.tagName === el.tagName) {
+			const children = Array.from(el.children);
+			enqueue(el.nextSibling);
+			unwrapElement(el);
+			children.forEach(enqueue);
+			continue;
+		}
+
+		// соседний такой же тег слева — склеиваем
+		const prev = el.previousSibling;
+		if (prev && prev.nodeType === Node.ELEMENT_NODE && (prev as HTMLElement).tagName === el.tagName) {
+			const children = Array.from(el.children);
+			enqueue(el.nextSibling);
+			enqueue(el.parentElement);
+			while (el.firstChild) prev.appendChild(el.firstChild);
+			el.remove();
+			enqueue(prev);
+			children.forEach(enqueue);
+			continue;
 		}
 	}
 
@@ -257,7 +373,7 @@ export function toggleFormat(
 	restoreBounds?: [number, number]
 ) {
 	const def = FORMAT_TOOLS[tool];
-	const tags = def.matchTags;
+	const tags = TOOL_TAG_SETS[tool];
 
 	editSelection(root, range, selection, restoreBounds, (nodes) => {
 		const allFormatted = nodes.every((n) => formatAncestor(n, tags, root) !== null);
@@ -272,7 +388,7 @@ export function toggleFormat(
 /** Снимает всё форматирование с выделения (все инструменты сразу, включая теги-синонимы). */
 export function clearFormat(root: HTMLElement, range: Range, selection: Selection, restoreBounds?: [number, number]) {
 	editSelection(root, range, selection, restoreBounds, (nodes) => {
-		for (const n of nodes) removeFormatFromNode(n, MATCH_TAG_NAMES, root);
+		for (const n of nodes) removeFormatFromNode(n, MATCH_TAG_SET, root);
 	});
 }
 
@@ -290,34 +406,44 @@ export function clearAllFormat(root: HTMLElement) {
  * `some` — отформатирована хоть какая-то часть (доступность очистки).
  * Обход прерывается на первом узле, решающем исход.
  */
-function rangeFormatState(root: HTMLElement, range: Range, tags: string[], mode: "every" | "some"): boolean {
+/** Есть ли форматирование хоть на части выделения (или под кареткой) — доступность кнопки очистки. */
+export function hasFormatting(root: HTMLElement, range: Range): boolean {
+	if (range.collapsed) return formatAncestor(caretProbe(range), MATCH_TAG_SET, root) !== null;
+
+	for (const node of touchedTextNodes(root, range)) if (formatAncestor(node, MATCH_TAG_SET, root)) return true;
+
+	return false;
+}
+
+/**
+ * Инструменты, которыми отформатировано всё выделение, — за один обход вместо обхода
+ * на каждый инструмент. Панель опрашивает это состояние на каждое движение каретки.
+ */
+export function activeFormats(root: HTMLElement, range: Range, tools: FormatTool[]): Set<FormatTool> {
+	const active = new Set<FormatTool>();
+	if (!tools.length) return active;
+
 	if (range.collapsed) {
-		const node = range.startContainer;
-		const probe = node.nodeType === Node.TEXT_NODE ? node : (node.childNodes[range.startOffset] ?? node);
-		return formatAncestor(probe, tags, root) !== null;
+		const probe = caretProbe(range);
+		for (const tool of tools) if (formatAncestor(probe, TOOL_TAG_SETS[tool], root)) active.add(tool);
+
+		return active;
 	}
 
-	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	// инструмент остаётся кандидатом, пока каждый задетый узел им отформатирован
+	const pending = new Set(tools);
 	let found = false;
 
-	for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) {
-		if (!n.length || !range.intersectsNode(n)) continue;
-
-		const formatted = formatAncestor(n, tags, root) !== null;
-		if (mode === "some") {
-			if (formatted) return true;
-		} else if (!formatted) return false;
-
+	for (const node of touchedTextNodes(root, range)) {
 		found = true;
+		for (const tool of pending) if (!formatAncestor(node, TOOL_TAG_SETS[tool], root)) pending.delete(tool);
+		if (!pending.size) break; // все выбыли — дальше смотреть нечего
 	}
 
-	// every: пустое выделение — не «отформатировано целиком»; some: ни одного форматированного узла
-	return mode === "every" && found;
-}
+	// пустое выделение не считается «отформатированным целиком»
+	if (found) for (const tool of pending) active.add(tool);
 
-/** Есть ли форматирование на выделении (или под кареткой) — для доступности кнопки очистки. */
-export function hasFormatting(root: HTMLElement, range: Range): boolean {
-	return rangeFormatState(root, range, MATCH_TAG_NAMES, "some");
+	return active;
 }
 
 /** Есть ли форматирование хоть где-то в содержимом. */
@@ -351,7 +477,7 @@ export function insertFormattedText(root: HTMLElement, data: string, tools: Form
 	restoreSelection(root, offset, offset, selection);
 }
 
-/** Активен ли формат инструмента на текущем выделении (для подсветки кнопки). */
+/** Активен ли формат инструмента на текущем выделении (для подсветки одиночной кнопки). */
 export function isFormatActive(root: HTMLElement, range: Range, tool: FormatTool): boolean {
-	return rangeFormatState(root, range, FORMAT_TOOLS[tool].matchTags, "every");
+	return activeFormats(root, range, [tool]).has(tool);
 }

package/source/serialize.ts

@@ -1,5 +1,6 @@
 // Разбор и сериализация значения редактора (HTML | Markdown), модель абзацев и мягких переносов.
 
+import { isBlock } from "./paragraphs";
 import {
 	FORMAT_TOOLS,
 	defaultFormatMarkers,
@@ -112,11 +113,7 @@ function serializeParagraphs(
 	};
 
 	for (const node of Array.from(root.childNodes)) {
-		const isBlock =
-			node.nodeType === Node.ELEMENT_NODE &&
-			((node as Element).tagName === "P" || (node as Element).tagName === "DIV");
-
-		if (isBlock) {
+		if (isBlock(node)) {
 			flush();
 			paragraphs.push(serializeInline((node as Element).childNodes, storage, tagMap, markers));
 		} else {
@@ -182,13 +179,38 @@ function orderedMarkers(tools: FormatTool[], markers: FormatMarkers): MarkerRule
 	});
 }
 
+const TAG = /<(\/?)([a-z]+)>/g;
+
+/**
+ * Закрыт ли в содержимом каждый тег, который в нём открыт.
+ *
+ * Маркеры применяются по очереди к уже размеченному тексту, поэтому пара маркеров может
+ * пересечь чужой тег: `**a _b** c_` дал бы `<b>a <i>b</b> c</i>`, а такой HTML браузер
+ * перестроит по-своему, и форматирование «протечёт» за пределы разметки. Пересекающуюся
+ * пару оставляем текстом — так же поступают мессенджеры. Собственный текст пользователя
+ * сюда не попадает: `<` в нём уже заэкранирован, тег может быть только нашим.
+ */
+function balancedTags(inner: string): boolean {
+	if (!inner.includes("<")) return true;
+
+	const stack: string[] = [];
+	for (const [, closing, name] of inner.matchAll(TAG)) {
+		if (!closing) stack.push(name);
+		else if (stack.pop() !== name) return false;
+	}
+
+	return stack.length === 0;
+}
+
 // Markdown-разметка одного абзаца → инлайновый HTML (escape, маркеры, \n→<br>).
 function markdownInline(text: string, order: MarkerRule[]): string {
 	let html = escapeHtml(text);
 
 	for (const [tool, marker, standalone] of order) {
 		const def = FORMAT_TOOLS[tool];
-		html = html.replace(markerPattern(marker, standalone), `$1<${def.tag}>$2</${def.tag}>`);
+		html = html.replace(markerPattern(marker, standalone), (match, lead: string, inner: string) =>
+			balancedTags(inner) ? `${lead}<${def.tag}>${inner}</${def.tag}>` : match
+		);
 	}
 
 	// переносы — после маркеров: пока это \n, запрет на пересечение строки работает

package/source/toolbar.ts

@@ -35,6 +35,24 @@ const ACTION_ICONS: Record<EditorAction, string> = {
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
 export const EMOJI_PICKER_CLASS = "ui-richeditor-emoji";
 
+/**
+ * Кнопка хоста в общей панели — для действий, которых редактор не знает: рандомизация,
+ * вставка переменных и прочее доменное. Иконку и поведение задаёт хост, панель отвечает
+ * только за отрисовку, доступность и то, что фокус не уходит из редактора.
+ */
+export interface ToolbarButton {
+	/** Уникальное имя: идёт в data-атрибут и в ключ перестройки панели. */
+	name: string;
+	/** Подсказка на кнопке. */
+	title: string;
+	/** Разметка иконки (svg). */
+	icon: string;
+	/** Нажатие. */
+	run(): void;
+	/** false — кнопка недоступна; проверяется на каждом refresh, как у действий. */
+	isEnabled?(): boolean;
+}
+
 /** Редактор, которым управляет общий тулбар. */
 export interface ToolbarHost {
 	readonly editable: HTMLElement;
@@ -45,11 +63,15 @@ export interface ToolbarHost {
 	readonly toolbarContainer?: HTMLElement | null;
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
+	/** Активные форматы всех инструментов сразу; нет реализации — панель опросит их поштучно. */
+	activeTools?(): ReadonlySet<FormatTool>;
 	applyAction?(action: EditorAction): void;
 	/** false — кнопка действия недоступна (нечего отменять/очищать). */
 	isActionEnabled?(action: EditorAction): boolean;
 	/** Вставка текста в каретку — для панели смайликов. */
 	insertText?(text: string): void;
+	/** Собственные кнопки хоста; пусто/undefined — только штатные. */
+	readonly toolbarButtons?: ToolbarButton[];
 }
 
 const MARGIN = 6;
@@ -61,25 +83,70 @@ class FormatToolbar {
 	private __emojiInitiator: HTMLElement | null = null; // кнопка, у которой открыта панель
 	private __buttons: Array<[FormatTool, HTMLButtonElement]> = [];
 	private __actionButtons: Array<[EditorAction, HTMLButtonElement]> = [];
+	private __hostButtons: Array<[ToolbarButton, HTMLButtonElement]> = [];
 	private __active: ToolbarHost | null = null;
 	private __toolsKey = "";
 	private __inContainer = false;
-	private readonly __reposition = () => this.reposition();
+	private readonly __reposition = () => this.__schedule("position");
 	private __resizeObserver: ResizeObserver | null = null;
+	private __selectionBound = false;
+	private __frame = 0;
+	private __pendingRefresh = false;
+	private __pendingPosition = false;
+
+	/**
+	 * Единый листенер на весь документ: подсветка активных инструментов по текущему выделению.
+	 * Вешается при первом показе панели, а не при загрузке модуля, и живёт до конца страницы —
+	 * refresh() сам проверяет наличие активного редактора.
+	 */
+	private __bindSelection() {
+		if (this.__selectionBound || typeof document === "undefined") return;
 
-	constructor() {
-		// единый листенер на весь app: подсветка активных инструментов по текущему выделению.
-		// refresh() сам проверяет наличие активного редактора, поэтому отдельных per-editor листенеров не нужно.
-		if (typeof document !== "undefined") document.addEventListener("selectionchange", () => this.refresh());
+		this.__selectionBound = true;
+		document.addEventListener("selectionchange", () => this.__schedule("refresh"));
+	}
+
+	/**
+	 * Откладывает обновление до кадра отрисовки. selectionchange и scroll приходят пачками,
+	 * а и подсветка (обход содержимого), и позиционирование (чтение геометрии) по событию
+	 * заметно дороже, чем раз в кадр. Прямые вызовы refresh()/reposition() остаются синхронными.
+	 */
+	private __schedule(kind: "refresh" | "position") {
+		if (!this.__active) return;
+
+		if (kind === "refresh") this.__pendingRefresh = true;
+		else this.__pendingPosition = true;
+
+		if (typeof requestAnimationFrame !== "function") this.__flush();
+		else this.__frame ||= requestAnimationFrame(() => this.__flush());
+	}
+
+	private __flush() {
+		const refresh = this.__pendingRefresh;
+		const position = this.__pendingPosition;
+		this.__cancelScheduled();
+
+		if (refresh) this.refresh();
+		if (position) this.reposition();
+	}
+
+	private __cancelScheduled() {
+		if (this.__frame && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.__frame);
+
+		this.__frame = 0;
+		this.__pendingRefresh = false;
+		this.__pendingPosition = false;
 	}
 
 	/** Показать тулбар для редактора (на фокусе): перестроить кнопки, спозиционировать, показать. */
 	attach(host: ToolbarHost) {
 		const actions = host.editorActions ?? [];
-		if (!host.formatTools.length && !actions.length) return;
+		const buttons = host.toolbarButtons ?? [];
+		if (!host.formatTools.length && !actions.length && !buttons.length) return;
 
+		this.__bindSelection();
 		this.__active = host;
-		this.__build(host.formatTools, actions);
+		this.__build(host.formatTools, actions, buttons);
 		this.refresh();
 
 		const elem = this.__ensure();
@@ -110,22 +177,50 @@ class FormatToolbar {
 
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
-		if (this.__active !== host) return;
+		// панель смайликов могла быть открыта не для активного редактора (у своей кнопки хоста) —
+		// ссылку на него всё равно отпускаем, иначе уничтоженный редактор держится синглтоном
+		const emojiHost = this.__emojiHost === host;
+		if (!emojiHost && this.__active !== host) return;
 
 		this.__closeEmoji();
+
+		if (emojiHost) {
+			this.__emojiHost = null;
+			this.__emojiInitiator = null;
+		}
+
+		if (this.__active !== host) return;
+
 		this.__active = null;
+		this.__cancelScheduled();
 		if (this.__elem) this.__elem.classList.remove("visible");
 		this.__removeViewportListeners();
 	}
 
-	/** Обновить подсветку активных инструментов и доступность действий по текущему состоянию. */
+	/**
+	 * Обновить подсветку активных инструментов и доступность действий по текущему состоянию.
+	 *
+	 * Пишем в DOM только при реальном изменении: обновление идёт на каждое движение каретки,
+	 * а на документе живёт MutationObserver (им UIElement следит за удалением элементов) —
+	 * повторная запись того же значения всё равно порождает запись мутации и его пробуждение.
+	 */
 	refresh() {
 		const host = this.__active;
 		if (!host) return;
 
-		for (const [tool, btn] of this.__buttons) btn.classList.toggle("active", host.isToolActive(tool));
+		const setDisabled = (btn: HTMLButtonElement, disabled: boolean) => {
+			if (btn.disabled !== disabled) btn.disabled = disabled;
+		};
+
+		const active = host.activeTools?.();
+		for (const [tool, btn] of this.__buttons) {
+			const isActive = active ? active.has(tool) : host.isToolActive(tool);
+			if (btn.classList.contains("active") !== isActive) btn.classList.toggle("active", isActive);
+		}
+
 		// хост может не реализовывать isActionEnabled — тогда кнопка всегда доступна
-		for (const [action, btn] of this.__actionButtons) btn.disabled = host.isActionEnabled?.(action) === false;
+		for (const [action, btn] of this.__actionButtons) setDisabled(btn, host.isActionEnabled?.(action) === false);
+		for (const [button, btn] of this.__hostButtons) setDisabled(btn, button.isEnabled?.() === false);
 	}
 
 	/** Пересчитать позицию над активным редактором (только для режима body/fixed). */
@@ -144,6 +239,7 @@ class FormatToolbar {
 		window.removeEventListener("scroll", this.__reposition);
 		window.removeEventListener("resize", this.__reposition);
 		this.__resizeObserver?.disconnect();
+		this.__cancelScheduled();
 	}
 
 	private __ensure(): HTMLElement {
@@ -160,8 +256,8 @@ class FormatToolbar {
 		return this.__elem;
 	}
 
-	private __build(tools: FormatTool[], actions: EditorAction[]) {
-		const key = `${tools.join(",")}|${actions.join(",")}`;
+	private __build(tools: FormatTool[], actions: EditorAction[], buttons: ToolbarButton[]) {
+		const key = `${tools.join(",")}|${actions.join(",")}|${buttons.map((b) => b.name).join(",")}`;
 		const elem = this.__ensure();
 		if (key === this.__toolsKey && elem.firstChild) return; // тот же состав — переиспользуем кнопки
 
@@ -170,6 +266,7 @@ class FormatToolbar {
 		DOM.empty(elem);
 		this.__buttons = [];
 		this.__actionButtons = [];
+		this.__hostButtons = [];
 
 		for (const tool of tools) {
 			const def = FORMAT_TOOLS[tool];
@@ -200,6 +297,21 @@ class FormatToolbar {
 			this.__actionButtons.push([action, btn]);
 		}
 
+		if ((tools.length || actions.length) && buttons.length) elem.appendChild(DOM.tag("div", { class: "split" }));
+
+		// кнопки хоста — последними, чтобы штатные не переезжали при их появлении
+		for (const button of buttons) {
+			const btn = DOM.tag(
+				"button",
+				{ type: "button", class: "host-button", "data-toolbar-button": button.name, title: button.title },
+				button.icon
+			);
+			btn.addEventListener("click", () => button.run());
+
+			elem.appendChild(btn);
+			this.__hostButtons.push([button, btn]);
+		}
+
 		// панель пережила перестройку кнопок — возвращаем её в тулбар, чтобы не собирать заново.
 		// Если её забрал хост под свою кнопку, она остаётся у него.
 		if (pickerInToolbar && this.__emojiPicker) elem.appendChild(this.__emojiPicker);