@brandup/ui-richeditor 1.0.49 → 1.0.50

package/README.md

@@ -39,6 +39,8 @@ editor.onChange(({ value }) => console.log(value));
 
 По умолчанию панель живёт в `document.body` (`position: fixed`) — это защищает её от обрезки `overflow: hidden` у родителей. Если задан `toolbarContainer`, панель монтируется в него и позиционируется относительно него (`position: absolute`, над контейнером) — например, `TextBox` передаёт свой контейнер `.ui-textbox`.
 
+Панель не шире экрана (и не шире контейнера в режиме `toolbarContainer`), а правый край не уходит за границу: у поля справа она прижимается к краю экрана. Полный набор кнопок, не влезший по ширине — обычное дело на телефоне, — прокручивается внутри `.toolbar-body` по горизонтали: кнопки не переносятся и не прячутся, панель остаётся в одну строку. Полоса прокрутки — общая, от `.ui-scrollable` кита, только тоньше.
+
 ## Опции (`RichEditorOptions`)
 
 | Опция | Тип | Описание |
@@ -102,6 +104,8 @@ editor.onChange(({ value }) => console.log(value));
 | `openEmojiPicker(picker, initiator): boolean` | Показать переданный попап смайликов у кнопки; false — этим нажатием он закрылся |
 | `selection: Selection \| null` | Выделение, если оно внутри редактора (иначе `null`) — единая точка доступа для хоста |
 | `selectNode(node): void` | Выделить узел внутри редактора: следующая вставка заменит его целиком |
+| `caretWord: string` | Слово под кареткой; пусто при своём выделении, без каретки или когда каретка не в слове |
+| `selectCaretWord(): boolean` | Выделить слово под кареткой — следующая вставка встанет на его место; `false` — выделять нечего |
 | `onChange(handler)` | Подписка на событие `richeditor-change` |
 | `destroy(): void` | Разворачивает элемент обратно и освобождает ресурсы |
 
@@ -130,6 +134,7 @@ editor.onChange(({ value }) => console.log(value));
 
 - Формат — переключатель (toggle): повторное применение снимает его.
 - Применяется к слову целиком: курсор внутри слова или выделение его части → формат охватывает всё слово; исходное выделение/каретка сохраняются.
+- Слово — то, что стоит между пробелами, **без небуквенных знаков по краям**: каретка в слове перед точкой не отдаёт форматированию точку. Внутренние знаки — часть слова: `info@example.com`, `по-русски`, `don't` берутся целиком. Слово не кончается на границе тега (`Дарим <b>ск</b>идку` — одно слово «скидку»), но не пересекает перенос строки и готовую конструкцию (`contenteditable="false"`). Каретка вне слова (сразу за точкой) не расширяется никуда — включается режим набора. Явное выделение только растёт: выделенные знаки из него не выпадают.
 - **Режим набора**: на пустом месте (между пробелами / в пустом поле) кнопка/хоткей включают «ожидающий» формат — он применится к следующему введённому тексту. Сбрасывается при перемещении каретки, клике или потере фокуса.
 - Хоткеи `Ctrl/Cmd+B/I/U` и `Ctrl/Cmd+K` (ссылка — показывает в панели поле адреса). Зачёркивание — только кнопкой.
 - **Отмена/повтор**: `Ctrl/Cmd+Z` — отмена, `Ctrl+Y` или `Ctrl/Cmd+Shift+Z` — повтор. История форматирования, абзацев, переносов и печати ведётся редактором (нативный undo не видит ручных DOM-правок), поэтому **доступна только при включённом форматировании** (`format: true`). Печать коалесится в один шаг отмены по паузе ~300 мс; глубина истории — 100 шагов, но не более ~512 КБ снимков суммарно (снимок — это всё содержимое редактора, поэтому на длинном тексте старые шаги вытесняются раньше).
@@ -166,6 +171,8 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 Попап — слой над полем, поэтому показывает его редактор (`openEmojiPicker()`): на время работы он придерживает правку, чтобы нормализация не обрезала пробел у каретки. Хост со своей кнопкой собирает попап сам и передаёт его сюда — так делает [`@brandup/ui-messageeditor`](../brandup-ui-messageeditor).
 
+Первой группой в списке стоят **недавние** (`.emoji-recent`) — до двух рядов последних выбранных символов, свежий первым. Хранятся они в `localStorage` (ключ `RECENT_EMOJIS_KEY`), поэтому общие для всех попапов источника и переживают перезагрузку; пока ничего не выбрано — группы нет вовсе. Освежает её `openEmojiPicker()` при каждом показе: попап живёт между открытиями, а хранилище тем временем пополняют и другие попапы. Запоминается сам выбор, а не вставка — недавние про то, к чему тянутся. Недоступное хранилище (приватный режим) вставке не мешает — недавние просто не копятся. Пакет экспортирует `recentEmojis()`, `rememberEmoji()` и `refreshRecentEmojis(picker)` — хосту с собственным показом попапа освежать группу нужно самому.
+
 ## Многострочный режим: абзацы и переносы
 
 При `multiline: true` контент структурируется по абзацам:
@@ -200,7 +207,9 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
 
-Кнопка спойлера временно скрыта (`HIDDEN_TOOLS` в `./toolbar`): сам инструмент работает — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`), — но в панель он пока не выводится.
+Цитата рисуется плашкой по ширине содержимого, прижатой к левому краю: с подложкой пустое место справа от короткой строки читалось бы её частью. Длинная цитата переносится по границе редактора. Цвета и отступы задаются переменными `--richeditor-quote-*` (см. «CSS»).
+
+Открывающая ограда в чужом маркдауне часто приходит с меткой языка (```` ```text ````) — блок она открывает так же, а сама метка отбрасывается: значение кита её не хранит, обратно уезжает голая ограда. Закрывает блок только голая ограда — та же строка с меткой внутри блока остаётся его содержимым.
 
 ### Ссылка
 
@@ -219,7 +228,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 | | |
 | --- | --- |
 | Выделение | становится ссылкой |
-| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов |
+| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов; знаки внутри — часть слова, поэтому адрес или почта оборачиваются целиком |
 | Каретка в готовой ссылке | меняется её адрес — целиком, а не по куску выделения |
 | Каретка вне слова | кнопка недоступна: оборачивать нечего |
 
@@ -264,13 +273,21 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 - **multiline** сохраняет абзацы `<p>` и мягкие переносы `<br>`, разбивая текущий абзац по каретке; **single-line** — инлайн, абзацы/переносы становятся пробелами;
 - хук `filterPaste` остаётся в силе: вернул `null` — вставка отклоняется; изменил текст (обрезка по длине, фильтр по типу) — форматирование не сохраняется, вставляется очищенный текст.
 
-Если `text/html` нет (или форматирование выключено), вставляется простой текст — по той же модели абзацев:
+При `storage: "markdown"` разметку сохраняет и вставка простого текста: раз значение хранится этой разметкой, маркеры во вставляемом тексте значат то же, что в значении, и разбираются тем же `deserialize` — с теми же наборами инструментов и блоков. Ограничение действует и здесь: **при любой вставке применяется только включённый формат** — маркер снятого инструмента остаётся текстом, как остался бы и в значении. Изменённый хуком `filterPaste` текст вставляется буквально, а внутри блока кода текст литерален всегда.
+
+`text/html` точнее описывает скопированное, но лишь когда несёт собственную разметку. Голый текст тоже приезжает html-ем — редакторы кода отдают исходник маркдауна строками в `<div>` внутри общей обёртки, — и такой «плоский» html не знает ничего сверх `text/plain`, а маркеры в тексте понимает только разбор разметкой хранения: при плоском html первым идёт он. Границы строк-`<div>` при этом становятся переносами — склейка соседних строк встык потеряла бы и текст, и разметку.
+
+Если `text/html` нет (или форматирование выключено), а разбирать маркеры не по чему, вставляется простой текст — по той же модели абзацев:
 
 - **multiline**, режим `block` — пустая строка разделяет абзацы `<p>`, одиночный перенос остаётся мягким `<br>`;
 - **multiline**, режим `break` — абзацы не создаются, все переносы мягкие;
 - **single-line** — строки склеиваются пробелами.
 
-Каретка в обоих случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
+Каретка во всех случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
+
+### Бросок файла
+
+Текстовый файл, брошенный в редактор, вставляется содержимым — тем же путём, что вставка из буфера: хук `filterPaste`, разбор разметкой хранения включённым набором, один шаг истории. Текстовым считается файл с типом `text/*`, а без типа — `.md`/`.markdown`/`.txt`/`.text` по имени: у маркдауна тип в системе часто не зарегистрирован. Несколько файлов вставляются подряд через пустую строку. Каретка встаёт в точку броска, если браузер умеет её назвать (`caretPositionFromPoint`/`caretRangeFromPoint`). Любой другой бросок гасится: свободное перетаскивание прошло бы мимо истории и фильтров хоста.
 
 ## Формат хранения
 
@@ -302,6 +319,10 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 | Переменная | По умолчанию | Что задаёт |
 | --- | --- | --- |
 | `--richeditor-quote-line` | `rgba(0,0,0,.2)` | Линия слева у цитаты |
+| `--richeditor-quote-line-width` | `3px` | Толщина линии цитаты |
+| `--richeditor-quote-fill` | `rgba(0,0,0,.04)` | Подложка цитаты |
+| `--richeditor-quote-padding-tb` | `5px` | Вертикальный отступ цитаты — тот же, что у абзаца, чтобы строка не прыгала при смене типа блока |
+| `--richeditor-quote-padding-lr` | `10px` | Горизонтальный отступ цитаты — насколько текст отходит от линии и от края подложки |
 | `--richeditor-code-fill` | `rgba(0,0,0,.06)` | Подложка кода — и моноширинного, и блока |
 | `--richeditor-code-font` | `ui-monospace, …` | Шрифт кода |
 | `--richeditor-spoiler-fill` | `rgba(0,0,0,.14)` | Плашка спойлера |
@@ -312,6 +333,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 | `--richeditor-underline-room` | `2px` | Место под подчёркивание последней строки: рисуется оно ниже текста, но в раскладке места не занимает, и без запаса его срезает край прокручиваемой коробки |
 | `--richeditor-toolbar-padding` | `3px` | Поля панели |
 | `--richeditor-toolbar-button-size` | `34px` | Кнопка панели; по ней же высота поля адреса |
+| `--richeditor-toolbar-edge-gap` | `4px` | Зазор панели от краёв экрана; то же значение зашито константой в позиционировании (`EDGE_GAP`), менять их нужно вместе |
 | `--richeditor-emoji-size` | `32px` | Ячейка в панели смайликов |
 | `--richeditor-emoji-rows` | `8` | Запасная высота нарисованной не сразу группы; своё значение панель ставит на каждую группу |
 

package/package.json

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

package/source/editing.ts

@@ -519,29 +519,173 @@ export function sanitizePastedHtml(
 	return paras;
 }
 
+/**
+ * Несёт ли разобранная вставка собственную разметку: блок не-абзац либо инлайновый тег — кроме
+ * `<br>`, перенос есть и в простом тексте. Плоская вставка не знает ничего сверх `text/plain`:
+ * так выглядит скопированный из редактора кода исходник — голые строки в `<div>`.
+ */
+export function hasPastedMarkup(paras: HTMLElement[]): boolean {
+	return paras.some(
+		(p) => p.tagName !== "P" || Array.from(p.querySelectorAll("*")).some((el) => el.tagName !== "BR")
+	);
+}
+
+/**
+ * Похож ли сырой html буфера на документ, а не на обёртку вокруг голых строк. Смотрим на сырой
+ * html, потому что санитизация разницу стирает: и строки-`<div>` из редактора кода, и абзацы
+ * веб-страницы выходят из неё одинаковыми `<p>`. А разница решает, чей разбор первый: в документе
+ * маркеры в тексте — буквальные символы, которые видит и читатель страницы, в голых строках —
+ * разметка хранения.
+ */
+export function isDocumentHtml(html: string): boolean {
+	const holder = document.createElement("template");
+	holder.innerHTML = html;
+
+	return !!holder.content.querySelector("p, h1, h2, h3, h4, h5, h6, li, table");
+}
+
+/**
+ * Разбирает простой текст из буфера как markdown — для редакторов, хранящих значение этой
+ * разметкой: маркеры во вставляемом тексте значат то же, что в значении, и разбираются тем же
+ * `deserialize` с теми же наборами. Пустой результат — вставлять нечего (вызывающий откатится
+ * на простой текст).
+ *
+ * В отличие от {@link sanitizePastedHtml}, пробелы не схлопываются: это текст, а не вёрстка —
+ * переносы и отступы в нём и так значат сами себя.
+ */
+export function parsePastedMarkdown(
+	text: string,
+	tools: FormatTool[],
+	markers: FormatMarkers,
+	types: BlockType[] = [DEFAULT_BLOCK],
+	separate = true
+): HTMLElement[] {
+	const holder = document.createElement("template");
+	holder.innerHTML = deserialize(text, "markdown", tools, markers, true, types, separate);
+
+	return Array.from(holder.content.children) as HTMLElement[];
+}
+
+// Слово — буквы и цифры любого алфавита плюс подчёркивание. \w здесь не годится: он знает
+// только латиницу, и кириллическое слово по нему словом не будет.
+const WORD_CHAR = /[\p{L}\p{N}_]/u;
+
+const isWordChar = (ch: string | undefined) => !!ch && WORD_CHAR.test(ch);
+
+/** Кусок текстового потока блока: текстовый узел и его начало в общей строке. */
+type StreamPart = { node: Text; start: number };
+
+/**
+ * Текстовый поток блока, в котором стоит узел: текст его текстовых узлов одной строкой плюс
+ * карта соответствия. Слово не кончается на границе узла — «сло<b>во</b>» это одно слово,
+ * и расширение обязано её пересекать. Пересекать нельзя другое:
+ *  - переносы строк (<br>) — слова по разные стороны переноса разные, в поток идёт разделитель;
+ *  - готовые конструкции (contenteditable="false" — переменные и спинтакс messageeditor):
+ *    они атомарны и правятся своим окном, расширению внутри них делать нечего.
+ */
+function blockStream(editable: HTMLElement, node: Node): { text: string; parts: StreamPart[] } {
+	// Блок — прямой потомок редактора (p, blockquote, pre); текст без блоков лежит в нём самом
+	let root: Node = node;
+	while (root.parentNode && root.parentNode !== editable) root = root.parentNode;
+	if (!root.parentNode) root = editable; // узел вне редактора — поток по самому редактору не собрать
+	const scope = root.nodeType === Node.ELEMENT_NODE ? (root as HTMLElement) : editable;
+
+	let text = "";
+	const parts: StreamPart[] = [];
+
+	const walk = (current: Node) => {
+		if (current.nodeType === Node.TEXT_NODE) {
+			parts.push({ node: current as Text, start: text.length });
+			text += current.textContent ?? "";
+			return;
+		}
+		if (current.nodeType !== Node.ELEMENT_NODE) return;
+		const elem = current as HTMLElement;
+		if (elem.tagName === "BR" || elem.getAttribute("contenteditable") === "false") {
+			text += "\n"; // разделитель: слово через перенос или конструкцию не перепрыгивает
+			return;
+		}
+		for (const child of Array.from(elem.childNodes)) walk(child);
+	};
+	walk(scope);
+
+	return { text, parts };
+}
+
+/** Позиция в потоке → узел и смещение. Позиция всегда из этого же потока, место найдётся. */
+function streamPoint(parts: StreamPart[], position: number): [Text, number] {
+	let holder = parts[0];
+	for (const part of parts) {
+		if (part.start > position) break;
+		holder = part;
+	}
+	return [holder.node, Math.min(position - holder.start, holder.node.textContent?.length ?? 0)];
+}
+
 /**
  * Диапазон, расширенный до целых слов на границах (для применения формата к слову целиком).
  * Возвращает новый Range и не трогает выделение — вызывающий сам решает, править ли по нему
  * и когда двигать каретку.
+ *
+ * Слово — то, что стоит между пробелами, без небуквенных знаков по краям: внутренние знаки
+ * остаются его частью («info@example.com», «по-русски»), а точка после слова — нет. Иначе
+ * каретка в слове перед точкой отдавала бы форматированию и точку, которую туда не просили.
+ * Явное выделение только растёт: выделенное вместе со знаками таким и останется. Каретка
+ * не в слове вовсе (сразу за точкой) не расширяется никуда — схлопнутый диапазон редактор
+ * понимает как «формат для того, что будут набирать».
  */
 export function expandRangeToWords(editable: HTMLElement, range: Range): Range {
 	const { startContainer, endContainer } = range;
-	let startOffset = range.startOffset;
-	let endOffset = range.endOffset;
 
-	if (startContainer.nodeType === Node.TEXT_NODE && editable.contains(startContainer)) {
-		const text = startContainer.textContent ?? "";
-		while (startOffset > 0 && !/\s/.test(text[startOffset - 1])) startOffset--;
+	const expanded = document.createRange();
+	expanded.setStart(startContainer, range.startOffset);
+	expanded.setEnd(endContainer, range.endOffset);
+
+	const expandIn = (container: Node, offset: number): { parts: StreamPart[]; from: number; to: number } | null => {
+		if (container.nodeType !== Node.TEXT_NODE || !editable.contains(container)) return null;
+
+		const { text, parts } = blockStream(editable, container);
+		const part = parts.find((candidate) => candidate.node === container);
+		if (!part) return null;
+		const position = part.start + offset;
+
+		// до пробелов…
+		let from = position;
+		let to = position;
+		while (from > 0 && !/\s/.test(text[from - 1])) from--;
+		while (to < text.length && !/\s/.test(text[to])) to++;
+
+		// …и без небуквенных знаков по краям
+		while (from < to && !isWordChar(text[from])) from++;
+		while (to > from && !isWordChar(text[to - 1])) to--;
+
+		return { parts, from, to };
+	};
+
+	const start = expandIn(startContainer, range.startOffset);
+	const end = range.collapsed ? start : expandIn(endContainer, range.endOffset);
+
+	if (range.collapsed) {
+		// каретка стоит вне слова (за точкой) — расширять нечего
+		if (!start || start.from >= start.to) return expanded;
+		const position = start.parts.find((part) => part.node === startContainer)!.start + range.startOffset;
+		if (position < start.from || position > start.to) return expanded;
+
+		expanded.setStart(...streamPoint(start.parts, start.from));
+		expanded.setEnd(...streamPoint(start.parts, start.to));
+		return expanded;
 	}
 
-	if (endContainer.nodeType === Node.TEXT_NODE && editable.contains(endContainer)) {
-		const text = endContainer.textContent ?? "";
-		while (endOffset < text.length && !/\s/.test(text[endOffset])) endOffset++;
+	// выделение только растёт: правая часть слова добирается, выделенные знаки не выпадают
+	if (start && start.from < start.to) {
+		const [node, offset] = streamPoint(start.parts, start.from);
+		if (expanded.comparePoint(node, offset) < 0) expanded.setStart(node, offset);
+	}
+	if (end && end.from < end.to) {
+		const [node, offset] = streamPoint(end.parts, end.to);
+		if (expanded.comparePoint(node, offset) > 0) expanded.setEnd(node, offset);
 	}
 
-	const expanded = document.createRange();
-	expanded.setStart(startContainer, startOffset);
-	expanded.setEnd(endContainer, endOffset);
 	return expanded;
 }
 

package/source/emoji.ts

@@ -164,6 +164,97 @@ function buildEmojiGroup(group: EmojiGroup): HTMLElement {
 	return elem;
 }
 
+// --- недавние ---
+
+/** Ключ localStorage со списком недавних смайликов — один на все попапы источника. */
+export const RECENT_EMOJIS_KEY = "brandup-richeditor-recent-emojis";
+
+/** Группа недавних в попапе: стоит первой и пересобирается из хранилища при каждом открытии. */
+export const RECENT_GROUP_CLASS = "emoji-recent";
+
+/** Сколько недавних хранится и показывается: два ряда панели. */
+export const RECENT_EMOJIS_LIMIT = EMOJI_COLUMNS * 2;
+
+// в панели название не показывается, уходит в подпись для скринридера — как у остальных групп
+const RECENT_TITLE = "Недавние";
+
+const KNOWN_EMOJIS = new Set(EMOJIS);
+
+/**
+ * Недавно вставленные смайлики, свежий первым.
+ *
+ * Хранилище общее и переживает версии пакета, поэтому список чистится до символов, которые
+ * панель действительно показывает: мусор и дубликаты отбрасываются. Недоступное или битое
+ * хранилище (приватный режим, правленое руками значение) — это пустой список, а не ошибка.
+ */
+export function recentEmojis(): string[] {
+	let raw: string | null;
+	try {
+		raw = localStorage.getItem(RECENT_EMOJIS_KEY);
+	} catch {
+		return [];
+	}
+	if (!raw) return [];
+
+	let parsed: unknown;
+	try {
+		parsed = JSON.parse(raw);
+	} catch {
+		return [];
+	}
+	if (!Array.isArray(parsed)) return [];
+
+	// Set сохраняет порядок вставки, а повторное add место не меняет — первый и остаётся
+	const recent = new Set<string>();
+	for (const item of parsed) {
+		if (typeof item === "string" && KNOWN_EMOJIS.has(item)) recent.add(item);
+		if (recent.size === RECENT_EMOJIS_LIMIT) break;
+	}
+
+	return Array.from(recent);
+}
+
+/**
+ * Запоминает выбор для группы недавних: символ встаёт первым, дубликат схлопывается, хвост за
+ * лимитом отбрасывается. Недоступное хранилище вставке не мешает — недавние просто не копятся.
+ */
+export function rememberEmoji(emoji: string): void {
+	if (!KNOWN_EMOJIS.has(emoji)) return;
+
+	const next = [emoji, ...recentEmojis().filter((other) => other !== emoji)].slice(0, RECENT_EMOJIS_LIMIT);
+	try {
+		localStorage.setItem(RECENT_EMOJIS_KEY, JSON.stringify(next));
+	} catch {
+		// приватный режим или переполненная квота — вставка работает, недавние не запоминаются
+	}
+}
+
+/**
+ * Пересобирает группу недавних в собранном попапе по текущему хранилищу.
+ *
+ * Зовётся при каждом показе (см. `openEmojiPicker` в ./richeditor): сам попап живёт между
+ * открытиями, а хранилище тем временем пополняют и другие попапы страницы. Без недавних группы
+ * нет вовсе — пустая первая группа рисовала бы лишнюю отбивку над списком.
+ */
+export function refreshRecentEmojis(picker: HTMLElement): void {
+	const list = picker.querySelector(".emoji-list");
+	if (!list) return;
+
+	const existing = list.querySelector(`.${RECENT_GROUP_CLASS}`);
+	const recent = recentEmojis();
+
+	if (!recent.length) {
+		existing?.remove();
+		return;
+	}
+
+	const group = buildEmojiGroup({ title: RECENT_TITLE, emojis: recent });
+	group.classList.add(RECENT_GROUP_CLASS);
+
+	if (existing) existing.replaceWith(group);
+	else list.prepend(group);
+}
+
 /**
  * Собирает попап вставки смайлика.
  *
@@ -172,7 +263,8 @@ function buildEmojiGroup(group: EmojiGroup): HTMLElement {
  * два разом всё равно нельзя — {@link PopupManager} держит открытым один.
  *
  * Показом и закрытием занимается вызывающий (у редактора для этого есть `openEmojiPicker`):
- * здесь только разметка и выбор символа.
+ * здесь только разметка и выбор символа. Первой группой — недавние ({@link refreshRecentEmojis});
+ * показ обязан освежать её сам, здесь она собирается по состоянию хранилища на сейчас.
  */
 export function createEmojiPicker(onPick: (emoji: string) => void): HTMLElement {
 	const picker = DOM.tag("div", { class: `${POPUP_CLASS} ${EMOJI_PICKER_CLASS}` });
@@ -183,6 +275,7 @@ export function createEmojiPicker(onPick: (emoji: string) => void): HTMLElement
 	picker.appendChild(list);
 
 	for (const group of EMOJI_GROUPS) list.appendChild(buildEmojiGroup(group));
+	refreshRecentEmojis(picker);
 
 	// попап живёт и вне панели, поэтому фокус гасит сам
 	picker.addEventListener("mousedown", (e) => e.preventDefault());
@@ -190,7 +283,11 @@ export function createEmojiPicker(onPick: (emoji: string) => void): HTMLElement
 		const target = (e.target as HTMLElement).closest<HTMLElement>(".emoji");
 		if (!target) return;
 
-		onPick(target.textContent ?? "");
+		const emoji = target.textContent ?? "";
+		// Недавние — про то, к чему тянутся, поэтому запоминается сам выбор, а не вставка:
+		// удалась ли она (filterChar, снятый редактор), знает только владелец попапа.
+		rememberEmoji(emoji);
+		onPick(emoji);
 		PopupManager.close();
 	});
 

package/source/index.ts

@@ -1,6 +1,18 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
-export { EMOJIS, EMOJI_GROUPS, EMOJI_PICKER_CLASS, createEmojiPicker, type EmojiGroup } from "./emoji";
+export {
+	EMOJIS,
+	EMOJI_GROUPS,
+	EMOJI_PICKER_CLASS,
+	RECENT_EMOJIS_KEY,
+	RECENT_EMOJIS_LIMIT,
+	RECENT_GROUP_CLASS,
+	createEmojiPicker,
+	recentEmojis,
+	rememberEmoji,
+	refreshRecentEmojis,
+	type EmojiGroup,
+} from "./emoji";
 export {
 	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,

package/source/richeditor.less

@@ -13,8 +13,14 @@
 @richeditor-border: var(--input-border-type, solid) var(--input-border-width, 1px) var(--input-border-color, #aaa);
 
 :root {
-	// цитата: линия слева, как её рисуют мессенджеры
-	--richeditor-quote-line: rgba(0, 0, 0, 0.2);
+	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Вертикальный отступ — тот же,
+	// что у абзаца: строка не должна прыгать при смене типа блока. Горизонтальный задаётся
+	// отдельно — от него зависит, насколько текст цитаты отходит от линии.
+	--richeditor-quote-line: #1872bc;
+	--richeditor-quote-line-width: 3px;
+	--richeditor-quote-fill: rgba(0, 0, 0, 0.04);
+	--richeditor-quote-padding-tb: 5px;
+	--richeditor-quote-padding-lr: 10px;
 
 	// код — и моноширинный, и блок
 	--richeditor-code-fill: rgba(0, 0, 0, 0.06);
@@ -46,6 +52,8 @@
 	// с ним не связана, а вычитание отступов задавало бы размер дважды и могло не сойтись.
 	--richeditor-toolbar-padding: 3px;
 	--richeditor-toolbar-button-size: 34px;
+	// зазор панели от краёв экрана; то же значение — в EDGE_GAP (toolbar.ts)
+	--richeditor-toolbar-edge-gap: 4px;
 
 	// панель смайликов
 	--richeditor-emoji-size: 32px;
@@ -79,12 +87,20 @@
 		}
 	}
 
-	// Цитата: линия слева, как её рисуют мессенджеры. Вертикальные поля те же, что у абзаца, —
-	// строка не должна прыгать при смене типа блока.
+	// Цитата: линия слева и подложка, как её рисуют мессенджеры. Значения — переменными
+	// (см. :root выше): подложке нужен и отступ справа, иначе текст упирался бы в её край.
 	& blockquote {
 		margin: 0;
-		padding: 5px 0 5px 10px;
-		border-left: 3px solid var(--richeditor-quote-line);
+		// Ширина по содержимому, а не во всю строку: с подложкой цитата — это плашка, и пустое
+		// место справа от короткой строки читалось бы её частью. Прижата влево, потому что
+		// поля по краям не заданы; длинная цитата переносится по границе редактора, а не вылезает
+		// за неё — на это max-width.
+		width: fit-content;
+		max-width: 100%;
+		padding: var(--richeditor-quote-padding-tb) var(--richeditor-quote-padding-lr);
+		border-left: var(--richeditor-quote-line-width) solid var(--richeditor-quote-line);
+		background-color: var(--richeditor-quote-fill);
+		border-radius: 3px;
 	}
 
 	// Блок кода: подложка на всю строку и моноширинный шрифт. Собственные поля тут нужны —
@@ -204,6 +220,9 @@
 	display: none;
 	position: fixed;
 	z-index: 1000;
+	// Не шире экрана: полный набор кнопок на телефоне в строку не влезает, и без ограничения
+	// панель уезжала бы за правый край. Что не поместилось — прокручивается (см. .toolbar-body).
+	max-width: calc(100vw - var(--richeditor-toolbar-edge-gap) * 2);
 
 	--svg-size: 18px;
 	--svg-fill: var(--input-color, #222);
@@ -218,6 +237,7 @@
 		left: 0;
 		bottom: 100%;
 		margin-bottom: 6px;
+		max-width: 100%; // предел задаёт контейнер: панель не шире поля, над которым стоит
 
 		&.link-editing {
 			right: 0;
@@ -229,6 +249,17 @@
 		flex-flow: row nowrap;
 		align-items: center;
 		gap: 2px;
+		// Что не поместилось по ширине — прокручивается: кнопки не переносятся и не прячутся,
+		// панель остаётся в одну строку. Полоса появляется только когда набор не влез.
+		max-width: 100%;
+		overflow-x: auto;
+		// дойдя до конца, не пролистывать страницу под панелью и не вызывать жест «назад»
+		overscroll-behavior-x: contain;
+		// Полоса тоньше обычной: она внутри панели высотой в одну кнопку, и обычная
+		// заметно её раздувала бы.
+		--scrollbar-size: 3px;
+		--scrollbar-edge-inset: 2px;
+
 		padding: var(--richeditor-toolbar-padding);
 		background-color: var(--input-fill, #fff);
 		border: @richeditor-border;
@@ -240,6 +271,9 @@
 
 	// разделитель между инструментами форматирования и действиями
 	& .split {
+		// Сжиматься нельзя: кнопки этого не умеют (flex: 0 0 auto), и всю нехватку ширины
+		// выбирал бы один разделитель — при полном наборе на узком экране он схлопывался в ноль.
+		flex: 0 0 auto;
 		width: 1px;
 		align-self: stretch;
 		margin: 2px 3px;

package/source/richeditor.ts

@@ -51,14 +51,18 @@ import {
 	buildParagraphs,
 	caretToEnd,
 	expandRangeToWords,
+	hasPastedMarkup,
+	isDocumentHtml,
 	insertParagraph,
 	insertPastedParagraphs,
 	insertSoftBreak,
+	parsePastedMarkdown,
 	sanitizePastedHtml,
 	selectAllContent,
 	trimSelectionWhitespace,
 } from "./editing";
 import { EditorHistory } from "./history";
+import { refreshRecentEmojis } from "./emoji";
 import { formatToolbar, TOOLBAR_CLASS, type ToolbarButton } from "./toolbar";
 
 export { formatToolbar, TOOLBAR_CLASS, type ToolbarHost, type ToolbarButton } from "./toolbar";
@@ -73,6 +77,27 @@ const NAV_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "En
 // Код — единственное, что есть и инструментом, и типом блока: имя одно на оба (см. applyCode).
 const CODE = "code";
 
+// Расширения текстовых файлов для броска в редактор: у .md и .txt тип в системе часто
+// не зарегистрирован и приходит пустым — тогда решает имя.
+const TEXT_FILE_NAME = /\.(md|markdown|txt|text)$/i;
+
+/** Текстовый ли файл: по MIME (text/*), а без типа — по расширению. */
+function isTextFile(file: File): boolean {
+	return file.type ? file.type.startsWith("text/") : TEXT_FILE_NAME.test(file.name);
+}
+
+/** Содержимое файла текстом: Blob.text() есть не во всех окружениях (jsdom) — тогда FileReader. */
+function readFileText(file: File): Promise<string> {
+	if (typeof file.text === "function") return file.text();
+
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onload = () => resolve(String(reader.result ?? ""));
+		reader.onerror = () => reject(reader.error);
+		reader.readAsText(file);
+	});
+}
+
 // Ссылка — единственный инструмент с данными: адрес задаётся не переключением (см. applyLink).
 const LINK: FormatTool = "link";
 
@@ -110,6 +135,65 @@ function isHotkeyLetter(e: KeyboardEvent, letter: string): boolean {
 	return e.key.toLowerCase() === letter || codeLetter(e) === letter;
 }
 
+/** Коробка строки — какую высоту занимает строка текста. */
+type LineBox = { top: number; bottom: number; height: number };
+
+/**
+ * Коробки строк, занятых узлом. У переносимого текста их несколько, и общая коробка накрывает
+ * их все — для доводки прокрутки нужна конкретная строка, поэтому берём список, а не объединение.
+ * В среде без раскладки (jsdom) список пуст, там остаётся общая коробка.
+ */
+function lineRects(node: Node): LineBox[] {
+	let source: { getClientRects?: () => DOMRectList; getBoundingClientRect?: () => DOMRect } | null = null;
+
+	if (node.nodeType === Node.TEXT_NODE) {
+		const range = node.ownerDocument?.createRange();
+		if (range) {
+			range.selectNodeContents(node);
+			source = range;
+		}
+	} else if (node.nodeType === Node.ELEMENT_NODE) {
+		source = node as Element;
+	}
+
+	if (typeof source?.getBoundingClientRect !== "function") return [];
+
+	const rects = Array.from(source.getClientRects?.() ?? []);
+	return rects.length ? rects : [source.getBoundingClientRect()];
+}
+
+/**
+ * Строка, на которой стоит каретка, когда собственной коробки у неё нет — так бывает на пустой
+ * строке. Ищем ближайший измеримый ориентир на ТОЙ ЖЕ строке.
+ */
+function caretLineBox(range: Range): LineBox | null {
+	const { startContainer: node, startOffset: offset } = range;
+
+	if (node.nodeType === Node.ELEMENT_NODE) {
+		// Узел ПОСЛЕ каретки стоит на её строке: <br> рисуется в конце строки, которую завершает,
+		// а текст за кареткой с этой строки начинается. Узел ДО каретки лежит строкой выше —
+		// по нему прокрутка недоезжала ровно на строку.
+		const next = node.childNodes[offset];
+		if (next) return lineRects(next)[0] ?? null;
+
+		// Каретка за последним узлом: своей строки у неё ещё нет, а предыдущий <br> завершает
+		// предыдущую — она ровно на строку ниже него.
+		const previous = node.childNodes[offset - 1];
+		if (previous) {
+			const rects = lineRects(previous);
+			const last = rects[rects.length - 1];
+			if (!last) return null;
+
+			const shift = previous.nodeName === "BR" ? last.height : 0;
+			return { top: last.top + shift, bottom: last.bottom + shift, height: last.height };
+		}
+	}
+
+	// Соседей нет вовсе: пустой блок и есть строка каретки.
+	const own = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+	return own ? (lineRects(own)[0] ?? null) : null;
+}
+
 export interface RichEditorOptions {
 	/** Включает форматирование и панель инструментов. */
 	format?: boolean;
@@ -377,6 +461,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// прятать его носителя незачем и нечем.
 		const inToolbar = !!picker.closest(`.${TOOLBAR_CLASS}`);
 
+		// Недавние — по хранилищу на момент показа: попап живёт между открытиями, а хранилище
+		// тем временем пополняют и другие попапы страницы.
+		refreshRecentEmojis(picker);
+
 		PopupManager.open(picker, {
 			initiator,
 			onClose: () => {
@@ -541,6 +629,40 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		selection.addRange(range);
 	}
 
+	/**
+	 * Слово, на котором стоит каретка. Пусто, когда выделение своё (пользователь выбрал сам,
+	 * и подставлять ему нечего), когда каретки в редакторе нет вовсе или когда она стоит не
+	 * в слове — за точкой, например: знаки препинания в слово не входят (см. expandRangeToWords).
+	 */
+	get caretWord(): string {
+		const selection = this.selection;
+		if (!selection || selection.rangeCount === 0) return "";
+
+		const range = selection.getRangeAt(0);
+		if (!range.collapsed) return "";
+
+		return expandRangeToWords(this.editable, range).toString();
+	}
+
+	/**
+	 * Выделить слово под кареткой — чтобы следующая вставка встала на его место, а не разорвала
+	 * его пополам. Возвращает false, когда выделять нечего: тогда вставка идёт в точку каретки.
+	 */
+	selectCaretWord(): boolean {
+		const selection = documentSelection(this.editable);
+		if (!selection || selection.rangeCount === 0) return false;
+
+		const range = selection.getRangeAt(0);
+		if (!range.collapsed) return false;
+
+		const word = expandRangeToWords(this.editable, range);
+		if (word.collapsed) return false;
+
+		selection.removeAllRanges();
+		selection.addRange(word);
+		return true;
+	}
+
 	/**
 	 * Цель правки форматирования: выделение, расширенное до целых слов, плюс исходные границы
 	 * для восстановления. Диапазон отдельный от выделения — пока операция не решила, что будет
@@ -1114,9 +1236,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const { signal } = this.__abort;
 		const editable = this.editable;
 
-		// перетаскивание в редактор проходит мимо истории и фильтров хоста — гасим саму вставку.
+		// Бросок в редактор: текстовые файлы принимаются содержимым (см. __onDrop), всё прочее
+		// гасится — свободное перетаскивание прошло бы мимо истории и фильтров хоста.
 		// dragenter/dragover отменять нельзя: в модели DnD отмена как раз и означает «сюда можно бросить»
-		this.element.addEventListener("drop", (e) => e.preventDefault(), { signal });
+		this.element.addEventListener("drop", (e) => this.__onDrop(e), { signal });
 
 		// Выделение страницы не должно затягивать содержимое редактора — см. __holdSelectable.
 		// Слушаем на документе и в фазе перехвата: протяжка начинается где угодно, а обработчик
@@ -1207,6 +1330,17 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.element.addEventListener("paste", (e: ClipboardEvent) => this.__onPaste(e), { signal });
 		editable.addEventListener("keydown", (e: KeyboardEvent) => this.__onKeydown(e), { signal });
 
+		// Каретку двигали клавишами: браузер к ней прокручивает сам, но до края коробки —
+		// под отступы прокручиваемого контейнера. Поправляем после него, на keyup: на keydown
+		// своей прокрутки он ещё не сделал, и поправка ушла бы впустую.
+		editable.addEventListener(
+			"keyup",
+			(e: KeyboardEvent) => {
+				if (NAV_KEYS.includes(e.key)) this.__scrollCaretIntoView();
+			},
+			{ signal }
+		);
+
 		editable.addEventListener("beforeinput", (e: InputEvent) => this.__onBeforeInput(e), { signal });
 
 		editable.addEventListener(
@@ -1223,6 +1357,10 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 				} else if (editable.firstChild?.nodeName === "BR") {
 					editable.innerHTML = "";
 				}
+				// При наборе браузер прокручивает к каретке сам, но доводит её лишь до края
+				// коробки — под отступы контейнера. Доводим до текста.
+				this.__scrollCaretIntoView();
+
 				this.__emitChange(true); // печать — единственный посимвольный источник, его и откладываем
 			},
 			{ signal }
@@ -1230,46 +1368,58 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 	}
 
 	/**
-	 * Доводит прокрутку до каретки. Переносы строк редактор делает сам (preventDefault), и
-	 * браузер к новой строке не прокручивает; к тому же у хостов (textbox, messageeditor)
-	 * прокручивается не редактируемый элемент, а его обёртка — после достижения предельной
-	 * высоты каретка у нижнего края уходила бы за пределы видимого.
+	 * Доводит прокрутку до каретки. Нужна там, где браузер не справляется сам: переносы строк
+	 * редактор делает вручную (preventDefault), и к новой строке браузер не прокручивает; в
+	 * textbox прокручивается не редактируемый элемент, а его обёртка; а своей прокруткой браузер
+	 * доводит каретку лишь до края коробки — под отступы, которые едут вместе с текстом.
 	 */
 	private __scrollCaretIntoView() {
 		const selection = this.selection;
 		if (!selection || selection.rangeCount === 0) return;
 
-		const range = selection.getRangeAt(0);
+		const range = selection.getRangeAt(0).cloneRange();
 
 		// в среде без раскладки (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();
+		// Выделение тянут клавишами (Shift+стрелки): вести нужно за его подвижным концом.
+		// Коробка всего выделения накрывает все занятые строки, и прокрутка ушла бы к концу
+		// неподвижному, уводя подвижный за пределы видимого.
+		if (!range.collapsed) {
+			const toStart = selection.focusNode === range.startContainer && selection.focusOffset === range.startOffset;
+			range.collapse(toStart);
+		}
+
+		let { top, bottom, height } = range.getBoundingClientRect();
+		if (!height) {
+			const line = caretLineBox(range);
+			if (!line) return;
+			({ top, bottom, height } = line);
 		}
 		// раскладки нет (тестовая среда) — прокручивать не по чему
-		if (!rect.height && !rect.top && !rect.bottom) return;
+		if (!height && !top && !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;
+			const style = document.defaultView?.getComputedStyle(el);
+			if (!style) continue;
+			const overflow = style.overflowY;
 			if (overflow !== "auto" && overflow !== "scroll") continue;
 
+			// Границей служит не коробка, а область, свободная от отступов: они едут вместе
+			// с текстом (см. .editor в textbox, .ui-richeditor в messageeditor), и доведённая
+			// до края коробки строка встала бы под них. Своего отступа у контейнера может
+			// и не быть — тогда держим небольшой запас, чтобы строка не прилипала к краю.
+			const gap = Math.min(height || 16, 16);
 			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;
+			const viewTop = box.top + el.clientTop + (parseFloat(style.paddingTop) || gap);
+			const viewBottom = box.top + el.clientTop + el.clientHeight - (parseFloat(style.paddingBottom) || gap);
+
+			if (bottom > viewBottom) el.scrollTop += bottom - viewBottom;
+			else if (top < viewTop) el.scrollTop -= viewTop - top;
 			return;
 		}
 	}
@@ -1408,6 +1558,16 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		// форматированную вставку берём из text/html только при включённом форматировании
 		const html = this.format && this.formatTools.length ? data.getData("text/html") : "";
 
+		this.__insertExternal(plain, html);
+	}
+
+	/**
+	 * Общий приём внешнего текста — вставки из буфера и брошенного файла: фильтр хоста, затем
+	 * форматированная ветка, затем простой текст. Форматирование приходит двумя путями: text/html
+	 * из буфера и, при markdown-хранении, маркеры прямо в тексте — раз значение хранится этой
+	 * разметкой, вставленный текст с ней разбирается так же, как разбиралось бы значение.
+	 */
+	private __insertExternal(plain: string, html: string) {
 		// filterPaste решает по тексту: null — отклонить; если хук ИЗМЕНИЛ текст (обрезка по длине,
 		// фильтр по типу) — форматирование сохранить нельзя, вставляем очищенный простой текст
 		let plainOverride: string | null = null;
@@ -1424,7 +1584,23 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		const selection = this.selection;
 		if (!selection) return;
 
-		if (html && plainOverride == null && this.__pasteHtml(html, selection)) return;
+		if (plainOverride == null) {
+			const paras = html ? sanitizePastedHtml(html, this.formatTools, this.formatMarkers, this.blockTypes) : [];
+			const markdown = this.format && this.formatStorage === "markdown";
+
+			// text/html точнее описывает скопированное, но лишь когда несёт собственную разметку.
+			// Голый текст тоже приезжает html-ем — редакторы кода отдают исходник маркдауна
+			// строками в <div>, — и такой html не знает ничего сверх text/plain, а маркеры в
+			// тексте понимает только разбор разметкой хранения: при плоском html первым идёт он.
+			// Документ (абзацы <p>, заголовки, списки) плоским не считается, даже когда в нём
+			// нет ни одного тега форматирования: буквальные символы маркеров в тексте страницы
+			// видит и её читатель, и разбор превращал бы их в разметку (см. isDocumentHtml).
+			const flat = markdown && !hasPastedMarkup(paras) && !isDocumentHtml(html);
+
+			if (flat && this.__pasteMarkdown(plain, selection)) return;
+			if (this.__insertPasted(paras, selection)) return;
+			if (!flat && markdown && this.__pasteMarkdown(plain, selection)) return;
+		}
 		this.__pastePlain(plainOverride ?? plain, selection);
 	}
 
@@ -1445,11 +1621,80 @@ export default class RichEditor extends UIElementBound<RichEditorEvents> {
 		this.__insertPasted(buildParagraphs(lines, this.__blockParagraphs && !literal), selection);
 	}
 
-	// Вставка форматированного текста из text/html. Возвращает false, если вставлять нечего —
-	// тогда вызывающий откатывается на простую вставку.
-	private __pasteHtml(html: string, selection: Selection): boolean {
+	/**
+	 * Бросок файлов в редактор: текстовые (`text/*`, а без типа — `.md`/`.txt` по имени)
+	 * вставляются содержимым тем же путём, что вставка из буфера, — фильтр хоста, разбор
+	 * разметкой хранения объявленным набором, история. Любой другой бросок гасится: свободное
+	 * перетаскивание прошло бы мимо истории и фильтров хоста.
+	 */
+	private __onDrop(e: DragEvent) {
+		e.preventDefault();
+
+		if (this.readonly) return;
+
+		const files = Array.from(e.dataTransfer?.files ?? []).filter(isTextFile);
+		if (!files.length) return;
+
+		// Каретка — в точку броска, если браузер умеет её назвать; иначе остаётся прежняя.
+		// Фокус нужен в любом случае: бросают и в поле, которое его ещё не получало, — вставлять
+		// тогда некуда, а без каретки focus(true) ставит её в конец.
+		this.__caretFromPoint(e.clientX, e.clientY);
+		this.focus(true);
+
+		// Файл читается асинхронно: правка на это время придержана, чтобы нормализация между
+		// делом не перестроила содержимое под выставленной кареткой.
+		const release = this.holdEditing();
+		Promise.all(files.map(readFileText))
+			.then((texts) => {
+				// компонент могли снять, пока файл читался, — вставлять больше некуда
+				if (this.__disposed) return;
+
+				// несколько файлов — подряд через пустую строку: это отдельные тексты
+				this.__insertExternal(texts.join("\n\n"), "");
+			})
+			.catch(() => this.__reject())
+			.finally(release);
+	}
+
+	/** Ставит каретку в точку на экране, если браузер умеет её назвать, и точка — в редакторе. */
+	private __caretFromPoint(x: number, y: number) {
+		// стандартное API и его вебкитовский предшественник; в jsdom нет обоих
+		const doc = this.editable.ownerDocument as Document & {
+			caretPositionFromPoint?(x: number, y: number): { offsetNode: Node; offset: number } | null;
+			caretRangeFromPoint?(x: number, y: number): Range | null;
+		};
+
+		let node: Node | null = null;
+		let offset = 0;
+		if (doc.caretPositionFromPoint) {
+			const position = doc.caretPositionFromPoint(x, y);
+			if (position) ({ offsetNode: node, offset } = position);
+		} else if (doc.caretRangeFromPoint) {
+			const range = doc.caretRangeFromPoint(x, y);
+			if (range) ({ startContainer: node, startOffset: offset } = range);
+		}
+
+		if (!node || !this.editable.contains(node)) return;
+
+		const selection = documentSelection(this.editable);
+		if (!selection) return;
+
+		const range = doc.createRange();
+		range.setStart(node, offset);
+		range.collapse(true);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	}
+
+	// Вставка простого текста разметкой хранения (markdown): разбор тем же deserialize и с теми же
+	// наборами, что у значения, — маркеры снятых инструментов остаются текстом, как остались бы
+	// в значении. Возвращает false, если вставлять нечего или разбирать нельзя.
+	private __pasteMarkdown(text: string, selection: Selection): boolean {
+		// внутри блока без инлайновой разметки (код) текст литерален — как и при простой вставке
+		if (!BLOCK_TYPES[this.currentBlock].inline) return false;
+
 		return this.__insertPasted(
-			sanitizePastedHtml(html, this.formatTools, this.formatMarkers, this.blockTypes),
+			parsePastedMarkdown(text, this.__valueTools, this.formatMarkers, this.blockTypes, this.__blockParagraphs),
 			selection
 		);
 	}

package/source/serialize.ts

@@ -175,9 +175,14 @@ function serializeInline(
 
 		const inner = serializeInline(el.childNodes, storage, tagMap, markers);
 
-		// вложенный блочный элемент (нестандарт) — без обёртки, просто содержимое
+		// Вложенный блочный элемент — это строка: его граница даёт перенос, иначе соседние
+		// строки склеивались бы встык — VS Code и браузеры отдают буфер строками в <div>
+		// внутри общей обёртки. Хвостовой <br> внутри — заполнитель пустой строки (как у
+		// абзацев самого редактора), а не её содержимое.
 		if (tag === "DIV" || tag === "P") {
-			result += inner;
+			const br = lineBreak(storage);
+			if (result && !result.endsWith(br)) result += br;
+			result += trimTrailingBreaks(inner, storage) + br;
 			continue;
 		}
 
@@ -670,7 +675,15 @@ function markdownBlocks(value: string, types: BlockType[], separate: boolean): A
 	for (let i = 0; i < lines.length; i++) {
 		const line = lines[i];
 
-		const fence = fenced.find((type) => line.trimEnd() === BLOCK_TYPES[type].fence);
+		// Открывающая ограда бывает с меткой языка (```text) — блок она открывает так же, а сама
+		// метка отбрасывается: значение кита её не хранит. Остаток с символом ограды меткой не
+		// считается (```` — не ограда с меткой `). Закрывающая ограда — только голая: та же
+		// строка с меткой внутри блока — его содержимое, а не конец.
+		const fence = fenced.find((type) => {
+			const marker = BLOCK_TYPES[type].fence!;
+			const trimmed = line.trimEnd();
+			return trimmed.startsWith(marker) && !trimmed.slice(marker.length).includes(marker[0]);
+		});
 		if (fence) {
 			let close = -1;
 			for (let at = i + 1; at < lines.length; at++)

package/source/toolbar.ts

@@ -6,7 +6,7 @@
 // т.к. тулбар находится вне привязанных UIElement).
 
 import { DOM } from "@brandup/ui";
-import { PopupManager } from "@brandup/ui-kit";
+import { PopupManager, SCROLLABLE_CLASS } from "@brandup/ui-kit";
 import {
 	BLOCK_TYPES,
 	DEFAULT_BLOCK,
@@ -68,10 +68,10 @@ export const LINK_ROW_CLASS = "link-row";
 // панель показывает поле адреса вместо кнопок
 export const LINK_EDITING_CLASS = "link-editing";
 
-// Временно скрытые кнопки. Сами возможности работают: значение разбирается, показывается
-// и сохраняется, правку можно вызвать из кода — в панель они просто не выводятся.
-// Убрать отсюда, когда будут доведены.
-const HIDDEN_TOOLS: FormatTool[] = ["spoiler"];
+// Временно скрытые кнопки — для возможностей, которые работают (значение разбирается,
+// показывается и сохраняется, правка зовётся из кода), но в панель ещё не выводятся.
+// Сейчас скрытых нет; механика остаётся на следующую такую возможность.
+const HIDDEN_TOOLS: FormatTool[] = [];
 const HIDDEN_BLOCKS: BlockType[] = [];
 
 export const TOOLBAR_CLASS = "ui-richeditor-toolbar";
@@ -154,6 +154,9 @@ export interface ToolbarHost {
 }
 
 const MARGIN = 6;
+// Зазор от краёв экрана у панели в document.body. То же значение вычитается из её предельной
+// ширины в richeditor.less (--richeditor-toolbar-edge-gap) — менять их нужно вместе.
+const EDGE_GAP = 4;
 
 class FormatToolbar {
 	private __elem: HTMLElement | null = null; // обёртка: её позиционируют
@@ -378,9 +381,24 @@ class FormatToolbar {
 
 		const rect = this.__active.editable.getBoundingClientRect();
 		const elem = this.__elem;
+
+		// Ширина панели зависит от left: коробка ужимается по содержимому, и прижатый к правому
+		// краю left от прошлого показа ужал бы её до зазора — панель одна на все редакторы,
+		// а прошлый мог стоять у самого края. Меряем со снятой координатой.
+		elem.style.left = "";
+		const width = elem.offsetWidth;
+
 		const top = rect.top - elem.offsetHeight - MARGIN;
-		elem.style.left = `${Math.max(4, rect.left)}px`;
-		elem.style.top = `${Math.max(4, top)}px`;
+
+		// Панель шире редактора (у узкого поля так бывает всегда), и по его левому краю она уехала
+		// бы за правый край экрана. Прижимаем к правому краю, но не левее отступа: панель шире
+		// самого экрана прижимается к левому и прокручивается — см. .toolbar-body.
+		// clientWidth корня, а не innerWidth: тот считает и полосу прокрутки страницы,
+		// и крайняя кнопка панели оказывалась бы под ней.
+		const viewport = elem.ownerDocument.documentElement.clientWidth;
+		const maxLeft = Math.max(EDGE_GAP, viewport - width - EDGE_GAP);
+		elem.style.left = `${Math.min(Math.max(EDGE_GAP, rect.left), maxLeft)}px`;
+		elem.style.top = `${Math.max(EDGE_GAP, top)}px`;
 	}
 
 	private __removeViewportListeners() {
@@ -399,7 +417,9 @@ class FormatToolbar {
 			// этого съезжать не должна. Выпадающие слои (панель смайликов) висят на обёртке:
 			// её коробка их и не растит, и не обрезает.
 			this.__elem = DOM.tag("div", { class: TOOLBAR_CLASS });
-			this.__body = DOM.tag("div", { class: BODY_CLASS });
+			// Коробка прокручивается по горизонтали: полный набор кнопок на узком экране в строку
+			// не влезает. Полоса — общая, от .ui-scrollable кита, только тоньше (см. richeditor.less).
+			this.__body = DOM.tag("div", { class: [BODY_CLASS, SCROLLABLE_CLASS] });
 			this.__elem.appendChild(this.__body);
 
 			// Панель нигде не должна забирать фокус, иначе редактор теряет выделение, а blur