@brandup/ui-richeditor 1.0.36 → 1.0.39

package/source/toolbar.ts

@@ -6,11 +6,17 @@
 // т.к. тулбар находится вне привязанных UIElement).
 
 import { DOM } from "@brandup/ui";
-import { FORMAT_TOOLS, type FormatTool } from "./format";
+import { POPUP_CLASS, PopupManager } from "@brandup/ui-kit";
+import { EDITOR_ACTIONS, FORMAT_TOOLS, type EditorAction, type FormatTool } from "./format";
+import { EMOJIS } from "./emoji";
 import boldIcon from "../svg/bold.svg";
 import italicIcon from "../svg/italic.svg";
 import strikeIcon from "../svg/strike.svg";
 import underlineIcon from "../svg/underline.svg";
+import emojiIcon from "../svg/emoji.svg";
+import eraseIcon from "../svg/erase.svg";
+import undoIcon from "../svg/undo.svg";
+import redoIcon from "../svg/redo.svg";
 
 const FORMAT_ICONS: Record<FormatTool, string> = {
 	bold: boldIcon,
@@ -19,41 +25,128 @@ const FORMAT_ICONS: Record<FormatTool, string> = {
 	underline: underlineIcon,
 };
 
+const ACTION_ICONS: Record<EditorAction, string> = {
+	emoji: emojiIcon,
+	erase: eraseIcon,
+	undo: undoIcon,
+	redo: redoIcon,
+};
+
 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;
 	readonly formatTools: FormatTool[];
+	/** Действия (очистка формата, отмена/повтор); пусто/undefined — кнопок действий нет. */
+	readonly editorActions?: EditorAction[];
 	/** Контейнер для тулбара; null/undefined — document.body (position: fixed над редактором). */
 	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;
 
 class FormatToolbar {
 	private __elem: HTMLElement | null = null;
+	private __emojiPicker: HTMLElement | null = null;
+	private __emojiHost: ToolbarHost | null = null; // куда уйдёт выбранный символ
+	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;
+
+		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 (!host.formatTools.length) return;
+		const actions = host.editorActions ?? [];
+		const buttons = host.toolbarButtons ?? [];
+		if (!host.formatTools.length && !actions.length && !buttons.length) return;
 
+		this.__bindSelection();
 		this.__active = host;
-		this.__build(host.formatTools);
+		this.__build(host.formatTools, actions, buttons);
 		this.refresh();
 
 		const elem = this.__ensure();
@@ -84,17 +177,50 @@ class FormatToolbar {
 
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
+		// панель смайликов могла быть открыта не для активного редактора (у своей кнопки хоста) —
+		// ссылку на него всё равно отпускаем, иначе уничтоженный редактор держится синглтоном
+		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() {
-		if (!this.__active) return;
-		for (const [tool, btn] of this.__buttons) btn.classList.toggle("active", this.__active.isToolActive(tool));
+		const host = this.__active;
+		if (!host) return;
+
+		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) setDisabled(btn, host.isActionEnabled?.(action) === false);
+		for (const [button, btn] of this.__hostButtons) setDisabled(btn, button.isEnabled?.() === false);
 	}
 
 	/** Пересчитать позицию над активным редактором (только для режима body/fixed). */
@@ -113,21 +239,34 @@ class FormatToolbar {
 		window.removeEventListener("scroll", this.__reposition);
 		window.removeEventListener("resize", this.__reposition);
 		this.__resizeObserver?.disconnect();
+		this.__cancelScheduled();
 	}
 
 	private __ensure(): HTMLElement {
-		if (!this.__elem) this.__elem = DOM.tag("div", { class: TOOLBAR_CLASS });
+		if (!this.__elem) {
+			this.__elem = DOM.tag("div", { class: TOOLBAR_CLASS });
+
+			// Панель нигде не должна забирать фокус, иначе редактор теряет выделение, а blur
+			// прячет сам тулбар. Слушатель висит на корне, а не на кнопках: до disabled-кнопки
+			// событие не доходит (браузер их не диспатчит), да и клик по фону панели между
+			// кнопками иначе тоже уводил бы фокус. Дочерние элементы покрываются всплытием.
+			this.__elem.addEventListener("mousedown", (e) => e.preventDefault());
+		}
+
 		return this.__elem;
 	}
 
-	private __build(tools: FormatTool[]) {
-		const key = tools.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 && this.__buttons.length) return; // тот же состав — переиспользуем кнопки
+		if (key === this.__toolsKey && elem.firstChild) return; // тот же состав — переиспользуем кнопки
 
 		this.__toolsKey = key;
+		const pickerInToolbar = !!this.__emojiPicker && this.__emojiPicker.parentElement === elem;
 		DOM.empty(elem);
 		this.__buttons = [];
+		this.__actionButtons = [];
+		this.__hostButtons = [];
 
 		for (const tool of tools) {
 			const def = FORMAT_TOOLS[tool];
@@ -136,13 +275,108 @@ class FormatToolbar {
 				{ type: "button", class: "format-button", "data-format-tool": tool, title: def.title },
 				FORMAT_ICONS[tool]
 			);
-			// не даём кнопке забрать фокус, иначе теряется выделение в редакторе
-			btn.addEventListener("mousedown", (e) => e.preventDefault());
 			btn.addEventListener("click", () => this.__active?.applyFormat(tool));
 
 			elem.appendChild(btn);
 			this.__buttons.push([tool, btn]);
 		}
+
+		if (tools.length && actions.length) elem.appendChild(DOM.tag("div", { class: "split" }));
+
+		for (const action of actions) {
+			const def = EDITOR_ACTIONS[action];
+			const btn = DOM.tag(
+				"button",
+				{ type: "button", class: "action-button", "data-editor-action": action, title: def.title },
+				ACTION_ICONS[action]
+			);
+			if (action === "emoji") btn.addEventListener("click", (e) => this.__toggleEmoji(btn, e));
+			else btn.addEventListener("click", () => this.__active?.applyAction?.(action));
+
+			elem.appendChild(btn);
+			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);
+	}
+
+	/**
+	 * Открыть панель смайликов у произвольной кнопки — например у собственной кнопки хоста рядом
+	 * с полем ввода, а не в тулбаре. Панель одна на все редакторы и переезжает в `container`;
+	 * выбранный символ уходит в `host`, даже если тулбар сейчас обслуживает другой редактор.
+	 *
+	 * Вызывать из обработчика `click`, погасив всплытие: PopupManager вешает свой слушатель
+	 * закрытия на body прямо в open(), то есть во время этого же клика — до body событие ещё
+	 * не дошло, и слушатель закрыл бы панель сразу после открытия.
+	 */
+	openEmoji(host: ToolbarHost, initiator: HTMLElement, container: HTMLElement) {
+		// повторный клик по той же кнопке закрывает панель (это делает toggle внутри PopupManager),
+		// а вот у другой кнопки её нужно сперва закрыть — иначе toggle сочтёт открытие повторным
+		if (this.__emojiInitiator !== initiator && this.__emojiPicker?.classList.contains("opened"))
+			PopupManager.close();
+
+		this.__emojiHost = host;
+		this.__emojiInitiator = initiator;
+
+		PopupManager.open(this.__ensureEmojiPicker(container), { initiator });
+	}
+
+	private __toggleEmoji(initiator: HTMLButtonElement, e: MouseEvent) {
+		e.stopPropagation();
+
+		if (this.__active) this.openEmoji(this.__active, initiator, this.__ensure());
+	}
+
+	private __ensureEmojiPicker(container: HTMLElement): HTMLElement {
+		const picker = this.__emojiPicker ?? this.__buildEmojiPicker();
+		if (picker.parentElement !== container) container.appendChild(picker);
+
+		return picker;
+	}
+
+	private __buildEmojiPicker(): HTMLElement {
+		const picker = DOM.tag("div", { class: `${POPUP_CLASS} ${EMOJI_PICKER_CLASS}` });
+
+		const fragment = document.createDocumentFragment();
+		for (const emoji of EMOJIS)
+			fragment.appendChild(DOM.tag("button", { type: "button", class: "emoji", tabindex: "-1" }, emoji));
+		picker.appendChild(fragment);
+
+		// панель может висеть и вне тулбара, поэтому гасит фокус сама
+		picker.addEventListener("mousedown", (e) => e.preventDefault());
+		picker.addEventListener("click", (e) => {
+			const target = (e.target as HTMLElement).closest<HTMLElement>(".emoji");
+			if (!target) return;
+
+			this.__emojiHost?.insertText?.(target.textContent ?? "");
+			PopupManager.close();
+		});
+
+		this.__emojiPicker = picker;
+
+		return picker;
+	}
+
+	/** Закрыть панель смайликов, если открыта именно она (тулбар уходит — попап не должен остаться). */
+	private __closeEmoji() {
+		if (this.__emojiPicker?.classList.contains("opened")) PopupManager.close();
 	}
 }
 

package/svg/emoji.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" >
+<path d="M10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.523 20 20 15.523 20 10C20 4.477 15.523 0 10 0ZM10 2C14.418 2 18 5.582 18 10C18 14.418 14.418 18 10 18C5.582 18 2 14.418 2 10C2 5.582 5.582 2 10 2ZM6.5 6C6.10218 6 5.72064 6.15804 5.43934 6.43934C5.15804 6.72064 5 7.10218 5 7.5C5 7.89782 5.15804 8.27936 5.43934 8.56066C5.72064 8.84196 6.10218 9 6.5 9C6.89782 9 7.27936 8.84196 7.56066 8.56066C7.84196 8.27936 8 7.89782 8 7.5C8 7.10218 7.84196 6.72064 7.56066 6.43934C7.27936 6.15804 6.89782 6 6.5 6ZM13.5 6C13.1022 6 12.7206 6.15804 12.4393 6.43934C12.158 6.72064 12 7.10218 12 7.5C12 7.89782 12.158 8.27936 12.4393 8.56066C12.7206 8.84196 13.1022 9 13.5 9C13.8978 9 14.2794 8.84196 14.5607 8.56066C14.842 8.27936 15 7.89782 15 7.5C15 7.10218 14.842 6.72064 14.5607 6.43934C14.2794 6.15804 13.8978 6 13.5 6ZM4.89062 12C5.69063 14.04 7.67 15.5 10 15.5C12.33 15.5 14.3094 14.04 15.1094 12H4.89062Z" />
+</svg>

package/svg/erase.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 14.650391 2.0058594 C 14.145841 2.0058594 13.641227 2.1947106 13.261719 2.5742188 L 2.5761719 13.263672 C 1.8171557 14.022688 1.8171557 15.281999 2.5761719 16.041016 L 7.9609375 21.425781 C 8.7199537 22.184797 9.9792653 22.184797 10.738281 21.425781 L 21.423828 10.736328 C 22.182844 9.9773121 22.182844 8.7180005 21.423828 7.9589844 L 16.039062 2.5742188 C 15.659554 2.1947106 15.15494 2.0058594 14.650391 2.0058594 z M 9.3203125 9.3457031 L 14.654297 14.679688 L 9.3496094 19.986328 L 4.015625 14.650391 L 9.3203125 9.3457031 z"/></svg>

package/svg/redo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 11.5 8 C 7.257 8 3.6110312 10.520531 1.9570312 14.144531 C 1.7090313 14.687531 1.9847813 15.328578 2.5507812 15.517578 C 3.0297813 15.677578 3.5527188 15.452188 3.7617188 14.992188 C 5.0977187 12.048188 8.057 10 11.5 10 C 13.678099 10 15.656912 10.829684 17.160156 12.177734 L 14.191406 15.146484 C 13.996406 15.341484 13.996406 15.658516 14.191406 15.853516 C 14.289406 15.950516 14.416922 16 14.544922 16 L 21.044922 16 A 1 1 0 0 0 22.044922 15 L 22.044922 8.5 C 22.044922 8.372 21.996437 8.2434844 21.898438 8.1464844 C 21.703437 7.9514844 21.386406 7.9514844 21.191406 8.1464844 L 18.568359 10.769531 C 16.705156 9.0570281 14.232024 8 11.5 8 z"/></svg>

package/svg/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 2.5 8 C 2.372 8 2.2439844 8.0489844 2.1464844 8.1464844 C 2.0484844 8.2434844 2 8.372 2 8.5 L 2 15 A 1 1 0 0 0 3 16 L 9.5 16 C 9.628 16 9.7555156 15.950516 9.8535156 15.853516 C 10.048516 15.658516 10.048516 15.341484 9.8535156 15.146484 L 7.2207031 12.513672 C 8.6282801 11.265495 10.470063 10.5 12.5 10.5 C 15.649 10.5 18.367875 12.32275 19.671875 14.96875 C 19.947875 15.52875 20.588641 15.803469 21.181641 15.605469 C 21.890641 15.369469 22.250875 14.559672 21.921875 13.888672 C 20.215875 10.403672 16.643 8 12.5 8 C 9.7794954 8 7.3175698 9.0503139 5.4570312 10.75 L 2.8535156 8.1464844 C 2.7560156 8.0489844 2.628 8 2.5 8 z"/></svg>