@brandup/ui-richeditor 1.0.48 → 1.0.50

package/source/selection.ts

@@ -78,6 +78,10 @@ export function innerSelection(root: HTMLElement): Selection | null {
 	const selection = documentSelection(root);
 	if (!selection || selection.rangeCount === 0 || !root.contains(selection.anchorNode)) return null;
 
+	// Оба конца, а не только якорь: выделение можно вытянуть из редактора на страницу,
+	// и правка по такому диапазону трогала бы DOM за пределами содержимого.
+	if (!root.contains(selection.focusNode)) return null;
+
 	return selection;
 }
 
@@ -233,7 +237,10 @@ function linesBefore(root: HTMLElement, container: Node, offset: number): number
  * пробелов и может уехать в соседнее слово.
  */
 export function mapCharOffset(before: string, after: string, offset: number): number {
-	const same = (a: string, b: string) => a === b || (b === " " && (a === " " || a === "\t"));
+	// Пробелом после нормализации становится и таб, и неразрывный пробел (U+00A0) — тот
+	// браузер сам подставляет в contenteditable; без него выравнивание срывалось бы на
+	// первом же nbsp, и каретка уезжала к нему.
+	const same = (a: string, b: string) => a === b || (b === " " && (a === " " || a === "\t" || a === " "));
 
 	let i = 0;
 	let j = 0;
@@ -433,13 +440,34 @@ function wrapNode(node: Node, tag: string): HTMLElement {
 	return wrapper;
 }
 
-/** Выносит ветку, содержащую node, наружу из элемента fmt (расщепляя fmt на «до» и «после»). */
+/** Выносит node наружу из элемента fmt (расщепляя fmt на «до» и «после»). */
 function unwrapAround(fmt: HTMLElement, node: Node) {
 	const parent = fmt.parentNode;
 	if (!parent) return;
 
+	// Промежуточные предки расщепляются вокруг узла: ветка целиком несла бы наружу и чужой
+	// текст — в <b><i>hello world</i></b> снятие жирного с «hello» уносило бы из <b> весь <i>,
+	// и « world» терял бы формат, который с него не снимали.
+	//
+	// Осознанная цена: расщеплённая ссылка становится двумя <a> с одним адресом — в значении
+	// два соседних куска вместо одного. Целая ссылка с чужим форматом снаружи стоила бы дороже:
+	// формат снимался бы с текста, которого не выделяли.
 	let child: Node = node;
-	while (child.parentNode && child.parentNode !== fmt) child = child.parentNode;
+	while (child.parentNode && child.parentNode !== fmt) {
+		const holder = child.parentNode as HTMLElement;
+
+		const left = holder.cloneNode(false) as HTMLElement;
+		while (holder.firstChild && holder.firstChild !== child) left.appendChild(holder.firstChild);
+		if (left.firstChild) holder.parentNode?.insertBefore(left, holder);
+
+		if (child.nextSibling) {
+			const right = holder.cloneNode(false) as HTMLElement;
+			while (child.nextSibling) right.appendChild(child.nextSibling);
+			holder.parentNode?.insertBefore(right, holder.nextSibling);
+		}
+
+		child = holder; // держит теперь только выносимую ветку
+	}
 	if (child.parentNode !== fmt) return;
 
 	const left = fmt.cloneNode(false) as HTMLElement;
@@ -610,7 +638,9 @@ const LINK_TAGS = TOOL_TAG_SETS.link;
  * По ней панель узнаёт текущий адрес: у ссылки состояние — не «включена», а «вот этот адрес».
  */
 export function linkAt(root: HTMLElement, range: Range): HTMLAnchorElement | null {
-	return formatAncestor(caretProbe(range), LINK_TAGS, root) as HTMLAnchorElement | null;
+	// Пробой бывает и сам тег ссылки, а не текст внутри него: границы выделения встают на
+	// элементы при Ctrl+A и selectAllContent — искать надо включая сам узел (см. formatAt).
+	return formatAt(caretProbe(range), LINK_TAGS, root) as HTMLAnchorElement | null;
 }
 
 /**
@@ -658,12 +688,6 @@ export function clearAllFormat(root: HTMLElement) {
 	root.normalize();
 }
 
-/**
- * Состояние форматирования на выделении указанными тегами.
- * `every` — отформатирован весь текст (подсветка кнопки инструмента),
- * `some` — отформатирована хоть какая-то часть (доступность очистки).
- * Обход прерывается на первом узле, решающем исход.
- */
 /** Есть ли форматирование хоть на части выделения (или под кареткой) — доступность кнопки очистки. */
 export function hasFormatting(root: HTMLElement, range: Range): boolean {
 	if (range.collapsed) return formatAncestor(caretProbe(range), MATCH_TAG_SET, root) !== null;
@@ -713,7 +737,13 @@ export function hasAnyFormatting(root: HTMLElement): boolean {
  * Вставляет текст в позицию каретки, оборачивая его в указанные форматы (режим набора).
  * Каретка ставится сразу после вставленного текста; соседние одинаковые теги склеиваются.
  */
-export function insertFormattedText(root: HTMLElement, data: string, tools: FormatTool[], selection: Selection) {
+export function insertFormattedText(
+	root: HTMLElement,
+	data: string,
+	tools: FormatTool[],
+	selection: Selection,
+	href = ""
+) {
 	if (!data || selection.rangeCount === 0) return;
 
 	const range = selection.getRangeAt(0);
@@ -724,6 +754,9 @@ export function insertFormattedText(root: HTMLElement, data: string, tools: Form
 	let node: Node = document.createTextNode(data);
 	for (const tool of tools) {
 		const el = document.createElement(FORMAT_TOOLS[tool].tag);
+		// Ссылка — не просто тег: без адреса она не переживёт сериализацию. Адрес передаёт
+		// вызывающий — с выделения, чьё оформление наследуется.
+		if (tool === "link" && href) el.setAttribute("href", href);
 		el.appendChild(node);
 		node = el;
 	}

package/source/serialize.ts

@@ -72,7 +72,9 @@ function markdownUrl(href: string): string {
 function balancedParens(text: string): boolean {
 	let depth = 0;
 	for (const char of text) {
-		if (char === "(") depth++;
+		// Глубже одного уровня разбор ссылки не читает (LINK_PATTERN) — такой адрес
+		// должен уйти в угловые скобки, иначе ссылка при чтении распалась бы в текст.
+		if (char === "(" && ++depth > 1) return false;
 		else if (char === ")" && --depth < 0) return false;
 	}
 
@@ -101,6 +103,15 @@ function wrap(
 	const core = inner.slice(leading.length, inner.length - trailing.length);
 	if (!core) return inner; // одни пробелы — оборачивать нечего
 
+	// Маркер не пересекает перенос строки — тоже ни у нас, ни у мессенджера. Перенос внутри
+	// содержимого (Shift+Enter в жирном): размечаем каждую строку отдельно, иначе `**а\nб**`
+	// вернулось бы из значения буквальным текстом с маркерами.
+	if (core.includes("\n"))
+		return `${leading}${core
+			.split("\n")
+			.map((line) => wrap(storage, tool, line, markers, source))
+			.join("\n")}${trailing}`;
+
 	return `${leading}${marker}${core}${marker}${trailing}`;
 }
 
@@ -146,17 +157,32 @@ function serializeInline(
 
 		// В коде разметки нет: при разборе его содержимое не размечается, и вложенное
 		// форматирование не вернулось бы — значение разошлось бы с тем, что было в поле.
+		// Перенос внутри — тоже содержимое: textContent съел бы его, склеив строки. В html
+		// перенос пишется тегом: сырой \n виден только под pre-wrap самого редактора.
 		if (tool && FORMAT_TOOLS[tool].literal) {
-			const text = el.textContent ?? "";
-			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers, el);
+			const text = Array.from(el.childNodes)
+				.map((child) => (child.nodeName === "BR" ? "\n" : (child.textContent ?? "")))
+				.join("");
+			result += wrap(
+				storage,
+				tool,
+				storage === "html" ? escapeHtml(text).replace(/\n/g, "<br>") : text,
+				markers,
+				el
+			);
 			continue;
 		}
 
 		const inner = serializeInline(el.childNodes, storage, tagMap, markers);
 
-		// вложенный блочный элемент (нестандарт) — без обёртки, просто содержимое
+		// Вложенный блочный элемент — это строка: его граница даёт перенос, иначе соседние
+		// строки склеивались бы встык — VS Code и браузеры отдают буфер строками в <div>
+		// внутри общей обёртки. Хвостовой <br> внутри — заполнитель пустой строки (как у
+		// абзацев самого редактора), а не её содержимое.
 		if (tag === "DIV" || tag === "P") {
-			result += inner;
+			const br = lineBreak(storage);
+			if (result && !result.endsWith(br)) result += br;
+			result += trimTrailingBreaks(inner, storage) + br;
 			continue;
 		}
 
@@ -242,6 +268,10 @@ function serializeParagraphs(
 	}
 	flush();
 
+	// Пустой обычный блок ВНУТРИ содержимого — осознанная пустая строка (за цитатой или кодом
+	// её держит и normalizeParagraphs), поэтому здесь он не отбрасывается: этой же функцией
+	// значение и ЧИТАЕТСЯ (deserialize html идёт через неё), и фильтр молча терял бы пустые
+	// строки уже сохранённых значений при первой же загрузке.
 	const cleaned = blocks.map(([type, text]) => [type, trimTrailingBreaks(text, storage)] as const);
 
 	// Пустые блоки в хвосте в значение не идут: последний из них — место каретки, оставленное
@@ -448,11 +478,13 @@ function markdownInline(text: string, order: MarkerRule[], linked: boolean): str
 
 	// Код — первым: внутри него `*звёздочки*` остаются текстом, как у мессенджеров. Иначе
 	// содержимое кода размечалось бы, и то, что человек написал буквально, уезжало бы жирным.
-	const stash: Array<[inner: string, marked: string]> = []; // содержимое и чужой маркер, если был
+	// содержимое, чужой маркер (если был) и исходный текст целиком — для мест, где разметка
+	// не действует и спрятанное надо вернуть буквально (адрес ссылки)
+	const stash: Array<[inner: string, marked: string, literal: 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]);
+				stash.push([inner, rule.own ? "" : rule.marker, `${rule.marker}${inner}${rule.marker}`]);
 
 				return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
 			});
@@ -465,7 +497,10 @@ function markdownInline(text: string, order: MarkerRule[], linked: boolean): str
 	if (linked && html.includes("("))
 		html = html.replace(LINK_PATTERN, (match, inner: string, url: string) => {
 			// адрес в угловых скобках — форма для адресов с пробелами; сами скобки в него не входят
-			const raw = url.startsWith("&lt;") ? url.slice(4, -4) : url;
+			const bare = url.startsWith("&lt;") ? url.slice(4, -4) : url;
+			// Бэктики в адресе — буквальные символы: код успел спрятаться раньше (он разбирается
+			// первым), и без возврата метка уехала бы в href, а содержимое кода пропало бы.
+			const raw = bare.replace(STASH_PATTERN, (_m, index: string) => stash[+index][2]);
 			const href = safeUrl(raw);
 			const text = unescapeLinkText(inner);
 			if (!text || !href) return match; // без текста или без адреса ссылки нет
@@ -603,9 +638,10 @@ export function deserialize(
 	template.innerHTML = value;
 	const tagMap = buildTagMap(tools);
 
-	if (!paragraphs) return serializeInline(template.content.childNodes, "html", tagMap, defaultFormatMarkers());
+	// markers html-ветке не нужны (wrap выходит раньше), передаются лишь ради сигнатуры
+	if (!paragraphs) return serializeInline(template.content.childNodes, "html", tagMap, markers);
 
-	return serializeParagraphs(template.content, "html", tagMap, defaultFormatMarkers(), types, separate).replace(
+	return serializeParagraphs(template.content, "html", tagMap, markers, types, separate).replace(
 		/<([a-z]+)><\/\1>/g,
 		"<$1><br></$1>"
 	);
@@ -639,7 +675,15 @@ function markdownBlocks(value: string, types: BlockType[], separate: boolean): A
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
 
-		const fence = fenced.find((type) => line.trimEnd() === BLOCK_TYPES[type].fence);
+		// Открывающая ограда бывает с меткой языка (```text) — блок она открывает так же, а сама
+		// метка отбрасывается: значение кита её не хранит. Остаток с символом ограды меткой не
+		// считается (```` — не ограда с меткой `). Закрывающая ограда — только голая: та же
+		// строка с меткой внутри блока — его содержимое, а не конец.
+		const fence = fenced.find((type) => {
+			const marker = BLOCK_TYPES[type].fence!;
+			const trimmed = line.trimEnd();
+			return trimmed.startsWith(marker) && !trimmed.slice(marker.length).includes(marker[0]);
+		});
 		if (fence) {
 			let close = -1;
 			for (let at = i + 1; at < lines.length; at++)

package/source/toolbar.ts

@@ -6,7 +6,7 @@
 // т.к. тулбар находится вне привязанных UIElement).
 
 import { DOM } from "@brandup/ui";
-import { PopupManager } from "@brandup/ui-kit";
+import { PopupManager, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import {
 	BLOCK_TYPES,
 	DEFAULT_BLOCK,
@@ -68,10 +68,10 @@ export const LINK_ROW_CLASS = "link-row";
 // панель показывает поле адреса вместо кнопок
 export const LINK_EDITING_CLASS = "link-editing";
 
-// Временно скрытые кнопки. Сами возможности работают: значение разбирается, показывается
-// и сохраняется, правку можно вызвать из кода — в панель они просто не выводятся.
-// Убрать отсюда, когда будут доведены.
-const HIDDEN_TOOLS: FormatTool[] = ["spoiler"];
+// Временно скрытые кнопки — для возможностей, которые работают (значение разбирается,
+// показывается и сохраняется, правка зовётся из кода), но в панель ещё не выводятся.
+// Сейчас скрытых нет; механика остаётся на следующую такую возможность.
+const HIDDEN_TOOLS: FormatTool[] = [];
 const HIDDEN_BLOCKS: BlockType[] = [];
 
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
@@ -124,8 +124,12 @@ export interface ToolbarHost {
 	readonly blockTools?: BlockType[];
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
-	/** false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится. */
-	isToolEnabled?(tool: FormatTool): boolean;
+	/**
+	 * false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится.
+	 * Признак «в коде» дорог (обход выделения) — панель считает его один раз на обновление
+	 * и передаёт вторым аргументом, чтобы хост не обходил выделение на каждую кнопку.
+	 */
+	isToolEnabled?(tool: FormatTool, codeActive?: boolean): boolean;
 	/** Тип блока под кареткой — им подсвечивается активная кнопка блока. */
 	readonly currentBlock?: BlockType;
 	applyBlock?(type: BlockType): void;
@@ -150,6 +154,9 @@ export interface ToolbarHost {
 }
 
 const MARGIN = 6;
+// Зазор от краёв экрана у панели в document.body. То же значение вычитается из её предельной
+// ширины в richeditor.less (--richeditor-toolbar-edge-gap) — менять их нужно вместе.
+const EDGE_GAP = 4;
 
 class FormatToolbar {
 	private __elem: HTMLElement | null = null; // обёртка: её позиционируют
@@ -326,17 +333,27 @@ class FormatToolbar {
 		};
 
 		const active = host.activeTools?.();
+		// Признак «в коде» гасит остальные кнопки и подсвечивает объединённую; сам он — обход
+		// выделения, поэтому считается один раз на обновление, а не на каждую кнопку. Вывести
+		// его из activeTools можно только вместе с currentBlock (блок кода — не формат): хосту
+		// без блоков остаётся его собственный isCodeActive.
+		const inCode =
+			active && host.currentBlock !== undefined
+				? host.currentBlock === CODE_TOOL || active.has(CODE_TOOL)
+				: host.isCodeActive?.();
+
 		for (const [tool, btn] of this.__buttons) {
 			// объединённая кнопка подсвечена и на блоке кода, а не только на моноширинном
 			const isActive =
 				this.__mergedCode && tool === CODE_TOOL
-					? !!host.isCodeActive?.()
+					? !!inCode
 					: active
 						? active.has(tool)
 						: host.isToolActive(tool);
 
-			if (btn.classList.contains("active") !== isActive) btn.classList.toggle("active", isActive);
-			setDisabled(btn, host.isToolEnabled?.(tool) === false);
+			// toggle с force не трогает атрибут, когда состояние уже нужное, — мутации не будет
+			btn.classList.toggle("active", isActive);
+			setDisabled(btn, host.isToolEnabled?.(tool, inCode) === false);
 		}
 
 		// тип под кареткой спрашиваем, только если есть что подсвечивать: обновление идёт
@@ -344,10 +361,7 @@ class FormatToolbar {
 		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);
-			}
+			for (const [type, btn] of this.__blockButtons) btn.classList.toggle("active", block === type);
 		}
 
 		// хост может не реализовывать isActionEnabled — тогда кнопка всегда доступна
@@ -367,9 +381,24 @@ class FormatToolbar {
 
 		const rect = this.__active.editable.getBoundingClientRect();
 		const elem = this.__elem;
+
+		// Ширина панели зависит от left: коробка ужимается по содержимому, и прижатый к правому
+		// краю left от прошлого показа ужал бы её до зазора — панель одна на все редакторы,
+		// а прошлый мог стоять у самого края. Меряем со снятой координатой.
+		elem.style.left = "";
+		const width = elem.offsetWidth;
+
 		const top = rect.top - elem.offsetHeight - MARGIN;
-		elem.style.left = `${Math.max(4, rect.left)}px`;
-		elem.style.top = `${Math.max(4, top)}px`;
+
+		// Панель шире редактора (у узкого поля так бывает всегда), и по его левому краю она уехала
+		// бы за правый край экрана. Прижимаем к правому краю, но не левее отступа: панель шире
+		// самого экрана прижимается к левому и прокручивается — см. .toolbar-body.
+		// clientWidth корня, а не innerWidth: тот считает и полосу прокрутки страницы,
+		// и крайняя кнопка панели оказывалась бы под ней.
+		const viewport = elem.ownerDocument.documentElement.clientWidth;
+		const maxLeft = Math.max(EDGE_GAP, viewport - width - EDGE_GAP);
+		elem.style.left = `${Math.min(Math.max(EDGE_GAP, rect.left), maxLeft)}px`;
+		elem.style.top = `${Math.max(EDGE_GAP, top)}px`;
 	}
 
 	private __removeViewportListeners() {
@@ -388,7 +417,9 @@ class FormatToolbar {
 			// этого съезжать не должна. Выпадающие слои (панель смайликов) висят на обёртке:
 			// её коробка их и не растит, и не обрезает.
 			this.__elem = DOM.tag("div", { class: TOOLBAR_CLASS });
-			this.__body = DOM.tag("div", { class: BODY_CLASS });
+			// Коробка прокручивается по горизонтали: полный набор кнопок на узком экране в строку
+			// не влезает. Полоса — общая, от .ui-scrollable кита, только тоньше (см. richeditor.less).
+			this.__body = DOM.tag("div", { class: [BODY_CLASS, SCROLLABLE_CLASS] });
 			this.__elem.appendChild(this.__body);
 
 			// Панель нигде не должна забирать фокус, иначе редактор теряет выделение, а blur