@brandup/ui-richeditor 1.0.48 → 1.0.49

package/README.md

@@ -54,6 +54,7 @@ editor.onChange(({ value }) => console.log(value));
 | `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
 | `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются); разметка значения при этом разбирается и показывается, кнопок для неё просто нет |
+| `disabled` | `boolean` | Выключенное поле: всё то же, что `readonly`, плюс снятый `contenteditable` — редактор не принимает ни фокус, ни выделение. Значение при этом не нормализуется — выключенное поле его не меняет |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
 | `filterChar` | `(char) => boolean` | Хук: `false` — отклонить вводимый символ |
@@ -88,7 +89,8 @@ editor.onChange(({ value }) => console.log(value));
 | `currentBlock: BlockType` | Тип блока под кареткой |
 | `blockTypes: BlockType[]` | Доступные типы блоков |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
-| `isToolEnabled(tool): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены) |
+| `isToolEnabled(tool, codeActive?): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены). Второй аргумент — уже посчитанный признак «в коде»: панель считает его один раз на обновление и передаёт сюда, чтобы не обходить выделение на каждую кнопку |
+| `readonly`, `disabled` | Состояния поля. `readonly` истинно и у выключенного поля: выключенное — это «только чтение плюс снятый contenteditable» |
 | `activeTools(): ReadonlySet<FormatTool>` | Активные форматы всех инструментов сразу (панель обновляется на каждое движение каретки, поштучный опрос обходил бы содержимое на каждую кнопку) |
 | `clearFormat(): void` | Снять всё форматирование с выделения (без выделения — со слова под кареткой) |
 | `clearAllFormat(): void` | Снять всё форматирование со всего содержимого |

package/package.json

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

package/source/editing.ts

@@ -103,7 +103,13 @@ export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType
  * null — делить нечего: выделение и так захватило все строки блока.
  */
 function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElement | null {
-	const breaks = Array.from(block.querySelectorAll("br"));
+	// Хвостовой перенос — заполнитель последней строки, а не разделитель: резать по нему
+	// нельзя, иначе каретка за ним считалась бы отдельной строкой и в значении появлялась бы
+	// пустая строка, которой не набирали. Ищется по дереву, как в pad(): мягкий перенос
+	// (а с ним и заполнитель) живёт и внутри инлайнового тега.
+	let trailing: Node | null = block.lastChild;
+	while (trailing?.lastChild) trailing = trailing.lastChild;
+	const breaks = Array.from(block.querySelectorAll("br")).filter((br) => br !== trailing);
 
 	// последний перенос перед выделением и первый после него — по ним и режем
 	const head = breaks.filter((br) => range.comparePoint(br, 0) < 0).pop();
@@ -112,6 +118,16 @@ function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElem
 
 	const original = blockTypeOf(block) ?? DEFAULT_BLOCK;
 
+	// Кусок, потерявший хвостовой разделитель, кончается переносом — значит, его последняя
+	// строка пустая. Одинокий хвостовой перенос — это заполнитель (см. ensureParagraphs),
+	// и без второго пустая строка пропала бы и с экрана, и из значения. Перенос ищется по
+	// дереву, а не по верхнему уровню: мягкий перенос живёт и внутри инлайнового тега.
+	const pad = (piece: HTMLElement) => {
+		let last: Node | null = piece.lastChild;
+		while (last?.lastChild) last = last.lastChild;
+		if (last?.nodeName === "BR") piece.appendChild(document.createElement("br"));
+	};
+
 	// Хвост выносим первым: он дальше по дереву, и вынос головы сдвинул бы его границы.
 	// Сам перенос-разделитель уходит вместе с ним — строки разъезжаются по блокам.
 	const cut = (from: "before" | "after", br: HTMLElement): HTMLElement => {
@@ -128,6 +144,8 @@ function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElem
 		const piece = document.createElement(BLOCK_TYPES[original].tag);
 		piece.appendChild(part.extractContents());
 		br.remove();
+
+		if (from === "before") pad(piece);
 		fillEmptyParagraph(piece);
 
 		return piece;
@@ -139,6 +157,11 @@ function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElem
 	const created = retagBlock(block, type);
 	if (!BLOCK_TYPES[type].inline) unwrapFormatting(created);
 
+	// Вынос хвоста забрал разделитель и у самого блока: пустая строка в конце выделения
+	// осталась бы без заполнителя. Кусок «после» в заполнителе не нуждается — его хвост
+	// и есть прежний хвост блока, заполнитель там свой.
+	if (tail) pad(created);
+
 	block.replaceWith(created);
 	fillEmptyParagraph(created);
 
@@ -276,11 +299,6 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	caretToStart(next);
 }
 
-/**
- * Разрезает элемент по каретке: содержимое после неё уходит в такой же элемент следом,
- * а диапазон встаёт между половинами — вставленное туда окажется снаружи обоих. Пустые
- * половины не оставляем: печатать в них было бы нечего, а каретка попадала бы внутрь.
- */
 /**
  * Выводит хвост ссылки из неё, разрезав по каретке: перед переносом строки.
  *
@@ -478,14 +496,20 @@ export function sanitizePastedHtml(
 	const holder = document.createElement("template");
 	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true, types);
 
-	// внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем,
-	// иначе литеральные \n (pre-wrap) и отступы дают лишние переносы
-	const walker = document.createTreeWalker(holder.content, NodeFilter.SHOW_TEXT);
-	for (let t = walker.nextNode(); t; t = walker.nextNode())
-		t.textContent = (t.textContent ?? "").replace(/\s+/g, " ");
-
+	// Внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем, иначе
+	// литеральные \n (pre-wrap) и отступы дают лишние переносы. Кроме блока без инлайновой
+	// разметки (код): там переносы и отступы — содержимое, а не вёрстка.
 	const paras = Array.from(holder.content.children) as HTMLElement[];
-	for (const p of paras) trimParagraphEdges(p);
+	for (const p of paras) {
+		const type = blockTypeOf(p);
+		if (type && !BLOCK_TYPES[type].inline) continue;
+
+		const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT);
+		for (let t = walker.nextNode(); t; t = walker.nextNode())
+			t.textContent = (t.textContent ?? "").replace(/\s+/g, " ");
+
+		trimParagraphEdges(p);
+	}
 
 	// отбрасываем пустые краевые абзацы (ведущие/хвостовые \n и <br>-обёртки из буфера),
 	// иначе перед и после вставленного текста появляются пустые строки

package/source/format.ts

@@ -57,4 +57,5 @@ export {
 	mergeAdjacentBlocks,
 	normalizeParagraphs,
 	ensureParagraphs,
+	paragraphsNormalized,
 } from "./paragraphs";

package/source/history.ts

@@ -29,6 +29,7 @@ export class EditorHistory {
 	private __lastKind: HistoryKind | null = null;
 	private __lastTime = 0;
 	private __chars = 0; // суммарный объём снимков отмены — см. MAX_CHARS
+	private __redoChars = 0; // объём снимков повтора: длинная серия undo копит их так же
 
 	constructor(root: HTMLElement) {
 		this.__root = root;
@@ -70,6 +71,7 @@ export class EditorHistory {
 
 		this.__push(snap);
 		this.__redo = [];
+		this.__redoChars = 0;
 	}
 
 	// Puts a snapshot on the undo stack, dropping the oldest ones beyond the limits. Every push
@@ -89,7 +91,15 @@ export class EditorHistory {
 		if (!prev) return false;
 
 		this.__chars -= prev.html.length;
-		this.__redo.push(this.__snapshot());
+
+		// Бюджет у повтора тот же, что и у отмены: серия undo перекладывает снимки сюда,
+		// и без учёта их объёма ограничение MAX_CHARS теряло бы смысл.
+		const snap = this.__snapshot();
+		this.__redo.push(snap);
+		this.__redoChars += snap.html.length;
+		while (this.__redo.length > MAX_DEPTH || (this.__redoChars > MAX_CHARS && this.__redo.length > 1))
+			this.__redoChars -= this.__redo.shift()!.html.length;
+
 		this.__restore(prev);
 		this.__lastKind = null; // следующая печать начнёт новый шаг
 		return true;
@@ -100,6 +110,7 @@ export class EditorHistory {
 		const next = this.__redo.pop();
 		if (!next) return false;
 
+		this.__redoChars -= next.html.length;
 		this.__push(this.__snapshot());
 		this.__restore(next);
 		this.__lastKind = null;

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,6 +8,10 @@
 // Переменные --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);
@@ -227,7 +231,7 @@
 		gap: 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);
 		// панель тоже монтируется в разметку хоста — курсор поля ввода ей не наследовать
@@ -328,7 +332,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 +386,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 {

package/source/richeditor.ts

@@ -27,6 +27,7 @@ import {
 	normalizeBlockTypes,
 	editorText,
 	charLength,
+	paragraphsNormalized,
 	preserveCaret,
 	mergeAdjacentBlocks,
 	normalizeParagraphs,
@@ -142,6 +143,12 @@ export interface RichEditorOptions {
 	keepFocus?: boolean;
 	/** Только для чтения — запрещает ввод и изменение текста (но не выделение/копирование). */
 	readonly?: boolean;
+	/**
+	 * Полное отключение: тот же запрет правок, что и readonly, но вдобавок с редактируемого
+	 * элемента снимается contenteditable — он не берёт ни фокус, ни выделение (в отличие от
+	 * readonly, где выделение и копирование остаются).
+	 */
+	disabled?: boolean;
 	/** Контейнер для панели форматирования; по умолчанию document.body (position: fixed над редактором). */
 	toolbarContainer?: HTMLElement | null;
 	/** Собственные кнопки хоста в панели — для действий, которых редактор не знает. */
@@ -215,7 +222,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	constructor(editable: HTMLElement, options: RichEditorOptions = {}) {
 		const format = !!options.format;
 		const multiline = !!options.multiline;
-		const readonly = !!options.readonly;
+		// disabled — тот же запрет правок, что и readonly, поэтому вся readonly-механика
+		// (блокировка ввода, снятие кнопок, выделение-только-чтение) действует и в нём
+		const disabled = !!options.disabled;
+		const readonly = !!options.readonly || disabled;
 		// Объявленный набор — от readonly не зависит: значение обязано разбираться и показываться
 		// и там, где разметку не переключить, иначе редактор для чтения показывал бы вместо
 		// жирного сырые звёздочки. Кнопки — уже без него.
@@ -252,8 +262,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__history = format ? new EditorHistory(editable) : null;
 
 		// редактируемость есть всегда; правки в readonly блокируются на beforeinput,
-		// при этом остаётся возможность фокуса, выделения и копирования
-		editable.contentEditable = "true";
+		// при этом остаётся возможность фокуса, выделения и копирования.
+		// В disabled редактируемости нет вовсе: элемент не берёт ни фокус, ни выделение.
+		editable.contentEditable = disabled ? "false" : "true";
 
 		if (options.placeholder != null) editable.dataset.placeholder = options.placeholder;
 		if (multiline) editable.classList.add("multiline");
@@ -266,7 +277,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	get readonly(): boolean {
-		return !!this.__opts.readonly;
+		// disabled включает весь запрет правок readonly: на этот getter опирается вся
+		// readonly-механика редактора, и в disabled она обязана работать так же
+		return !!this.__opts.readonly || this.disabled;
+	}
+
+	/** Редактор отключён: как readonly, но без фокуса и выделения (contenteditable снят). */
+	get disabled(): boolean {
+		return !!this.__opts.disabled;
 	}
 
 	/**
@@ -551,10 +569,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	 * оставляют написанное буквальным, поэтому остальные инструменты там выключены — иначе
 	 * форматирование ставилось бы только чтобы пропасть при сохранении.
 	 */
-	isToolEnabled(tool: FormatTool): boolean {
+	isToolEnabled(tool: FormatTool, codeActive?: boolean): boolean {
 		if (this.readonly || !this.formatTools.includes(tool)) return false;
 		if (tool === CODE) return true;
-		if (this.currentBlock === CODE || this.isToolActive(CODE)) return false;
+		// Признак «в коде» — обход выделения: панель считает его один раз на обновление
+		// и передаёт сюда, чтобы не обходить выделение заново на каждую кнопку.
+		if (codeActive ?? this.isCodeActive()) return false;
 
 		// Ссылке нужен текст, который ею станет: оборачивать нечего — и делать нечего. Каретка
 		// в слове за текст считается (формат применяется к слову целиком), в готовой ссылке —
@@ -599,6 +619,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const target = this.__formatTarget();
 		if (!target) return;
 
+		// Выделение без единого символа правки не даёт (см. applyFormat) — кроме каретки
+		// в готовой ссылке, где правится её адрес.
+		if (!target.range.toString().length && !linkAt(this.editable, target.range)) return;
+
 		this.__history?.record("op");
 		applyLinkTo(this.editable, target.range, url.trim(), target.selection, target.original());
 
@@ -641,6 +665,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 
 		this.__pendingFormats.clear();
 
+		// Выделение без единого символа (граница элементов, голый перенос) правки не даёт —
+		// пустой шаг истории делал бы следующий Ctrl+Z «ничего не делающим».
+		if (!target.range.toString().length) return;
+
 		this.__history?.record("op");
 
 		// Код не уживается с другой разметкой: значение берёт из него голый текст. Снимаем всё,
@@ -1133,7 +1161,11 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				// держать в двух местах, и стоило добавить кнопки хоста, как они разошлись бы
 				formatToolbar.attach(this);
 
-				if (this.readonly) selectAllContent(this.editable);
+				// В readonly фокус выделяет всё содержимое — его можно копировать;
+				// в disabled выделения нет, как и самого содержимого для правки.
+				if (this.readonly) {
+					if (!this.disabled) selectAllContent(this.editable);
+				}
 				// Каретку в конец ставим только когда её нет: клик ставит сам, а уже стоящую
 				// (фокус вернули из кода после вызова метода) двигать нельзя — уедет в конец текста.
 				else if (!this.__hasInputClick && !this.selection) caretToEnd(this.editable, this.multiline);
@@ -1181,15 +1213,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			"input",
 			() => {
 				if (this.multiline) {
-					// приведение к абзацам меняет структуру (обёртка в <p>, удаление <br>) и сбрасывает
-					// каретку — сохраняем её; если структура не менялась, выделение живо и переставлять
-					// его не нужно (лишний сброс способен прервать IME-набор)
-					preserveCaret(editable, () => {
-						const before = editable.innerHTML;
-						ensureParagraphs(editable); // блуждающий текст/div → <p>
-
-						return editable.innerHTML !== before;
-					});
+					this.__ensureParagraphs(); // блуждающий текст/div → <p>
 
 					// единственный пустой абзац → очищаем, чтобы показать placeholder
 					if (editable.children.length === 1) {
@@ -1205,6 +1229,63 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		);
 	}
 
+	/**
+	 * Доводит прокрутку до каретки. Переносы строк редактор делает сам (preventDefault), и
+	 * браузер к новой строке не прокручивает; к тому же у хостов (textbox, messageeditor)
+	 * прокручивается не редактируемый элемент, а его обёртка — после достижения предельной
+	 * высоты каретка у нижнего края уходила бы за пределы видимого.
+	 */
+	private __scrollCaretIntoView() {
+		const selection = this.selection;
+		if (!selection || selection.rangeCount === 0) return;
+
+		const range = selection.getRangeAt(0);
+
+		// в среде без раскладки (jsdom) у Range коробок нет вовсе
+		if (typeof range.getBoundingClientRect !== "function") return;
+
+		// У схлопнутой каретки на пустой строке нет собственной коробки — берём ближайший
+		// измеримый ориентир: узел перед кареткой (обычно свежий <br>), иначе родителя.
+		let rect = range.getBoundingClientRect();
+		if (!rect.height) {
+			const { startContainer: node, startOffset: offset } = range;
+			const anchor = node.nodeType === Node.ELEMENT_NODE ? (node.childNodes[offset - 1] ?? node) : node;
+			const el = anchor.nodeType === Node.ELEMENT_NODE ? (anchor as Element) : anchor.parentElement;
+			if (!el) return;
+			rect = el.getBoundingClientRect();
+		}
+		// раскладки нет (тестовая среда) — прокручивать не по чему
+		if (!rect.height && !rect.top && !rect.bottom) return;
+
+		// Ближайший прокручиваемый предок; прокручивается только он — внешним контейнерам
+		// каретка не адресована, крутить страницу из редактора нельзя.
+		const document = this.editable.ownerDocument;
+		for (let el: HTMLElement | null = this.editable; el && el !== document.body; el = el.parentElement) {
+			if (el.scrollHeight <= el.clientHeight) continue;
+			const overflow = document.defaultView?.getComputedStyle(el).overflowY;
+			if (overflow !== "auto" && overflow !== "scroll") continue;
+
+			const box = el.getBoundingClientRect();
+			// небольшой запас, чтобы строка не прилипала к самому краю
+			const pad = Math.min(rect.height || 16, 16);
+			if (rect.bottom > box.bottom - pad) el.scrollTop += rect.bottom - (box.bottom - pad);
+			else if (rect.top < box.top + pad) el.scrollTop -= box.top + pad - rect.top;
+			return;
+		}
+	}
+
+	/**
+	 * Приведение к абзацам с сохранением каретки. Дешёвая проверка — до снимка каретки:
+	 * нормализация идёт на каждое нажатие, менять почти всегда нечего, а снимок собирает
+	 * весь текст в строку. Если структура не менялась, выделение живо и переставлять его
+	 * не нужно (лишний сброс способен прервать IME-набор).
+	 */
+	private __ensureParagraphs() {
+		if (paragraphsNormalized(this.editable)) return;
+
+		preserveCaret(this.editable, () => ensureParagraphs(this.editable));
+	}
+
 	private __onKeydown(e: KeyboardEvent) {
 		// хоткеи форматирования (Ctrl/Cmd+B/I/U); зачёркивание — только кнопкой.
 		// Сверяем по e.key и e.code — иначе на не-латинской раскладке (кириллица) хоткеи не срабатывают.
@@ -1291,6 +1372,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			if (soft) insertSoftBreak(this.editable);
 			else insertParagraph(this.editable, DEFAULT_BLOCK);
 
+			// Перенос сделан вручную (preventDefault) — браузер к новой строке не прокрутит
+			this.__scrollCaretIntoView();
+
 			this.__clearPendingFormats();
 			this.__emitChange();
 			formatToolbar.refresh();
@@ -1350,9 +1434,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private __pastePlain(text: string, selection: Selection) {
 		if (!text) return;
 
-		const lines = text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
+		// Внутри блока без инлайновой разметки (код) пробелы значимы: отступы там — часть
+		// текста, и обрезка краёв строк ломала бы вставленный код. Пустая строка там — тоже
+		// содержимое, а не разделитель абзацев: деление разваливало бы один блок на два.
+		const literal = !BLOCK_TYPES[this.currentBlock].inline;
+		const lines = literal
+			? text.split(/\n/)
+			: text.split(/\n/).map((line, index) => (index === 0 ? line.trimEnd() : line.trim()));
 
-		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs), selection);
+		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs && !literal), selection);
 	}
 
 	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
@@ -1383,12 +1473,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		let caret: number;
 
 		if (this.multiline) {
-			// длина вставки в координатах каретки: текст, переносы внутри абзацев и границы между
-			// ними (первый абзац вливается в текущий, поэтому границ на одну меньше)
-			caret = start + paras.reduce((length, p) => length + charLength(p), paras.length - 1);
+			// Длина вставки меряется по факту — разницей длины содержимого: ensureParagraphs
+			// подчищает вставленное (краевые <br>-заполнители), и посчитанная заранее длина
+			// уводила бы каретку за конец вставленного, в чужой текст.
+			const before = charLength(this.editable);
 
 			insertPastedParagraphs(this.editable, paras, range);
 			ensureParagraphs(this.editable); // заполнить пустые абзацы, убрать краевые <br>
+
+			caret = start + (charLength(this.editable) - before);
 		} else {
 			// инлайн: абзацы и переносы → пробелы, форматирование сохраняем
 			const doc = this.editable.ownerDocument;
@@ -1471,20 +1564,24 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const range = selection.getRangeAt(0);
 		const inherited = range.collapsed ? [] : activeFormats(this.editable, range, this.formatTools);
 		const formats = new Set([...this.__pendingFormats, ...inherited]);
+		// Адрес наследуемой ссылки читается до правки: после deleteContents исходный тег
+		// пустеет и убирается, и адреса взять уже неоткуда.
+		const href = formats.has("link") ? (linkAt(this.editable, range)?.getAttribute("href") ?? "") : "";
 
-		insertFormattedText(this.editable, data, Array.from(formats), selection);
+		insertFormattedText(this.editable, data, Array.from(formats), selection, href);
 
 		// В пустом поле абзацев ещё нет, и каретке некуда встать внутрь — вставка из кода
 		// (смайлик, переменная) ложится прямо в редактор. Приводим к модели абзацев тем же
 		// способом, что и обработчик input при печати: он на программную вставку не приходит,
 		// а без <p> следующий Enter правит текст мимо абзаца.
-		if (this.multiline)
-			preserveCaret(this.editable, () => {
-				const before = this.editable.innerHTML;
-				ensureParagraphs(this.editable);
+		if (this.multiline) this.__ensureParagraphs();
 
-				return this.editable.innerHTML !== before;
-			});
+		// Вставка сдвинула каретку; пока фокус отпущен, её место хранит снимок — обновляем,
+		// иначе следующая вставка (второй смайлик подряд) легла бы по старому смещению,
+		// ПЕРЕД только что вставленным.
+		if (this.__detachedCaret) this.__detachedCaret = this.caretSnapshot() ?? this.__detachedCaret;
+
+		this.__scrollCaretIntoView(); // вставка из кода браузерной прокрутки к каретке не даёт
 
 		this.__emitChange();
 		formatToolbar.refresh();

package/source/selection.ts

@@ -78,6 +78,10 @@ export function innerSelection(root: HTMLElement): Selection | null {
 	const selection = documentSelection(root);
 	if (!selection || selection.rangeCount === 0 || !root.contains(selection.anchorNode)) return null;
 
+	// Оба конца, а не только якорь: выделение можно вытянуть из редактора на страницу,
+	// и правка по такому диапазону трогала бы DOM за пределами содержимого.
+	if (!root.contains(selection.focusNode)) return null;
+
 	return selection;
 }
 
@@ -233,7 +237,10 @@ function linesBefore(root: HTMLElement, container: Node, offset: number): number
  * пробелов и может уехать в соседнее слово.
  */
 export function mapCharOffset(before: string, after: string, offset: number): number {
-	const same = (a: string, b: string) => a === b || (b === " " && (a === " " || a === "\t"));
+	// Пробелом после нормализации становится и таб, и неразрывный пробел (U+00A0) — тот
+	// браузер сам подставляет в contenteditable; без него выравнивание срывалось бы на
+	// первом же nbsp, и каретка уезжала к нему.
+	const same = (a: string, b: string) => a === b || (b === " " && (a === " " || a === "\t" || a === " "));
 
 	let i = 0;
 	let j = 0;
@@ -433,13 +440,34 @@ function wrapNode(node: Node, tag: string): HTMLElement {
 	return wrapper;
 }
 
-/** Выносит ветку, содержащую node, наружу из элемента fmt (расщепляя fmt на «до» и «после»). */
+/** Выносит node наружу из элемента fmt (расщепляя fmt на «до» и «после»). */
 function unwrapAround(fmt: HTMLElement, node: Node) {
 	const parent = fmt.parentNode;
 	if (!parent) return;
 
+	// Промежуточные предки расщепляются вокруг узла: ветка целиком несла бы наружу и чужой
+	// текст — в <b><i>hello world</i></b> снятие жирного с «hello» уносило бы из <b> весь <i>,
+	// и « world» терял бы формат, который с него не снимали.
+	//
+	// Осознанная цена: расщеплённая ссылка становится двумя <a> с одним адресом — в значении
+	// два соседних куска вместо одного. Целая ссылка с чужим форматом снаружи стоила бы дороже:
+	// формат снимался бы с текста, которого не выделяли.
 	let child: Node = node;
-	while (child.parentNode && child.parentNode !== fmt) child = child.parentNode;
+	while (child.parentNode && child.parentNode !== fmt) {
+		const holder = child.parentNode as HTMLElement;
+
+		const left = holder.cloneNode(false) as HTMLElement;
+		while (holder.firstChild && holder.firstChild !== child) left.appendChild(holder.firstChild);
+		if (left.firstChild) holder.parentNode?.insertBefore(left, holder);
+
+		if (child.nextSibling) {
+			const right = holder.cloneNode(false) as HTMLElement;
+			while (child.nextSibling) right.appendChild(child.nextSibling);
+			holder.parentNode?.insertBefore(right, holder.nextSibling);
+		}
+
+		child = holder; // держит теперь только выносимую ветку
+	}
 	if (child.parentNode !== fmt) return;
 
 	const left = fmt.cloneNode(false) as HTMLElement;
@@ -610,7 +638,9 @@ const LINK_TAGS = TOOL_TAG_SETS.link;
  * По ней панель узнаёт текущий адрес: у ссылки состояние — не «включена», а «вот этот адрес».
  */
 export function linkAt(root: HTMLElement, range: Range): HTMLAnchorElement | null {
-	return formatAncestor(caretProbe(range), LINK_TAGS, root) as HTMLAnchorElement | null;
+	// Пробой бывает и сам тег ссылки, а не текст внутри него: границы выделения встают на
+	// элементы при Ctrl+A и selectAllContent — искать надо включая сам узел (см. formatAt).
+	return formatAt(caretProbe(range), LINK_TAGS, root) as HTMLAnchorElement | null;
 }
 
 /**
@@ -658,12 +688,6 @@ export function clearAllFormat(root: HTMLElement) {
 	root.normalize();
 }
 
-/**
- * Состояние форматирования на выделении указанными тегами.
- * `every` — отформатирован весь текст (подсветка кнопки инструмента),
- * `some` — отформатирована хоть какая-то часть (доступность очистки).
- * Обход прерывается на первом узле, решающем исход.
- */
 /** Есть ли форматирование хоть на части выделения (или под кареткой) — доступность кнопки очистки. */
 export function hasFormatting(root: HTMLElement, range: Range): boolean {
 	if (range.collapsed) return formatAncestor(caretProbe(range), MATCH_TAG_SET, root) !== null;
@@ -713,7 +737,13 @@ export function hasAnyFormatting(root: HTMLElement): boolean {
  * Вставляет текст в позицию каретки, оборачивая его в указанные форматы (режим набора).
  * Каретка ставится сразу после вставленного текста; соседние одинаковые теги склеиваются.
  */
-export function insertFormattedText(root: HTMLElement, data: string, tools: FormatTool[], selection: Selection) {
+export function insertFormattedText(
+	root: HTMLElement,
+	data: string,
+	tools: FormatTool[],
+	selection: Selection,
+	href = ""
+) {
 	if (!data || selection.rangeCount === 0) return;
 
 	const range = selection.getRangeAt(0);
@@ -724,6 +754,9 @@ export function insertFormattedText(root: HTMLElement, data: string, tools: Form
 	let node: Node = document.createTextNode(data);
 	for (const tool of tools) {
 		const el = document.createElement(FORMAT_TOOLS[tool].tag);
+		// Ссылка — не просто тег: без адреса она не переживёт сериализацию. Адрес передаёт
+		// вызывающий — с выделения, чьё оформление наследуется.
+		if (tool === "link" && href) el.setAttribute("href", href);
 		el.appendChild(node);
 		node = el;
 	}

package/source/serialize.ts

@@ -72,7 +72,9 @@ function markdownUrl(href: string): string {
 function balancedParens(text: string): boolean {
 	let depth = 0;
 	for (const char of text) {
-		if (char === "(") depth++;
+		// Глубже одного уровня разбор ссылки не читает (LINK_PATTERN) — такой адрес
+		// должен уйти в угловые скобки, иначе ссылка при чтении распалась бы в текст.
+		if (char === "(" && ++depth > 1) return false;
 		else if (char === ")" && --depth < 0) return false;
 	}
 
@@ -101,6 +103,15 @@ function wrap(
 	const core = inner.slice(leading.length, inner.length - trailing.length);
 	if (!core) return inner; // одни пробелы — оборачивать нечего
 
+	// Маркер не пересекает перенос строки — тоже ни у нас, ни у мессенджера. Перенос внутри
+	// содержимого (Shift+Enter в жирном): размечаем каждую строку отдельно, иначе `**а\nб**`
+	// вернулось бы из значения буквальным текстом с маркерами.
+	if (core.includes("\n"))
+		return `${leading}${core
+			.split("\n")
+			.map((line) => wrap(storage, tool, line, markers, source))
+			.join("\n")}${trailing}`;
+
 	return `${leading}${marker}${core}${marker}${trailing}`;
 }
 
@@ -146,9 +157,19 @@ function serializeInline(
 
 		// В коде разметки нет: при разборе его содержимое не размечается, и вложенное
 		// форматирование не вернулось бы — значение разошлось бы с тем, что было в поле.
+		// Перенос внутри — тоже содержимое: textContent съел бы его, склеив строки. В html
+		// перенос пишется тегом: сырой \n виден только под pre-wrap самого редактора.
 		if (tool && FORMAT_TOOLS[tool].literal) {
-			const text = el.textContent ?? "";
-			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers, el);
+			const text = Array.from(el.childNodes)
+				.map((child) => (child.nodeName === "BR" ? "\n" : (child.textContent ?? "")))
+				.join("");
+			result += wrap(
+				storage,
+				tool,
+				storage === "html" ? escapeHtml(text).replace(/\n/g, "<br>") : text,
+				markers,
+				el
+			);
 			continue;
 		}
 
@@ -242,6 +263,10 @@ function serializeParagraphs(
 	}
 	flush();
 
+	// Пустой обычный блок ВНУТРИ содержимого — осознанная пустая строка (за цитатой или кодом
+	// её держит и normalizeParagraphs), поэтому здесь он не отбрасывается: этой же функцией
+	// значение и ЧИТАЕТСЯ (deserialize html идёт через неё), и фильтр молча терял бы пустые
+	// строки уже сохранённых значений при первой же загрузке.
 	const cleaned = blocks.map(([type, text]) => [type, trimTrailingBreaks(text, storage)] as const);
 
 	// Пустые блоки в хвосте в значение не идут: последний из них — место каретки, оставленное
@@ -448,11 +473,13 @@ function markdownInline(text: string, order: MarkerRule[], linked: boolean): str
 
 	// Код — первым: внутри него `*звёздочки*` остаются текстом, как у мессенджеров. Иначе
 	// содержимое кода размечалось бы, и то, что человек написал буквально, уезжало бы жирным.
-	const stash: Array<[inner: string, marked: string]> = []; // содержимое и чужой маркер, если был
+	// содержимое, чужой маркер (если был) и исходный текст целиком — для мест, где разметка
+	// не действует и спрятанное надо вернуть буквально (адрес ссылки)
+	const stash: Array<[inner: string, marked: string, literal: string]> = [];
 	for (const rule of order)
 		if (rule.tool === "code" && html.includes(rule.marker))
 			html = html.replace(pattern(rule), (_match, lead: string, inner: string) => {
-				stash.push([inner, rule.own ? "" : rule.marker]);
+				stash.push([inner, rule.own ? "" : rule.marker, `${rule.marker}${inner}${rule.marker}`]);
 
 				return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
 			});
@@ -465,7 +492,10 @@ function markdownInline(text: string, order: MarkerRule[], linked: boolean): str
 	if (linked && html.includes("("))
 		html = html.replace(LINK_PATTERN, (match, inner: string, url: string) => {
 			// адрес в угловых скобках — форма для адресов с пробелами; сами скобки в него не входят
-			const raw = url.startsWith("&lt;") ? url.slice(4, -4) : url;
+			const bare = url.startsWith("&lt;") ? url.slice(4, -4) : url;
+			// Бэктики в адресе — буквальные символы: код успел спрятаться раньше (он разбирается
+			// первым), и без возврата метка уехала бы в href, а содержимое кода пропало бы.
+			const raw = bare.replace(STASH_PATTERN, (_m, index: string) => stash[+index][2]);
 			const href = safeUrl(raw);
 			const text = unescapeLinkText(inner);
 			if (!text || !href) return match; // без текста или без адреса ссылки нет
@@ -603,9 +633,10 @@ export function deserialize(
 	template.innerHTML = value;
 	const tagMap = buildTagMap(tools);
 
-	if (!paragraphs) return serializeInline(template.content.childNodes, "html", tagMap, defaultFormatMarkers());
+	// markers html-ветке не нужны (wrap выходит раньше), передаются лишь ради сигнатуры
+	if (!paragraphs) return serializeInline(template.content.childNodes, "html", tagMap, markers);
 
-	return serializeParagraphs(template.content, "html", tagMap, defaultFormatMarkers(), types, separate).replace(
+	return serializeParagraphs(template.content, "html", tagMap, markers, types, separate).replace(
 		/<([a-z]+)><\/\1>/g,
 		"<$1><br></$1>"
 	);

package/source/toolbar.ts

@@ -124,8 +124,12 @@ export interface ToolbarHost {
 	readonly blockTools?: BlockType[];
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
-	/** false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится. */
-	isToolEnabled?(tool: FormatTool): boolean;
+	/**
+	 * false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится.
+	 * Признак «в коде» дорог (обход выделения) — панель считает его один раз на обновление
+	 * и передаёт вторым аргументом, чтобы хост не обходил выделение на каждую кнопку.
+	 */
+	isToolEnabled?(tool: FormatTool, codeActive?: boolean): boolean;
 	/** Тип блока под кареткой — им подсвечивается активная кнопка блока. */
 	readonly currentBlock?: BlockType;
 	applyBlock?(type: BlockType): void;
@@ -326,17 +330,27 @@ class FormatToolbar {
 		};
 
 		const active = host.activeTools?.();
+		// Признак «в коде» гасит остальные кнопки и подсвечивает объединённую; сам он — обход
+		// выделения, поэтому считается один раз на обновление, а не на каждую кнопку. Вывести
+		// его из activeTools можно только вместе с currentBlock (блок кода — не формат): хосту
+		// без блоков остаётся его собственный isCodeActive.
+		const inCode =
+			active && host.currentBlock !== undefined
+				? host.currentBlock === CODE_TOOL || active.has(CODE_TOOL)
+				: host.isCodeActive?.();
+
 		for (const [tool, btn] of this.__buttons) {
 			// объединённая кнопка подсвечена и на блоке кода, а не только на моноширинном
 			const isActive =
 				this.__mergedCode && tool === CODE_TOOL
-					? !!host.isCodeActive?.()
+					? !!inCode
 					: active
 						? active.has(tool)
 						: host.isToolActive(tool);
 
-			if (btn.classList.contains("active") !== isActive) btn.classList.toggle("active", isActive);
-			setDisabled(btn, host.isToolEnabled?.(tool) === false);
+			// toggle с force не трогает атрибут, когда состояние уже нужное, — мутации не будет
+			btn.classList.toggle("active", isActive);
+			setDisabled(btn, host.isToolEnabled?.(tool, inCode) === false);
 		}
 
 		// тип под кареткой спрашиваем, только если есть что подсвечивать: обновление идёт
@@ -344,10 +358,7 @@ class FormatToolbar {
 		if (this.__blockButtons.length) {
 			const block = host.currentBlock;
 
-			for (const [type, btn] of this.__blockButtons) {
-				const isActive = block === type;
-				if (btn.classList.contains("active") !== isActive) btn.classList.toggle("active", isActive);
-			}
+			for (const [type, btn] of this.__blockButtons) btn.classList.toggle("active", block === type);
 		}
 
 		// хост может не реализовывать isActionEnabled — тогда кнопка всегда доступна