@brandup/ui-richeditor 1.0.45 → 1.0.48

package/README.md

@@ -35,6 +35,8 @@ editor.onChange(({ value }) => console.log(value));
 
 Панель — **общая для всех редакторов** (`div.ui-richeditor-toolbar`). При фокусе редактора она перестраивается под его инструменты, позиционируется над ним и показывается; при потере фокуса — скрывается. Кнопки диспатчат форматирование напрямую активному редактору.
 
+Внутри обёртка разделена надвое: сама `.ui-richeditor-toolbar` отвечает только за положение, а вид и содержимое держит коробка `.toolbar-body` внутри неё. Её размер меняется вместе с содержимым — на правку адреса ссылки, например, — а точка привязки от этого съезжать не должна; выпадающие слои вроде панели смайликов висят на обёртке и коробкой не обрезаются. Все кнопки панели несут общий класс `.toolbar-button` (плюс свой — `.format-button`, `.block-button`, `.action-button`, `.host-button`), по нему они и оформляются.
+
 По умолчанию панель живёт в `document.body` (`position: fixed`) — это защищает её от обрезки `overflow: hidden` у родителей. Если задан `toolbarContainer`, панель монтируется в него и позиционируется относительно него (`position: absolute`, над контейнером) — например, `TextBox` передаёт свой контейнер `.ui-textbox`.
 
 ## Опции (`RichEditorOptions`)
@@ -42,7 +44,7 @@ editor.onChange(({ value }) => console.log(value));
 | Опция | Тип | Описание |
 | --- | --- | --- |
 | `format` | `boolean` | Включает форматирование и панель инструментов |
-| `tools` | `FormatTool[]` | Состав инструментов (по умолчанию все) |
+| `tools` | `FormatTool[]` | Состав инструментов (по умолчанию все); им же разбирается и сохраняется значение — разметка, которой в наборе нет, остаётся в тексте как есть |
 | `actions` | `EditorAction[]` | Кнопки действий в панели: `emoji`, `erase`, `undo`, `redo` (по умолчанию нет) |
 | `storage` | `"html" \| "markdown"` | Формат сериализации значения (по умолчанию `html`) |
 | `markers` | `Partial<FormatMarkers>` | Переопределение markdown-маркеров по инструментам |
@@ -51,7 +53,7 @@ editor.onChange(({ value }) => console.log(value));
 | `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
 | `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию все); пустой список оставляет только `paragraph` |
 | `keepFocus` | `boolean` | Держать ли фокус в поле, пока открыта панель смайликов (по умолчанию да, а на сенсорном устройстве нет) |
-| `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются) |
+| `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются); разметка значения при этом разбирается и показывается, кнопок для неё просто нет |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
 | `filterChar` | `(char) => boolean` | Хук: `false` — отклонить вводимый символ |
@@ -66,7 +68,9 @@ editor.onChange(({ value }) => console.log(value));
 | Член | Описание |
 | --- | --- |
 | `editable` | Редактируемый элемент |
-| `format`, `formatTools`, `editorActions`, `formatStorage`, `formatMarkers`, `multiline` | Параметры экземпляра |
+| `format`, `editorActions`, `formatStorage`, `formatMarkers`, `multiline` | Параметры экземпляра |
+| `formatTypes` | Объявленный набор инструментов — им разбирается и сохраняется значение |
+| `formatTools` | Инструменты в панели: то же, но пусто в `readonly` — переключать разметку там нечем |
 | `getValue(): string` | Сериализованное значение (по `storage`) — считается по DOM, всегда актуально |
 | `setValue(value: string): void` | Установить значение (нормализует, генерирует `change`) |
 | `flushChange(): void` | Доставить отложенное `change` немедленно (см. ниже) |
@@ -77,6 +81,10 @@ editor.onChange(({ value }) => console.log(value));
 | `applyBlock(type): void` | Переключить тип блоков под выделением; повторное применение возвращает обычный текст |
 | `applyCode(): void` | Код по выделению: моноширинный для части строки, блок — для целых строк |
 | `isCodeActive(): boolean` | Включён ли код в любом виде — подсветка объединённой кнопки |
+| `applyLink(url): void` | Поставить ссылку, поменять её адрес или снять её (пустым адресом) |
+| `currentLink: string` | Адрес ссылки под кареткой; пусто — каретка не в ссылке |
+| `caretSnapshot(): [number, number] \| null` | Каретка в символах — вернуть её потом можно и без фокуса |
+| `restoreCaret(bounds): void` | Вернуть каретку по снимку |
 | `currentBlock: BlockType` | Тип блока под кареткой |
 | `blockTypes: BlockType[]` | Доступные типы блоков |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
@@ -89,7 +97,7 @@ editor.onChange(({ value }) => console.log(value));
 | `applyAction(action): void` | Выполнить действие панели (`erase`/`undo`/`redo`) |
 | `isActionEnabled(action): boolean` | Доступно ли действие сейчас |
 | `insertText(text): void` | Вставить текст в каретку (или вместо выделения) с учётом режима набора; без фокуса вставляет по снятой каретке |
-| `openEmojiPicker(initiator, container?): void` | Открыть панель смайликов у кнопки; повторный вызов у той же кнопки её закрывает |
+| `openEmojiPicker(picker, initiator): boolean` | Показать переданный попап смайликов у кнопки; false — этим нажатием он закрылся |
 | `selection: Selection \| null` | Выделение, если оно внутри редактора (иначе `null`) — единая точка доступа для хоста |
 | `selectNode(node): void` | Выделить узел внутри редактора: следующая вставка заменит его целиком |
 | `onChange(handler)` | Подписка на событие `richeditor-change` |
@@ -121,7 +129,7 @@ editor.onChange(({ value }) => console.log(value));
 - Формат — переключатель (toggle): повторное применение снимает его.
 - Применяется к слову целиком: курсор внутри слова или выделение его части → формат охватывает всё слово; исходное выделение/каретка сохраняются.
 - **Режим набора**: на пустом месте (между пробелами / в пустом поле) кнопка/хоткей включают «ожидающий» формат — он применится к следующему введённому тексту. Сбрасывается при перемещении каретки, клике или потере фокуса.
-- Хоткеи `Ctrl/Cmd+B/I/U`. Зачёркивание — только кнопкой.
+- Хоткеи `Ctrl/Cmd+B/I/U` и `Ctrl/Cmd+K` (ссылка — показывает в панели поле адреса). Зачёркивание — только кнопкой.
 - **Отмена/повтор**: `Ctrl/Cmd+Z` — отмена, `Ctrl+Y` или `Ctrl/Cmd+Shift+Z` — повтор. История форматирования, абзацев, переносов и печати ведётся редактором (нативный undo не видит ручных DOM-правок), поэтому **доступна только при включённом форматировании** (`format: true`). Печать коалесится в один шаг отмены по паузе ~300 мс; глубина истории — 100 шагов, но не более ~512 КБ снимков суммарно (снимок — это всё содержимое редактора, поэтому на длинном тексте старые шаги вытесняются раньше).
 - При потере фокуса и после `setValue` пробелы нормализуются (схлопывание повторов + обрезка краёв строк). Неразрывный пробел (`U+00A0`) считается обычным: браузер сам подставляет его в `contenteditable` вместо пробела, который иначе схлопнулся бы при отображении, и в значение он не попадает.
 
@@ -150,9 +158,11 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 Кнопка `emoji` открывает под панелью попап `.ui-richeditor-emoji` со списком символов (`EMOJIS` — экспортируется пакетом). Выбранный символ вставляется через `insertText()`, то есть в текущую каретку и с учётом ожидающих форматов режима набора; попап после выбора закрывается.
 
+Попап принадлежит своему владельцу: у панели свой, у хоста со своей кнопкой (например у поля сообщения) — свой. Собирает их общая `createEmojiPicker(onPick)`, показывает — редактор: `openEmojiPicker(picker, initiator)` берёт на себя удержание правки на время попапа, каретку, если её ещё не было, и отпускание фокуса по `keepFocus`. Он же убирает панель форматирования, если попап раскрывается не из неё: два всплывающих слоя над одним полем вместе не показываются. Открытым в любом случае бывает один — за этим следит `PopupManager` кита.
+
 Открытием и закрытием управляет `PopupManager` из [`@brandup/ui-kit`](../brandup-ui-kit) — оттуда же приходят базовые стили `.ui-popup`. Ни кнопка, ни попап не забирают фокус сами (`mousedown` гасится), поэтому каретка и выделение сохраняются; на сенсорном устройстве поле отдаёт фокус намеренно (см. «Фокус на время своего слоя»), и вставка идёт по снятой каретке. Список кнопок собирается лениво, при первом открытии.
 
-Панель — слой редактора, поэтому открывает её он сам (`openEmojiPicker()`): на время её работы он придерживает правку, чтобы нормализация не обрезала пробел у каретки. Хост может открыть её у своей кнопки, передав вторым аргументом контейнер, — так делает [`@brandup/ui-messageeditor`](../brandup-ui-messageeditor).
+Попап — слой над полем, поэтому показывает его редактор (`openEmojiPicker()`): на время работы он придерживает правку, чтобы нормализация не обрезала пробел у каретки. Хост со своей кнопкой собирает попап сам и передаёт его сюда — так делает [`@brandup/ui-messageeditor`](../brandup-ui-messageeditor).
 
 ## Многострочный режим: абзацы и переносы
 
@@ -190,6 +200,33 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 Кнопка спойлера временно скрыта (`HIDDEN_TOOLS` в `./toolbar`): сам инструмент работает — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`), — но в панель он пока не выводится.
 
+### Ссылка
+
+`link` — единственный инструмент, у которого есть данные: адрес идёт отдельной частью и в тексте не показывается. Поэтому он и устроен иначе остальных.
+
+**В разметке.** Пара маркеров тут не годится, и в реестре у него `md: ""` — этим он выводится из всей маркерной механики. Разбор и сборку он делает своими ветками: `[текст](адрес)` в markdown, `<a href>` в html. Адрес прячется от маркеров до их разбора — иначе `example.com/a_b_c` уезжал бы курсивом. Текст ссылки от них не прячется: разметка внутри него разбирается наравне с остальной, `[**жирный**](адрес)` работает.
+
+Адрес читается и в угловых скобках — `[текст](<адрес с пробелом>)`; пишется в них же, когда иначе не прочитается. Парные скобки внутри адреса разрешены и без угловых: ими кончается половина ссылок на википедию. Скобки в тексте экранируются обратной косой.
+
+Ссылки без текста или без адреса не бывает — такая разметка остаётся текстом. Перенос строки внутри ссылки тоже: её текст в разметке один кусок, разорванный он не выражается и с разбора не вернётся. **Enter** внутри ссылки её заканчивает — за переносом остаётся обычный текст, а не вторая ссылка с тем же адресом. Схема адреса проверяется: `javascript:`, `data:` и прочее исполняемое ссылкой не становится ни при разборе значения, ни при вставке из буфера.
+
+**В работе.** Кнопка не переключатель — по ней панель показывает поле адреса вместо кнопок (`Ctrl`/`Cmd`+`K` делает то же). Не выпадающий слой: то же место, та же коробка — позиционировать и ужимать ничего не приходится, а кнопки на это время всё равно не нужны. Повторное нажатие возвращает их. Каретка в готовой ссылке подставляет её адрес: тогда это правка, а не новая ссылка. Пустой адрес ссылку снимает, для этого же есть кнопка рядом с полем.
+
+Ссылка — оформление текста, а не вставка: делать ссылкой нечего — кнопка погашена, и `applyLink` ничего не делает.
+
+| | |
+| --- | --- |
+| Выделение | становится ссылкой |
+| Каретка в слове | ссылкой становится слово целиком, как и у остальных инструментов |
+| Каретка в готовой ссылке | меняется её адрес — целиком, а не по куску выделения |
+| Каретка вне слова | кнопка недоступна: оборачивать нечего |
+
+Адрес отдаёт `currentLink`, ставит и снимает `applyLink(url)`; `applyFormat("link")` ничего не делает — переключением адрес не задать.
+
+Поле адреса, в отличие от всего остального в панели, забирает фокус: без него не набрать. Выделение в редакторе при этом теряется, поэтому панель снимает каретку до перевода фокуса и возвращает её перед правкой — тем же снимком в символах (`caretSnapshot`/`restoreCaret`), которым пользуются окна хоста. `Esc` возвращает каретку, ничего не изменив.
+
+Отпущенный фокус обычно убирает панель с экрана (`suspend`), но не пока правят адрес: поле лежит **в самой панели**, и вместе с ней ушло бы и оно. У панели смайликов слой чужой — она раскрывается от кнопки хоста, — поэтому там панель прячется как раз правильно. А вот фокус, ушедший мимо панели, правку заканчивает: держаться ей больше не на чем.
+
 ### Одна кнопка на моноширинный и блок кода
 
 Когда включены и инструмент `code`, и тип блока `code`, панель показывает **одну** кнопку — так это устроено в мессенджерах. Вид выбирается по выделению, как и в самой разметке:
@@ -221,7 +258,7 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 При включённом форматировании вставка (`paste`) сохраняет форматирование из буфера обмена (`text/html`):
 
-- разметка санитизируется до включённых инструментов (синонимы `STRONG/EM/DEL/INS` → канонические `b/i/s/u`, всё прочее — `span`, стили, классы, `<style>`/`<script>` — отбрасывается, текст сохраняется);
+- разметка санитизируется до включённых инструментов (синонимы `STRONG/EM/DEL/INS` → канонические `b/i/s/u`, всё прочее — `span`, стили, классы, `<style>`/`<script>` — отбрасывается, текст сохраняется). Из атрибутов остаётся только `href` у ссылки, и то по проверенной схеме;
 - **multiline** сохраняет абзацы `<p>` и мягкие переносы `<br>`, разбивая текущий абзац по каретке; **single-line** — инлайн, абзацы/переносы становятся пробелами;
 - хук `filterPaste` остаётся в силе: вернул `null` — вставка отклоняется; изменил текст (обрезка по длине, фильтр по типу) — форматирование не сохраняется, вставляется очищенный текст.
 
@@ -256,4 +293,24 @@ new RichEditor(elem, { format: true, multiline: true, blocks: [] }); // толь
 
 ## CSS
 
-Подключается `richeditor.less`. Цветовые переменные `--input-*` берутся из `@brandup/ui-kit` (с fallback-значениями для standalone). Классы: `focused` на обёртке (поле в фокусе), `visible` на общей панели (показана), `active` на кнопке инструмента (формат активен на выделении).
+Подключается `richeditor.less`. Классы: `focused` на обёртке (поле в фокусе), `visible` на общей панели (показана), `active` на кнопке инструмента (формат активен на выделении).
+
+Собственные переменные пакета объявлены в `:root` в начале `richeditor.less` — там же и их значения по умолчанию:
+
+| Переменная | По умолчанию | Что задаёт |
+| --- | --- | --- |
+| `--richeditor-quote-line` | `rgba(0,0,0,.2)` | Линия слева у цитаты |
+| `--richeditor-code-fill` | `rgba(0,0,0,.06)` | Подложка кода — и моноширинного, и блока |
+| `--richeditor-code-font` | `ui-monospace, …` | Шрифт кода |
+| `--richeditor-spoiler-fill` | `rgba(0,0,0,.14)` | Плашка спойлера |
+| `--richeditor-link-width` | `320px` | Ширина панели при правке адреса, когда она стоит в `document.body` — растягиваться там не по чему |
+| `--richeditor-link-max-width` | `500px` | Предел ширины растянутой панели при правке адреса |
+| `--richeditor-link-color` | `#2481cc` | Цвет ссылки в тексте |
+| `--richeditor-link-underline-offset` | `auto` | Отступ подчёркивания ссылки от базовой линии |
+| `--richeditor-underline-room` | `2px` | Место под подчёркивание последней строки: рисуется оно ниже текста, но в раскладке места не занимает, и без запаса его срезает край прокручиваемой коробки |
+| `--richeditor-toolbar-padding` | `3px` | Поля панели |
+| `--richeditor-toolbar-button-size` | `34px` | Кнопка панели; по ней же высота поля адреса |
+| `--richeditor-emoji-size` | `32px` | Ячейка в панели смайликов |
+| `--richeditor-emoji-rows` | `8` | Запасная высота нарисованной не сразу группы; своё значение панель ставит на каждую группу |
+
+Остальное оформление берётся у полей ввода `@brandup/ui-kit` — `--input-*`, `--hover--input-*`, `--focus--input-*`, `--placeholder-*`, `--svg-*`. В `:root` пакет их не объявляет: объявив, он перекрыл бы значения кита. Запасные значения у них стоят по месту — на случай использования пакета без кита.

package/package.json

@@ -27,12 +27,12 @@
     "email": "it@brandup.online"
   },
   "license": "Apache-2.0",
-  "version": "1.0.45",
+  "version": "1.0.48",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {
     "@brandup/ui": "^2.0.9",
-    "@brandup/ui-kit": "^1.0.45"
+    "@brandup/ui-kit": "^1.0.48"
   },
   "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, literalAncestor } from "./selection";
+import { documentSelection, innerSelection, linkAt, literalAncestor } from "./selection";
 import { BLOCK_TYPES, DEFAULT_BLOCK, type BlockType, type FormatMarkers, type FormatTool } from "./format-config";
 
 // убирает пустые текст-узлы и ставит <br>-заполнитель в пустой абзац (для видимости и каретки)
@@ -221,6 +221,10 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
 
+	// Ссылку абзац разорвал бы пополам, а её текст в разметке — один кусок. Выводим хвост
+	// из неё до разбиения: в новом абзаце останется обычный текст (см. splitLinkOut).
+	splitLinkOut(editable, range);
+
 	// текущий блок (ближайший блочный предок внутри редактора)
 	const para = blockOf(editable, range.startContainer);
 
@@ -277,7 +281,25 @@ export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT
  * а диапазон встаёт между половинами — вставленное туда окажется снаружи обоих. Пустые
  * половины не оставляем: печатать в них было бы нечего, а каретка попадала бы внутрь.
  */
-function splitElement(el: HTMLElement, range: Range) {
+/**
+ * Выводит хвост ссылки из неё, разрезав по каретке: перед переносом строки.
+ *
+ * Ссылку разрывать нельзя — в разметке её текст один кусок, — а продолжать на новой строке
+ * нечем: адрес у ссылки один, и вторая ссылка с тем же адресом появилась бы сама собой,
+ * хотя её никто не заводил. Поэтому за переносом остаётся обычный текст.
+ */
+function splitLinkOut(editable: HTMLElement, range: Range) {
+	const link = linkAt(editable, range);
+	if (!link) return;
+
+	// Разрезаем и снимаем с хвоста обёртку: каретка стоит ровно перед ним, и разворачивание
+	// её не сдвигает — на месте одного узла оказываются его дети, с того же места.
+	const tail = splitElement(link, range);
+	if (tail) tail.replaceWith(...Array.from(tail.childNodes));
+}
+
+/** Разрезает элемент по каретке; возвращает хвост, если в нём что-то осталось. */
+function splitElement(el: HTMLElement, range: Range): HTMLElement | null {
 	const tail = document.createRange();
 	tail.selectNodeContents(el);
 	tail.setStart(range.startContainer, range.startOffset);
@@ -285,12 +307,15 @@ function splitElement(el: HTMLElement, range: Range) {
 	const rest = el.cloneNode(false) as HTMLElement;
 	rest.appendChild(tail.extractContents());
 
-	if (rest.textContent) el.after(rest);
+	const kept = !!rest.textContent;
+	if (kept) el.after(rest);
 
 	range.setStartAfter(el);
 	range.collapse(true);
 
 	if (!el.textContent) el.remove();
+
+	return kept ? rest : null;
 }
 
 /** Shift/Ctrl+Enter в multiline: вставить мягкий перенос <br>. */
@@ -308,6 +333,11 @@ export function insertSoftBreak(editable: HTMLElement) {
 	const literal = literalAncestor(range.startContainer, editable);
 	if (literal) splitElement(literal, range);
 
+	// Перенос не живёт и в ссылке: её текст — один сплошной кусок, разметкой разорванный
+	// не выражается. Разрезаем так же, но продолжения на новой строке не оставляем: адрес
+	// у неё один, а второй ссылки никто не заводил.
+	splitLinkOut(editable, range);
+
 	const br = document.createElement("br");
 	range.insertNode(br);
 

package/source/emoji.ts

@@ -1,3 +1,6 @@
+import { DOM } from "@brandup/ui";
+import { POPUP_CLASS, PopupManager, SCROLLABLE_CLASS } from "@brandup/ui-kit";
+
 // Набор смайликов для панели вставки. Все символы — одиночные кодпойнты (без ZWJ-последовательностей
 // и модификаторов), поэтому переносятся в текст как единое целое. Внимание: в UTF-16 каждый занимает
 // две единицы, и getLength() (а значит и maxlength у хоста) считает такой символ за два.
@@ -127,3 +130,69 @@ export const EMOJI_GROUPS: EmojiGroup[] = [
 
 /** Все смайлики подряд, в порядке групп. */
 export const EMOJIS: string[] = EMOJI_GROUPS.flatMap((group) => group.emojis);
+
+// --- панель вставки ---
+
+/** Попап вставки смайлика: у каждого владельца свой, собираются они здесь. */
+export const EMOJI_PICKER_CLASS = "ui-richeditor-emoji";
+
+// Сколько кнопок помещается в ряд при ширине панели (см. .ui-richeditor-emoji в richeditor.less).
+// Точность нужна только для оценки высоты нерисованной группы: ошибка сдвинет ползунок прокрутки,
+// но не саму раскладку — группа переносит кнопки сама.
+const EMOJI_COLUMNS = 8;
+
+/**
+ * Группа смайликов: и смысловое деление в панели (отбивается линией), и кусок, к которому
+ * применяется пропуск отрисовки. Поэлементно это было бы семьсот отслеживаемых поддеревьев,
+ * и слежение за ними съедает выигрыш от пропуска.
+ */
+function buildEmojiGroup(group: EmojiGroup): HTMLElement {
+	const rows = Math.ceil(group.emojis.length / EMOJI_COLUMNS);
+	const elem = DOM.tag("div", {
+		class: "emoji-group",
+		role: "group",
+		"aria-label": group.title,
+		// высота, пока группа не нарисована: без неё список схлопнулся бы, а прокрутка скакала
+		style: `--richeditor-emoji-rows: ${rows}`,
+	});
+
+	const fragment = document.createDocumentFragment();
+	for (const emoji of group.emojis)
+		fragment.appendChild(DOM.tag("button", { type: "button", class: "emoji", tabindex: "-1" }, emoji));
+	elem.appendChild(fragment);
+
+	return elem;
+}
+
+/**
+ * Собирает попап вставки смайлика.
+ *
+ * Попап принадлежит тому, кто его собрал: у панели форматирования свой, у поля сообщения — свой.
+ * Общий на всех пришлось бы переносить между владельцами и помнить, чей он сейчас; а показать
+ * два разом всё равно нельзя — {@link PopupManager} держит открытым один.
+ *
+ * Показом и закрытием занимается вызывающий (у редактора для этого есть `openEmojiPicker`):
+ * здесь только разметка и выбор символа.
+ */
+export function createEmojiPicker(onPick: (emoji: string) => void): HTMLElement {
+	const picker = DOM.tag("div", { class: `${POPUP_CLASS} ${EMOJI_PICKER_CLASS}` });
+
+	// Прокручивается список, а не сам попап: полоса прокрутки рисуется по краю коробки
+	// и перекрывала бы скругление рамки — угол выглядел бы срезанным.
+	const list = DOM.tag("div", { class: ["emoji-list", SCROLLABLE_CLASS] });
+	picker.appendChild(list);
+
+	for (const group of EMOJI_GROUPS) list.appendChild(buildEmojiGroup(group));
+
+	// попап живёт и вне панели, поэтому фокус гасит сам
+	picker.addEventListener("mousedown", (e) => e.preventDefault());
+	picker.addEventListener("click", (e) => {
+		const target = (e.target as HTMLElement).closest<HTMLElement>(".emoji");
+		if (!target) return;
+
+		onPick(target.textContent ?? "");
+		PopupManager.close();
+	});
+
+	return picker;
+}

package/source/format-config.ts

@@ -1,6 +1,6 @@
 // Конфигурация форматирования: типы, набор инструментов, markdown-маркеры и Ctrl/Cmd-хоткеи.
 
-export type FormatTool = "bold" | "italic" | "strike" | "underline" | "spoiler" | "code";
+export type FormatTool = "bold" | "italic" | "strike" | "underline" | "spoiler" | "code" | "link";
 export type FormatStorage = "html" | "markdown";
 
 /**
@@ -93,7 +93,7 @@ export function blockTypeOfTag(tagName: string): BlockType | null {
 	return BLOCK_TAGS[tagName] ?? null;
 }
 
-export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline", "spoiler", "code"];
+export const ALL_FORMAT_TOOLS: FormatTool[] = ["bold", "italic", "strike", "underline", "spoiler", "code", "link"];
 
 export const ALL_EDITOR_ACTIONS: EditorAction[] = ["emoji", "erase", "undo", "redo"];
 
@@ -170,6 +170,16 @@ export const FORMAT_TOOLS: Record<FormatTool, FormatToolDef> = {
 		hotkey: "",
 		title: "Моноширинный",
 	},
+	link: {
+		tag: "a",
+		matchTags: ["A"],
+		// Не парный маркер: адрес отдельной частью и в тексте не показывается. Пустой маркер
+		// выводит инструмент из маркерной машинерии (см. orderedMarkers в ./serialize), разбор
+		// и сборку он делает своими ветками — как и переносы с абзацами.
+		md: "",
+		hotkey: "k",
+		title: "Ссылка",
+	},
 };
 
 interface EditorActionDef {

package/source/format.ts

@@ -38,6 +38,8 @@ export {
 	activeFormats,
 	emptyFormatAt,
 	toggleFormat,
+	applyLink,
+	linkAt,
 	clearFormat,
 	clearAllFormat,
 	hasFormatting,

package/source/index.ts

@@ -1,6 +1,6 @@
 export { default } from "./richeditor";
 export * from "./richeditor";
-export { EMOJIS, EMOJI_GROUPS, type EmojiGroup } from "./emoji";
+export { EMOJIS, EMOJI_GROUPS, EMOJI_PICKER_CLASS, createEmojiPicker, type EmojiGroup } from "./emoji";
 export {
 	ALL_BLOCK_TYPES,
 	ALL_EDITOR_ACTIONS,