@brandup/ui-richeditor 1.0.38 → 1.0.40

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,74 @@ 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 __suspended: 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;
+
+		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);
 
-	constructor() {
-		// единый листенер на весь app: подсветка активных инструментов по текущему выделению.
-		// refresh() сам проверяет наличие активного редактора, поэтому отдельных per-editor листенеров не нужно.
-		if (typeof document !== "undefined") document.addEventListener("selectionchange", () => this.refresh());
+		this.__frame = 0;
+		this.__pendingRefresh = false;
+		this.__pendingPosition = false;
 	}
 
 	/** Показать тулбар для редактора (на фокусе): перестроить кнопки, спозиционировать, показать. */
 	attach(host: ToolbarHost) {
+		// открыта панель смайликов у собственной кнопки хоста — показ отложен до её закрытия
+		if (this.__suspended === host) return;
+
 		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 +181,59 @@ class FormatToolbar {
 
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
-		if (this.__active !== host) return;
+		// Придержанный показ снимаем первым делом, до закрытия панели: иначе её onClose поднял бы
+		// тулбар над редактором, который как раз уходит (в том числе разрушается).
+		if (this.__suspended === host) this.__suspended = null;
+
+		// панель смайликов могла быть открыта не для активного редактора (у своей кнопки хоста) —
+		// ссылку на него всё равно отпускаем, иначе уничтоженный редактор держится синглтоном
+		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.__hide();
+	}
+
+	/** Убрать панель с экрана и отпустить активный редактор (позиционирование, подсветка). */
+	private __hide() {
 		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 +252,7 @@ class FormatToolbar {
 		window.removeEventListener("scroll", this.__reposition);
 		window.removeEventListener("resize", this.__reposition);
 		this.__resizeObserver?.disconnect();
+		this.__cancelScheduled();
 	}
 
 	private __ensure(): HTMLElement {
@@ -160,8 +269,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 +279,7 @@ class FormatToolbar {
 		DOM.empty(elem);
 		this.__buttons = [];
 		this.__actionButtons = [];
+		this.__hostButtons = [];
 
 		for (const tool of tools) {
 			const def = FORMAT_TOOLS[tool];
@@ -200,6 +310,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);
@@ -223,7 +348,28 @@ class FormatToolbar {
 		this.__emojiHost = host;
 		this.__emojiInitiator = initiator;
 
-		PopupManager.open(this.__ensureEmojiPicker(container), { initiator });
+		// Панель у собственной кнопки хоста — самостоятельный слой, и показывать её вместе с тулбаром
+		// нельзя: это два всплывающих окна над одним полем. Тулбар придерживаем на всё время работы
+		// панели, а показанный убираем с экрана; вернётся он сам при её закрытии, если поле осталось
+		// в фокусе. Панель самого тулбара (container === __elem) — его собственный выпадающий слой,
+		// прятать её носителя незачем и нечем.
+		if (container !== this.__elem) {
+			this.__suspended = host;
+			if (this.__active === host) this.__hide();
+		}
+
+		PopupManager.open(this.__ensureEmojiPicker(container), { initiator, onClose: () => this.__resume() });
+	}
+
+	/** Панель смайликов закрылась — показываем придержанный тулбар, если редактор ещё в фокусе. */
+	private __resume() {
+		const host = this.__suspended;
+		if (!host) return;
+
+		this.__suspended = null;
+
+		// панель могло закрыть и движение мимо поля — тогда показывать нечего
+		if (host.editable.ownerDocument.activeElement === host.editable) this.attach(host);
 	}
 
 	private __toggleEmoji(initiator: HTMLButtonElement, e: MouseEvent) {