@brandup/ui-richeditor 1.0.43 → 1.0.44

package/README.md

@@ -49,7 +49,8 @@ editor.onChange(({ value }) => console.log(value));
 | `placeholder` | `string \| null` | Текст-заглушка |
 | `multiline` | `boolean` | Многострочный режим |
 | `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
-| `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию только `paragraph`) |
+| `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
+| `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются) |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
@@ -70,7 +71,8 @@ editor.onChange(({ value }) => console.log(value));
 | `setValue(value: string): void` | Установить значение (нормализует, генерирует `change`) |
 | `flushChange(): void` | Доставить отложенное `change` немедленно (см. ниже) |
 | `getLength(): number` | Длина текста (без учёта переводов строк) |
-| `focus(): void` | Установить фокус |
+| `focus(atEnd?): void` | Установить фокус; каретку не двигает, а при `atEnd` ставит её в конец, если её ещё не было |
+| `releaseFocus(): void` | Отпустить фокус, запомнив каретку — на время своего окна |
 | `applyFormat(tool): void` | Переключить формат на выделении (слово целиком) |
 | `applyBlock(type): void` | Переключить тип блоков под выделением; повторное применение возвращает обычный текст |
 | `applyCode(): void` | Код по выделению: моноширинный для части строки, блок — для целых строк |
@@ -86,12 +88,19 @@ editor.onChange(({ value }) => console.log(value));
 | `canUndo`, `canRedo` | Доступность отмены/повтора |
 | `applyAction(action): void` | Выполнить действие панели (`erase`/`undo`/`redo`) |
 | `isActionEnabled(action): boolean` | Доступно ли действие сейчас |
-| `insertText(text): void` | Вставить текст в каретку (или вместо выделения) с учётом режима набора |
+| `insertText(text): void` | Вставить текст в каретку (или вместо выделения) с учётом режима набора; без фокуса вставляет по снятой каретке |
+| `openEmojiPicker(initiator, container?): void` | Открыть панель смайликов у кнопки; повторный вызов у той же кнопки её закрывает |
 | `selection: Selection \| null` | Выделение, если оно внутри редактора (иначе `null`) — единая точка доступа для хоста |
 | `selectNode(node): void` | Выделить узел внутри редактора: следующая вставка заменит его целиком |
 | `onChange(handler)` | Подписка на событие `richeditor-change` |
 | `destroy(): void` | Разворачивает элемент обратно и освобождает ресурсы |
 
+### Фокус на время своего слоя
+
+Окно хоста (модальное) забирает фокус всегда: правка идёт в нём, а мигающая под ним каретка только сбивает с толку. Панель смайликов — наоборот, слой над полем: каретка на виду, и видно, куда встанет символ. На сенсорном устройстве фокус вместо этого поднимает экранную клавиатуру, которая саму панель и закрывает, — там его отпускают и для неё (`keepFocus`).
+
+Каретка при этом не теряется: она снимается текстовыми смещениями, `insertText()` возвращает её сам (вставка из панели идёт без фокуса), а `focus()` — вместе с фокусом. Правку на это время придерживает вызывающий: снятие фокуса не конец ввода, и нормализация обрезала бы пробел у каретки.
+
 ## Событие изменения
 
 `getValue()` считает значение по DOM и точен всегда. А вот **уведомление** `richeditor-change` при печати доставляется с задержкой: сериализация — самая дорогая операция редактора (обход всего содержимого), а печать даёт `input` на каждый символ.
@@ -135,13 +144,15 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 | `undo` | Отменить | `undo()` | история пуста |
 | `redo` | Повторить | `redo()` | нечего повторять |
 
-Кнопки действий (`.action-button`) отделены от кнопок форматирования (`.format-button`) разделителем `.split` и получают атрибут `disabled`, когда действие недоступно. Панель показывается и в том случае, если инструментов форматирования нет, а действия заданы.
+Кнопки действий (`.action-button`) стоят в одном ряду с инструментами (`.format-button`) и блоками (`.block-button`) — всё это правка оформления — и получают атрибут `disabled`, когда действие недоступно. Разделитель `.split` отбивает только кнопки хоста: они про другое. Панель показывается и в том случае, если инструментов форматирования нет, а действия заданы.
 
 ### Панель смайликов
 
 Кнопка `emoji` открывает под панелью попап `.ui-richeditor-emoji` со списком символов (`EMOJIS` — экспортируется пакетом). Выбранный символ вставляется через `insertText()`, то есть в текущую каретку и с учётом ожидающих форматов режима набора; попап после выбора закрывается.
 
-Открытием и закрытием управляет `PopupManager` из [`@brandup/ui-kit`](../brandup-ui-kit) — оттуда же приходят базовые стили `.ui-popup`. Ни кнопка, ни попап не забирают фокус у редактора (`mousedown` гасится), поэтому каретка и выделение сохраняются. Список кнопок собирается лениво, при первом открытии.
+Открытием и закрытием управляет `PopupManager` из [`@brandup/ui-kit`](../brandup-ui-kit) — оттуда же приходят базовые стили `.ui-popup`. Ни кнопка, ни попап не забирают фокус сами (`mousedown` гасится), поэтому каретка и выделение сохраняются; на сенсорном устройстве поле отдаёт фокус намеренно (см. «Фокус на время своего слоя»), и вставка идёт по снятой каретке. Список кнопок собирается лениво, при первом открытии.
+
+Панель — слой редактора, поэтому открывает её он сам (`openEmojiPicker()`): на время её работы он придерживает правку, чтобы нормализация не обрезала пробел у каретки. Хост может открыть её у своей кнопки, передав вторым аргументом контейнер, — так делает [`@brandup/ui-messageeditor`](../brandup-ui-messageeditor).
 
 ## Многострочный режим: абзацы и переносы
 
@@ -155,16 +166,18 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 В этом режиме абзацных блоков в содержимом нет вовсе: значение загружается плоским текстом, где каждый `\n` становится `<br>` внутри единственного `<p>`. Иначе два переноса рисовались бы двумя абзацами, а у хоста без отступов между ними это неотличимо от одного переноса — значение расходилось бы с видимым текстом.
 
-Хвостовой перенос абзаца отбрасывается (это `<br>`-заполнитель); пустая строка делается отдельным абзацем.
+Хвостовой перенос отбрасывается ровно один — это `<br>`-заполнитель, без которого не видна последняя строка. Набранные пустые строки сохраняются и в поле, и в значении, где бы они ни стояли — в начале блока, в середине или в конце.
 
-При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются.
+Блоки в этом режиме появляются побочно — правкой блочного типа, — поэтому нормализация сводит соседние абзацы обратно в один: их граница уходила бы в значение пустой строкой, которой на экране нет.
+
+При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются — кроме одного: пустой абзац сразу за блоком другого типа остаётся. Это единственное место, где каретка стоит вне цитаты или кода, и без него правка запиралась бы в блоке. В значение такой абзац не попадает — хвост значения обрезается.
 
 ## Блоки: цитата и код
 
-Кроме абзаца многострочный режим знает и другие типы блоков верхнего уровня. Они подключаются **явно** — их понимает не каждый получатель:
+Кроме абзаца многострочный режим знает и другие типы блоков верхнего уровня — цитату и блок кода. Доступны они по умолчанию; поле, где они ни к чему, ограничивают пустым списком:
 
 ```typescript
-new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"] });
+new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // только обычный текст
 ```
 
 | Тип | Тег | Разметка | Enter внутри |
@@ -175,7 +188,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"]
 
 Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
 
-Кнопки кода (моноширинного и блока) и спойлера временно скрыты (`HIDDEN_TOOLS`/`HIDDEN_BLOCKS` в `./toolbar`): сами возможности работают — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`, `applyBlock`, `applyCode`), — но в панель они пока не выводятся.
+Кнопка спойлера временно скрыта (`HIDDEN_TOOLS` в `./toolbar`): сам инструмент работает — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`), — но в панель он пока не выводится.
 
 ### Одна кнопка на моноширинный и блок кода
 
@@ -188,6 +201,8 @@ new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"]
 
 Тем же занимается `applyCode()`, а `isCodeActive()` отвечает, включён ли код в любом виде — им подсвечена кнопка.
 
+Перенос строки в моноширинном тоже не живёт: значение берёт оттуда голый текст, и строка пропала бы — поле показывало бы две, а получатель увидел одну. Поэтому Enter разрезает моноширинный: форматирование продолжается на новой строке, только если там что-то осталось.
+
 В коде разметки нет — ни в моноширинном, ни в блоке: значение берёт оттуда голый текст, и любое форматирование внутри до получателя не доедет. Поэтому при переходе в моноширинный прежнее форматирование с этого куска снимается, внутри кода остальные инструменты недоступны (`isToolEnabled()` — кнопки гаснут), а разметка, попавшая внутрь как-то ещё (вставка, чужое значение), вычищается при первой же нормализации. Если включено только что-то одно, кнопка остаётся обычной: инструмента (`.format-button`) или блока (`.block-button`).
 
 Переключение:
@@ -198,7 +213,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"]
 
 Особенности блока кода: инлайновое форматирование внутри не размечается (написанное остаётся буквальным) и снимается при переключении в этот тип, а пробелы внутри не схлопываются — отступы там часть текста.
 
-Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
+Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. В режиме мягких переносов пустой строки между блоками нет, поэтому соседние цитаты там склеиваются в одну сразу в поле — иначе оно показывало бы два блока, а в значении и у получателя был бы один. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
 
 В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два.
 
@@ -227,6 +242,10 @@ new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"]
 
 Без форматирования (plain) значение хранится как markdown без инструментов: абзацы `\n\n`, мягкий перенос `\n`.
 
+Маркер того же инструмента из чужого диалекта разбирается наравне со своим: `*жирный*` — родная разметка WhatsApp, и так размечены сообщения, набранные до редактора. Показывать их звёздочками значит показывать не то, что увидит получатель.
+
+Переписывать под свой маркер при этом нельзя — открыть и закрыть сообщение меняло бы текст, — поэтому редактор запоминает, чем текст был размечен, и возвращает в значение то же самое. Настроенный маркер ставится только на то, что отформатировали в поле. Настройка меняет их местами: заданный `markers.bold = "*"` делает чужим диалектом уже `**`.
+
 Маркеры markdown настраиваются через `markers`. При разборе применяются по убыванию длины, поэтому длинный маркер срабатывает раньше короткого-префикса. Глубоко вложенные комбинации гарантированно сохраняются только в режиме `html`.
 
 Вложенные пары разбираются (`_а **б** в_`), а вот **пересекающиеся** остаются текстом: в `**а _б** в_` внутренняя пара пересекает внешнюю, разметкой такое невыразимо, и короткий маркер отбрасывается — как и в мессенджерах.

package/package.json

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

package/source/editing.ts

@@ -4,13 +4,9 @@
 
 import { deserialize } from "./serialize";
 import { blockAt, blockTypeOf, blocksInRange, createBlock, isBlock } from "./paragraphs";
-import { documentSelection, innerSelection } from "./selection";
+import { documentSelection, innerSelection, literalAncestor } from "./selection";
 import { BLOCK_TYPES, DEFAULT_BLOCK, type BlockType, type FormatMarkers, type FormatTool } from "./format-config";
 
-function emptyParagraph(): HTMLParagraphElement {
-	return createBlock(DEFAULT_BLOCK) as HTMLParagraphElement;
-}
-
 // убирает пустые текст-узлы и ставит <br>-заполнитель в пустой абзац (для видимости и каретки)
 function fillEmptyParagraph(p: HTMLElement) {
 	p.normalize(); // удаляет пустые Text-узлы, склеивает соседние
@@ -172,6 +168,11 @@ export function atBlockStart(editable: HTMLElement, range: Range): boolean {
 	const block = blockAt(editable, range.startContainer);
 	if (!block) return false;
 
+	// В пустом блоке каретка всегда в его начале: <br> там — заполнитель, он делает строку
+	// видимой, но строкой не является. Иначе из опустевшей цитаты было бы не выйти — каретка
+	// стоит за заполнителем, и проверка ниже приняла бы его за конец первой строки.
+	if (!(block.textContent ?? "").length) return true;
+
 	const before = document.createRange();
 	before.selectNodeContents(block);
 	before.setEnd(range.startContainer, range.startOffset);
@@ -200,7 +201,7 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 		const next = createBlock(type);
 		if (editable.childNodes.length === 0) {
 			// пустой редактор: пустая строка-источник + новая строка с кареткой
-			editable.appendChild(emptyParagraph());
+			editable.appendChild(createBlock(DEFAULT_BLOCK));
 			editable.appendChild(next);
 		} else {
 			// каретка на уровне редактора между/после абзацев — вставляем новый абзац в эту позицию
@@ -217,6 +218,18 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	tail.setStart(range.endContainer, range.endOffset);
 	const fragment = tail.extractContents();
 
+	// Выходим из блока, а за ним уже стоит пустой абзац — переходим в него. Иначе одно нажатие
+	// давало бы две пустые строки: одна тут заводится, вторая уже была заведена под каретку.
+	const following = (para as HTMLElement).nextElementSibling;
+	const empty = !(fragment.textContent ?? "") && !fragment.querySelector("br");
+
+	if (empty && following && blockTypeOf(following) === type && !(following.textContent ?? "")) {
+		fillEmptyParagraph(para as HTMLElement);
+		caretToStart(following);
+
+		return;
+	}
+
 	const next = document.createElement(BLOCK_TYPES[type].tag);
 	next.appendChild(fragment);
 	(para as ChildNode).after(next);
@@ -232,6 +245,27 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	caretToStart(next);
 }
 
+/**
+ * Разрезает элемент по каретке: содержимое после неё уходит в такой же элемент следом,
+ * а диапазон встаёт между половинами — вставленное туда окажется снаружи обоих. Пустые
+ * половины не оставляем: печатать в них было бы нечего, а каретка попадала бы внутрь.
+ */
+function splitElement(el: HTMLElement, range: Range) {
+	const tail = document.createRange();
+	tail.selectNodeContents(el);
+	tail.setStart(range.startContainer, range.startOffset);
+
+	const rest = el.cloneNode(false) as HTMLElement;
+	rest.appendChild(tail.extractContents());
+
+	if (rest.textContent) el.after(rest);
+
+	range.setStartAfter(el);
+	range.collapse(true);
+
+	if (!el.textContent) el.remove();
+}
+
 /** Shift/Ctrl+Enter в multiline: вставить мягкий перенос <br>. */
 export function insertSoftBreak(editable: HTMLElement) {
 	const selection = innerSelection(editable);
@@ -240,6 +274,13 @@ export function insertSoftBreak(editable: HTMLElement) {
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
 
+	// Перенос не живёт в моноширинном: значение берёт оттуда голый текст, и новая строка
+	// пропала бы — поле показывало бы две, а получатель увидел одну. Разрезаем тег и ставим
+	// перенос между половинами: форматирование продолжается на новой строке, только если
+	// там что-то осталось.
+	const literal = literalAncestor(range.startContainer, editable);
+	if (literal) splitElement(literal, range);
+
 	const br = document.createElement("br");
 	range.insertNode(br);
 

package/source/format-config.ts

@@ -104,6 +104,17 @@ interface FormatToolDef {
 	matchTags: string[];
 	/** Маркер в Markdown. */
 	md: string;
+	/**
+	 * Маркеры того же инструмента из чужих диалектов: разбираются наравне с основным, но сами
+	 * не ставятся. Текст, размеченный ими, встречается в старых сообщениях, и показывать его
+	 * сырыми символами — значит показывать не то, что увидит получатель.
+	 */
+	mdAliases?: string[];
+	/**
+	 * Содержимое буквально: разметка внутри не разбирается и не сохраняется, значение берёт
+	 * оттуда голый текст. Перенос строки в таком теге тоже не живёт — он его разрезает.
+	 */
+	literal?: boolean;
 	/** Клавиша для Ctrl/Cmd-хоткея (пусто — без хоткея). */
 	hotkey: string;
 	/** Подсказка на кнопке. */
@@ -115,6 +126,9 @@ export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
 		tag: "b",
 		matchTags: ["B", "STRONG"],
 		md: "**",
+		// Одинарная звёздочка — жирный в WhatsApp; так размечены сообщения, набранные до
+		// редактора, и получатель увидит их жирными.
+		mdAliases: ["*"],
 		hotkey: "b",
 		title: "Жирный",
 	},
@@ -152,6 +166,7 @@ export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
 		tag: "code",
 		matchTags: ["CODE"],
 		md: "`",
+		literal: true,
 		hotkey: "",
 		title: "Моноширинный",
 	},
@@ -210,19 +225,20 @@ export function parseEditorActions(value: string | null): EditorAction[] {
 }
 
 /**
- * Разбирает значение атрибута data-blocks. Блоки подключаются явно: без атрибута доступен
- * только обычный текст. Он в наборе есть всегда — иначе блок некуда было бы вернуть.
+ * Разбирает значение атрибута data-blocks. Без атрибута доступны все типы; пустое значение
+ * оставляет только обычный текст — им ограничивают поле, где цитаты и код ни к чему.
  */
 export function parseBlockTypes(value: string | null): BlockType[] {
-	return value === null ? [DEFAULT_BLOCK] : normalizeBlockTypes(parseList(value, ALL_BLOCK_TYPES));
+	return value === null ? ALL_BLOCK_TYPES.slice() : normalizeBlockTypes(parseList(value, ALL_BLOCK_TYPES));
 }
 
 /**
  * Приводит набор типов к порядку объявления. Обычный текст в наборе есть всегда: им становится
- * содержимое, не попавшее ни в какой блок, и в него же блок возвращают.
+ * содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Набор не задан — берём
+ * все типы; ограничивают их явным списком.
  */
 export function normalizeBlockTypes(types: BlockType[] | undefined): BlockType[] {
-	if (!types) return [DEFAULT_BLOCK];
+	if (!types) return ALL_BLOCK_TYPES.slice();
 
 	const list = ALL_BLOCK_TYPES.filter((type) => types.includes(type));
 

package/source/format.ts

@@ -36,6 +36,7 @@ export {
 	restoreSelection,
 	mapCharOffset,
 	activeFormats,
+	emptyFormatAt,
 	toggleFormat,
 	clearFormat,
 	clearAllFormat,
@@ -51,6 +52,7 @@ export {
 	blocksInRange,
 	createBlock,
 	normalizeWhitespace,
+	mergeAdjacentBlocks,
 	normalizeParagraphs,
 	ensureParagraphs,
 } from "./paragraphs";

package/source/paragraphs.ts

@@ -154,11 +154,53 @@ export function normalizeWhitespace(root: HTMLElement) {
  * Нормализует абзацы многострочного режима: удаляет пустые абзацы (без текстового содержимого).
  * Если содержимого нет вовсе — редактор остаётся пустым (показывается placeholder).
  */
-export function normalizeParagraphs(root: HTMLElement) {
+export function normalizeParagraphs(root: HTMLElement, merge = false) {
+	if (merge) mergeAdjacentBlocks(root);
+
 	for (const el of Array.from(root.children)) {
 		// Пустой блок другого типа не трогаем: его завели осознанно и в него сейчас будут писать,
 		// а пустая строка внутри кода вообще осмысленна сама по себе.
-		if (blockTypeOf(el) === DEFAULT_BLOCK && (el.textContent ?? "").trim() === "") el.remove();
+		if (blockTypeOf(el) !== DEFAULT_BLOCK || (el.textContent ?? "").trim() !== "") continue;
+
+		// Последний пустой абзац — это место, где оставили каретку: перенеслись на новую строку
+		// и ушли из поля. Убрав его, редактор схлопывал бы только что набранную строку. За блоком
+		// другого типа он к тому же единственное место вне цитаты или кода — без него правка
+		// запиралась бы внутри, хотя вышли оттуда как раз затем, чтобы писать дальше.
+		//
+		// В значение такой абзац не попадает (хвост обрезается), а единственный в поле — попадает
+		// под удаление: пустое поле должно оставаться пустым, иначе не покажется заглушка.
+		const previous = el.previousElementSibling;
+		const kept = previous && (!el.nextElementSibling || blockTypeOf(previous) !== DEFAULT_BLOCK);
+		if (kept) continue;
+
+		el.remove();
+	}
+}
+
+/**
+ * Склеивает соседние блоки одного типа — в режиме мягких переносов, где граница между блоками
+ * в значение не попадает. Подряд идущие строки с маркером цитаты разбор собирает в одну цитату,
+ * а два обычных абзаца там и вовсе неразличимы: пустой строки между ними на экране нет, а в
+ * значении она была бы. Два блока в поле показывали бы то, чего в сообщении не будет.
+ *
+ * Блоки с ограждением (код) не трогаем: у них есть свои границы, и два подряд разбираются
+ * ровно как два.
+ */
+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;
+
+		const previous = el.previousElementSibling;
+		if (!previous || blockTypeOf(previous) !== type) continue;
+
+		// Строки склеиваем переносом: между блоками была граница, а внутри блока её роль играет он.
+		// Если перенос там уже есть (заполнитель последней строки), он границей и станет — иначе
+		// между строками появилась бы пустая, которой на экране не было.
+		if (previous.lastChild?.nodeName !== "BR") previous.appendChild(document.createElement("br"));
+
+		while (el.firstChild) previous.appendChild(el.firstChild);
+		el.remove();
 	}
 }
 
@@ -201,12 +243,16 @@ export function ensureParagraphs(root: HTMLElement) {
 			continue;
 		}
 
-		// в непустом абзаце убираем краевые <br>-заполнители: иначе введённый текст
-		// оказывается рядом с лишним переносом (символ «съезжает» на новую строку).
-		// Внутренние <br> (мягкие переносы) сохраняются.
+		// Хвостовой перенос в одиночку — остаток заполнителя опустевшего абзаца: текст уже есть,
+		// а показывать за ним нечего. Два и больше — это набранные пустые строки плюс заполнитель,
+		// который их и делает видимыми (см. trimTrailingBreaks), и трогать их нельзя.
+		//
+		// Ведущие переносы не трогаем вовсе: заполнитель бывает только последним, а перенос
+		// в начале — это набранная пустая строка. Убрав его, редактор схлопывал бы её, стоило
+		// начать печатать в следующей.
 		if ((p.textContent ?? "").length > 0) {
-			while (p.firstChild && p.firstChild.nodeName === "BR") p.removeChild(p.firstChild);
-			while (p.lastChild && p.lastChild.nodeName === "BR") p.removeChild(p.lastChild);
+			const tail = p.lastChild;
+			if (tail?.nodeName === "BR" && tail.previousSibling?.nodeName !== "BR") p.removeChild(tail);
 		}
 	}
 }

package/source/richeditor.ts

@@ -1,6 +1,7 @@
 import "./richeditor.less"; // стили редактора и панели форматирования
 
 import { DOM, UIElementBound } from "@brandup/ui";
+import { IS_TOUCH_DEVICE } from "@brandup/ui-kit";
 import {
 	ALL_FORMAT_TOOLS,
 	BLOCK_TYPES,
@@ -20,12 +21,14 @@ import {
 	insertFormattedText,
 	isFormatActive,
 	documentSelection,
+	emptyFormatAt,
 	innerSelection,
 	mapCharOffset,
 	normalizeBlockTypes,
 	editorText,
 	charLength,
 	preserveCaret,
+	mergeAdjacentBlocks,
 	normalizeParagraphs,
 	normalizeWhitespace,
 	restoreSelection,
@@ -123,6 +126,14 @@ export interface RichEditorOptions {
 	 * Обычный текст в наборе есть всегда — в него блок возвращают.
 	 */
 	blocks?: BlockType[];
+	/**
+	 * Держать ли фокус в поле, пока над ним открыта панель смайликов. По умолчанию держим —
+	 * каретка на виду, и видно, куда встанет символ; на сенсорном устройстве нет: там фокус
+	 * держит на экране клавиатуру, и она закрывает собой саму панель.
+	 *
+	 * Модального окна это не касается: правка идёт в нём, и фокус поле отдаёт всегда.
+	 */
+	keepFocus?: boolean;
 	/** Только для чтения — запрещает ввод и изменение текста (но не выделение/копирование). */
 	readonly?: boolean;
 	/** Контейнер для панели форматирования; по умолчанию document.body (position: fixed над редактором). */
@@ -162,6 +173,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	readonly multiline: boolean;
 	readonly paragraph: ParagraphMode;
 	readonly blockTypes: BlockType[];
+	readonly keepFocus: boolean;
 	readonly toolbarContainer: HTMLElement | null;
 	readonly toolbarButtons: ToolbarButton[];
 
@@ -170,6 +182,11 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	private __pendingFormats = new Set<FormatTool>();
 	private __hasInputClick = false;
 	private __editHolds = 0; // правка продолжается в окне хоста — см. holdEditing
+	// Каретка, снятая при отпускании фокуса: без фокуса браузер может убрать и выделение,
+	// а вставке из попапа нужно место — см. releaseFocus.
+	private __detachedCaret: [number, number] | null = null;
+	private __emojiHold: (() => void) | null = null; // правка придержана на время панели смайликов
+	private __releasingFocus = false; // фокус снимаем сами, а не уходят из поля — см. releaseFocus
 	// Компонент снят. Удержание правки переживает снятие (окно хоста закрывается позже), и по его
 	// снятию трогать содержимое уже нельзя — редактора нет.
 	private __disposed = false;
@@ -209,6 +226,7 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// Блоки — часть многострочной модели: в однострочном режиме верхнего уровня нет вовсе,
 		// а в readonly их не переключить, но разбор и показ значения обязаны работать и там.
 		this.blockTypes = multiline ? normalizeBlockTypes(options.blocks) : [DEFAULT_BLOCK];
+		this.keepFocus = options.keepFocus ?? !IS_TOUCH_DEVICE;
 		this.toolbarContainer = options.toolbarContainer ?? null;
 		// кнопки хоста живут и без форматирования, но не в readonly — там панели нет вовсе
 		this.toolbarButtons = readonly ? [] : (options.buttons ?? []);
@@ -283,7 +301,11 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	 * например, кнопкой панели, которая не должна забирать фокус у редактора.
 	 */
 	insertText(text: string): void {
-		if (this.readonly || !text || !this.selection) return;
+		if (this.readonly || !text) return;
+
+		// фокус мог быть отпущен на время окна хоста — вместе с ним могло уйти и выделение
+		if (!this.selection) this.__reviveCaret();
+		if (!this.selection) return;
 
 		// вставка — такой же ввод, как с клавиатуры, поэтому проходит через filterChar хоста
 		// (ограничения по типу поля и длине). Обход символов идёт по кодпойнтам, чтобы эмодзи
@@ -313,19 +335,32 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const target = container ?? initiator.parentElement;
 		if (!target) return;
 
-		formatToolbar.openEmoji(this, initiator, target);
+		// повторное нажатие по кнопке панель закрывает — держать и придерживать больше нечего
+		if (!formatToolbar.openEmoji(this, initiator, target)) return;
+
+		// Правку придерживаем на всё время панели: фокус мы отпустим, а снятие фокуса — не конец
+		// ввода. Иначе нормализация обрезала бы пробел у каретки, и символ встал бы вплотную.
+		this.__emojiHold ??= this.holdEditing();
 
 		// По кнопке могли нажать, ни разу не заходя в поле, — тогда каретки нет и вставлять символ
-		// некуда. Фокусировать вслепую нельзя: focus() сбросил бы уже стоящую каретку, и символ
-		// уехал бы не туда. Конец содержимого назначаем сами: фокус ставит каретку в начало,
-		// и дописанный к сообщению символ оказался бы перед текстом.
+		// некуда. В конец её ставит focus(true), и только если её действительно не было: снятую
+		// при отпускании фокуса он вернёт на место, а иначе символ уезжал бы в конец сообщения
+		// с каждым открытием панели.
 		//
 		// Строго после открытия панели: фокус показывает тулбар, а придержать его панель успевает
 		// только когда открыта сама.
-		if (!this.selection) {
-			this.focus();
-			caretToEnd(this.editable, this.multiline);
-		}
+		if (!this.selection) this.focus(true);
+
+		// Панель — слой над полем, а не вместо него: каретку видно, и видно, куда встанет символ.
+		// На сенсорном устройстве фокус вместо этого поднимает клавиатуру, которая саму панель
+		// и закрывает, — там его отпускаем, а каретку вернёт вставка (см. keepFocus).
+		if (!this.keepFocus) this.releaseFocus();
+	}
+
+	/** Панель смайликов закрылась: снимаем удержание правки, взятое на время её работы. */
+	onEmojiClosed(): void {
+		this.__emojiHold?.();
+		this.__emojiHold = null;
 	}
 
 	getLength(): number {
@@ -337,12 +372,48 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	 * Фокус в поле. Каретку, стоящую в содержимом, не двигает: правку продолжают там, где её
 	 * прервали. Своей защиты обработчика фокуса для этого мало — браузер успевает поставить
 	 * при фокусе собственную каретку (в начало содержимого), и она выглядит как «уже стоявшая».
+	 *
+	 * `atEnd` — куда ставить каретку, если её в поле ещё не было: в конец содержимого, а не
+	 * в начало. Так фокусируют по клику мимо текста — это клик за ним, а не перед ним.
 	 */
-	focus(): void {
-		const bounds = this.caretSnapshot();
+	focus(atEnd = false): void {
+		const bounds = this.caretSnapshot() ?? this.__detachedCaret;
+		if (bounds) return this.restoreCaret(bounds);
 
-		if (bounds) this.restoreCaret(bounds);
-		else this.editable.focus();
+		this.editable.focus();
+		if (atEnd) caretToEnd(this.editable, this.multiline);
+	}
+
+	/**
+	 * Отпускает фокус, запомнив каретку. Пока хост показывает своё окно, полю фокус не нужен:
+	 * правка идёт в окне, а мигающая каретка под ним только сбивает с толку. На сенсорном
+	 * устройстве фокус к тому же держит на экране клавиатуру, и она закрывает собой само окно.
+	 *
+	 * Каретка при этом не теряется: {@link insertText} вернёт её сам, а {@link focus} — вместе
+	 * с фокусом. Правку на это время придерживает вызывающий (см. {@link holdEditing}): снятие
+	 * фокуса не конец ввода, и содержимое трогать рано.
+	 */
+	releaseFocus(): void {
+		if (this.editable.ownerDocument.activeElement !== this.editable) return;
+
+		this.__detachedCaret = this.caretSnapshot();
+		this.__releasingFocus = true;
+
+		try {
+			this.editable.blur();
+		} finally {
+			this.__releasingFocus = false;
+		}
+	}
+
+	// Ставит обратно каретку, снятую при отпускании фокуса. Фокус не возвращает: вставке из
+	// панели он не нужен, а на сенсорном устройстве вернул бы и клавиатуру.
+	private __reviveCaret() {
+		const bounds = this.__detachedCaret;
+		if (!bounds) return;
+
+		const selection = documentSelection(this.editable);
+		if (selection) restoreSelection(this.editable, bounds[0], bounds[1], selection);
 	}
 
 	/**
@@ -466,6 +537,20 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		if (!target) return;
 
 		if (target.range.collapsed) {
+			// Каретка в опустевшем теге — слово из него стёрли, а тег остался, и печать продолжится
+			// оформленной. Кнопка снимает именно его: режим набора тут ничего не изменил бы,
+			// а выключить формат стало бы нечем.
+			const empty = emptyFormatAt(this.editable, target.range, tool);
+			if (empty) {
+				this.__history?.record("op");
+				preserveCaret(this.editable, () => empty.replaceWith(...Array.from(empty.childNodes)));
+				this.__pendingFormats.delete(tool);
+
+				this.__emitChange();
+				formatToolbar.refresh();
+				return;
+			}
+
 			// под кареткой нет слова — режим набора: формат для следующего ввода
 			if (this.__pendingFormats.has(tool)) this.__pendingFormats.delete(tool);
 			else this.__pendingFormats.add(tool);
@@ -499,6 +584,15 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		formatToolbar.refresh();
 	}
 
+	/**
+	 * Типы блоков для панели. От {@link blockTypes} отличается только запретом правки: разбирать
+	 * и показывать цитату и код редактор обязан и в режиме только для чтения, а переключать их
+	 * там нечем — кнопок быть не должно.
+	 */
+	get blockTools(): BlockType[] {
+		return this.readonly ? [] : this.blockTypes;
+	}
+
 	/**
 	 * Тип блока под кареткой. Без выделения (или вне блоков) — тип по умолчанию: именно им
 	 * станет то, что сейчас наберут.
@@ -556,6 +650,14 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			restoreSelection(this.editable, bounds[0], bounds[1], selection);
 		}
 
+		// Соседние цитаты в режиме мягких переносов — одна цитата: склеиваем сразу, а не на
+		// потерю фокуса, иначе поле до неё показывает два блока вместо одного.
+		//
+		// Строго после возврата каретки: склейка снимает границу блоков, а её смещения считают,
+		// и восстановленная по прежним смещениям каретка съехала бы на символ. Живое выделение
+		// переезжает вместе с узлами само.
+		if (!this.__blockParagraphs) mergeAdjacentBlocks(this.editable);
+
 		this.__emitChange();
 		formatToolbar.refresh();
 	}
@@ -823,7 +925,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// текст в координатах каретки (с концами строк) — иначе смещения разъедутся на число строк
 		const textBefore = editorText(this.editable);
 		normalizeWhitespace(this.editable);
-		if (this.multiline) normalizeParagraphs(this.editable);
+		// В режиме мягких переносов соседние цитаты неразличимы: значение пишет их строки подряд,
+		// а разбор собирает в одну — склеиваем и в поле.
+		if (this.multiline) normalizeParagraphs(this.editable, !this.__blockParagraphs);
 		if (this.editable.innerHTML === before) return;
 
 		if (bounds && selection) {
@@ -911,6 +1015,9 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 			() => {
 				this.element.classList.add("focused");
 
+				// вернулись в поле — каретку ставит браузер или тот, кто вернул фокус
+				this.__detachedCaret = null;
+
 				// Пришли править — держать запрет выделения не за чем, а с ним поле осталось бы
 				// нередактируемым. Мышью его снимает нажатие, но фокус берут и клавишей, и из кода.
 				this.element.classList.remove(UNSELECTABLE_CLASS);
@@ -933,7 +1040,12 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				this.__hasInputClick = false;
 
 				this.element.classList.remove("focused");
-				formatToolbar.detach(this);
+
+				// Фокус отпущен намеренно — это не уход из поля, а работа хоста в своём слое над
+				// ним: панель убираем с экрана, но открытую панель смайликов не закрываем, её же
+				// ради этого и открыли.
+				if (this.__releasingFocus) formatToolbar.suspend(this);
+				else formatToolbar.detach(this);
 
 				// правку продолжают в окне хоста — этот blur не конец ввода, содержимое трогать нельзя
 				if (this.__editHolds > 0) {

package/source/selection.ts

@@ -13,8 +13,13 @@ const MATCH_TAG_NAMES = Array.from(new Set(ALL_FORMAT_TOOLS.flatMap((t) => FORMA
 // Селекторы считаем один раз: обе выборки идут на каждую правку формата и на каждое обновление панели.
 const FORMAT_SELECTOR = FORMAT_TAG_NAMES.join(",").toLowerCase();
 const MATCH_SELECTOR = MATCH_TAG_NAMES.join(",").toLowerCase();
-// Моноширинный: внутри него разметки не бывает (см. stripFormattingInCode)
-const CODE_SELECTOR = FORMAT_TOOLS.code.matchTags.join(",").toLowerCase();
+// Инструменты, содержимое которых буквально (моноширинный): внутри них не бывает ни разметки
+// (см. stripFormattingInCode), ни переносов строк — значение берёт оттуда голый текст.
+const LITERAL_TAGS = ALL_FORMAT_TOOLS.filter((tool) => FORMAT_TOOLS[tool].literal).flatMap(
+	(tool) => FORMAT_TOOLS[tool].matchTags
+);
+const CODE_SELECTOR = LITERAL_TAGS.join(",").toLowerCase();
+const LITERAL_TAG_SET = new Set(LITERAL_TAGS);
 // Неделимые объекты хоста: конструкции сообщения объявляют себя нередактируемыми
 const ATOMIC_SELECTOR = '[contenteditable="false"]';
 
@@ -161,6 +166,26 @@ export function charLength(root: HTMLElement): number {
 	return length;
 }
 
+/**
+ * Пустой тег инструмента, внутри которого стоит каретка: слово из него стёрли, а тег остался,
+ * и печать продолжится оформленной. Кнопка панели обязана снимать именно его.
+ */
+export function emptyFormatAt(root: HTMLElement, range: Range, tool: FormatTool): HTMLElement | null {
+	if (!range.collapsed) return null;
+
+	const found = formatAt(caretProbe(range), TOOL_TAG_SETS[tool], root);
+
+	return found && !found.textContent ? found : null;
+}
+
+/**
+ * Ближайший предок с буквальным содержимым (моноширинный) — в нём не живёт перенос строки:
+ * значение берёт оттуда голый текст, и строка из значения пропала бы.
+ */
+export function literalAncestor(node: Node, root: HTMLElement): HTMLElement | null {
+	return formatAt(node, LITERAL_TAG_SET, root);
+}
+
 /** Абсолютные текстовые смещения границ выделения внутри root (для восстановления после правок DOM). */
 export function selectionCharBounds(root: HTMLElement, range: Range): [number, number] {
 	const probe = document.createRange();
@@ -259,8 +284,8 @@ function locateChars(root: HTMLElement, lower: number, upper: number): [CharPosi
 		return false;
 	});
 
-	if (!last && !low && !high) return null;
-
+	// Содержимого нет вовсе — каретке место только в самом корне. Возвращать «некуда» нельзя:
+	// в пустое поле как раз и вставляют, вернув каретку (панель смайликов работает без фокуса).
 	const tail: CharPosition = last ?? { node: root, offset: 0 };
 
 	return [low ?? tail, high ?? tail];
@@ -344,6 +369,18 @@ function* touchedTextNodes(root: HTMLElement, range: Range): Generator<Text> {
 	}
 }
 
+/**
+ * Формат на самом узле или над ним. Каретка стоит и в самом теге — например в опустевшем `<code>`,
+ * из которого стёрли слово: браузер держит её внутри, и печать продолжится оформленной, поэтому
+ * состояние обязано этот тег видеть.
+ */
+function formatAt(node: Node, tags: ReadonlySet<string>, root: HTMLElement): HTMLElement | null {
+	const el = node.nodeType === Node.ELEMENT_NODE ? (node as HTMLElement) : null;
+	if (el && el !== root && tags.has(el.tagName)) return el;
+
+	return formatAncestor(node, tags, root);
+}
+
 /** Узел под схлопнутой кареткой — от него и ищется формат. */
 function caretProbe(range: Range): Node {
 	const node = range.startContainer;
@@ -593,7 +630,7 @@ export function activeFormats(root: HTMLElement, range: Range, tools: FormatTool
 
 	if (range.collapsed) {
 		const probe = caretProbe(range);
-		for (const tool of tools) if (formatAncestor(probe, TOOL_TAG_SETS[tool], root)) active.add(tool);
+		for (const tool of tools) if (formatAt(probe, TOOL_TAG_SETS[tool], root)) active.add(tool);
 
 		return active;
 	}

package/source/serialize.ts

@@ -3,6 +3,7 @@
 import { blockTypeOf } from "./paragraphs";
 import {
 	ALL_BLOCK_TYPES,
+	ALL_FORMAT_TOOLS,
 	BLOCK_TYPES,
 	DEFAULT_BLOCK,
 	FORMAT_TOOLS,
@@ -28,17 +29,29 @@ function buildTagMap(tools: FormatTool[]): Record<string, FormatTool> {
 	return map;
 }
 
+/**
+ * Чем текст был размечен, если не настроенным маркером. Живёт только в разметке поля: значение
+ * собирается тегами, и атрибут в него не попадает ни при каком формате хранения.
+ */
+const MARKER_ATTR = "data-md";
+
 function lineBreak(storage: FormatStorage): string {
 	return storage === "html" ? "<br>" : "\n";
 }
 
-function wrap(storage: FormatStorage, tool: FormatTool, inner: string, markers: FormatMarkers): string {
+function wrap(
+	storage: FormatStorage,
+	tool: FormatTool,
+	inner: string,
+	markers: FormatMarkers,
+	source?: HTMLElement
+): string {
 	if (!inner) return inner;
 
 	const def = FORMAT_TOOLS[tool];
 	if (storage === "html") return `<${def.tag}>${inner}</${def.tag}>`;
 
-	const marker = markers[tool];
+	const marker = ownMarker(tool, markers, source);
 
 	// Маркер не сработает, если содержимое начинается или заканчивается пробелом, — ни у нас
 	// при разборе, ни у мессенджера. Выносим краевые пробелы наружу: разметка сохраняется,
@@ -51,6 +64,17 @@ function wrap(storage: FormatStorage, tool: FormatTool, inner: string, markers:
 	return `${leading}${marker}${core}${marker}${trailing}`;
 }
 
+/**
+ * Маркер, которым текст был размечен: запомненный на элементе, если он известен инструменту,
+ * иначе настроенный. Чужой диалект (`*жирный*` из WhatsApp) обязан вернуться в значение таким
+ * же, каким пришёл; всё, что размечено в поле, пишется настроенным маркером.
+ */
+function ownMarker(tool: FormatTool, markers: FormatMarkers, source?: HTMLElement): string {
+	const marked = source?.dataset.md;
+
+	return marked && MARKER_ALIASES[tool].includes(marked) ? marked : markers[tool];
+}
+
 // Сериализует инлайновое содержимое (текст, форматирование, <br> как мягкий перенос).
 // Абзацы (<p>/<div>) на этом уровне не учитываются — их разбирает serializeParagraphs.
 function serializeInline(
@@ -82,9 +106,9 @@ function serializeInline(
 
 		// В коде разметки нет: при разборе его содержимое не размечается, и вложенное
 		// форматирование не вернулось бы — значение разошлось бы с тем, что было в поле.
-		if (tool === "code") {
+		if (tool && FORMAT_TOOLS[tool].literal) {
 			const text = el.textContent ?? "";
-			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers);
+			result += wrap(storage, tool, storage === "html" ? escapeHtml(text) : text, markers, el);
 			continue;
 		}
 
@@ -97,16 +121,17 @@ function serializeInline(
 		}
 
 		// неизвестный или отключённый тег — отбрасываем обёртку, оставляем текст
-		result += tool ? wrap(storage, tool, inner, markers) : inner;
+		result += tool ? wrap(storage, tool, inner, markers, el) : inner;
 	}
 
 	return result;
 }
 
-// Хвостовые переносы абзаца отбрасываем — это <br>-заполнители, делающие последнюю строку видимой;
-// мягкий перенос осмыслен только между содержимым (для пустой строки используйте новый абзац).
+// Хвостовой перенос — заполнитель: без него последняя строка блока не видна и в неё не встать
+// кареткой. Отбрасываем ровно один; остальные набраны руками и значат пустые строки — отбросив
+// их, редактор показывал бы строку, которой в значении нет. У всего значения хвост уберёт trim().
 function trimTrailingBreaks(inline: string, storage: FormatStorage): string {
-	return storage === "html" ? inline.replace(/(?:<br>)+$/, "") : inline.replace(/\n+$/, "");
+	return storage === "html" ? inline.replace(/<br>$/, "") : inline.replace(/\n$/, "");
 }
 
 // Разбивает верхний уровень на блоки: у каждого свой тип, у не попавшего в блок содержимого —
@@ -157,6 +182,11 @@ function serializeParagraphs(
 
 	const cleaned = blocks.map(([type, text]) => [type, trimTrailingBreaks(text, storage)] as const);
 
+	// Пустые блоки в хвосте в значение не идут: последний из них — место каретки, оставленное
+	// нормализацией (см. normalizeParagraphs), а не строка сообщения. В markdown его срезал бы
+	// trim всего значения — html обрезаем здесь, чтобы форматы хранения не расходились.
+	while (cleaned.length && !cleaned[cleaned.length - 1][1]) cleaned.pop();
+
 	if (storage === "html")
 		return cleaned
 			.map(([type, text]) => {
@@ -220,8 +250,17 @@ export function serialize(
 	return inline.replace(/^\n+/, "").replace(/\n+$/, "").trim();
 }
 
-/** Инструмент, его маркер и признак «содержимое не может начинаться/заканчиваться самим маркером». */
-type MarkerRule = [tool: FormatTool, marker: string, standalone: boolean];
+/** Правило разбора одного маркера. */
+interface MarkerRule {
+	tool: FormatTool;
+	marker: string;
+	/** Содержимое не может начинаться и заканчиваться символом самого маркера. */
+	standalone: boolean;
+	/** Символ маркера не считается границей: маркер не собирается из половинок длинного. */
+	guarded: boolean;
+	/** Маркер настроенный, а не из чужого диалекта. */
+	own: boolean;
+}
 
 /**
  * Маркеры в порядке применения: длинный (`__`) раньше короткого-префикса (`_`), иначе
@@ -234,20 +273,47 @@ type MarkerRule = [tool: FormatTool, marker: string, standalone: boolean];
  * подчёркивания. Так же поступают паттерны конвертеров.
  */
 function orderedMarkers(tools: FormatTool[], markers: FormatMarkers): MarkerRule[] {
-	const active = tools.filter((tool) => markers[tool]).sort((a, b) => markers[b].length - markers[a].length);
-
-	return active.map((tool) => {
-		const marker = markers[tool];
-		const hasShorterPrefix = active.some((other) => {
-			const value = markers[other];
-			return value.length < marker.length && marker.startsWith(value);
-		});
+	const active = tools.filter((tool) => markers[tool]);
+	const rules: Array<[FormatTool, string, boolean]> = active.map((tool) => [tool, markers[tool], true]);
+	const taken = new Set(rules.map(([, marker]) => marker));
+
+	// Чужие диалекты того же инструмента: запасные маркеры из реестра и его собственный, если
+	// настройка его заменила. Разбираются наравне, а ставится всегда настроенный — см. markdownInline.
+	for (const tool of active)
+		for (const alias of MARKER_ALIASES[tool])
+			if (!taken.has(alias)) {
+				taken.add(alias);
+				rules.push([tool, alias, false]);
+			}
 
-		return [tool, marker, hasShorterPrefix];
-	});
+	const all = Array.from(taken);
+
+	return rules
+		.sort((a, b) => b[1].length - a[1].length)
+		.map(([tool, marker, own]) => ({
+			tool,
+			marker,
+			own,
+			standalone: all.some((value) => value.length < marker.length && marker.startsWith(value)),
+			guarded: all.some((value) => value.length > marker.length && value.startsWith(marker)),
+		}));
 }
 
-const TAG = /<(\/?)([a-z]+)>/g;
+/**
+ * Маркеры инструмента, объявленные в реестре: свой и запасные. Собираются один раз — их
+ * спрашивают и на каждый разбор, и на каждый размеченный элемент при сериализации.
+ */
+const MARKER_ALIASES: Record<FormatTool, string[]> = ALL_FORMAT_TOOLS.reduce(
+	(map, tool) => {
+		const def = FORMAT_TOOLS[tool];
+		map[tool] = [def.md, ...(def.mdAliases ?? [])].filter(Boolean);
+
+		return map;
+	},
+	{} as Record<FormatTool, string[]>
+);
+
+const TAG = /<(\/?)([a-z-]+)(?:\s[^>]*)?>/g;
 
 /**
  * Закрыт ли в содержимом каждый тег, который в нём открыт.
@@ -285,28 +351,34 @@ function markdownInline(text: string, order: MarkerRule[]): string {
 
 	// Код — первым: внутри него `*звёздочки*` остаются текстом, как у мессенджеров. Иначе
 	// содержимое кода размечалось бы, и то, что человек написал буквально, уезжало бы жирным.
-	const stash: string[] = [];
-	const code = order.find(([tool]) => tool === "code");
-	if (code) {
-		html = html.replace(markerPattern(code[1], code[2]), (_match, lead: string, inner: string) => {
-			stash.push(inner);
-
-			return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
-		});
-	}
-
-	for (const [tool, marker, standalone] of order) {
-		if (tool === "code") continue; // уже вынесен
-
-		const def = FORMAT_TOOLS[tool];
-		html = html.replace(markerPattern(marker, standalone), (match, lead: string, inner: string) =>
-			balancedTags(inner) ? `${lead}<${def.tag}>${inner}</${def.tag}>` : match
+	const stash: Array<[inner: string, marked: 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]);
+
+				return `${lead}${STASH_MARK}${stash.length - 1}${STASH_MARK}`;
+			});
+
+	for (const rule of order) {
+		if (rule.tool === "code") continue; // уже вынесен
+		// Разбор идёт по абзацу на каждый маркер, а маркеров с диалектами уже семь. Поиск
+		// подстроки на порядок дешевле разбора регуляркой, и почти всегда он же и решает.
+		if (!html.includes(rule.marker)) continue;
+
+		const def = FORMAT_TOOLS[rule.tool];
+		html = html.replace(pattern(rule), (match, lead: string, inner: string) =>
+			balancedTags(inner) ? `${lead}${openTag(def.tag, rule.own ? "" : rule.marker)}${inner}</${def.tag}>` : match
 		);
 	}
 
 	if (stash.length) {
 		const def = FORMAT_TOOLS.code;
-		html = html.replace(STASH_PATTERN, (_match, index: string) => `<${def.tag}>${stash[+index]}</${def.tag}>`);
+		html = html.replace(STASH_PATTERN, (_match, index: string) => {
+			const [inner, marked] = stash[+index];
+
+			return `${openTag(def.tag, marked)}${inner}</${def.tag}>`;
+		});
 	}
 
 	// переносы — после маркеров: пока это \n, запрет на пересечение строки работает
@@ -328,26 +400,41 @@ function markdownInline(text: string, order: MarkerRule[]): string {
  * Содержимое не начинается и с U+20E3: в keycap-последовательностях (`*⃣`, `#⃣`, `1⃣`) сам
  * маркер служит базовым символом, и без этого `*⃣раз*` разбиралось бы как разметка вместо эмодзи.
  *
- * При `standalone` содержимое дополнительно не начинается и не заканчивается символом самого
- * маркера — см. {@link orderedMarkers}.
+ * При `standalone` содержимое не начинается и не заканчивается символом самого маркера, при
+ * `guarded` этот символ вдобавок перестаёт быть границей. Так разводятся маркеры, один из
+ * которых начинается с другого (`_` и `__`, `*` и `**`) — см. {@link orderedMarkers}.
  */
-function markerPattern(marker: string, standalone: boolean): RegExp {
-	const key = standalone ? `${marker}` : marker;
+function pattern(rule: MarkerRule): RegExp {
+	const { marker, standalone, guarded } = rule;
+	// в ключе различаем режимы: один и тот же маркер бывает разведён по-разному
+	const key = `${marker}|${standalone ? "s" : ""}${guarded ? "g" : ""}`;
 
-	let pattern = markerPatterns.get(key);
-	if (pattern) return pattern;
+	const cached = markerPatterns.get(key);
+	if (cached) return cached;
 
 	const escaped = escapeRegExp(marker);
-	const boundary = "[^\\p{L}\\p{N}]";
 	// символ маркера в классе — экранируем то, что в нём значимо
-	const own = standalone ? marker.slice(-1).replace(/[\\\]^-]/g, "\\$&") : "";
-	const head = `[^\\s\\u20e3${own}]`;
-	const tail = standalone ? `[^\\s${own}]` : "\\S";
+	const own = marker.slice(-1).replace(/[\\\]^-]/g, "\\$&");
+	const edge = standalone || guarded ? own : "";
+	// Границей символ маркера перестаёт быть только у короткого. Длинному она нужна: в
+	// `___текст___` его пара стоит рядом со своим же символом, и без границы её не найти.
+	const boundary = `[^\\p{L}\\p{N}${guarded ? own : ""}]`;
+	const head = `[^\\s\\u20e3${edge}]`;
+	const tail = edge ? `[^\\s${edge}]` : "\\S";
+
+	const built = new RegExp(
+		`(^|${boundary})${escaped}(${head}|${head}[^\\n]*?${tail})${escaped}(?=$|${boundary})`,
+		"gu"
+	);
+	markerPatterns.set(key, built);
 
-	pattern = new RegExp(`(^|${boundary})${escaped}(${head}|${head}[^\\n]*?${tail})${escaped}(?=$|${boundary})`, "gu");
-	markerPatterns.set(key, pattern);
+	return built;
+}
 
-	return pattern;
+/** Открывающий тег: чужой маркер запоминается на элементе, чтобы значение вернулось таким же. */
+function openTag(tag: string, marked: string): string {
+	// маркер задаёт хост — в значении атрибута экранируем и кавычку, иначе она разорвёт его
+	return marked ? `<${tag} ${MARKER_ATTR}="${escapeHtml(marked).replace(/"/g, "&quot;")}">` : `<${tag}>`;
 }
 
 // Набор маркеров за разбор не меняется, а разбор идёт по абзацам — компилируем каждую
@@ -380,7 +467,11 @@ export function deserialize(
 				const def = BLOCK_TYPES[type];
 				const inner = def.inline ? markdownInline(text, order) : escapeHtml(text).replace(/\n/g, "<br>");
 
-				return `<${def.tag}>${inner || "<br>"}</${def.tag}>`;
+				// Пустая последняя строка видна только с заполнителем: без него браузер не рисует
+				// её и не пускает туда каретку — строка, которая в значении есть, пропала бы.
+				const filler = inner.endsWith("<br>") ? "<br>" : "";
+
+				return `<${def.tag}>${inner ? inner + filler : "<br>"}</${def.tag}>`;
 			})
 			.join("");
 	}

package/source/toolbar.ts

@@ -60,8 +60,8 @@ const MERGED_CODE_TITLE = "Код";
 // Временно скрытые кнопки. Сами возможности работают: значение разбирается, показывается
 // и сохраняется, правку можно вызвать из кода — в панель они просто не выводятся.
 // Убрать отсюда, когда будут доведены.
-const HIDDEN_TOOLS: FormatTool[] = ["spoiler", "code"];
-const HIDDEN_BLOCKS: BlockType[] = ["code"];
+const HIDDEN_TOOLS: FormatTool[] = ["spoiler"];
+const HIDDEN_BLOCKS: BlockType[] = [];
 
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
 export const EMOJI_PICKER_CLASS = "ui-richeditor-emoji";
@@ -92,8 +92,12 @@ export interface ToolbarHost {
 	readonly editorActions?: EditorAction[];
 	/** Контейнер для тулбара; null/undefined — document.body (position: fixed над редактором). */
 	readonly toolbarContainer?: HTMLElement | null;
-	/** Типы блоков многострочного режима; пусто/undefined — кнопок блоков нет. */
-	readonly blockTypes?: BlockType[];
+	/**
+	 * Типы блоков, которые панель вправе предложить; пусто/undefined — кнопок блоков нет.
+	 * Не то же, что набор для разбора значения: показывать цитату и код редактор обязан
+	 * и там, где их не переключить (только для чтения).
+	 */
+	readonly blockTools?: BlockType[];
 	applyFormat(tool: FormatTool): void;
 	isToolActive(tool: FormatTool): boolean;
 	/** false — инструмент сейчас недоступен (например, внутри кода): кнопка гасится. */
@@ -112,6 +116,14 @@ export interface ToolbarHost {
 	isActionEnabled?(action: EditorAction): boolean;
 	/** Вставка текста в каретку — для панели смайликов. */
 	insertText?(text: string): void;
+	/**
+	 * Открыть панель смайликов. Своя кнопка панели зовёт редактор, а не {@link openEmoji}
+	 * напрямую: он придерживает правку и отпускает фокус на её время — с кнопкой хоста это
+	 * должно работать одинаково.
+	 */
+	openEmojiPicker?(initiator: HTMLElement, container: HTMLElement): void;
+	/** Панель смайликов закрылась — редактор возвращает себе то, что придержал на её время. */
+	onEmojiClosed?(): void;
 	/** Собственные кнопки хоста; пусто/undefined — только штатные. */
 	readonly toolbarButtons?: ToolbarButton[];
 }
@@ -222,7 +234,7 @@ class FormatToolbar {
 		const buttons = host.toolbarButtons ?? [];
 		const tools = host.formatTools.filter((tool) => !HIDDEN_TOOLS.includes(tool));
 		// Обычный текст кнопки не имеет — он не «включается», а остаётся, когда выключены остальные.
-		const blocks = (host.blockTypes ?? []).filter(
+		const blocks = (host.blockTools ?? []).filter(
 			(type) => type !== DEFAULT_BLOCK && !HIDDEN_BLOCKS.includes(type)
 		);
 		if (!tools.length && !blocks.length && !actions.length && !buttons.length) return;
@@ -258,6 +270,15 @@ class FormatToolbar {
 		}
 	}
 
+	/**
+	 * Убрать панель с экрана, не отпуская редактор: он отдал фокус своему слою — окну или панели
+	 * смайликов. От {@link detach} отличается тем, что панель смайликов при этом остаётся: её и
+	 * открыли из этого редактора, а фокус сняли как раз ради неё.
+	 */
+	suspend(host: ToolbarHost) {
+		if (this.__active === host) this.__hide();
+	}
+
 	/** Скрыть тулбар, если он обслуживает этот редактор (на blur/destroy). */
 	detach(host: ToolbarHost) {
 		// Придержанный показ снимаем первым делом, до закрытия панели: иначе её onClose поднял бы
@@ -394,16 +415,6 @@ class FormatToolbar {
 		this.__mergedCode = tools.includes(CODE_TOOL) && blocks.includes(CODE_BLOCK);
 		const blockTypes = this.__mergedCode ? blocks.filter((type) => type !== CODE_BLOCK) : blocks;
 
-		// Разделитель ставится только между непустыми группами — иначе панель начиналась бы
-		// с линии или показывала две подряд.
-		let filled = false;
-		const separate = (group: unknown[]) => {
-			if (filled && group.length) elem.appendChild(DOM.tag("div", { class: "split" }));
-			filled ||= group.length > 0;
-		};
-
-		separate(tools);
-
 		for (const tool of tools) {
 			const merged = this.__mergedCode && tool === CODE_TOOL;
 			const def = FORMAT_TOOLS[tool];
@@ -425,8 +436,6 @@ class FormatToolbar {
 			this.__buttons.push([tool, btn]);
 		}
 
-		separate(blockTypes);
-
 		for (const type of blockTypes) {
 			const def = BLOCK_TYPES[type];
 			const btn = DOM.tag(
@@ -440,8 +449,6 @@ class FormatToolbar {
 			this.__blockButtons.push([type, btn]);
 		}
 
-		separate(actions);
-
 		for (const action of actions) {
 			const def = EDITOR_ACTIONS[action];
 			const btn = DOM.tag(
@@ -456,7 +463,11 @@ class FormatToolbar {
 			this.__actionButtons.push([action, btn]);
 		}
 
-		separate(buttons);
+		// Инструменты, блоки и действия — одна группа: всё это правка оформления. Разделитель
+		// нужен только перед кнопками хоста: они про другое — переменные, рандомизацию и прочее
+		// доменное. Пустых групп разделитель не касается, иначе панель начиналась бы с линии.
+		if (buttons.length && (tools.length || blockTypes.length || actions.length))
+			elem.appendChild(DOM.tag("div", { class: "split" }));
 
 		// кнопки хоста — последними, чтобы штатные не переезжали при их появлении
 		for (const button of buttons) {
@@ -485,7 +496,7 @@ class FormatToolbar {
 	 * закрытия на body прямо в open(), то есть во время этого же клика — до body событие ещё
 	 * не дошло, и слушатель закрыл бы панель сразу после открытия.
 	 */
-	openEmoji(host: ToolbarHost, initiator: HTMLElement, container: HTMLElement) {
+	openEmoji(host: ToolbarHost, initiator: HTMLElement, container: HTMLElement): boolean {
 		// повторный клик по той же кнопке закрывает панель (это делает toggle внутри PopupManager),
 		// а вот у другой кнопки её нужно сперва закрыть — иначе toggle сочтёт открытие повторным
 		if (this.__emojiInitiator !== initiator && this.__emojiPicker?.classList.contains("opened"))
@@ -504,7 +515,17 @@ class FormatToolbar {
 			if (this.__active === host) this.__hide();
 		}
 
-		PopupManager.open(this.__ensureEmojiPicker(container), { initiator, onClose: () => this.__resume() });
+		PopupManager.open(this.__ensureEmojiPicker(container), {
+			initiator,
+			onClose: () => {
+				this.__resume();
+				host.onEmojiClosed?.();
+			},
+		});
+
+		// Повторное нажатие по той же кнопке панель закрывает (это toggle внутри PopupManager) —
+		// вызывающему нужно знать исход: открытая панель ещё и придерживает правку редактора.
+		return !!this.__emojiPicker?.classList.contains("opened");
 	}
 
 	/** Панель смайликов закрылась — показываем придержанный тулбар, если редактор ещё в фокусе. */
@@ -521,7 +542,12 @@ class FormatToolbar {
 	private __toggleEmoji(initiator: HTMLButtonElement, e: MouseEvent) {
 		e.stopPropagation();
 
-		if (this.__active) this.openEmoji(this.__active, initiator, this.__ensure());
+		const host = this.__active;
+		if (!host) return;
+
+		// через редактор, а не напрямую: панель — его слой, и придерживает правку он
+		if (host.openEmojiPicker) host.openEmojiPicker(initiator, this.__ensure());
+		else this.openEmoji(host, initiator, this.__ensure());
 	}
 
 	private __ensureEmojiPicker(container: HTMLElement): HTMLElement {