@brandup/ui-richeditor 1.0.50 → 1.0.52

package/README.md

@@ -52,7 +52,7 @@ editor.onChange(({ value }) => console.log(value));
 | `markers` | `Partial<FormatMarkers>` | Переопределение markdown-маркеров по инструментам |
 | `placeholder` | `string \| null` | Текст-заглушка |
 | `multiline` | `boolean` | Многострочный режим |
-| `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
+| `paragraph` | `"block" \| "break"` | Что такое абзац: абзац, отделённый пустой строкой (по умолчанию), или строка, как в мессенджерах |
 | `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
 | `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются); разметка значения при этом разбирается и показывается, кнопок для неё просто нет |
@@ -101,6 +101,7 @@ editor.onChange(({ value }) => console.log(value));
 | `applyAction(action): void` | Выполнить действие панели (`erase`/`undo`/`redo`) |
 | `isActionEnabled(action): boolean` | Доступно ли действие сейчас |
 | `insertText(text): void` | Вставить текст в каретку (или вместо выделения) с учётом режима набора; без фокуса вставляет по снятой каретке |
+| `deleteNodes(nodes): void` | Удалить узлы содержимого одной правкой: с историей, кареткой на их месте и одним изменением значения |
 | `openEmojiPicker(picker, initiator): boolean` | Показать переданный попап смайликов у кнопки; false — этим нажатием он закрылся |
 | `selection: Selection \| null` | Выделение, если оно внутри редактора (иначе `null`) — единая точка доступа для хоста |
 | `selectNode(node): void` | Выделить узел внутри редактора: следующая вставка заменит его целиком |
@@ -181,15 +182,13 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 - **Shift+Enter** или **Ctrl/Cmd+Enter** → мягкий перенос (`<br>`) внутри абзаца;
 - блуждающий текст и `<div>` нормализуются в `<p>` при вводе.
 
-Опция `paragraph: "break"` меняет это: Enter даёт мягкий перенос, а модификатор в этом режиме ничего не меняет — пустая строка набирается двумя переносами, как в мессенджерах (отдельный абзац дал бы в значении ровно её же). Это важно при `storage: "markdown"`: в режиме по умолчанию каждый Enter уходит в значение пустой строкой (`\n\n`), а в `break` — одним переносом (`\n`).
+Опция `paragraph: "break"` меняет смысл абзаца: там абзац — это строка, как в мессенджерах. Enter и модификатор делают одно и то же (новую строку), мягкому переносу в этом режиме взяться неоткуда, а пустая строка сообщения — это пустой абзац. Это важно при `storage: "markdown"`: в режиме по умолчанию граница абзацев уходит в значение пустой строкой (`\n\n`), а в `break` — одним переносом (`\n`).
 
-В этом режиме абзацных блоков в содержимом нет вовсе: значение загружается плоским текстом, где каждый `\n` становится `<br>` внутри единственного `<p>`. Иначе два переноса рисовались бы двумя абзацами, а у хоста без отступов между ними это неотличимо от одного переноса — значение расходилось бы с видимым текстом.
+Содержимое в обоих режимах — абзацные блоки: каждая строка (или абзац) лежит в своём `<p>`, а не разделяется `<br>` внутри общего. Отступов между абзацами в режиме `break` нет (класс `breaks` на редакторе): отступ читался бы пустой строкой, которой в значении не будет.
 
-Хвостовой перенос отбрасывается ровно один — это `<br>`-заполнитель, без которого не видна последняя строка. Набранные пустые строки сохраняются и в поле, и в значении, где бы они ни стояли — в начале блока, в середине или в конце.
+Мягкий перенос, пришедший извне — вставкой документа или чужим значением, — приводится к той же модели: абзац делится по нему на строки-абзацы. Хвостовой перенос при этом строкой не считается — это `<br>`-заполнитель, без которого не видна последняя (пустая) строка.
 
-Блоки в этом режиме появляются побочно — правкой блочного типа, — поэтому нормализация сводит соседние абзацы обратно в один: их граница уходила бы в значение пустой строкой, которой на экране нет.
-
-При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются — кроме одного: пустой абзац сразу за блоком другого типа остаётся. Это единственное место, где каретка стоит вне цитаты или кода, и без него правка запиралась бы в блоке. В значение такой абзац не попадает — хвост значения обрезается.
+При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются — кроме одного: пустой абзац сразу за блоком другого типа остаётся. Это единственное место, где каретка стоит вне цитаты или кода, и без него правка запиралась бы в блоке. В значение такой абзац не попадает — хвост значения обрезается. В режиме `break` пустой абзац осмыслен сам по себе (это пустая строка сообщения) и не удаляется вовсе; исчезает только единственный — иначе пустое поле не показало бы заглушку.
 
 ## Блоки: цитата и код
 
@@ -263,7 +262,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. В режиме мягких переносов пустой строки между блоками нет, поэтому соседние цитаты там склеиваются в одну сразу в поле — иначе оно показывало бы два блока, а в значении и у получателя был бы один. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
 
-В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два.
+В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два. Выделенные строки становятся при этом одним блоком, а не блоком на каждую: строка там — отдельный абзац, и кнопка на трёх строках дала бы три цитаты подряд.
 
 ## Вставка текста
 
@@ -280,7 +279,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 Если `text/html` нет (или форматирование выключено), а разбирать маркеры не по чему, вставляется простой текст — по той же модели абзацев:
 
 - **multiline**, режим `block` — пустая строка разделяет абзацы `<p>`, одиночный перенос остаётся мягким `<br>`;
-- **multiline**, режим `break` — абзацы не создаются, все переносы мягкие;
+- **multiline**, режим `break` — каждая строка становится абзацем `<p>`, пустая строка — пустым абзацем;
 - **single-line** — строки склеиваются пробелами.
 
 Каретка во всех случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).

package/package.json

@@ -27,12 +27,12 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.9",
-    "@brandup/ui-kit": "^1.0.50"
+    "@brandup/ui-kit": "^1.0.52"
   },
   "files": [
     "source",

package/source/editing.ts

@@ -4,7 +4,7 @@
 
 import { deserialize } from "./serialize";
 import { blockAt, blockTypeOf, blocksInRange, createBlock, isBlock } from "./paragraphs";
-import { documentSelection, innerSelection, linkAt, literalAncestor } from "./selection";
+import { cleanupFormatting, documentSelection, innerSelection, linkAt, literalAncestor } from "./selection";
 import { BLOCK_TYPES, DEFAULT_BLOCK, type BlockType, type FormatMarkers, type FormatTool } from "./format-config";
 
 // убирает пустые текст-узлы и ставит <br>-заполнитель в пустой абзац (для видимости и каретки)
@@ -58,8 +58,11 @@ export interface BlockChange {
  *
  * У типа без инлайновой разметки (код) форматирование снимается: внутри него написанное
  * остаётся буквальным, и сохранить его всё равно было бы негде.
+ *
+ * При `merge` выделенные блоки собираются в один блок нового типа: там, где абзац это строка,
+ * кнопка на трёх строках даёт один блок, а не три подряд.
  */
-export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType): BlockChange {
+export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType, merge = false): BlockChange {
 	const blocks = blocksInRange(editable, range);
 
 	// Пустой редактор: блоков ещё нет, но тип задать можно — иначе в пустое поле его было бы
@@ -79,6 +82,26 @@ export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType
 		if (created) return { changed: true, created };
 	}
 
+	// Собираем ВСЕ задетые блоки, а не только чужого типа: блок нужного типа посреди выделения
+	// иначе остался бы на месте, а собранный блок встал бы перед ним — строки менялись местами.
+	if (merge && type !== DEFAULT_BLOCK && blocks.length > 1) {
+		const replacement = retagBlock(blocks[0], type);
+
+		for (const block of blocks.slice(1)) {
+			// строки склеиваем переносом — тем же, что разделяет их внутри блока (mergeAdjacentBlocks)
+			if (replacement.lastChild?.nodeName !== "BR") replacement.appendChild(document.createElement("br"));
+
+			while (block.firstChild) replacement.appendChild(block.firstChild);
+			block.remove();
+		}
+
+		if (!BLOCK_TYPES[type].inline) unwrapFormatting(replacement);
+		if (replacement !== blocks[0]) blocks[0].replaceWith(replacement);
+		fillEmptyParagraph(replacement);
+
+		return { changed: true, created: null };
+	}
+
 	let changed = false;
 
 	for (const block of blocks) {
@@ -291,6 +314,11 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	// хвост уехал в блок другого типа — его правила распространяются и на содержимое
 	if (!BLOCK_TYPES[type].inline) unwrapFormatting(next);
 
+	// Разрез по краю оформленного куска оставляет от него пустой тег в одной из половин:
+	// продолжать им нечего, а набор в него попадал бы оформленным (см. insertSoftBreak).
+	cleanupFormatting(para);
+	cleanupFormatting(next);
+
 	// extractContents в конце абзаца оставляет пустой текст-узел → <p></p> без заполнителя
 	// (невидим/нефокусируем, каретка не встаёт). Чистим и ставим <br> в опустевшие абзацы.
 	fillEmptyParagraph(para);
@@ -379,6 +407,31 @@ export function insertSoftBreak(editable: HTMLElement) {
 	selection.addRange(after);
 }
 
+/**
+ * Схлопывает пустые оболочки, оставшиеся от удалённого выделения. Выделение, начатое и
+ * законченное в разных абзацах, забирает их содержимое, но сами абзацы задевает лишь частично —
+ * и они остаются пустыми по краям каретки. Правка продолжается в одном из них: иначе вокруг
+ * набранного или вставленного появлялись бы пустые строки, которых не было.
+ */
+export function collapseEmptyEdges(editable: HTMLElement, range: Range) {
+	if (range.startContainer !== editable) return;
+
+	// от удалённого текста остаются пустые текстовые узлы — пустоту смотрим по содержимому
+	const empty = (node: ChildNode | null) =>
+		!!node && blockTypeOf(node) === DEFAULT_BLOCK && !node.textContent && !(node as HTMLElement).querySelector("br");
+
+	const before = editable.childNodes[range.startOffset - 1] ?? null;
+	const after = editable.childNodes[range.startOffset] ?? null;
+
+	const kept = empty(before) ? before : empty(after) ? after : null;
+	if (!kept) return;
+
+	if (kept === before && empty(after)) after.remove();
+
+	range.setStart(kept, 0);
+	range.collapse(true);
+}
+
 /** Вставляет санитизированные абзацы <p> в позицию каретки, разбивая текущий абзац. */
 export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement[], range: Range) {
 	const block = blockOf(editable, range.startContainer);
@@ -445,16 +498,17 @@ function trimParagraphEdges(p: HTMLElement) {
 }
 
 /**
- * Строки вставляемого текста → абзацы `<p>` с мягкими переносами `<br>` внутри.
+ * Строки вставляемого текста → абзацы `<p>` с мягкими переносами `<br>` внутри. Вставка ложится
+ * в ту же модель, которую даёт Enter, и значение после неё разбирается обратно:
  *
- * При `blocks` абзацы разделяет пустая строка (режим `block` многострочного редактора);
- * иначе весь текст — один абзац, а все переносы мягкие: так вставка ложится в ту же модель,
- * которую даёт Enter, и значение после неё разбирается обратно.
+ * - `block` — абзацы разделяет пустая строка (режим `block` многострочного редактора);
+ * - `line` — каждая строка сама себе абзац (режим мягких переносов);
+ * - `single` — весь текст одним абзацем, все переносы мягкие (буквальное содержимое блока кода).
  */
-export function buildParagraphs(lines: string[], blocks: boolean): HTMLElement[] {
+export function buildParagraphs(lines: string[], mode: "block" | "line" | "single"): HTMLElement[] {
 	const groups: string[][] = [];
 
-	if (blocks) {
+	if (mode === "block") {
 		let group: string[] = [];
 		for (const line of lines) {
 			if (line !== "") group.push(line);
@@ -464,6 +518,8 @@ export function buildParagraphs(lines: string[], blocks: boolean): HTMLElement[]
 			}
 		}
 		if (group.length) groups.push(group);
+	} else if (mode === "line") {
+		for (const line of lines) groups.push([line]);
 	} else if (lines.length) groups.push(lines);
 
 	return groups.map((group) => {

package/source/format.ts

@@ -42,6 +42,7 @@ export {
 	linkAt,
 	clearFormat,
 	clearAllFormat,
+	cleanupFormatting,
 	hasFormatting,
 	hasAnyFormatting,
 	insertFormattedText,
@@ -55,6 +56,7 @@ export {
 	createBlock,
 	normalizeWhitespace,
 	mergeAdjacentBlocks,
+	splitSoftBreaks,
 	normalizeParagraphs,
 	ensureParagraphs,
 	paragraphsNormalized,

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

@@ -87,6 +87,17 @@
 		}
 	}
 
+	// Режим мягких переносов: абзац здесь — строка, а не абзац. Отступ между ними читался бы
+	// пустой строкой, которой в сообщении нет.
+	&.breaks p {
+		padding-top: 0;
+		padding-bottom: 0;
+
+		&:last-child {
+			padding-bottom: var(--richeditor-underline-room);
+		}
+	}
+
 	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Значения — переменными
 	// (см. :root выше): подложке нужен и отступ справа, иначе текст упирался бы в её край.
 	& blockquote {

package/source/richeditor.ts

@@ -11,6 +11,7 @@ import {
 	blockAt,
 	blockTypeOf,
 	blocksInRange,
+	cleanupFormatting,
 	clearAllFormat,
 	clearFormat,
 	defaultFormatMarkers,
@@ -30,6 +31,7 @@ import {
 	paragraphsNormalized,
 	preserveCaret,
 	mergeAdjacentBlocks,
+	splitSoftBreaks,
 	normalizeParagraphs,
 	normalizeWhitespace,
 	restoreSelection,
@@ -50,6 +52,7 @@ import {
 	atBlockStart,
 	buildParagraphs,
 	caretToEnd,
+	collapseEmptyEdges,
 	expandRangeToWords,
 	hasPastedMarkup,
 	isDocumentHtml,
@@ -70,6 +73,8 @@ export { formatToolbar, TOOLBAR_CLASS, type ToolbarHost, type ToolbarButton } fr
 export const ROOT_CLASS = "ui-richeditor"; // редактируемый элемент, к нему привязан UIElement
 // Содержимое временно невыделяемо: по странице тянут выделение, начатое вне редактора (см. __holdSelectable).
 export const UNSELECTABLE_CLASS = "unselectable";
+// Режим мягких переносов: абзац — это строка, и отступов между абзацами в нём нет.
+export const BREAKS_CLASS = "breaks";
 export const CHANGE_EVENT = "richeditor-change";
 
 const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown", "Escape"];
@@ -352,6 +357,8 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		if (options.placeholder != null) editable.dataset.placeholder = options.placeholder;
 		if (multiline) editable.classList.add("multiline");
+		// абзац-строка: отступы между абзацами показывали бы пустую строку, которой в значении нет
+		if (!this.__separateParagraphs && multiline) editable.classList.add(BREAKS_CLASS);
 		if (readonly) editable.classList.add("readonly");
 
 		this.__initEvents();
@@ -372,12 +379,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	/**
-	 * Работает ли редактор моделью абзацев. В режиме break абзацных блоков нет: значение — плоский
-	 * текст, где каждый \n это <br>. Иначе `a\n\nb` рисовалось бы двумя <p>, а на экране (без
-	 * отступов между абзацами) это неотличимо от одного переноса — значение расходилось бы
-	 * с видимым текстом.
+	 * Разделяет ли абзацы пустая строка. Содержимое в обоих режимах — абзацные блоки, но значат
+	 * они разное: в block абзац это абзац (`\n\n`), в break — строка (`\n`), а пустая строка
+	 * сообщения хранится пустым абзацем. Поэтому в break у абзацев нет и отступов: между двумя
+	 * строками их на экране быть не должно.
 	 */
-	private get __blockParagraphs(): boolean {
+	private get __separateParagraphs(): boolean {
 		return this.multiline && this.paragraph === "block";
 	}
 
@@ -402,7 +409,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			this.formatMarkers,
 			this.multiline,
 			this.blockTypes,
-			this.__blockParagraphs
+			this.__separateParagraphs
 		);
 	}
 
@@ -443,6 +450,52 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__insertText(text);
 	}
 
+	/**
+	 * Удаляет узлы содержимого одной правкой: с записью в историю, кареткой на их месте и одним
+	 * изменением значения. Каретка встаёт туда, где стоял первый узел списка, поэтому передавать
+	 * их нужно в порядке текста.
+	 *
+	 * Для неделимых объектов хоста (`contenteditable="false"`): в тексте они атомарны, и стирать
+	 * их приходится целиком, а нативное удаление рядом с ними браузеры делают по-разному — где-то
+	 * объект сперва выделяется, где-то исчезает разом. Что именно удалить, решает хост — он же
+	 * свои объекты и собирал; редактор проводит это как свою правку.
+	 */
+	deleteNodes(nodes: Node[]): void {
+		if (this.readonly) return;
+
+		// только своё: чужие узлы правке не подлежат, сам редактируемый элемент — тем более
+		const targets = nodes.filter((node) => node !== this.editable && this.editable.contains(node));
+		if (!targets.length) return;
+
+		this.__history?.record("op");
+
+		// Место каретки запоминаем текстовым смещением до правки: узлы исчезнут, а соседние тексты
+		// склеятся — живой Range после этого указывал бы в никуда.
+		const range = this.editable.ownerDocument.createRange();
+		range.setStartBefore(targets[0]);
+		range.collapse(true);
+		const caret = selectionCharBounds(this.editable, range)[0];
+		// выделение снимаем до правки: удаляемое могло его и держать
+		const selection = this.selection;
+
+		targets.forEach((node) => node.parentNode?.removeChild(node));
+
+		// Опустевшее оформление убираем, а соседние тексты склеиваем: несклеенные, они мешают
+		// и разбору значения, и смещениям каретки. Без форматирования хватает склейки.
+		if (this.format) cleanupFormatting(this.editable);
+		else this.editable.normalize();
+
+		if (this.multiline) this.__ensureParagraphs(); // опустевший абзац получает заполнитель
+		this.__clearEmptyContent(); // стёрли последнее — возвращаем заглушку
+
+		if (selection) {
+			restoreSelection(this.editable, caret, caret, selection);
+			this.__scrollCaretIntoView(); // правка из кода браузерной прокрутки к каретке не даёт
+		}
+
+		this.__emitChange();
+	}
+
 	/**
 	 * Показать попап смайликов у кнопки.
 	 *
@@ -864,7 +917,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// Смена тега переносит содержимое в новый элемент — живые границы выделения этого
 		// не переживают, поэтому держим каретку по текстовым смещениям.
 		const bounds = selectionCharBounds(this.editable, range);
-		const { created } = applyBlocks(this.editable, range, target);
+		const { created } = applyBlocks(this.editable, range, target, !this.__separateParagraphs);
+
+		// Возврат блока в обычный текст оставляет его строки мягкими переносами — приводим их
+		// к абзацам. Строго ДО возврата каретки: разбиение блока живой Range не переживает,
+		// а смещения от него не меняются — граница абзацев и мягкий перенос считаются одинаково.
+		if (!this.__separateParagraphs) splitSoftBreaks(this.editable);
 
 		// Разделение блока добавило границы, а они в смещениях считаются — прежние уже не те.
 		// Выделяем то, что стало блоком: заодно видно, к каким строкам правка и относилась.
@@ -886,7 +944,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// Строго после возврата каретки: склейка снимает границу блоков, а её смещения считают,
 		// и восстановленная по прежним смещениям каретка съехала бы на символ. Живое выделение
 		// переезжает вместе с узлами само.
-		if (!this.__blockParagraphs) mergeAdjacentBlocks(this.editable);
+		if (!this.__separateParagraphs) mergeAdjacentBlocks(this.editable);
 
 		this.__emitChange();
 		formatToolbar.refresh();
@@ -1076,7 +1134,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		formatToolbar.detach(this);
 
 		// элемент передан хостом — не удаляем его, только снимаем оформление редактора
-		this.editable.classList.remove(ROOT_CLASS, UNSELECTABLE_CLASS, "multiline", "readonly", "focused");
+		this.editable.classList.remove(
+			ROOT_CLASS,
+			UNSELECTABLE_CLASS,
+			BREAKS_CLASS,
+			"multiline",
+			"readonly",
+			"focused"
+		);
 		this.editable.removeAttribute("contenteditable");
 		delete this.editable.dataset.placeholder;
 
@@ -1089,24 +1154,19 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		DOM.empty(this.editable);
 		if (!value) return;
 
-		// multiline → <p>-абзацы; single-line → инлайновое содержимое. Блоки разбираются и в режиме
-		// мягких переносов: цитата и код узнаются по собственной разметке, а не по пустой строке.
-		const blocks = this.blockTypes.length > 1;
-		const paragraphs = this.__blockParagraphs || (this.multiline && blocks);
-
+		// multiline → <p>-абзацы; single-line → инлайновое содержимое
 		this.editable.innerHTML = deserialize(
 			value,
 			this.__valueStorage,
 			this.__valueTools,
 			this.formatMarkers,
-			paragraphs,
+			this.multiline,
 			this.blockTypes,
-			this.__blockParagraphs
+			this.__separateParagraphs
 		);
 
-		// в break инлайновое содержимое оборачивается в единственный абзац — модель абзацев
-		// нужна редактированию (каретка, вставка), а разделителем строк остаётся <br>
-		if (this.multiline && !this.__blockParagraphs) ensureParagraphs(this.editable);
+		// пустые абзацы значения получают заполнитель, чужая вёрстка — канонический тег
+		if (this.multiline) ensureParagraphs(this.editable);
 	}
 
 	/**
@@ -1164,7 +1224,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		normalizeWhitespace(this.editable);
 		// В режиме мягких переносов соседние цитаты неразличимы: значение пишет их строки подряд,
 		// а разбор собирает в одну — склеиваем и в поле.
-		if (this.multiline) normalizeParagraphs(this.editable, !this.__blockParagraphs);
+		if (this.multiline) normalizeParagraphs(this.editable, !this.__separateParagraphs);
 		if (this.editable.innerHTML === before) return;
 
 		if (bounds && selection) {
@@ -1346,17 +1406,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		editable.addEventListener(
 			"input",
 			() => {
-				if (this.multiline) {
-					this.__ensureParagraphs(); // блуждающий текст/div → <p>
-
-					// единственный пустой абзац → очищаем, чтобы показать placeholder
-					if (editable.children.length === 1) {
-						const only = editable.firstElementChild!;
-						if (only.tagName === "P" && (only.textContent ?? "") === "") DOM.empty(editable);
-					}
-				} else if (editable.firstChild?.nodeName === "BR") {
-					editable.innerHTML = "";
-				}
+				if (this.multiline) this.__ensureParagraphs(); // блуждающий текст/div → <p>
+				this.__clearEmptyContent();
+
 				// При наборе браузер прокручивает к каретке сам, но доводит её лишь до края
 				// коробки — под отступы контейнера. Доводим до текста.
 				this.__scrollCaretIntoView();
@@ -1436,6 +1488,22 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		preserveCaret(this.editable, () => ensureParagraphs(this.editable));
 	}
 
+	/**
+	 * Очищает содержимое, от которого остался один пустой каркас: абзац с заполнителем или
+	 * висящий `<br>`. Без этого не показывается заглушка — стёртое поле выглядит непустым.
+	 */
+	private __clearEmptyContent() {
+		if (!this.multiline) {
+			if (this.editable.firstChild?.nodeName === "BR") this.editable.innerHTML = "";
+			return;
+		}
+
+		if (this.editable.children.length !== 1) return;
+
+		const only = this.editable.firstElementChild!;
+		if (only.tagName === "P" && (only.textContent ?? "") === "") DOM.empty(this.editable);
+	}
+
 	private __onKeydown(e: KeyboardEvent) {
 		// хоткеи форматирования (Ctrl/Cmd+B/I/U); зачёркивание — только кнопкой.
 		// Сверяем по e.key и e.code — иначе на не-латинской раскладке (кириллица) хоткеи не срабатывают.
@@ -1506,15 +1574,16 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (this.readonly) return;
 
 			// В режиме block Enter — новый абзац (<p>), модификатор — мягкий перенос (<br>).
-			// В режиме break строку переносят оба нажатия: пустая строка набирается двумя
-			// переносами, как в мессенджерах, и отдельный абзац дал бы в значении ровно её же.
+			// В режиме break абзац и есть строка, поэтому её создают оба нажатия: мягкому переносу
+			// там неоткуда взяться — в значении он дал бы ровно то же самое.
 			// Внутри блока правило берётся у его типа: из цитаты и кода Enter выходит,
 			// а модификатор переносит строку внутри.
 			const withModifier = e.shiftKey || e.ctrlKey || e.metaKey;
 			const current = this.currentBlock;
-			const breaks =
-				current === DEFAULT_BLOCK ? this.paragraph === "break" : BLOCK_TYPES[current].enter === "break";
-			const soft = breaks || withModifier;
+			const soft =
+				current === DEFAULT_BLOCK
+					? this.__separateParagraphs && withModifier
+					: BLOCK_TYPES[current].enter === "break" || withModifier;
 
 			this.__history?.record("op");
 			// Из блока выходят тем же нажатием, что делит его: продолжать цитату или код
@@ -1618,7 +1687,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			? text.split(/\n/)
 			: text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
 
-		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs && !literal), selection);
+		const mode = literal || !this.multiline ? "single" : this.__separateParagraphs ? "block" : "line";
+
+		this.__insertPasted(buildParagraphs(lines, mode), selection);
 	}
 
 	/**
@@ -1694,7 +1765,13 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		if (!BLOCK_TYPES[this.currentBlock].inline) return false;
 
 		return this.__insertPasted(
-			parsePastedMarkdown(text, this.__valueTools, this.formatMarkers, this.blockTypes, this.__blockParagraphs),
+			parsePastedMarkdown(
+				text,
+				this.__valueTools,
+				this.formatMarkers,
+				this.blockTypes,
+				this.__separateParagraphs
+			),
 			selection
 		);
 	}
@@ -1712,7 +1789,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		const range = selection.getRangeAt(0);
 		this.__history?.record("op");
+
+		const spanned = !range.collapsed;
 		range.deleteContents();
+		if (spanned && this.multiline) collapseEmptyEdges(this.editable, range);
 
 		const start = selectionCharBounds(this.editable, range)[0];
 		let caret: number;

package/source/serialize.ts

@@ -287,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("");
 }
 
@@ -319,6 +312,9 @@ function markdownBlock(type: BlockType, text: string): string {
 /**
  * Сериализует содержимое редактора в строку для хранения. Сохраняются только включённые инструменты.
  * При paragraphs=true применяется модель «абзацы (<p>/\n\n) + мягкие переносы (<br>/\n)».
+ *
+ * При separate=false блоки разделяет один перевод строки: там абзац — это строка, а пустая строка
+ * сообщения хранится пустым блоком.
  */
 export function serialize(
 	root: HTMLElement,
@@ -656,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);
@@ -668,7 +665,10 @@ 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 = [];
 	};