@brandup/ui-richeditor 1.0.40 → 1.0.42

package/source/toolbar.ts

@@ -6,13 +6,25 @@
 // т.к. тулбар находится вне привязанных UIElement).
 
 import { DOM } from "@brandup/ui";
-import { POPUP_CLASS, PopupManager } from "@brandup/ui-kit";
-import { EDITOR_ACTIONS, FORMAT_TOOLS, type EditorAction, type FormatTool } from "./format";
-import { EMOJIS } from "./emoji";
+import { POPUP_CLASS, PopupManager, SCROLLABLE_CLASS } from "@brandup/ui-kit";
+import {
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
+	EDITOR_ACTIONS,
+	FORMAT_TOOLS,
+	type BlockType,
+	type EditorAction,
+	type FormatTool,
+} from "./format";
+import { EMOJI_GROUPS, type EmojiGroup } 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 spoilerIcon from "../svg/spoiler.svg";
+import codeIcon from "../svg/mono.svg";
+import quoteIcon from "../svg/quote.svg";
+import codeblockIcon from "../svg/codeblock.svg";
 import emojiIcon from "../svg/emoji.svg";
 import eraseIcon from "../svg/erase.svg";
 import undoIcon from "../svg/undo.svg";
@@ -23,6 +35,14 @@ const FORMAT_ICONS: Record<FormatTool, string> = {
 	italic: italicIcon,
 	strike: strikeIcon,
 	underline: underlineIcon,
+	spoiler: spoilerIcon,
+	code: codeIcon,
+};
+
+// Обычный текст кнопки не имеет: повторное нажатие активной кнопки возвращает блок к нему.
+const BLOCK_ICONS: Partial<Record<BlockType, string>> = {
+	quote: quoteIcon,
+	code: codeblockIcon,
 };
 
 const ACTION_ICONS: Record<EditorAction, string> = {
@@ -32,6 +52,17 @@ const ACTION_ICONS: Record<EditorAction, string> = {
 	redo: redoIcon,
 };
 
+// Код есть и инструментом (моноширинный), и типом блока — панель сводит их в одну кнопку.
+const CODE_TOOL: FormatTool = "code";
+const CODE_BLOCK: BlockType = "code";
+const MERGED_CODE_TITLE = "Код";
+
+// Временно скрытые кнопки. Сами возможности работают: значение разбирается, показывается
+// и сохраняется, правку можно вызвать из кода — в панель они просто не выводятся.
+// Убрать отсюда, когда будут доведены.
+const HIDDEN_TOOLS: FormatTool[] = ["spoiler", "code"];
+const HIDDEN_BLOCKS: BlockType[] = ["code"];
+
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
 export const EMOJI_PICKER_CLASS = "ui-richeditor-emoji";
 
@@ -61,8 +92,19 @@ export interface ToolbarHost {
 	readonly editorActions?: EditorAction[];
 	/** Контейнер для тулбара; null/undefined — document.body (position: fixed над редактором). */
 	readonly toolbarContainer?: HTMLElement | null;
+	/** Типы блоков многострочного режима; пусто/undefined — кнопок блоков нет. */
+	readonly blockTypes?: BlockType[];
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
+	/** false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится. */
+	isToolEnabled?(tool: FormatTool): boolean;
+	/** Тип блока под кареткой — им подсвечивается активная кнопка блока. */
+	readonly currentBlock?: BlockType;
+	applyBlock?(type: BlockType): void;
+	/** Правка кода любого вида — для объединённой кнопки (моноширинный + блок кода). */
+	applyCode?(): void;
+	/** Активен ли код в любом виде — подсветка объединённой кнопки. */
+	isCodeActive?(): boolean;
 	/** Активные форматы всех инструментов сразу; нет реализации — панель опросит их поштучно. */
 	activeTools?(): ReadonlySet<FormatTool>;
 	applyAction?(action: EditorAction): void;
@@ -76,14 +118,46 @@ export interface ToolbarHost {
 
 const MARGIN = 6;
 
+// Сколько кнопок помещается в ряд при ширине панели (см. .ui-richeditor-emoji в richeditor.less).
+// Точность нужна только для оценки высоты нерисованной группы: ошибка сдвинет ползунок прокрутки,
+// но не саму раскладку — группа переносит кнопки сама.
+const EMOJI_COLUMNS = 8;
+
+/**
+ * Группа смайликов: и смысловое деление в панели (отбивается линией), и кусок, к которому
+ * применяется пропуск отрисовки. Поэлементно это было бы семьсот отслеживаемых поддеревьев,
+ * и слежение за ними съедает выигрыш от пропуска.
+ */
+function buildEmojiGroup(group: EmojiGroup): HTMLElement {
+	const rows = Math.ceil(group.emojis.length / EMOJI_COLUMNS);
+	const elem = DOM.tag("div", {
+		class: "emoji-group",
+		role: "group",
+		"aria-label": group.title,
+		// высота, пока группа не нарисована: без неё список схлопнулся бы, а прокрутка скакала
+		style: `--emoji-rows: ${rows}`,
+	});
+
+	const fragment = document.createDocumentFragment();
+	for (const emoji of group.emojis)
+		fragment.appendChild(DOM.tag("button", { type: "button", class: "emoji", tabindex: "-1" }, emoji));
+	elem.appendChild(fragment);
+
+	return elem;
+}
+
 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 __blockButtons: Array<[BlockType, HTMLButtonElement]> = [];
+	private __mergedCode = false; // кнопка кода делает и моноширинный, и блок (см. __build)
 	private __actionButtons: Array<[EditorAction, HTMLButtonElement]> = [];
-	private __hostButtons: Array<[ToolbarButton, HTMLButtonElement]> = [];
+	// имя, а не сама кнопка хоста: панель одна на все редакторы и переиспользует разметку между
+	// ними, а поведение принадлежит текущему — держать здесь ссылку значит звать чужой обработчик
+	private __hostButtons: Array<[string, HTMLButtonElement]> = [];
 	private __active: ToolbarHost | null = null;
 	private __suspended: ToolbarHost | null = null; // показ придержан на время панели смайликов
 	private __toolsKey = "";
@@ -146,11 +220,16 @@ class FormatToolbar {
 
 		const actions = host.editorActions ?? [];
 		const buttons = host.toolbarButtons ?? [];
-		if (!host.formatTools.length && !actions.length && !buttons.length) return;
+		const tools = host.formatTools.filter((tool) => !HIDDEN_TOOLS.includes(tool));
+		// Обычный текст кнопки не имеет — он не «включается», а остаётся, когда выключены остальные.
+		const blocks = (host.blockTypes ?? []).filter(
+			(type) => type !== DEFAULT_BLOCK && !HIDDEN_BLOCKS.includes(type)
+		);
+		if (!tools.length && !blocks.length && !actions.length && !buttons.length) return;
 
 		this.__bindSelection();
 		this.__active = host;
-		this.__build(host.formatTools, actions, buttons);
+		this.__build(tools, blocks, actions, buttons);
 		this.refresh();
 
 		const elem = this.__ensure();
@@ -190,9 +269,12 @@ class FormatToolbar {
 		const emojiHost = this.__emojiHost === host;
 		if (!emojiHost && this.__active !== host) return;
 
-		this.__closeEmoji();
-
+		// Закрываем только свою панель. Открытие у кнопки другого редактора само переводит туда
+		// фокус, и этот уход приходит уже после — панель к тому времени принадлежит соседу, и
+		// закрыть её значило бы гасить только что открытое: она требовала бы второго нажатия.
 		if (emojiHost) {
+			this.__closeEmoji();
+
 			this.__emojiHost = null;
 			this.__emojiInitiator = null;
 		}
@@ -227,13 +309,38 @@ class FormatToolbar {
 
 		const active = host.activeTools?.();
 		for (const [tool, btn] of this.__buttons) {
-			const isActive = active ? active.has(tool) : host.isToolActive(tool);
+			// объединённая кнопка подсвечена и на блоке кода, а не только на моноширинном
+			const isActive =
+				this.__mergedCode && tool === CODE_TOOL
+					? !!host.isCodeActive?.()
+					: active
+						? active.has(tool)
+						: host.isToolActive(tool);
+
 			if (btn.classList.contains("active") !== isActive) btn.classList.toggle("active", isActive);
+			setDisabled(btn, host.isToolEnabled?.(tool) === false);
+		}
+
+		// тип под кареткой спрашиваем, только если есть что подсвечивать: обновление идёт
+		// на каждое её движение, а поиск блока — обход предков
+		if (this.__blockButtons.length) {
+			const block = host.currentBlock;
+
+			for (const [type, btn] of this.__blockButtons) {
+				const isActive = block === type;
+				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);
+		for (const [name, btn] of this.__hostButtons)
+			setDisabled(btn, this.__hostButton(name)?.isEnabled?.() === false);
+	}
+
+	/** Кнопка хоста по имени — у активного редактора, а не у того, кто собрал разметку панели. */
+	private __hostButton(name: string): ToolbarButton | undefined {
+		return this.__active?.toolbarButtons?.find((button) => button.name === name);
 	}
 
 	/** Пересчитать позицию над активным редактором (только для режима body/fixed). */
@@ -269,8 +376,8 @@ class FormatToolbar {
 		return this.__elem;
 	}
 
-	private __build(tools: FormatTool[], actions: EditorAction[], buttons: ToolbarButton[]) {
-		const key = `${tools.join(",")}|${actions.join(",")}|${buttons.map((b) => b.name).join(",")}`;
+	private __build(tools: FormatTool[], blocks: BlockType[], actions: EditorAction[], buttons: ToolbarButton[]) {
+		const key = `${tools.join(",")}|${blocks.join(",")}|${actions.join(",")}|${buttons.map((b) => b.name).join(",")}`;
 		const elem = this.__ensure();
 		if (key === this.__toolsKey && elem.firstChild) return; // тот же состав — переиспользуем кнопки
 
@@ -278,29 +385,68 @@ class FormatToolbar {
 		const pickerInToolbar = !!this.__emojiPicker && this.__emojiPicker.parentElement === elem;
 		DOM.empty(elem);
 		this.__buttons = [];
+		this.__blockButtons = [];
 		this.__actionButtons = [];
 		this.__hostButtons = [];
 
+		// Код — одна кнопка на оба вида, как в мессенджерах: и моноширинный, и блок кода. Какой
+		// из них применить, решает редактор по выделению, поэтому отдельная кнопка блока не нужна.
+		this.__mergedCode = tools.includes(CODE_TOOL) && blocks.includes(CODE_BLOCK);
+		const blockTypes = this.__mergedCode ? blocks.filter((type) => type !== CODE_BLOCK) : blocks;
+
+		// Разделитель ставится только между непустыми группами — иначе панель начиналась бы
+		// с линии или показывала две подряд.
+		let filled = false;
+		const separate = (group: unknown[]) => {
+			if (filled && group.length) elem.appendChild(DOM.tag("div", { class: "split" }));
+			filled ||= group.length > 0;
+		};
+
+		separate(tools);
+
 		for (const tool of tools) {
+			const merged = this.__mergedCode && tool === CODE_TOOL;
 			const def = FORMAT_TOOLS[tool];
 			const btn = DOM.tag(
 				"button",
-				{ type: "button", class: "format-button", "data-format-tool": tool, title: def.title },
+				{
+					type: "button",
+					class: "format-button",
+					dataset: { formatTool: tool },
+					title: merged ? MERGED_CODE_TITLE : def.title,
+				},
 				FORMAT_ICONS[tool]
 			);
-			btn.addEventListener("click", () => this.__active?.applyFormat(tool));
+			btn.addEventListener("click", () =>
+				merged ? this.__active?.applyCode?.() : this.__active?.applyFormat(tool)
+			);
 
 			elem.appendChild(btn);
 			this.__buttons.push([tool, btn]);
 		}
 
-		if (tools.length && actions.length) elem.appendChild(DOM.tag("div", { class: "split" }));
+		separate(blockTypes);
+
+		for (const type of blockTypes) {
+			const def = BLOCK_TYPES[type];
+			const btn = DOM.tag(
+				"button",
+				{ type: "button", class: "block-button", dataset: { blockType: type }, title: def.title },
+				BLOCK_ICONS[type] ?? ""
+			);
+			btn.addEventListener("click", () => this.__active?.applyBlock?.(type));
+
+			elem.appendChild(btn);
+			this.__blockButtons.push([type, btn]);
+		}
+
+		separate(actions);
 
 		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 },
+				{ type: "button", class: "action-button", dataset: { editorAction: action }, title: def.title },
 				ACTION_ICONS[action]
 			);
 			if (action === "emoji") btn.addEventListener("click", (e) => this.__toggleEmoji(btn, e));
@@ -310,19 +456,19 @@ class FormatToolbar {
 			this.__actionButtons.push([action, btn]);
 		}
 
-		if ((tools.length || actions.length) && buttons.length) elem.appendChild(DOM.tag("div", { class: "split" }));
+		separate(buttons);
 
 		// кнопки хоста — последними, чтобы штатные не переезжали при их появлении
 		for (const button of buttons) {
 			const btn = DOM.tag(
 				"button",
-				{ type: "button", class: "host-button", "data-toolbar-button": button.name, title: button.title },
+				{ type: "button", class: "host-button", dataset: { toolbarButton: button.name }, title: button.title },
 				button.icon
 			);
-			btn.addEventListener("click", () => button.run());
+			btn.addEventListener("click", () => this.__hostButton(button.name)?.run());
 
 			elem.appendChild(btn);
-			this.__hostButtons.push([button, btn]);
+			this.__hostButtons.push([button.name, btn]);
 		}
 
 		// панель пережила перестройку кнопок — возвращаем её в тулбар, чтобы не собирать заново.
@@ -388,10 +534,12 @@ class FormatToolbar {
 	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);
+		// Прокручивается список, а не сам попап: полоса прокрутки рисуется по краю коробки
+		// и перекрывала бы скругление рамки — угол выглядел бы срезанным.
+		const list = DOM.tag("div", { class: ["emoji-list", SCROLLABLE_CLASS] });
+		picker.appendChild(list);
+
+		for (const group of EMOJI_GROUPS) list.appendChild(buildEmojiGroup(group));
 
 		// панель может висеть и вне тулбара, поэтому гасит фокус сама
 		picker.addEventListener("mousedown", (e) => e.preventDefault());

package/svg/codeblock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M 5 3 C 3.895 3 3 3.895 3 5 L 3 7 L 3 19 C 3 20.093063 3.9069372 21 5 21 L 19 21 C 20.093063 21 21 20.093063 21 19 L 21 6 L 21 5 C 21 3.895 20.105 3 19 3 L 5 3 z M 5 7 L 19 7 L 19 19 L 5 19 L 5 7 z M 10 10.085938 C 9.819 10.085938 9.638 10.154969 9.5 10.292969 L 7.5 12.292969 C 7.109 12.682969 7.109 13.316031 7.5 13.707031 L 9.5 15.707031 C 9.776 15.983031 10.224 15.983031 10.5 15.707031 C 10.776 15.431031 10.776 14.983031 10.5 14.707031 L 8.7929688 13 L 10.5 11.292969 C 10.776 11.016969 10.776 10.568969 10.5 10.292969 C 10.362 10.154969 10.181 10.085938 10 10.085938 z M 14 10.085938 C 13.819 10.085938 13.638 10.154969 13.5 10.292969 C 13.224 10.568969 13.224 11.016969 13.5 11.292969 L 15.207031 13 L 13.5 14.707031 C 13.224 14.983031 13.224 15.431031 13.5 15.707031 C 13.776 15.983031 14.224 15.983031 14.5 15.707031 L 16.5 13.707031 C 16.891 13.316031 16.891 12.682969 16.5 12.292969 L 14.5 10.292969 C 14.362 10.154969 14.181 10.085938 14 10.085938 z"/></svg>

package/svg/mono.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" >
+<path d="M5.5 19V5h2.9l3.6 7.4L15.6 5h2.9v14H16V9.9l-2.9 6h-2.2l-2.9-6V19H5.5Z" />
+</svg>

package/svg/quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px"><path d="M20,3H4.011C2.911,3,2.01,3.9,2.01,5L2.001,16.999c0,1.105,0.895,2.001,2,2.001H5.5C5.776,19,6,19.224,6,19.5v2.086 c0,0.891,1.077,1.337,1.707,0.707l3-3C10.895,19.105,11.149,19,11.414,19H20c1.1,0,2-0.9,2-2V5C22,3.9,21.1,3,20,3z M11,11.697 c0,0.197-0.058,0.39-0.168,0.555l-1.596,2.378c-0.25,0.374-0.752,0.483-1.133,0.244c-0.398-0.249-0.512-0.777-0.251-1.167L9,12H8 c-0.552,0-1-0.448-1-1V9c0-0.552,0.448-1,1-1h2c0.552,0,1,0.448,1,1V11.697z M17,11.697c0,0.197-0.058,0.39-0.168,0.555 l-1.596,2.378c-0.25,0.374-0.752,0.483-1.133,0.244c-0.398-0.249-0.512-0.777-0.251-1.167L15,12h-1c-0.552,0-1-0.448-1-1V9 c0-0.552,0.448-1,1-1h2c0.552,0,1,0.448,1,1V11.697z"/></svg>

package/svg/spoiler.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2 6h20v12H2V6zm4 5h3v2H6v-2zm4.5 0h3v2h-3v-2zm4.5 0h3v2h-3v-2z"/></svg>