@brandup/ui-richeditor 1.0.43 → 1.0.45

package/source/serialize.ts

@@ -3,6 +3,7 @@
 import { blockTypeOf } from "./paragraphs";
 import {
 	ALL_BLOCK_TYPES,
+	ALL_FORMAT_TOOLS,
 	BLOCK_TYPES,
 	DEFAULT_BLOCK,
 	FORMAT_TOOLS,
@@ -28,17 +29,29 @@ function buildTagMap(tools: FormatTool[]): Record<string, FormatTool> {
 	return map;
 }
 
+/**
+ * Чем текст был размечен, если не настроенным маркером. Живёт только в разметке поля: значение
+ * собирается тегами, и атрибут в него не попадает ни при каком формате хранения.
+ */
+const MARKER_ATTR = "data-md";
+
 function lineBreak(storage: FormatStorage): string {
 	return storage === "html" ? "<br>" : "\n";
 }
 
-function wrap(storage: FormatStorage, tool: FormatTool, inner: string, markers: FormatMarkers): string {
+function wrap(
+	storage: FormatStorage,
+	tool: FormatTool,
+	inner: string,
+	markers: FormatMarkers,
+	source?: HTMLElement
+): string {
 	if (!inner) return inner;
 
 	const def = FORMAT_TOOLS[tool];
 	if (storage === "html") return `<${def.tag}>${inner}</${def.tag}>`;
 
-	const marker = markers[tool];
+	const marker = ownMarker(tool, markers, source);
 
 	// Маркер не сработает, если содержимое начинается или заканчивается пробелом, — ни у нас
 	// при разборе, ни у мессенджера. Выносим краевые пробелы наружу: разметка сохраняется,
@@ -51,6 +64,17 @@ function wrap(storage: FormatStorage, tool: FormatTool, inner: string, markers:
 	return `${leading}${marker}${core}${marker}${trailing}`;
 }
 
+/**
+ * Маркер, которым текст был размечен: запомненный на элементе, если он известен инструменту,
+ * иначе настроенный. Чужой диалект (`*жирный*` из WhatsApp) обязан вернуться в значение таким
+ * же, каким пришёл; всё, что размечено в поле, пишется настроенным маркером.
+ */
+function ownMarker(tool: FormatTool, markers: FormatMarkers, source?: HTMLElement): string {
+	const marked = source?.dataset.md;
+
+	return marked && MARKER_ALIASES[tool].includes(marked) ? marked : markers[tool];
+}
+
 // Сериализует инлайновое содержимое (текст, форматирование, <br> как мягкий перенос).
 // Абзацы (<p>/<div>) на этом уровне не учитываются — их разбирает serializeParagraphs.
 function serializeInline(
@@ -82,9 +106,9 @@ function serializeInline(
 
 		// В коде разметки нет: при разборе его содержимое не размечается, и вложенное
 		// форматирование не вернулось бы — значение разошлось бы с тем, что было в поле.
-		if (tool === "code") {
+		if (tool && FORMAT_TOOLS[tool].literal) {
 			const text = el.textContent ?? "";
-			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers);
+			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers, el);
 			continue;
 		}
 
@@ -97,16 +121,17 @@ function serializeInline(
 		}
 
 		// неизвестный или отключённый тег — отбрасываем обёртку, оставляем текст
-		result += tool ? wrap(storage, tool, inner, markers) : inner;
+		result += tool ? wrap(storage, tool, inner, markers, el) : inner;
 	}
 
 	return result;
 }
 
-// Хвостовые переносы абзаца отбрасываем — это <br>-заполнители, делающие последнюю строку видимой;
-// мягкий перенос осмыслен только между содержимым (для пустой строки используйте новый абзац).
+// Хвостовой перенос — заполнитель: без него последняя строка блока не видна и в неё не встать
+// кареткой. Отбрасываем ровно один; остальные набраны руками и значат пустые строки — отбросив
+// их, редактор показывал бы строку, которой в значении нет. У всего значения хвост уберёт trim().
 function trimTrailingBreaks(inline: string, storage: FormatStorage): string {
-	return storage === "html" ? inline.replace(/(?:<br>)+$/, "") : inline.replace(/\n+$/, "");
+	return storage === "html" ? inline.replace(/<br>$/, "") : inline.replace(/\n$/, "");
 }
 
 // Разбивает верхний уровень на блоки: у каждого свой тип, у не попавшего в блок содержимого —
@@ -157,6 +182,11 @@ function serializeParagraphs(
 
 	const cleaned = blocks.map(([type, text]) => [type, trimTrailingBreaks(text, storage)] as const);
 
+	// Пустые блоки в хвосте в значение не идут: последний из них — место каретки, оставленное
+	// нормализацией (см. normalizeParagraphs), а не строка сообщения. В markdown его срезал бы
+	// trim всего значения — html обрезаем здесь, чтобы форматы хранения не расходились.
+	while (cleaned.length && !cleaned[cleaned.length - 1][1]) cleaned.pop();
+
 	if (storage === "html")
 		return cleaned
 			.map(([type, text]) => {
@@ -220,8 +250,17 @@ export function serialize(
 	return inline.replace(/^\n+/, "").replace(/\n+$/, "").trim();
 }
 
-/** Инструмент, его маркер и признак «содержимое не может начинаться/заканчиваться самим маркером». */
-type MarkerRule = [tool: FormatTool, marker: string, standalone: boolean];
+/** Правило разбора одного маркера. */
+interface MarkerRule {
+	tool: FormatTool;
+	marker: string;
+	/** Содержимое не может начинаться и заканчиваться символом самого маркера. */
+	standalone: boolean;
+	/** Символ маркера не считается границей: маркер не собирается из половинок длинного. */
+	guarded: boolean;
+	/** Маркер настроенный, а не из чужого диалекта. */
+	own: boolean;
+}
 
 /**
  * Маркеры в порядке применения: длинный (`__`) раньше короткого-префикса (`_`), иначе
@@ -234,20 +273,47 @@ type MarkerRule = [tool: FormatTool, marker: string, standalone: boolean];
  * подчёркивания. Так же поступают паттерны конвертеров.
  */
 function orderedMarkers(tools: FormatTool[], markers: FormatMarkers): MarkerRule[] {
-	const active = tools.filter((tool) => markers[tool]).sort((a, b) => markers[b].length - markers[a].length);
-
-	return active.map((tool) => {
-		const marker = markers[tool];
-		const hasShorterPrefix = active.some((other) => {
-			const value = markers[other];
-			return value.length < marker.length && marker.startsWith(value);
-		});
+	const active = tools.filter((tool) => markers[tool]);
+	const rules: Array<[FormatTool, string, boolean]> = active.map((tool) => [tool, markers[tool], true]);
+	const taken = new Set(rules.map(([, marker]) => marker));
+
+	// Чужие диалекты того же инструмента: запасные маркеры из реестра и его собственный, если
+	// настройка его заменила. Разбираются наравне, а ставится всегда настроенный — см. markdownInline.
+	for (const tool of active)
+		for (const alias of MARKER_ALIASES[tool])
+			if (!taken.has(alias)) {
+				taken.add(alias);
+				rules.push([tool, alias, false]);
+			}
 
-		return [tool, marker, hasShorterPrefix];
-	});
+	const all = Array.from(taken);
+
+	return rules
+		.sort((a, b) => b[1].length - a[1].length)
+		.map(([tool, marker, own]) => ({
+			tool,
+			marker,
+			own,
+			standalone: all.some((value) => value.length < marker.length && marker.startsWith(value)),
+			guarded: all.some((value) => value.length > marker.length && value.startsWith(marker)),
+		}));
 }
 
-const TAG = /<(\/?)([a-z]+)>/g;
+/**
+ * Маркеры инструмента, объявленные в реестре: свой и запасные. Собираются один раз — их
+ * спрашивают и на каждый разбор, и на каждый размеченный элемент при сериализации.
+ */
+const MARKER_ALIASES: Record<FormatTool, string[]> = ALL_FORMAT_TOOLS.reduce(
+	(map, tool) => {
+		const def = FORMAT_TOOLS[tool];
+		map[tool] = [def.md, ...(def.mdAliases ?? [])].filter(Boolean);
+
+		return map;
+	},
+	{} as Record<FormatTool, string[]>
+);
+
+const TAG = /<(\/?)([a-z-]+)(?:\s[^>]*)?>/g;
 
 /**
  * Закрыт ли в содержимом каждый тег, который в нём открыт.
@@ -285,28 +351,34 @@ function markdownInline(text: string, order: MarkerRule[]): string {
 
 	// Код — первым: внутри него `*звёздочки*` остаются текстом, как у мессенджеров. Иначе
 	// содержимое кода размечалось бы, и то, что человек написал буквально, уезжало бы жирным.
-	const stash: string[] = [];
-	const code = order.find(([tool]) => tool === "code");
-	if (code) {
-		html = html.replace(markerPattern(code[1], code[2]), (_match, lead: string, inner: string) => {
-			stash.push(inner);
-
-			return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
-		});
-	}
-
-	for (const [tool, marker, standalone] of order) {
-		if (tool === "code") continue; // уже вынесен
-
-		const def = FORMAT_TOOLS[tool];
-		html = html.replace(markerPattern(marker, standalone), (match, lead: string, inner: string) =>
-			balancedTags(inner) ? `${lead}<${def.tag}>${inner}</${def.tag}>` : match
+	const stash: Array<[inner: string, marked: string]> = []; // содержимое и чужой маркер, если был
+	for (const rule of order)
+		if (rule.tool === "code" && html.includes(rule.marker))
+			html = html.replace(pattern(rule), (_match, lead: string, inner: string) => {
+				stash.push([inner, rule.own ? "" : rule.marker]);
+
+				return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
+			});
+
+	for (const rule of order) {
+		if (rule.tool === "code") continue; // уже вынесен
+		// Разбор идёт по абзацу на каждый маркер, а маркеров с диалектами уже семь. Поиск
+		// подстроки на порядок дешевле разбора регуляркой, и почти всегда он же и решает.
+		if (!html.includes(rule.marker)) continue;
+
+		const def = FORMAT_TOOLS[rule.tool];
+		html = html.replace(pattern(rule), (match, lead: string, inner: string) =>
+			balancedTags(inner) ? `${lead}${openTag(def.tag, rule.own ? "" : rule.marker)}${inner}</${def.tag}>` : match
 		);
 	}
 
 	if (stash.length) {
 		const def = FORMAT_TOOLS.code;
-		html = html.replace(STASH_PATTERN, (_match, index: string) => `<${def.tag}>${stash[+index]}</${def.tag}>`);
+		html = html.replace(STASH_PATTERN, (_match, index: string) => {
+			const [inner, marked] = stash[+index];
+
+			return `${openTag(def.tag, marked)}${inner}</${def.tag}>`;
+		});
 	}
 
 	// переносы — после маркеров: пока это \n, запрет на пересечение строки работает
@@ -328,26 +400,41 @@ function markdownInline(text: string, order: MarkerRule[]): string {
  * Содержимое не начинается и с U+20E3: в keycap-последовательностях (`*⃣`, `#⃣`, `1⃣`) сам
  * маркер служит базовым символом, и без этого `*⃣раз*` разбиралось бы как разметка вместо эмодзи.
  *
- * При `standalone` содержимое дополнительно не начинается и не заканчивается символом самого
- * маркера — см. {@link orderedMarkers}.
+ * При `standalone` содержимое не начинается и не заканчивается символом самого маркера, при
+ * `guarded` этот символ вдобавок перестаёт быть границей. Так разводятся маркеры, один из
+ * которых начинается с другого (`_` и `__`, `*` и `**`) — см. {@link orderedMarkers}.
  */
-function markerPattern(marker: string, standalone: boolean): RegExp {
-	const key = standalone ? `${marker}` : marker;
+function pattern(rule: MarkerRule): RegExp {
+	const { marker, standalone, guarded } = rule;
+	// в ключе различаем режимы: один и тот же маркер бывает разведён по-разному
+	const key = `${marker}|${standalone ? "s" : ""}${guarded ? "g" : ""}`;
 
-	let pattern = markerPatterns.get(key);
-	if (pattern) return pattern;
+	const cached = markerPatterns.get(key);
+	if (cached) return cached;
 
 	const escaped = escapeRegExp(marker);
-	const boundary = "[^\\p{L}\\p{N}]";
 	// символ маркера в классе — экранируем то, что в нём значимо
-	const own = standalone ? marker.slice(-1).replace(/[\\\]^-]/g, "\\$&") : "";
-	const head = `[^\\s\\u20e3${own}]`;
-	const tail = standalone ? `[^\\s${own}]` : "\\S";
+	const own = marker.slice(-1).replace(/[\\\]^-]/g, "\\$&");
+	const edge = standalone || guarded ? own : "";
+	// Границей символ маркера перестаёт быть только у короткого. Длинному она нужна: в
+	// `___текст___` его пара стоит рядом со своим же символом, и без границы её не найти.
+	const boundary = `[^\\p{L}\\p{N}${guarded ? own : ""}]`;
+	const head = `[^\\s\\u20e3${edge}]`;
+	const tail = edge ? `[^\\s${edge}]` : "\\S";
+
+	const built = new RegExp(
+		`(^|${boundary})${escaped}(${head}|${head}[^\\n]*?${tail})${escaped}(?=$|${boundary})`,
+		"gu"
+	);
+	markerPatterns.set(key, built);
 
-	pattern = new RegExp(`(^|${boundary})${escaped}(${head}|${head}[^\\n]*?${tail})${escaped}(?=$|${boundary})`, "gu");
-	markerPatterns.set(key, pattern);
+	return built;
+}
 
-	return pattern;
+/** Открывающий тег: чужой маркер запоминается на элементе, чтобы значение вернулось таким же. */
+function openTag(tag: string, marked: string): string {
+	// маркер задаёт хост — в значении атрибута экранируем и кавычку, иначе она разорвёт его
+	return marked ? `<${tag} ${MARKER_ATTR}="${escapeHtml(marked).replace(/"/g, "&quot;")}">` : `<${tag}>`;
 }
 
 // Набор маркеров за разбор не меняется, а разбор идёт по абзацам — компилируем каждую
@@ -380,7 +467,11 @@ export function deserialize(
 				const def = BLOCK_TYPES[type];
 				const inner = def.inline ? markdownInline(text, order) : escapeHtml(text).replace(/\n/g, "<br>");
 
-				return `<${def.tag}>${inner || "<br>"}</${def.tag}>`;
+				// Пустая последняя строка видна только с заполнителем: без него браузер не рисует
+				// её и не пускает туда каретку — строка, которая в значении есть, пропала бы.
+				const filler = inner.endsWith("<br>") ? "<br>" : "";
+
+				return `<${def.tag}>${inner ? inner + filler : "<br>"}</${def.tag}>`;
 			})
 			.join("");
 	}

package/source/toolbar.ts

@@ -60,8 +60,8 @@ const MERGED_CODE_TITLE = "Код";
 // Временно скрытые кнопки. Сами возможности работают: значение разбирается, показывается
 // и сохраняется, правку можно вызвать из кода — в панель они просто не выводятся.
 // Убрать отсюда, когда будут доведены.
-const HIDDEN_TOOLS: FormatTool[] = ["spoiler", "code"];
-const HIDDEN_BLOCKS: BlockType[] = ["code"];
+const HIDDEN_TOOLS: FormatTool[] = ["spoiler"];
+const HIDDEN_BLOCKS: BlockType[] = [];
 
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
 export const EMOJI_PICKER_CLASS = "ui-richeditor-emoji";
@@ -92,8 +92,12 @@ export interface ToolbarHost {
 	readonly editorActions?: EditorAction[];
 	/** Контейнер для тулбара; null/undefined — document.body (position: fixed над редактором). */
 	readonly toolbarContainer?: HTMLElement | null;
-	/** Типы блоков многострочного режима; пусто/undefined — кнопок блоков нет. */
-	readonly blockTypes?: BlockType[];
+	/**
+	 * Типы блоков, которые панель вправе предложить; пусто/undefined — кнопок блоков нет.
+	 * Не то же, что набор для разбора значения: показывать цитату и код редактор обязан
+	 * и там, где их не переключить (только для чтения).
+	 */
+	readonly blockTools?: BlockType[];
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
 	/** false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится. */
@@ -112,6 +116,14 @@ export interface ToolbarHost {
 	isActionEnabled?(action: EditorAction): boolean;
 	/** Вставка текста в каретку — для панели смайликов. */
 	insertText?(text: string): void;
+	/**
+	 * Открыть панель смайликов. Своя кнопка панели зовёт редактор, а не {@link openEmoji}
+	 * напрямую: он придерживает правку и отпускает фокус на её время — с кнопкой хоста это
+	 * должно работать одинаково.
+	 */
+	openEmojiPicker?(initiator: HTMLElement, container: HTMLElement): void;
+	/** Панель смайликов закрылась — редактор возвращает себе то, что придержал на её время. */
+	onEmojiClosed?(): void;
 	/** Собственные кнопки хоста; пусто/undefined — только штатные. */
 	readonly toolbarButtons?: ToolbarButton[];
 }
@@ -222,10 +234,15 @@ class FormatToolbar {
 		const buttons = host.toolbarButtons ?? [];
 		const tools = host.formatTools.filter((tool) => !HIDDEN_TOOLS.includes(tool));
 		// Обычный текст кнопки не имеет — он не «включается», а остаётся, когда выключены остальные.
-		const blocks = (host.blockTypes ?? []).filter(
+		const blocks = (host.blockTools ?? []).filter(
 			(type) => type !== DEFAULT_BLOCK && !HIDDEN_BLOCKS.includes(type)
 		);
-		if (!tools.length && !blocks.length && !actions.length && !buttons.length) return;
+		// Nothing to show — and the previous editor's panel must not stay on screen either: focus
+		// moved to this one, while its buttons would still edit the neighbour.
+		if (!tools.length && !blocks.length && !actions.length && !buttons.length) {
+			if (this.__active) this.__hide();
+			return;
+		}
 
 		this.__bindSelection();
 		this.__active = host;
@@ -258,6 +275,15 @@ class FormatToolbar {
 		}
 	}
 
+	/**
+	 * Убрать панель с экрана, не отпуская редактор: он отдал фокус своему слою — окну или панели
+	 * смайликов. От {@link detach} отличается тем, что панель смайликов при этом остаётся: её и
+	 * открыли из этого редактора, а фокус сняли как раз ради неё.
+	 */
+	suspend(host: ToolbarHost) {
+		if (this.__active === host) this.__hide();
+	}
+
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
 		// Придержанный показ снимаем первым делом, до закрытия панели: иначе её onClose поднял бы
@@ -394,16 +420,6 @@ class FormatToolbar {
 		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];
@@ -425,8 +441,6 @@ class FormatToolbar {
 			this.__buttons.push([tool, btn]);
 		}
 
-		separate(blockTypes);
-
 		for (const type of blockTypes) {
 			const def = BLOCK_TYPES[type];
 			const btn = DOM.tag(
@@ -440,8 +454,6 @@ class FormatToolbar {
 			this.__blockButtons.push([type, btn]);
 		}
 
-		separate(actions);
-
 		for (const action of actions) {
 			const def = EDITOR_ACTIONS[action];
 			const btn = DOM.tag(
@@ -456,7 +468,11 @@ class FormatToolbar {
 			this.__actionButtons.push([action, btn]);
 		}
 
-		separate(buttons);
+		// Инструменты, блоки и действия — одна группа: всё это правка оформления. Разделитель
+		// нужен только перед кнопками хоста: они про другое — переменные, рандомизацию и прочее
+		// доменное. Пустых групп разделитель не касается, иначе панель начиналась бы с линии.
+		if (buttons.length && (tools.length || blockTypes.length || actions.length))
+			elem.appendChild(DOM.tag("div", { class: "split" }));
 
 		// кнопки хоста — последними, чтобы штатные не переезжали при их появлении
 		for (const button of buttons) {
@@ -485,7 +501,7 @@ class FormatToolbar {
 	 * закрытия на body прямо в open(), то есть во время этого же клика — до body событие ещё
 	 * не дошло, и слушатель закрыл бы панель сразу после открытия.
 	 */
-	openEmoji(host: ToolbarHost, initiator: HTMLElement, container: HTMLElement) {
+	openEmoji(host: ToolbarHost, initiator: HTMLElement, container: HTMLElement): boolean {
 		// повторный клик по той же кнопке закрывает панель (это делает toggle внутри PopupManager),
 		// а вот у другой кнопки её нужно сперва закрыть — иначе toggle сочтёт открытие повторным
 		if (this.__emojiInitiator !== initiator && this.__emojiPicker?.classList.contains("opened"))
@@ -504,7 +520,17 @@ class FormatToolbar {
 			if (this.__active === host) this.__hide();
 		}
 
-		PopupManager.open(this.__ensureEmojiPicker(container), { initiator, onClose: () => this.__resume() });
+		PopupManager.open(this.__ensureEmojiPicker(container), {
+			initiator,
+			onClose: () => {
+				this.__resume();
+				host.onEmojiClosed?.();
+			},
+		});
+
+		// Повторное нажатие по той же кнопке панель закрывает (это toggle внутри PopupManager) —
+		// вызывающему нужно знать исход: открытая панель ещё и придерживает правку редактора.
+		return !!this.__emojiPicker?.classList.contains("opened");
 	}
 
 	/** Панель смайликов закрылась — показываем придержанный тулбар, если редактор ещё в фокусе. */
@@ -521,7 +547,12 @@ class FormatToolbar {
 	private __toggleEmoji(initiator: HTMLButtonElement, e: MouseEvent) {
 		e.stopPropagation();
 
-		if (this.__active) this.openEmoji(this.__active, initiator, this.__ensure());
+		const host = this.__active;
+		if (!host) return;
+
+		// через редактор, а не напрямую: панель — его слой, и придерживает правку он
+		if (host.openEmojiPicker) host.openEmojiPicker(initiator, this.__ensure());
+		else this.openEmoji(host, initiator, this.__ensure());
 	}
 
 	private __ensureEmojiPicker(container: HTMLElement): HTMLElement {