@brandup/ui-richeditor 1.0.49 → 1.0.51

package/source/index.ts

@@ -1,6 +1,18 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
-export { EMOJIS, EMOJI_GROUPS, EMOJI_PICKER_CLASS, createEmojiPicker, type EmojiGroup } from "./emoji";
+export {
+	EMOJIS,
+	EMOJI_GROUPS,
+	EMOJI_PICKER_CLASS,
+	RECENT_EMOJIS_KEY,
+	RECENT_EMOJIS_LIMIT,
+	RECENT_GROUP_CLASS,
+	createEmojiPicker,
+	recentEmojis,
+	rememberEmoji,
+	refreshRecentEmojis,
+	type EmojiGroup,
+} from "./emoji";
 export {
 	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,

package/source/paragraphs.ts

@@ -153,9 +153,25 @@ export function normalizeWhitespace(root: HTMLElement) {
 /**
  * Нормализует абзацы многострочного режима: удаляет пустые абзацы (без текстового содержимого).
  * Если содержимого нет вовсе — редактор остаётся пустым (показывается placeholder).
+ *
+ * В режиме мягких переносов (`softBreaks`) абзац — это строка: пустой абзац там осмыслен сам по
+ * себе (пустая строка сообщения) и не удаляется, а мягкий перенос внутри абзаца приводится
+ * к той же модели — делит его на строки-абзацы.
  */
-export function normalizeParagraphs(root: HTMLElement, merge = false) {
-	if (merge) mergeAdjacentBlocks(root);
+export function normalizeParagraphs(root: HTMLElement, softBreaks = false) {
+	if (softBreaks) {
+		mergeAdjacentBlocks(root);
+		splitSoftBreaks(root);
+
+		// Пустая строка здесь осмысленна сама по себе, поэтому пустые абзацы не удаляются —
+		// кроме случая, когда всё поле из них и состоит: в значение они не идут (хвост
+		// обрезается), а пока они в поле, оно не пустое и не покажет заглушку.
+		const lines = Array.from(root.children);
+		const blank = (el: Element) => blockTypeOf(el) === DEFAULT_BLOCK && !(el.textContent ?? "").trim();
+		if (lines.length && lines.every(blank)) for (const el of lines) el.remove();
+
+		return;
+	}
 
 	for (const el of Array.from(root.children)) {
 		// Пустой блок другого типа не трогаем: его завели осознанно и в него сейчас будут писать,
@@ -178,18 +194,18 @@ export function normalizeParagraphs(root: HTMLElement, merge = false) {
 }
 
 /**
- * Склеивает соседние блоки одного типа — в режиме мягких переносов, где граница между блоками
- * в значение не попадает. Подряд идущие строки с маркером цитаты разбор собирает в одну цитату,
- * а два обычных абзаца там и вовсе неразличимы: пустой строки между ними на экране нет, а в
- * значении она была бы. Два блока в поле показывали бы то, чего в сообщении не будет.
+ * Склеивает соседние блоки одного типа — в режиме мягких переносов, где граница между ними
+ * в значение не попадает: подряд идущие строки с маркером цитаты разбор собирает в одну цитату,
+ * и два блока в поле показывали бы то, чего в сообщении не будет.
  *
- * Блоки с ограждением (код) не трогаем: у них есть свои границы, и два подряд разбираются
+ * Обычные абзацы не трогаем: там граница блоков — это перевод строки, и она в значение как раз
+ * попадает. Блоки с ограждением (код) — тоже: у них есть свои границы, и два подряд разбираются
  * ровно как два.
  */
 export function mergeAdjacentBlocks(root: HTMLElement) {
 	for (const el of Array.from(root.children) as HTMLElement[]) {
 		const type = blockTypeOf(el);
-		if (!type || BLOCK_TYPES[type].fence) continue;
+		if (!type || type === DEFAULT_BLOCK || BLOCK_TYPES[type].fence) continue;
 
 		const previous = el.previousElementSibling;
 		if (!previous || blockTypeOf(previous) !== type) continue;
@@ -204,6 +220,46 @@ export function mergeAdjacentBlocks(root: HTMLElement) {
 	}
 }
 
+/**
+ * Делит обычные абзацы по мягким переносам — в режиме, где абзац это строка. Собственный перенос
+ * приходит извне (вставка документа, чужое значение), и без деления одна строка модели была бы
+ * то `<br>`, то границей абзацев.
+ *
+ * Хвостовой перенос строкой не считается: это заполнитель, которым браузер показывает последнюю
+ * пустую строку (см. ensureParagraphs), — от него делить нечего.
+ */
+export function splitSoftBreaks(root: HTMLElement) {
+	for (const el of Array.from(root.children) as HTMLElement[]) {
+		if (blockTypeOf(el) !== DEFAULT_BLOCK) continue;
+
+		const parts: ChildNode[][] = [[]];
+		for (const node of Array.from(el.childNodes)) {
+			if (node.nodeName === "BR") parts.push([]);
+			else parts[parts.length - 1].push(node);
+		}
+		if (parts.length === 1) continue;
+
+		// Перенос, спрятанный внутри инлайнового тега (мягкий перенос его не разрезает), делит
+		// строки наравне с верхним, но по границам тега — с ним и хвостовой перенос абзаца уже
+		// не обязательно заполнитель. Такой абзац оставляем как есть: делить его по половине
+		// переносов значило бы терять строки.
+		if (el.querySelectorAll("br").length !== parts.length - 1) continue;
+
+		const empty = (nodes: ChildNode[]) => !nodes.some((node) => node.textContent);
+		if (empty(parts[parts.length - 1])) parts.pop();
+
+		el.replaceWith(
+			...parts.map((nodes) => {
+				const p = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
+				for (const node of nodes) p.appendChild(node);
+				if (empty(nodes)) p.appendChild(document.createElement("br")); // заполнитель пустой строки
+
+				return p;
+			})
+		);
+	}
+}
+
 /**
  * Есть ли что нормализовать {@link ensureParagraphs}: блуждающий текст/инлайн, чужой `<div>`,
  * пустой абзац без заполнителя или лишний хвостовой перенос.
@@ -217,7 +273,7 @@ export function paragraphsNormalized(root: HTMLElement): boolean {
 	for (const node of root.childNodes) {
 		const el = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
 		if (!el || !isBlock(el) || el.tagName === "DIV") return false;
-		if (!el.firstChild) return false;
+		if (!(el.textContent ?? "") && !el.querySelector("br")) return false;
 
 		const tail = el.lastChild!;
 		if (tail.nodeName === "BR" && tail.previousSibling?.nodeName !== "BR" && (el.textContent ?? "").length > 0)
@@ -266,7 +322,11 @@ export function ensureParagraphs(root: HTMLElement): boolean {
 	flushRun(null);
 
 	for (const p of Array.from(root.children) as HTMLElement[]) {
-		if (!p.firstChild) {
+		// Пустой абзац опознаём по содержимому, а не по наличию узлов: из буфера обмена приходят
+		// абзацы из одних пробелов, и после обрезки в них остаются пустые текстовые узлы. Без
+		// заполнителя такой абзац не занимает строки, и в режиме мягких переносов склейка теряет
+		// его вместе с пустой строкой между абзацами (см. mergeAdjacentBlocks).
+		if (!(p.textContent ?? "") && !p.querySelector("br")) {
 			p.appendChild(document.createElement("br")); // пустой абзац — заполнитель для видимости строки
 			changed = true;
 			continue;

package/source/richeditor.less

@@ -13,8 +13,14 @@
 @richeditor-border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
 
 :root {
-	// цитата: линия слева, как её рисуют мессенджеры
-	--richeditor-quote-line: rgba(0, 0, 0, 0.2);
+	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Вертикальный отступ — тот же,
+	// что у абзаца: строка не должна прыгать при смене типа блока. Горизонтальный задаётся
+	// отдельно — от него зависит, насколько текст цитаты отходит от линии.
+	--richeditor-quote-line: #1872bc;
+	--richeditor-quote-line-width: 3px;
+	--richeditor-quote-fill: rgba(0, 0, 0, 0.04);
+	--richeditor-quote-padding-tb: 5px;
+	--richeditor-quote-padding-lr: 10px;
 
 	// код — и моноширинный, и блок
 	--richeditor-code-fill: rgba(0, 0, 0, 0.06);
@@ -46,6 +52,8 @@
 	// с ним не связана, а вычитание отступов задавало бы размер дважды и могло не сойтись.
 	--richeditor-toolbar-padding: 3px;
 	--richeditor-toolbar-button-size: 34px;
+	// зазор панели от краёв экрана; то же значение — в EDGE_GAP (toolbar.ts)
+	--richeditor-toolbar-edge-gap: 4px;
 
 	// панель смайликов
 	--richeditor-emoji-size: 32px;
@@ -79,12 +87,31 @@
 		}
 	}
 
-	// Цитата: линия слева, как её рисуют мессенджеры. Вертикальные поля те же, что у абзаца, —
-	// строка не должна прыгать при смене типа блока.
+	// Режим мягких переносов: абзац здесь — строка, а не абзац. Отступ между ними читался бы
+	// пустой строкой, которой в сообщении нет.
+	&.breaks p {
+		padding-top: 0;
+		padding-bottom: 0;
+
+		&:last-child {
+			padding-bottom: var(--richeditor-underline-room);
+		}
+	}
+
+	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Значения — переменными
+	// (см. :root выше): подложке нужен и отступ справа, иначе текст упирался бы в её край.
 	& blockquote {
 		margin: 0;
-		padding: 5px 0 5px 10px;
-		border-left: 3px solid var(--richeditor-quote-line);
+		// Ширина по содержимому, а не во всю строку: с подложкой цитата — это плашка, и пустое
+		// место справа от короткой строки читалось бы её частью. Прижата влево, потому что
+		// поля по краям не заданы; длинная цитата переносится по границе редактора, а не вылезает
+		// за неё — на это max-width.
+		width: fit-content;
+		max-width: 100%;
+		padding: var(--richeditor-quote-padding-tb) var(--richeditor-quote-padding-lr);
+		border-left: var(--richeditor-quote-line-width) solid var(--richeditor-quote-line);
+		background-color: var(--richeditor-quote-fill);
+		border-radius: 3px;
 	}
 
 	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
@@ -204,6 +231,9 @@
 	display: none;
 	position: fixed;
 	z-index: 1000;
+	// Не шире экрана: полный набор кнопок на телефоне в строку не влезает, и без ограничения
+	// панель уезжала бы за правый край. Что не поместилось — прокручивается (см. .toolbar-body).
+	max-width: calc(100vw - var(--richeditor-toolbar-edge-gap) * 2);
 
 	--svg-size: 18px;
 	--svg-fill: var(--input-color, #222);
@@ -218,6 +248,7 @@
 		left: 0;
 		bottom: 100%;
 		margin-bottom: 6px;
+		max-width: 100%; // предел задаёт контейнер: панель не шире поля, над которым стоит
 
 		&.link-editing {
 			right: 0;
@@ -229,6 +260,17 @@
 		flex-flow: row nowrap;
 		align-items: center;
 		gap: 2px;
+		// Что не поместилось по ширине — прокручивается: кнопки не переносятся и не прячутся,
+		// панель остаётся в одну строку. Полоса появляется только когда набор не влез.
+		max-width: 100%;
+		overflow-x: auto;
+		// дойдя до конца, не пролистывать страницу под панелью и не вызывать жест «назад»
+		overscroll-behavior-x: contain;
+		// Полоса тоньше обычной: она внутри панели высотой в одну кнопку, и обычная
+		// заметно её раздувала бы.
+		--scrollbar-size: 3px;
+		--scrollbar-edge-inset: 2px;
+
 		padding: var(--richeditor-toolbar-padding);
 		background-color: var(--input-fill, #fff);
 		border: @richeditor-border;
@@ -240,6 +282,9 @@
 
 	// разделитель между инструментами форматирования и действиями
 	& .split {
+		// Сжиматься нельзя: кнопки этого не умеют (flex: 0 0 auto), и всю нехватку ширины
+		// выбирал бы один разделитель — при полном наборе на узком экране он схлопывался в ноль.
+		flex: 0 0 auto;
 		width: 1px;
 		align-self: stretch;
 		margin: 2px 3px;