@brandup/ui-richeditor 1.0.48 → 1.0.50

package/source/paragraphs.ts

@@ -204,11 +204,37 @@ export function mergeAdjacentBlocks(root: HTMLElement) {
 	}
 }
 
+/**
+ * Есть ли что нормализовать {@link ensureParagraphs}: блуждающий текст/инлайн, чужой `<div>`,
+ * пустой абзац без заполнителя или лишний хвостовой перенос.
+ *
+ * Проверка зеркалит правки ensureParagraphs и существует ради горячего пути: нормализация
+ * вызывается на каждое нажатие клавиши, а сохранение каретки вокруг неё собирает весь текст
+ * в строку. Почти всегда менять нечего — и дешёвый осмотр верхнего уровня позволяет не платить
+ * ни за снимок каретки, ни за сравнение содержимого.
+ */
+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;
+
+		const tail = el.lastChild!;
+		if (tail.nodeName === "BR" && tail.previousSibling?.nodeName !== "BR" && (el.textContent ?? "").length > 0)
+			return false;
+	}
+
+	return true;
+}
+
 /**
  * Нормализует верхний уровень редактора к абзацам <p>: блуждающие текст/инлайн оборачиваются в <p>,
  * <div> заменяются на <p>, пустые абзацы получают <br>-заполнитель (чтобы строка была видимой).
+ *
+ * Возвращает, менялось ли содержимое: если нет — выделение живо, и переставлять его не нужно.
  */
-export function ensureParagraphs(root: HTMLElement) {
+export function ensureParagraphs(root: HTMLElement): boolean {
+	let changed = false;
 	let run: ChildNode[] = [];
 
 	const flushRun = (before: Node | null) => {
@@ -217,6 +243,7 @@ export function ensureParagraphs(root: HTMLElement) {
 		for (const node of run) block.appendChild(node);
 		root.insertBefore(block, before);
 		run = [];
+		changed = true;
 	};
 
 	for (const node of Array.from(root.childNodes)) {
@@ -230,6 +257,7 @@ export function ensureParagraphs(root: HTMLElement) {
 				const p = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
 				while (el.firstChild) p.appendChild(el.firstChild);
 				root.replaceChild(p, el);
+				changed = true;
 			}
 		} else {
 			run.push(node);
@@ -240,6 +268,7 @@ export function ensureParagraphs(root: HTMLElement) {
 	for (const p of Array.from(root.children) as HTMLElement[]) {
 		if (!p.firstChild) {
 			p.appendChild(document.createElement("br")); // пустой абзац — заполнитель для видимости строки
+			changed = true;
 			continue;
 		}
 
@@ -252,7 +281,12 @@ export function ensureParagraphs(root: HTMLElement) {
 		// начать печатать в следующей.
 		if ((p.textContent ?? "").length > 0) {
 			const tail = p.lastChild;
-			if (tail?.nodeName === "BR" && tail.previousSibling?.nodeName !== "BR") p.removeChild(tail);
+			if (tail?.nodeName === "BR" && tail.previousSibling?.nodeName !== "BR") {
+				p.removeChild(tail);
+				changed = true;
+			}
 		}
 	}
+
+	return changed;
 }

package/source/richeditor.less

@@ -8,9 +8,19 @@
 // Переменные --input-*, --hover--input-*, --focus--input-*, --placeholder-* и --svg-* приходят
 // из @brandup/ui-kit и здесь не объявляются: объявив их в :root, пакет перекрыл бы значения
 // кита. Их запасные значения остаются по месту — они на случай использования пакета без кита.
+// Рамка в цветах кита — одна на все коробки пакета (панель, поле адреса, разделитель
+// групп смайликов): менять её значит менять в одном месте.
+@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);
@@ -42,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;
@@ -75,12 +87,20 @@
 		}
 	}
 
-	// Цитата: линия слева, как её рисуют мессенджеры. Вертикальные поля те же, что у абзаца, —
-	// строка не должна прыгать при смене типа блока.
+	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Значения — переменными
+	// (см. :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;
 	}
 
 	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
@@ -200,6 +220,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);
@@ -214,6 +237,7 @@
 		left: 0;
 		bottom: 100%;
 		margin-bottom: 6px;
+		max-width: 100%; // предел задаёт контейнер: панель не шире поля, над которым стоит
 
 		&.link-editing {
 			right: 0;
@@ -225,9 +249,20 @@
 		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: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+		border: @richeditor-border;
 		border-radius: var(--input-border-radius, 0);
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 		// панель тоже монтируется в разметку хоста — курсор поля ввода ей не наследовать
@@ -236,6 +271,9 @@
 
 	// разделитель между инструментами форматирования и действиями
 	& .split {
+		// Сжиматься нельзя: кнопки этого не умеют (flex: 0 0 auto), и всю нехватку ширины
+		// выбирал бы один разделитель — при полном наборе на узком экране он схлопывался в ноль.
+		flex: 0 0 auto;
 		width: 1px;
 		align-self: stretch;
 		margin: 2px 3px;
@@ -328,7 +366,7 @@
 		box-sizing: border-box; // высота вместе с полями и рамкой, иначе поле выше кнопок
 		padding: 0 8px;
 		// оформление у поля общее с полями ввода кита — своих переменных ему не нужно
-		border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
+		border: @richeditor-border;
 		border-radius: calc(var(--input-border-radius, 0) - 2px);
 		font: inherit;
 		color: inherit;
@@ -382,8 +420,7 @@
 	& .emoji-group + .emoji-group {
 		margin-top: 6px;
 		padding-top: 6px;
-		border-top: var(--input-border-type, solid) var(--input-border-width, 1px)
-			var(--input-border-color, #aaa);
+		border-top: @richeditor-border;
 	}
 
 	& .emoji {