@brandup/ui-richeditor 1.0.49 → 1.0.51

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`)
 
 | Опция | Тип | Описание |
@@ -50,7 +52,7 @@ editor.onChange(({ value }) => console.log(value));
 | `markers` | `Partial<FormatMarkers>` | Переопределение markdown-маркеров по инструментам |
 | `placeholder` | `string \| null` | Текст-заглушка |
 | `multiline` | `boolean` | Многострочный режим |
-| `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
+| `paragraph` | `"block" \| "break"` | Что такое абзац: абзац, отделённый пустой строкой (по умолчанию), или строка, как в мессенджерах |
 | `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
 | `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются); разметка значения при этом разбирается и показывается, кнопок для неё просто нет |
@@ -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` контент структурируется по абзацам:
@@ -174,15 +181,13 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 - **Shift+Enter** или **Ctrl/Cmd+Enter** → мягкий перенос (`<br>`) внутри абзаца;
 - блуждающий текст и `<div>` нормализуются в `<p>` при вводе.
 
-Опция `paragraph: "break"` меняет это: Enter даёт мягкий перенос, а модификатор в этом режиме ничего не меняет — пустая строка набирается двумя переносами, как в мессенджерах (отдельный абзац дал бы в значении ровно её же). Это важно при `storage: "markdown"`: в режиме по умолчанию каждый Enter уходит в значение пустой строкой (`\n\n`), а в `break` — одним переносом (`\n`).
+Опция `paragraph: "break"` меняет смысл абзаца: там абзац — это строка, как в мессенджерах. Enter и модификатор делают одно и то же (новую строку), мягкому переносу в этом режиме взяться неоткуда, а пустая строка сообщения — это пустой абзац. Это важно при `storage: "markdown"`: в режиме по умолчанию граница абзацев уходит в значение пустой строкой (`\n\n`), а в `break` — одним переносом (`\n`).
 
-В этом режиме абзацных блоков в содержимом нет вовсе: значение загружается плоским текстом, где каждый `\n` становится `<br>` внутри единственного `<p>`. Иначе два переноса рисовались бы двумя абзацами, а у хоста без отступов между ними это неотличимо от одного переноса — значение расходилось бы с видимым текстом.
+Содержимое в обоих режимах — абзацные блоки: каждая строка (или абзац) лежит в своём `<p>`, а не разделяется `<br>` внутри общего. Отступов между абзацами в режиме `break` нет (класс `breaks` на редакторе): отступ читался бы пустой строкой, которой в значении не будет.
 
-Хвостовой перенос отбрасывается ровно один — это `<br>`-заполнитель, без которого не видна последняя строка. Набранные пустые строки сохраняются и в поле, и в значении, где бы они ни стояли — в начале блока, в середине или в конце.
+Мягкий перенос, пришедший извне — вставкой документа или чужим значением, — приводится к той же модели: абзац делится по нему на строки-абзацы. Хвостовой перенос при этом строкой не считается — это `<br>`-заполнитель, без которого не видна последняя (пустая) строка.
 
-Блоки в этом режиме появляются побочно — правкой блочного типа, — поэтому нормализация сводит соседние абзацы обратно в один: их граница уходила бы в значение пустой строкой, которой на экране нет.
-
-При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются — кроме одного: пустой абзац сразу за блоком другого типа остаётся. Это единственное место, где каретка стоит вне цитаты или кода, и без него правка запиралась бы в блоке. В значение такой абзац не попадает — хвост значения обрезается.
+При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются — кроме одного: пустой абзац сразу за блоком другого типа остаётся. Это единственное место, где каретка стоит вне цитаты или кода, и без него правка запиралась бы в блоке. В значение такой абзац не попадает — хвост значения обрезается. В режиме `break` пустой абзац осмыслен сам по себе (это пустая строка сообщения) и не удаляется вовсе; исчезает только единственный — иначе пустое поле не показало бы заглушку.
 
 ## Блоки: цитата и код
 
@@ -200,7 +205,9 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
 
-Кнопка спойлера временно скрыта (`HIDDEN_TOOLS` в `./toolbar`): сам инструмент работает — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`), — но в панель он пока не выводится.
+Цитата рисуется плашкой по ширине содержимого, прижатой к левому краю: с подложкой пустое место справа от короткой строки читалось бы её частью. Длинная цитата переносится по границе редактора. Цвета и отступы задаются переменными `--richeditor-quote-*` (см. «CSS»).
+
+Открывающая ограда в чужом маркдауне часто приходит с меткой языка (```` ```text ````) — блок она открывает так же, а сама метка отбрасывается: значение кита её не хранит, обратно уезжает голая ограда. Закрывает блок только голая ограда — та же строка с меткой внутри блока остаётся его содержимым.
 
 ### Ссылка
 
@@ -219,7 +226,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 | | |
 | --- | --- |
 | Выделение | становится ссылкой |
-| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов |
+| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов; знаки внутри — часть слова, поэтому адрес или почта оборачиваются целиком |
 | Каретка в готовой ссылке | меняется её адрес — целиком, а не по куску выделения |
 | Каретка вне слова | кнопка недоступна: оборачивать нечего |
 
@@ -254,7 +261,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. В режиме мягких переносов пустой строки между блоками нет, поэтому соседние цитаты там склеиваются в одну сразу в поле — иначе оно показывало бы два блока, а в значении и у получателя был бы один. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
 
-В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два.
+В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два. Выделенные строки становятся при этом одним блоком, а не блоком на каждую: строка там — отдельный абзац, и кнопка на трёх строках дала бы три цитаты подряд.
 
 ## Вставка текста
 
@@ -264,13 +271,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` — абзацы не создаются, все переносы мягкие;
+- **multiline**, режим `break` — каждая строка становится абзацем `<p>`, пустая строка — пустым абзацем;
 - **single-line** — строки склеиваются пробелами.
 
-Каретка в обоих случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
+Каретка во всех случаях встаёт сразу за вставленным текстом, а вся вставка — один шаг истории (Ctrl+Z откатывает целиком).
+
+### Бросок файла
+
+Текстовый файл, брошенный в редактор, вставляется содержимым — тем же путём, что вставка из буфера: хук `filterPaste`, разбор разметкой хранения включённым набором, один шаг истории. Текстовым считается файл с типом `text/*`, а без типа — `.md`/`.markdown`/`.txt`/`.text` по имени: у маркдауна тип в системе часто не зарегистрирован. Несколько файлов вставляются подряд через пустую строку. Каретка встаёт в точку броска, если браузер умеет её назвать (`caretPositionFromPoint`/`caretRangeFromPoint`). Любой другой бросок гасится: свободное перетаскивание прошло бы мимо истории и фильтров хоста.
 
 ## Формат хранения
 
@@ -302,6 +317,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 +331,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.51",
   "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.51"
   },
   "files": [
     "source",

package/source/editing.ts

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

@@ -55,6 +55,7 @@ export {
 	createBlock,
 	normalizeWhitespace,
 	mergeAdjacentBlocks,
+	splitSoftBreaks,
 	normalizeParagraphs,
 	ensureParagraphs,
 	paragraphsNormalized,