@brandup/ui-richeditor 1.0.49 → 1.0.51

package/source/serialize.ts

@@ -175,9 +175,14 @@ function serializeInline(
 
 		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;
 		}
 
@@ -282,18 +287,11 @@ function serializeParagraphs(
 			})
 			.join("");
 
-	// Пустая строка между блоками нужна там, где она их и разделяет. Блок с собственной
-	// разметкой (цитата, код) узнаётся и без неё, а в режиме мягких переносов пустая строка —
-	// это пустая строка сообщения: поставив её от себя, редактор менял бы текст.
+	// Пустая строка между блоками нужна там, где она их и разделяет. В режиме мягких переносов
+	// блок — это строка, а не абзац: граница блоков там и есть перевод строки, а пустая строка
+	// сообщения хранится пустым блоком. Поставив её от себя, редактор менял бы текст.
 	return cleaned
-		.map(([type, text], index) => {
-			if (!index) return markdownBlock(type, text);
-
-			const previous = cleaned[index - 1][0];
-			const blank = separate || (previous === DEFAULT_BLOCK && type === DEFAULT_BLOCK);
-
-			return `${blank ? "\n\n" : "\n"}${markdownBlock(type, text)}`;
-		})
+		.map(([type, text], index) => (index ? `${separate ? "\n\n" : "\n"}` : "") + markdownBlock(type, text))
 		.join("");
 }
 
@@ -314,6 +312,9 @@ function markdownBlock(type: BlockType, text: string): string {
 /**
  * Сериализует содержимое редактора в строку для хранения. Сохраняются только включённые инструменты.
  * При paragraphs=true применяется модель «абзацы (<p>/\n\n) + мягкие переносы (<br>/\n)».
+ *
+ * При separate=false блоки разделяет один перевод строки: там абзац — это строка, а пустая строка
+ * сообщения хранится пустым блоком.
  */
 export function serialize(
 	root: HTMLElement,
@@ -651,8 +652,9 @@ export function deserialize(
  * строкой. Незакрытое ограждение разметкой не считается — его строки остаются текстом, как
  * у мессенджеров: иначе одна случайная кавычка съедала бы весь остаток сообщения.
  *
- * При `separate = false` пустая строка блоки не делит: в режиме мягких переносов она сама по себе
- * строка сообщения, и разбиение съедало бы её.
+ * При `separate = false` пустая строка блоки не делит: в режиме мягких переносов блок — это строка,
+ * а не абзац, поэтому каждая строка выходит своим блоком, и пустая среди них тоже. Разметку это
+ * не рвёт: маркер и так не пересекает перенос строки — ни в значении, ни в поле.
  */
 function markdownBlocks(value: string, types: BlockType[], separate: boolean): Array<[BlockType, string]> {
 	const fenced = types.filter((type) => BLOCK_TYPES[type].fence);
@@ -663,14 +665,25 @@ function markdownBlocks(value: string, types: BlockType[], separate: boolean): A
 	let buffer: string[] = [];
 
 	const flush = () => {
-		if (buffer.length) blocks.push([DEFAULT_BLOCK, buffer.join("\n")]);
+		if (separate) {
+			if (buffer.length) blocks.push([DEFAULT_BLOCK, buffer.join("\n")]);
+		} else for (const line of buffer) blocks.push([DEFAULT_BLOCK, line]);
+
 		buffer = [];
 	};
 
 	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";
@@ -154,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; // обёртка: её позиционируют
@@ -378,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() {
@@ -399,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