@brandup/ui-richeditor 1.0.41 → 1.0.42

package/source/paragraphs.ts

@@ -2,17 +2,77 @@
 // верхнего уровня к абзацам <p> (модель многострочного режима).
 
 import { cleanupFormatting } from "./selection";
+import { BLOCK_TYPES, DEFAULT_BLOCK, blockTypeOfTag, type BlockType } from "./format-config";
 
 /**
- * Что в содержимом редактора считается абзацем. Единственное определение модели абзацев:
- * по нему идут и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём
- * наравне с `<p>` — его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
+ * Что в содержимом редактора считается блоком. Единственное определение модели: по нему идут
+ * и разбор с сериализацией, и правки каретки, и нормализация. `<div>` признаём наравне с `<p>` —
+ * его приносят вставка и чужой contenteditable, а нормализация приводит к `<p>`.
  */
 export function isBlock(node: Node): boolean {
-	if (node.nodeType !== Node.ELEMENT_NODE) return false;
+	return blockTypeOf(node) !== null;
+}
+
+/** Тип блока по элементу; null — не блок верхнего уровня. */
+export function blockTypeOf(node: Node | null | undefined): BlockType | null {
+	if (!node || node.nodeType !== Node.ELEMENT_NODE) return null;
+
+	return blockTypeOfTag((node as Element).tagName);
+}
+
+/** Блок, в котором лежит узел (обычно якорь выделения), в пределах редактора. */
+export function blockAt(root: HTMLElement, node: Node | null | undefined): HTMLElement | null {
+	let current: Node | null = node ?? null;
+	while (current && current !== root) {
+		if (current.parentNode === root && isBlock(current)) return current as HTMLElement;
+		current = current.parentNode;
+	}
+
+	return null;
+}
+
+/**
+ * Блоки, которых касается диапазон, по порядку. Границы берём по их блокам, а не перебором
+ * с проверкой пересечения: свёрнутая каретка на стыке пересекает сразу два соседних блока,
+ * и правка уходила бы в лишний.
+ */
+export function blocksInRange(root: HTMLElement, range: Range): HTMLElement[] {
+	// Контейнером может быть и сам редактор — тогда позиция адресует ребёнка по номеру.
+	// Позиция — это место ПЕРЕД ребёнком, поэтому конец выделения относится к предыдущему
+	// блоку: иначе правка захватывала бы блок, из которого не выделено ни символа.
+	const edge = (container: Node, offset: number, end: boolean): HTMLElement | null => {
+		const own = blockAt(root, container);
+		if (own) return own;
+		if (container !== root) return null;
+
+		const index = end && offset > 0 ? offset - 1 : offset;
+		const child = root.childNodes[index] ?? root.lastChild;
+
+		return blockAt(root, child) ?? (isBlock(child as Node) ? (child as HTMLElement) : null);
+	};
+
+	const first = edge(range.startContainer, range.startOffset, false);
+	if (!first) return [];
+
+	const last = edge(range.endContainer, range.endOffset, !range.collapsed) ?? first;
+
+	const blocks: HTMLElement[] = [];
+	for (let el: HTMLElement | null = first; el; el = el.nextElementSibling as HTMLElement | null) {
+		if (isBlock(el)) blocks.push(el);
+		if (el === last) return blocks;
+	}
+
+	// Конца не встретили — он лежит раньше начала (диапазон собран вручную и вывернут).
+	// Берём один блок: пройтись до конца содержимого значило бы править всё подряд.
+	return [first];
+}
+
+/** Пустой блок нужного типа с заполнителем: без него строка не видна и в неё не встать кареткой. */
+export function createBlock(type: BlockType): HTMLElement {
+	const block = document.createElement(BLOCK_TYPES[type].tag);
+	block.appendChild(document.createElement("br"));
 
-	const tag = (node as Element).tagName;
-	return tag === "P" || tag === "DIV";
+	return block;
 }
 
 // Пробел, таб и неразрывный пробел (U+00A0) — всё это «пробел» при наборе; см. normalizeWhitespace.
@@ -48,8 +108,10 @@ export function normalizeWhitespace(root: HTMLElement) {
 				if (el.tagName === "BR") {
 					items.push({ kind: "break" });
 				} else if (isBlock(el)) {
+					// у блока без инлайновой разметки (код) пробелы значимы: отступы там — часть текста
+					const type = blockTypeOf(el);
 					items.push({ kind: "break" });
-					flatten(el);
+					if (!type || BLOCK_TYPES[type].inline) flatten(el);
 					items.push({ kind: "break" });
 				} else {
 					flatten(el); // инлайновый тег — не разрывает строку
@@ -94,7 +156,9 @@ export function normalizeWhitespace(root: HTMLElement) {
  */
 export function normalizeParagraphs(root: HTMLElement) {
 	for (const el of Array.from(root.children)) {
-		if (el.tagName === "P" && (el.textContent ?? "").trim() === "") el.remove();
+		// Пустой блок другого типа не трогаем: его завели осознанно и в него сейчас будут писать,
+		// а пустая строка внутри кода вообще осмысленна сама по себе.
+		if (blockTypeOf(el) === DEFAULT_BLOCK && (el.textContent ?? "").trim() === "") el.remove();
 	}
 }
 
@@ -107,9 +171,9 @@ export function ensureParagraphs(root: HTMLElement) {
 
 	const flushRun = (before: Node | null) => {
 		if (!run.length) return;
-		const p = document.createElement("p");
-		for (const node of run) p.appendChild(node);
-		root.insertBefore(p, before);
+		const block = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
+		for (const node of run) block.appendChild(node);
+		root.insertBefore(block, before);
 		run = [];
 	};
 
@@ -118,8 +182,10 @@ export function ensureParagraphs(root: HTMLElement) {
 
 		if (el && isBlock(el)) {
 			flushRun(node);
+			// `<div>` — тот же абзац, только чужой: приводим к каноническому тегу.
+			// Блоки других типов оставляем как есть, их завели осознанно.
 			if (el.tagName === "DIV") {
-				const p = document.createElement("p");
+				const p = document.createElement(BLOCK_TYPES[DEFAULT_BLOCK].tag);
 				while (el.firstChild) p.appendChild(el.firstChild);
 				root.replaceChild(p, el);
 			}
@@ -129,7 +195,7 @@ export function ensureParagraphs(root: HTMLElement) {
 	}
 	flushRun(null);
 
-	for (const p of Array.from(root.querySelectorAll("p"))) {
+	for (const p of Array.from(root.children) as HTMLElement[]) {
 		if (!p.firstChild) {
 			p.appendChild(document.createElement("br")); // пустой абзац — заполнитель для видимости строки
 			continue;

package/source/richeditor.less

@@ -25,6 +25,36 @@
 		}
 	}
 
+	// Цитата: линия слева, как её рисуют мессенджеры. Вертикальные поля те же, что у абзаца, —
+	// строка не должна прыгать при смене типа блока.
+	& blockquote {
+		margin: 0;
+		padding: 5px 0 5px 10px;
+		border-left: 3px solid var(--richeditor-quote-line, rgba(0, 0, 0, 0.2));
+	}
+
+	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
+	// иначе текст упирался бы в край подложки; краевые правила абзаца на него не распространяются.
+	& pre {
+		margin: 5px 0;
+		padding: 5px 8px;
+		border-radius: 3px;
+		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
+		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		font-size: 0.92em;
+		// содержимое переносится по границе редактора, как и обычный текст
+		white-space: pre-wrap;
+		word-wrap: anywhere;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
 	// видимые теги форматирования
 	& b,
 	& strong {
@@ -44,6 +74,29 @@
 		text-decoration: underline;
 	}
 
+	// Спойлер: у получателя текст закрыт до нажатия, а в поле его прячут не от автора —
+	// показываем плашкой, чтобы было видно и что написано, и что оно будет скрыто.
+	& spoiler,
+	& tg-spoiler {
+		border-radius: 3px;
+		padding: 0 2px;
+		background-color: var(--richeditor-spoiler-fill, rgba(0, 0, 0, 0.14));
+	}
+
+	// Строку не раздвигает. Наследовать межстрочный интервал для этого мало: у моноширинного
+	// шрифта своя база, и коробка той же высоты садится относительно неё со сдвигом — строка
+	// вырастает на пару пикселей. Нулевой интервал убирает вклад кода в высоту строки совсем,
+	// а высоту строки задаёт сам абзац. Подложка от этого не страдает: она рисуется по буквам,
+	// а не по интервалу. По вертикали отступов у кода нет.
+	& code {
+		border-radius: 3px;
+		padding: 0 3px;
+		background-color: var(--richeditor-code-fill, rgba(0, 0, 0, 0.06));
+		font-family: var(--richeditor-code-font, ui-monospace, "Cascadia Mono", Consolas, monospace);
+		font-size: 0.92em;
+		line-height: 0;
+	}
+
 	&:empty:after {
 		content: attr(data-placeholder);
 		display: block;
@@ -122,6 +175,7 @@
 	}
 
 	& .format-button,
+	& .block-button,
 	& .host-button,
 	& .action-button {
 		width: calc(var(--input-height, 46px) - 12px);

package/source/richeditor.ts

@@ -3,8 +3,13 @@ import "./richeditor.less"; // стили редактора и панели ф
 import { DOM, UIElementBound } from "@brandup/ui";
 import {
 	ALL_FORMAT_TOOLS,
+	BLOCK_TYPES,
+	DEFAULT_BLOCK,
 	HOTKEY_TOOLS,
 	activeFormats,
+	blockAt,
+	blockTypeOf,
+	blocksInRange,
 	clearAllFormat,
 	clearFormat,
 	defaultFormatMarkers,
@@ -17,6 +22,9 @@ import {
 	documentSelection,
 	innerSelection,
 	mapCharOffset,
+	normalizeBlockTypes,
+	editorText,
+	charLength,
 	preserveCaret,
 	normalizeParagraphs,
 	normalizeWhitespace,
@@ -24,6 +32,7 @@ import {
 	selectionCharBounds,
 	serialize,
 	toggleFormat,
+	type BlockType,
 	type EditorAction,
 	type FormatMarkers,
 	type FormatStorage,
@@ -31,6 +40,8 @@ import {
 	type FormatTool,
 } from "./format";
 import {
+	applyBlocks,
+	atBlockStart,
 	buildParagraphs,
 	caretToEnd,
 	expandRangeToWords,
@@ -53,6 +64,9 @@ export const CHANGE_EVENT = "richeditor-change";
 
 const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown", "Escape"];
 
+// Код — единственное, что есть и инструментом, и типом блока: имя одно на оба (см. applyCode).
+const CODE = "code";
+
 // нативные правки (печать/удаление), состояние до которых запоминаем для собственного undo;
 // вставка/перетаскивание и Enter обрабатываются отдельно, undo/redo — на keydown
 const NATIVE_EDIT_TYPES = new Set([
@@ -104,6 +118,11 @@ export interface RichEditorOptions {
 	multiline?: boolean;
 	/** Что делает Enter: новый абзац (по умолчанию) или мягкий перенос, как в мессенджерах. */
 	paragraph?: ParagraphMode;
+	/**
+	 * Типы блоков в многострочном режиме: цитата, блок кода (по умолчанию только обычный текст).
+	 * Обычный текст в наборе есть всегда — в него блок возвращают.
+	 */
+	blocks?: BlockType[];
 	/** Только для чтения — запрещает ввод и изменение текста (но не выделение/копирование). */
 	readonly?: boolean;
 	/** Контейнер для панели форматирования; по умолчанию document.body (position: fixed над редактором). */
@@ -142,6 +161,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	readonly formatMarkers: FormatMarkers;
 	readonly multiline: boolean;
 	readonly paragraph: ParagraphMode;
+	readonly blockTypes: BlockType[];
 	readonly toolbarContainer: HTMLElement | null;
 	readonly toolbarButtons: ToolbarButton[];
 
@@ -186,6 +206,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.formatMarkers = Object.assign(defaultFormatMarkers(), options.markers);
 		this.multiline = multiline;
 		this.paragraph = options.paragraph ?? "block";
+		// Блоки — часть многострочной модели: в однострочном режиме верхнего уровня нет вовсе,
+		// а в readonly их не переключить, но разбор и показ значения обязаны работать и там.
+		this.blockTypes = multiline ? normalizeBlockTypes(options.blocks) : [DEFAULT_BLOCK];
 		this.toolbarContainer = options.toolbarContainer ?? null;
 		// кнопки хоста живут и без форматирования, но не в readonly — там панели нет вовсе
 		this.toolbarButtons = readonly ? [] : (options.buttons ?? []);
@@ -232,7 +255,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 	getValue(): string {
 		// multiline → модель абзацев (<p>/\n\n) и мягких переносов (<br>/\n)
-		return serialize(this.editable, this.__valueStorage, this.__valueTools, this.formatMarkers, this.multiline);
+		return serialize(
+			this.editable,
+			this.__valueStorage,
+			this.__valueTools,
+			this.formatMarkers,
+			this.multiline,
+			this.blockTypes,
+			this.__blockParagraphs
+		);
 	}
 
 	setValue(value: string): void {
@@ -415,11 +446,23 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		};
 	}
 
+	/**
+	 * Доступен ли инструмент в текущем месте. В коде разметки нет: и моноширинный, и блок кода
+	 * оставляют написанное буквальным, поэтому остальные инструменты там выключены — иначе
+	 * форматирование ставилось бы только чтобы пропасть при сохранении.
+	 */
+	isToolEnabled(tool: FormatTool): boolean {
+		if (this.readonly || !this.formatTools.includes(tool)) return false;
+		if (tool === CODE) return true;
+
+		return this.currentBlock !== CODE && !this.isToolActive(CODE);
+	}
+
 	/** Переключить форматирование инструмента (вызывается общим тулбаром и хоткеями). */
 	applyFormat(tool: FormatTool): void {
-		if (!this.formatTools.includes(tool)) return;
+		if (!this.isToolEnabled(tool)) return;
 
-		const target = this.__formatTarget();
+		let target = this.__formatTarget();
 		if (!target) return;
 
 		if (target.range.collapsed) {
@@ -434,12 +477,126 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__pendingFormats.clear();
 
 		this.__history?.record("op");
+
+		// Код не уживается с другой разметкой: значение берёт из него голый текст. Снимаем всё,
+		// что было на этом куске, и только потом оборачиваем — иначе прежнее форматирование
+		// осталось бы снаружи кода и в поле выглядело бы рабочим.
+		if (
+			tool === CODE &&
+			!isFormatActive(this.editable, target.range, CODE) &&
+			hasFormatting(this.editable, target.range)
+		) {
+			clearFormat(this.editable, target.range, target.selection, target.original());
+
+			// правка перестроила узлы — прежний диапазон указывает в никуда
+			target = this.__formatTarget();
+			if (!target) return;
+		}
+
 		toggleFormat(this.editable, target.range, tool, target.selection, target.original());
 
 		this.__emitChange();
 		formatToolbar.refresh();
 	}
 
+	/**
+	 * Тип блока под кареткой. Без выделения (или вне блоков) — тип по умолчанию: именно им
+	 * станет то, что сейчас наберут.
+	 */
+	get currentBlock(): BlockType {
+		const selection = this.selection;
+		if (!selection) return DEFAULT_BLOCK;
+
+		const block = blockAt(this.editable, selection.getRangeAt(0).startContainer);
+
+		return blockTypeOf(block) ?? DEFAULT_BLOCK;
+	}
+
+	/**
+	 * Переключить тип блоков под выделением. Повторное применение того же типа возвращает
+	 * блок к обычному тексту — иначе выйти из цитаты можно было бы только через другую кнопку.
+	 */
+	applyBlock(type: BlockType): void {
+		if (!this.multiline || this.readonly || !this.blockTypes.includes(type)) return;
+
+		const selection = this.selection;
+		if (!selection) return;
+
+		const range = selection.getRangeAt(0);
+		const target = this.currentBlock === type ? DEFAULT_BLOCK : type;
+
+		// нечего менять — не пишем в историю пустой шаг и не трогаем выделение.
+		// В пустом редакторе блока ещё нет, но завести его можно (кроме типа по умолчанию —
+		// им пустое поле и так является).
+		const blocks = blocksInRange(this.editable, range);
+		const nothing = this.editable.firstChild
+			? !blocks.length || blocks.every((block) => blockTypeOf(block) === target)
+			: target === DEFAULT_BLOCK;
+
+		if (nothing) return;
+
+		this.__history?.record("op");
+
+		// Смена тега переносит содержимое в новый элемент — живые границы выделения этого
+		// не переживают, поэтому держим каретку по текстовым смещениям.
+		const bounds = selectionCharBounds(this.editable, range);
+		const { created } = applyBlocks(this.editable, range, target);
+
+		// Разделение блока добавило границы, а они в смещениях считаются — прежние уже не те.
+		// Выделяем то, что стало блоком: заодно видно, к каким строкам правка и относилась.
+		// В пустом блоке выделять нечего — там только каретка.
+		if (created) {
+			const inside = this.editable.ownerDocument.createRange();
+			inside.selectNodeContents(created);
+			if (!(created.textContent ?? "")) inside.collapse(true);
+
+			selection.removeAllRanges();
+			selection.addRange(inside);
+		} else {
+			restoreSelection(this.editable, bounds[0], bounds[1], selection);
+		}
+
+		this.__emitChange();
+		formatToolbar.refresh();
+	}
+
+	/** Код в любом виде: моноширинный на выделении или блок кода под кареткой. */
+	isCodeActive(): boolean {
+		return this.currentBlock === CODE || this.isToolActive(CODE);
+	}
+
+	/**
+	 * Единая правка кода — то, что в мессенджерах делает одна кнопка. Вид выбирается по объёму
+	 * правки: выделена одна строка или её часть — моноширинный, больше одной строки — блок.
+	 *
+	 * Блоком становится и правка без выделения: моноширинным там делать нечего, а иначе блок
+	 * оказался бы недостижим — в пустом поле не выделить строки, которых ещё нет.
+	 *
+	 * Повторное применение снимает тот вид, который сейчас и включён.
+	 */
+	applyCode(): void {
+		const inline = this.formatTools.includes(CODE);
+		const block = this.multiline && this.blockTypes.includes(CODE);
+		if (!inline && !block) return;
+
+		if (block && this.currentBlock === CODE) return this.applyBlock(CODE); // выйти из блока
+		if (inline && this.isToolActive(CODE)) return this.applyFormat(CODE); // снять моноширинный
+
+		const range = this.selection?.getRangeAt(0);
+		const part = !!range && !range.collapsed && !this.__coversLines(range);
+
+		if (inline && (part || !block)) this.applyFormat(CODE);
+		else if (block) this.applyBlock(CODE);
+	}
+
+	/**
+	 * Выделено больше одной строки: захвачено несколько блоков либо мягкий перенос внутри.
+	 * Одна строка — даже целиком — остаётся куском текста: код на ней это моноширинный.
+	 */
+	private __coversLines(range: Range): boolean {
+		return blocksInRange(this.editable, range).length > 1 || !!range.cloneContents().querySelector("br");
+	}
+
 	/**
 	 * Снимает всё форматирование с выделения; без выделения — со слова под кареткой
 	 * (как и применение формата). Режим набора сбрасывается.
@@ -593,20 +750,24 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		DOM.empty(this.editable);
 		if (!value) return;
 
-		// multiline → <p>-абзацы; single-line → инлайновое содержимое
-		const paragraphs = this.__blockParagraphs;
+		// multiline → <p>-абзацы; single-line → инлайновое содержимое. Блоки разбираются и в режиме
+		// мягких переносов: цитата и код узнаются по собственной разметке, а не по пустой строке.
+		const blocks = this.blockTypes.length > 1;
+		const paragraphs = this.__blockParagraphs || (this.multiline && blocks);
 
 		this.editable.innerHTML = deserialize(
 			value,
 			this.__valueStorage,
 			this.__valueTools,
 			this.formatMarkers,
-			paragraphs
+			paragraphs,
+			this.blockTypes,
+			this.__blockParagraphs
 		);
 
 		// в break инлайновое содержимое оборачивается в единственный абзац — модель абзацев
 		// нужна редактированию (каретка, вставка), а разделителем строк остаётся <br>
-		if (this.multiline && !paragraphs) ensureParagraphs(this.editable);
+		if (this.multiline && !this.__blockParagraphs) ensureParagraphs(this.editable);
 	}
 
 	/**
@@ -659,14 +820,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const bounds = selection ? selectionCharBounds(this.editable, selection.getRangeAt(0)) : null;
 
 		const before = this.editable.innerHTML;
-		const textBefore = this.editable.textContent ?? "";
+		// текст в координатах каретки (с концами строк) — иначе смещения разъедутся на число строк
+		const textBefore = editorText(this.editable);
 		normalizeWhitespace(this.editable);
 		if (this.multiline) normalizeParagraphs(this.editable);
 		if (this.editable.innerHTML === before) return;
 
 		if (bounds && selection) {
 			// схлопнутые пробелы сдвигают смещения — переносим их на новый текст
-			const textAfter = this.editable.textContent ?? "";
+			const textAfter = editorText(this.editable);
 			const start = mapCharOffset(textBefore, textAfter, bounds[0]);
 			const end = bounds[1] === bounds[0] ? start : mapCharOffset(textBefore, textAfter, bounds[1]);
 			restoreSelection(this.editable, start, end, selection);
@@ -886,16 +1048,37 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 			// В режиме block Enter — новый абзац (<p>), модификатор — мягкий перенос (<br>).
 			// В режиме break наоборот: Enter переносит строку, как в мессенджерах, а абзац
-			// набирается двумя переносами.
+			// набирается двумя переносами. Внутри блока правило берётся у его типа: в цитате
+			// и в коде Enter переносит строку, иначе одну цитату было бы не набрать.
 			const withModifier = e.shiftKey || e.ctrlKey || e.metaKey;
-			const soft = this.paragraph === "break" ? !withModifier : withModifier;
+			const current = this.currentBlock;
+			const breaks =
+				current === DEFAULT_BLOCK ? this.paragraph === "break" : BLOCK_TYPES[current].enter === "break";
+			const soft = breaks ? !withModifier : withModifier;
 
 			this.__history?.record("op");
+			// Из блока выходят тем же нажатием, что делит его: продолжать цитату или код
+			// новым таким же блоком незачем — для этого достаточно переноса строки.
 			if (soft) insertSoftBreak(this.editable);
-			else insertParagraph(this.editable);
+			else insertParagraph(this.editable, DEFAULT_BLOCK);
 
 			this.__clearPendingFormats();
 			this.__emitChange();
+			formatToolbar.refresh();
+			return;
+		}
+
+		// Backspace в начале блока возвращает его к обычному тексту — так из цитаты или кода
+		// выходят там же, где в них вошли, не трогая содержимого. Дальше по тексту Backspace
+		// работает как обычно.
+		if (e.key === "Backspace" && !this.readonly && this.multiline) {
+			const block = this.currentBlock;
+			const selection = block === DEFAULT_BLOCK ? null : this.selection;
+
+			if (selection && atBlockStart(this.editable, selection.getRangeAt(0))) {
+				e.preventDefault();
+				this.applyBlock(block); // тот же тип — переключение вернёт обычный текст
+			}
 		}
 	}
 
@@ -946,7 +1129,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
 	// тогда вызывающий откатывается на простую вставку.
 	private __pasteHtml(html: string, selection: Selection): boolean {
-		return this.__insertPasted(sanitizePastedHtml(html, this.formatTools, this.formatMarkers), selection);
+		return this.__insertPasted(
+			sanitizePastedHtml(html, this.formatTools, this.formatMarkers, this.blockTypes),
+			selection
+		);
 	}
 
 	/**
@@ -968,7 +1154,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		let caret: number;
 
 		if (this.multiline) {
-			caret = start + paras.reduce((length, p) => length + (p.textContent ?? "").length, 0);
+			// длина вставки в координатах каретки: текст, переносы внутри абзацев и границы между
+			// ними (первый абзац вливается в текущий, поэтому границ на одну меньше)
+			caret = start + paras.reduce((length, p) => length + charLength(p), paras.length - 1);
 
 			insertPastedParagraphs(this.editable, paras, range);
 			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>