@brandup/ui-richeditor 1.0.48 → 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`)
 
 | Опция | Тип | Описание |
@@ -54,6 +56,7 @@ editor.onChange(({ value }) => console.log(value));
 | `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
 | `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются); разметка значения при этом разбирается и показывается, кнопок для неё просто нет |
+| `disabled` | `boolean` | Выключенное поле: всё то же, что `readonly`, плюс снятый `contenteditable` — редактор не принимает ни фокус, ни выделение. Значение при этом не нормализуется — выключенное поле его не меняет |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
 | `filterChar` | `(char) => boolean` | Хук: `false` — отклонить вводимый символ |
@@ -88,7 +91,8 @@ editor.onChange(({ value }) => console.log(value));
 | `currentBlock: BlockType` | Тип блока под кареткой |
 | `blockTypes: BlockType[]` | Доступные типы блоков |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
-| `isToolEnabled(tool): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены) |
+| `isToolEnabled(tool, codeActive?): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены). Второй аргумент — уже посчитанный признак «в коде»: панель считает его один раз на обновление и передаёт сюда, чтобы не обходить выделение на каждую кнопку |
+| `readonly`, `disabled` | Состояния поля. `readonly` истинно и у выключенного поля: выключенное — это «только чтение плюс снятый contenteditable» |
 | `activeTools(): ReadonlySet<FormatTool>` | Активные форматы всех инструментов сразу (панель обновляется на каждое движение каретки, поштучный опрос обходил бы содержимое на каждую кнопку) |
 | `clearFormat(): void` | Снять всё форматирование с выделения (без выделения — со слова под кареткой) |
 | `clearAllFormat(): void` | Снять всё форматирование со всего содержимого |
@@ -100,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` | Разворачивает элемент обратно и освобождает ресурсы |
 
@@ -128,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 КБ снимков суммарно (снимок — это всё содержимое редактора, поэтому на длинном тексте старые шаги вытесняются раньше).
@@ -164,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` контент структурируется по абзацам:
@@ -198,7 +207,9 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
 
-Кнопка спойлера временно скрыта (`HIDDEN_TOOLS` в `./toolbar`): сам инструмент работает — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`), — но в панель он пока не выводится.
+Цитата рисуется плашкой по ширине содержимого, прижатой к левому краю: с подложкой пустое место справа от короткой строки читалось бы её частью. Длинная цитата переносится по границе редактора. Цвета и отступы задаются переменными `--richeditor-quote-*` (см. «CSS»).
+
+Открывающая ограда в чужом маркдауне часто приходит с меткой языка (```` ```text ````) — блок она открывает так же, а сама метка отбрасывается: значение кита её не хранит, обратно уезжает голая ограда. Закрывает блок только голая ограда — та же строка с меткой внутри блока остаётся его содержимым.
 
 ### Ссылка
 
@@ -217,7 +228,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 | | |
 | --- | --- |
 | Выделение | становится ссылкой |
-| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов |
+| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов; знаки внутри — часть слова, поэтому адрес или почта оборачиваются целиком |
 | Каретка в готовой ссылке | меняется её адрес — целиком, а не по куску выделения |
 | Каретка вне слова | кнопка недоступна: оборачивать нечего |
 
@@ -262,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`). Любой другой бросок гасится: свободное перетаскивание прошло бы мимо истории и фильтров хоста.
 
 ## Формат хранения
 
@@ -300,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)` | Плашка спойлера |
@@ -310,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.48",
+  "version": "1.0.50",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.9",
-    "@brandup/ui-kit": "^1.0.48"
+    "@brandup/ui-kit": "^1.0.50"
   },
   "files": [
     "source",

package/source/editing.ts

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

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

package/source/history.ts

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

package/source/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,