@brandup/ui-richeditor 1.0.40 → 1.0.42

package/README.md

@@ -49,6 +49,7 @@ editor.onChange(({ value }) => console.log(value));
 | `placeholder` | `string \| null` | Текст-заглушка |
 | `multiline` | `boolean` | Многострочный режим |
 | `paragraph` | `"block" \| "break"` | Что делает Enter: новый абзац (по умолчанию) или мягкий перенос |
+| `blocks` | `BlockType[]` | Типы блоков многострочного режима: `quote`, `code` (по умолчанию только `paragraph`) |
 | `readonly` | `boolean` | Только для чтения — запрещает ввод и изменение текста (выделение и копирование остаются) |
 | `toolbarContainer` | `HTMLElement \| null` | Контейнер для панели; по умолчанию `document.body` (`position: fixed`). Если задан — панель монтируется в него и позиционируется над ним (`position: absolute`). Контейнер должен быть `position: relative` |
 | `value` | `string` | Начальное значение |
@@ -71,7 +72,13 @@ editor.onChange(({ value }) => console.log(value));
 | `getLength(): number` | Длина текста (без учёта переводов строк) |
 | `focus(): void` | Установить фокус |
 | `applyFormat(tool): void` | Переключить формат на выделении (слово целиком) |
+| `applyBlock(type): void` | Переключить тип блоков под выделением; повторное применение возвращает обычный текст |
+| `applyCode(): void` | Код по выделению: моноширинный для части строки, блок — для целых строк |
+| `isCodeActive(): boolean` | Включён ли код в любом виде — подсветка объединённой кнопки |
+| `currentBlock: BlockType` | Тип блока под кареткой |
+| `blockTypes: BlockType[]` | Доступные типы блоков |
 | `isToolActive(tool): boolean` | Активен ли формат на текущем выделении |
+| `isToolEnabled(tool): boolean` | Доступен ли инструмент сейчас (внутри кода остальные выключены) |
 | `activeTools(): ReadonlySet<FormatTool>` | Активные форматы всех инструментов сразу (панель обновляется на каждое движение каретки, поштучный опрос обходил бы содержимое на каждую кнопку) |
 | `clearFormat(): void` | Снять всё форматирование с выделения (без выделения — со слова под кареткой) |
 | `clearAllFormat(): void` | Снять всё форматирование со всего содержимого |
@@ -152,6 +159,49 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 При нормализации (потеря фокуса, `setValue`, инициализация) пустые абзацы удаляются.
 
+## Блоки: цитата и код
+
+Кроме абзаца многострочный режим знает и другие типы блоков верхнего уровня. Они подключаются **явно** — их понимает не каждый получатель:
+
+```typescript
+new RichEditor(elem, { format: true, multiline: true, blocks: ["quote", "code"] });
+```
+
+| Тип | Тег | Разметка | Enter внутри |
+| --- | --- | --- | --- |
+| `paragraph` | `<p>` | — | по режиму `paragraph` |
+| `quote` | `<blockquote>` | `>` с пробелом в начале каждой строки | заканчивает блок |
+| `code` | `<pre>` | ограждение ```` ``` ```` | заканчивает блок |
+
+Обычный текст — такой же тип, а не «тип не задан»: он есть в наборе всегда, им становится содержимое, не попавшее ни в какой блок, и в него же блок возвращают. Кнопки в панели (`.block-button`) получают только остальные типы.
+
+Кнопки кода (моноширинного и блока) и спойлера временно скрыты (`HIDDEN_TOOLS`/`HIDDEN_BLOCKS` в `./toolbar`): сами возможности работают — значение разбирается, показывается и сохраняется, правку можно вызвать из кода (`applyFormat`, `applyBlock`, `applyCode`), — но в панель они пока не выводятся.
+
+### Одна кнопка на моноширинный и блок кода
+
+Когда включены и инструмент `code`, и тип блока `code`, панель показывает **одну** кнопку — так это устроено в мессенджерах. Вид выбирается по выделению, как и в самой разметке:
+
+- выделена одна строка или её часть → моноширинный (`` `код` ``);
+- выделено больше одной строки → блок кода из этих строк. Остальные строки остаются как были: в мессенджерском режиме всё сообщение — это один блок, и иначе кодом становился бы весь текст;
+- без выделения → блок кода из строки под кареткой. Моноширинным там делать нечего, а иначе блок был бы недостижим: в пустом поле не выделить строки, которых ещё нет;
+- код уже включён → повторное нажатие снимает именно его вид, целиком по блоку.
+
+Тем же занимается `applyCode()`, а `isCodeActive()` отвечает, включён ли код в любом виде — им подсвечена кнопка.
+
+В коде разметки нет — ни в моноширинном, ни в блоке: значение берёт оттуда голый текст, и любое форматирование внутри до получателя не доедет. Поэтому при переходе в моноширинный прежнее форматирование с этого куска снимается, внутри кода остальные инструменты недоступны (`isToolEnabled()` — кнопки гаснут), а разметка, попавшая внутрь как-то ещё (вставка, чужое значение), вычищается при первой же нормализации. Если включено только что-то одно, кнопка остаётся обычной: инструмента (`.format-button`) или блока (`.block-button`).
+
+Переключение:
+
+- кнопка панели или `applyBlock(type)` — на все блоки, которых касается выделение; повторное применение того же типа возвращает обычный текст;
+- **Enter** внутри цитаты или кода заканчивает блок и начинает обычный абзац, **Shift/Ctrl/Cmd+Enter** переносит строку внутри блока. Выходить из блока приходится чаще, чем продолжать его, а иначе уйти можно было бы только мышью;
+- **Backspace** в начале блока возвращает его к обычному тексту, не трогая содержимого.
+
+Особенности блока кода: инлайновое форматирование внутри не размечается (написанное остаётся буквальным) и снимается при переключении в этот тип, а пробелы внутри не схлопываются — отступы там часть текста.
+
+Подряд идущие строки с маркером цитаты — одна цитата; пустая строка между ними разделяет цитаты. Незакрытое ограждение блоком не считается: его строки остаются текстом, иначе одна случайная кавычка съедала бы весь остаток сообщения. Блок отключённого типа, пришедший вставкой или из значения, сохраняется как обычный текст — разметки от него в значении не будет, но текст не теряется.
+
+В режиме `paragraph: "break"` блоки работают так же, но пустая строка их не разделяет — там она сама по себе строка сообщения. Блок узнаётся по собственной разметке, поэтому между обычным текстом и цитатой в значении стоит один перенос, а не два.
+
 ## Вставка текста
 
 При включённом форматировании вставка (`paste`) сохраняет форматирование из буфера обмена (`text/html`):
@@ -172,8 +222,8 @@ new RichEditor(elem, { format: true, actions: ["emoji", "erase", "undo", "redo"]
 
 | `storage` | Хранение | Абзац / мягкий перенос | Маркеры форматирования |
 | --- | --- | --- | --- |
-| `html` | Санитизированный HTML | `<p>…</p>` / `<br>` | `<b>`, `<i>`, `<s>`, `<u>` |
-| `markdown` | Лёгкая разметка | `\n\n` / `\n` | `**жирный**`, `_курсив_`, `~зачёркнутый~`, `__подчёркнутый__` |
+| `html` | Санитизированный HTML | `<p>…</p>` / `<br>` | `<b>`, `<i>`, `<s>`, `<u>`, `<spoiler>`, `<code>` |
+| `markdown` | Лёгкая разметка | `\n\n` / `\n` | `**жирный**`, `_курсив_`, `~зачёркнутый~`, `__подчёркнутый__`, `\|\|спойлер\|\|`, `` `моноширинный` `` |
 
 Без форматирования (plain) значение хранится как markdown без инструментов: абзацы `\n\n`, мягкий перенос `\n`.
 

package/package.json

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

package/source/editing.ts

@@ -3,14 +3,12 @@
 // редактора и без истории — вызывающий сам решает, когда записывать undo-шаг.
 
 import { deserialize } from "./serialize";
-import { isBlock } from "./paragraphs";
+import { blockAt, blockTypeOf, blocksInRange, createBlock, isBlock } from "./paragraphs";
 import { documentSelection, innerSelection } from "./selection";
-import type { FormatMarkers, FormatTool } from "./format-config";
+import { BLOCK_TYPES, DEFAULT_BLOCK, type BlockType, type FormatMarkers, type FormatTool } from "./format-config";
 
 function emptyParagraph(): HTMLParagraphElement {
-	const p = document.createElement("p");
-	p.appendChild(document.createElement("br"));
-	return p;
+	return createBlock(DEFAULT_BLOCK) as HTMLParagraphElement;
 }
 
 // убирает пустые текст-узлы и ставит <br>-заполнитель в пустой абзац (для видимости и каретки)
@@ -51,21 +49,155 @@ export function selectAllContent(editable: HTMLElement) {
 	documentSelection(editable)?.selectAllChildren(editable);
 }
 
-/** Enter в multiline: разбить текущий абзац по каретке на два <p>. */
-export function insertParagraph(editable: HTMLElement) {
+/** Что сделала правка блоков: менялось ли содержимое и не появился ли блок из части строк. */
+export interface BlockChange {
+	changed: boolean;
+	/** Блок, собранный из выделенных строк (разделение); null — блоки меняли целиком. */
+	created: HTMLElement | null;
+}
+
+/**
+ * Меняет тип блоков, которых касается выделение. `changed: false` — менять было нечего:
+ * тогда ни содержимое, ни история не трогаются.
+ *
+ * У типа без инлайновой разметки (код) форматирование снимается: внутри него написанное
+ * остаётся буквальным, и сохранить его всё равно было бы негде.
+ */
+export function applyBlocks(editable: HTMLElement, range: Range, type: BlockType): BlockChange {
+	const blocks = blocksInRange(editable, range);
+
+	// Пустой редактор: блоков ещё нет, но тип задать можно — иначе в пустое поле его было бы
+	// не поставить вовсе, а набор блока обычно с этого и начинают.
+	if (!blocks.length && !editable.firstChild && type !== DEFAULT_BLOCK) {
+		const block = createBlock(type);
+		editable.appendChild(block);
+		caretToStart(block);
+
+		return { changed: true, created: block };
+	}
+
+	// Выделена часть строк блока — правим их, а не весь блок: иначе в мессенджерском режиме,
+	// где всё сообщение это один блок, кодом становился бы весь текст.
+	if (blocks.length === 1 && type !== DEFAULT_BLOCK && blockTypeOf(blocks[0]) !== type) {
+		const created = splitLines(blocks[0], range, type);
+		if (created) return { changed: true, created };
+	}
+
+	let changed = false;
+
+	for (const block of blocks) {
+		if (blockTypeOf(block) === type) continue;
+
+		const replacement = retagBlock(block, type);
+		if (!BLOCK_TYPES[type].inline) unwrapFormatting(replacement);
+
+		block.replaceWith(replacement);
+		fillEmptyParagraph(replacement);
+		changed = true;
+	}
+
+	return { changed, created: null };
+}
+
+/**
+ * Собирает блок нужного типа из строк, которых коснулось выделение; остальные строки остаются
+ * блоками прежнего типа до и после. Строки берутся целиком: код из половины строки — это уже
+ * моноширинный, а не блок.
+ *
+ * null — делить нечего: выделение и так захватило все строки блока.
+ */
+function splitLines(block: HTMLElement, range: Range, type: BlockType): HTMLElement | null {
+	const breaks = Array.from(block.querySelectorAll("br"));
+
+	// последний перенос перед выделением и первый после него — по ним и режем
+	const head = breaks.filter((br) => range.comparePoint(br, 0) < 0).pop();
+	const tail = breaks.find((br) => range.comparePoint(br, 0) > 0);
+	if (!head && !tail) return null;
+
+	const original = blockTypeOf(block) ?? DEFAULT_BLOCK;
+
+	// Хвост выносим первым: он дальше по дереву, и вынос головы сдвинул бы его границы.
+	// Сам перенос-разделитель уходит вместе с ним — строки разъезжаются по блокам.
+	const cut = (from: "before" | "after", br: HTMLElement): HTMLElement => {
+		const part = document.createRange();
+
+		if (from === "after") {
+			part.setStartAfter(br);
+			part.setEnd(block, block.childNodes.length);
+		} else {
+			part.setStart(block, 0);
+			part.setEndBefore(br);
+		}
+
+		const piece = document.createElement(BLOCK_TYPES[original].tag);
+		piece.appendChild(part.extractContents());
+		br.remove();
+		fillEmptyParagraph(piece);
+
+		return piece;
+	};
+
+	const after = tail ? cut("after", tail) : null;
+	const before = head ? cut("before", head) : null;
+
+	const created = retagBlock(block, type);
+	if (!BLOCK_TYPES[type].inline) unwrapFormatting(created);
+
+	block.replaceWith(created);
+	fillEmptyParagraph(created);
+
+	if (before) created.before(before);
+	if (after) created.after(after);
+
+	return created;
+}
+
+// Разворачивает инлайновые теги, оставляя текст и мягкие переносы. Список снимается заранее:
+// разворот внешнего тега поднимает вложенные к блоку, и обойти их нужно тоже.
+function unwrapFormatting(block: HTMLElement) {
+	for (const el of Array.from(block.querySelectorAll<HTMLElement>("*"))) {
+		if (el.tagName === "BR") continue;
+		el.replaceWith(...Array.from(el.childNodes));
+	}
+	block.normalize();
+}
+
+/**
+ * Стоит ли каретка в начале своего блока — по тексту до неё, а не по узлу: началом считается
+ * и позиция перед вложенным форматированием, и позиция в его первом текстовом узле.
+ */
+export function atBlockStart(editable: HTMLElement, range: Range): boolean {
+	if (!range.collapsed) return false;
+
+	const block = blockAt(editable, range.startContainer);
+	if (!block) return false;
+
+	const before = document.createRange();
+	before.selectNodeContents(block);
+	before.setEnd(range.startContainer, range.startOffset);
+
+	// Начало блока — это и начало его первой строки. Перед кареткой стоит перенос — значит
+	// строка не первая, и удалять нужно сам перенос, а не тип блока.
+	if (before.cloneContents().querySelector("br")) return false;
+
+	return before.toString().length === 0;
+}
+
+/** Enter в multiline: разбить текущий блок по каретке; хвост становится блоком типа `type`. */
+export function insertParagraph(editable: HTMLElement, type: BlockType = DEFAULT_BLOCK) {
 	const selection = innerSelection(editable);
 	if (!selection) return;
 
 	const range = selection.getRangeAt(0);
 	range.deleteContents();
 
-	// текущий абзац (ближайший <p>/<div> внутри редактора)
+	// текущий блок (ближайший блочный предок внутри редактора)
 	let para: Node | null = range.startContainer;
 	while (para && para !== editable && !isBlock(para)) para = para.parentNode;
 
 	// каретка не внутри абзаца — создаём абзац сразу с видимым результатом (иначе Enter «срабатывает со 2-го раза»)
 	if (!para || para === editable) {
-		const next = emptyParagraph();
+		const next = createBlock(type);
 		if (editable.childNodes.length === 0) {
 			// пустой редактор: пустая строка-источник + новая строка с кареткой
 			editable.appendChild(emptyParagraph());
@@ -85,10 +217,13 @@ export function insertParagraph(editable: HTMLElement) {
 	tail.setStart(range.endContainer, range.endOffset);
 	const fragment = tail.extractContents();
 
-	const next = document.createElement("p");
+	const next = document.createElement(BLOCK_TYPES[type].tag);
 	next.appendChild(fragment);
 	(para as ChildNode).after(next);
 
+	// хвост уехал в блок другого типа — его правила распространяются и на содержимое
+	if (!BLOCK_TYPES[type].inline) unwrapFormatting(next);
+
 	// extractContents в конце абзаца оставляет пустой текст-узел → <p></p> без заполнителя
 	// (невидим/нефокусируем, каретка не встаёт). Чистим и ставим <br> в опустевшие абзацы.
 	fillEmptyParagraph(para as HTMLElement);
@@ -141,6 +276,9 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 	}
 
 	const block = para as HTMLElement;
+	// Вставка в цитату или код остаётся в них: разорвать блок посреди вставки — не то,
+	// чего ждут, а тип целевого блока диктует и правила его содержимого.
+	const type = blockTypeOf(block) ?? DEFAULT_BLOCK;
 
 	// хвост текущего абзаца после каретки — выносим, чтобы вернуть в конец вставки
 	const tailRange = document.createRange();
@@ -148,6 +286,8 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 	tailRange.setStart(range.startContainer, range.startOffset);
 	const tail = tailRange.extractContents();
 
+	if (!BLOCK_TYPES[type].inline) for (const p of paras) unwrapFormatting(p);
+
 	// первый вставляемый абзац вливается в текущий (после содержимого до каретки)
 	while (paras[0].firstChild) block.appendChild(paras[0].firstChild);
 
@@ -156,15 +296,27 @@ export function insertPastedParagraphs(editable: HTMLElement, paras: HTMLElement
 		return;
 	}
 
-	// остальные абзацы — отдельными <p> после текущего; хвост — в конец последнего
+	// остальные абзацы — отдельными блоками того же типа после текущего; хвост — в конец последнего
 	let anchor: ChildNode = block;
 	for (let i = 1; i < paras.length; i++) {
+		paras[i] = retagBlock(paras[i], type);
 		anchor.after(paras[i]);
 		anchor = paras[i];
 	}
 	paras[paras.length - 1].appendChild(tail);
 }
 
+// Тот же блок, но другим тегом. Содержимое переносится как есть — правила типа к нему
+// применяет вызывающий, он же знает, откуда это содержимое взялось.
+function retagBlock(block: HTMLElement, type: BlockType): HTMLElement {
+	if (blockTypeOf(block) === type) return block;
+
+	const replacement = document.createElement(BLOCK_TYPES[type].tag);
+	while (block.firstChild) replacement.appendChild(block.firstChild);
+
+	return replacement;
+}
+
 /** Обрезает пробелы по краям абзаца (после схлопывания) — у крайних текстовых узлов. */
 function trimParagraphEdges(p: HTMLElement) {
 	const walker = document.createTreeWalker(p, NodeFilter.SHOW_TEXT);
@@ -215,7 +367,12 @@ export function buildParagraphs(lines: string[], blocks: boolean): HTMLElement[]
  * Разбирает HTML из буфера обмена в абзацы `<p>`, оставляя только разрешённые инструменты.
  * Пустой результат — вставлять нечего (вызывающий откатится на простой текст).
  */
-export function sanitizePastedHtml(html: string, tools: FormatTool[], markers: FormatMarkers): HTMLElement[] {
+export function sanitizePastedHtml(
+	html: string,
+	tools: FormatTool[],
+	markers: FormatMarkers,
+	types: BlockType[] = [DEFAULT_BLOCK]
+): HTMLElement[] {
 	// убираем мусорные элементы (Word/браузер: стили, скрипты, заголовок документа)
 	const source = document.createElement("template");
 	source.innerHTML = html;
@@ -223,7 +380,7 @@ export function sanitizePastedHtml(html: string, tools: FormatTool[], markers: F
 
 	// единый источник санитизации — deserialize (теги-синонимы → канонические, лишнее развёрнуто)
 	const holder = document.createElement("template");
-	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true);
+	holder.innerHTML = deserialize(source.innerHTML, "html", tools, markers, true, types);
 
 	// внешний HTML: пробелы/переводы строк между тегами не значимы — схлопываем,
 	// иначе литеральные \n (pre-wrap) и отступы дают лишние переносы

package/source/emoji.ts

@@ -1,53 +1,129 @@
-// Набор смайликов для кнопки вставки в тулбаре. Все символы — одиночные кодпойнты (без
-// ZWJ-последовательностей и модификаторов), поэтому переносятся в текст как единое целое.
-// Внимание: в UTF-16 каждый занимает две единицы, и getLength() (а значит и maxlength у
-// хоста) считает такой символ за два.
+// Набор смайликов для панели вставки. Все символы — одиночные кодпойнты (без ZWJ-последовательностей
+// и модификаторов), поэтому переносятся в текст как единое целое. Внимание: в UTF-16 каждый занимает
+// две единицы, и getLength() (а значит и maxlength у хоста) считает такой символ за два.
+//
+// Разложены по группам: панель рисует их в том же порядке и отделяет линией, а заодно группа —
+// это кусок, к которому применяется пропуск отрисовки (см. .emoji-group в richeditor.less).
 
-/** Смайлики, доступные в панели вставки (порядок сохраняется в UI). */
-export const EMOJIS: string[] = [
-	"😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😌", "😍", "😏", "😒", "😓", "😔",
-	"😖", "😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢", "😣", "😤", "😥", "😨", "😩", "😪", "😫",
-	"😭", "😰", "😱", "😲", "😳", "😵", "😷", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀",
-	"🙅", "🙆", "🙇", "🙈", "🙉", "🙊", "🙋", "🙌", "🙍", "🙎", "🙏", "🚀", "🚃", "🚄", "🚅", "🚇",
-	"🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚙", "🚚", "🚢", "🚤", "🚥", "🚧", "🚨", "🚩",
-	"🚪", "🚫", "🚬", "🚭", "🚲", "🚶", "🚹", "🚺", "🚻", "🚼", "🚽", "🚾", "🛀", "🅰", "🅱", "🅾",
-	"🅿", "🆎", "🆑", "🆒", "🆓", "🆔", "🆕", "🆖", "🆗", "🆘", "🆙", "🆚", "🈁", "🈂", "🈚", "🈯",
-	"🈲", "🈳", "🈴", "🈵", "🈶", "🈷", "🈸", "🈹", "🈺", "🉐", "🉑", "🀄", "🃏", "🌀", "🌁", "🌂",
-	"🌃", "🌄", "🌅", "🌆", "🌇", "🌈", "🌉", "🌊", "🌋", "🌌", "🌏", "🌑", "🌓", "🌔", "🌕", "🌙",
-	"🌛", "🌟", "🌠", "🌰", "🌱", "🌴", "🌵", "🌷", "🌸", "🌹", "🌺", "🌻", "🌼", "🌽", "🌾", "🌿",
-	"🍀", "🍁", "🍂", "🍃", "🍄", "🍅", "🍆", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑",
-	"🍒", "🍓", "🍔", "🍕", "🍖", "🍗", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍞", "🍟", "🍠", "🍡",
-	"🍢", "🍣", "🍤", "🍥", "🍦", "🍧", "🍨", "🍩", "🍪", "🍫", "🍬", "🍭", "🍮", "🍯", "🍰", "🍱",
-	"🍲", "🍳", "🍴", "🍵", "🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🎀", "🎁", "🎂", "🎃", "🎄", "🎅",
-	"🎆", "🎇", "🎈", "🎉", "🎊", "🎋", "🎌", "🎍", "🎎", "🎏", "🎐", "🎑", "🎒", "🎓", "🎠", "🎡",
-	"🎢", "🎣", "🎤", "🎥", "🎦", "🎧", "🎨", "🎩", "🎪", "🎫", "🎬", "🎭", "🎮", "🎯", "🎰", "🎱",
-	"🎲", "🎳", "🎴", "🎵", "🎶", "🎷", "🎸", "🎹", "🎺", "🎻", "🎼", "🎽", "🎾", "🎿", "🏀", "🏁",
-	"🏂", "🏃", "🏄", "🏆", "🏈", "🏊", "🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏧", "🏨", "🏩", "🏪",
-	"🏫", "🏬", "🏭", "🏮", "🏯", "🏰", "🐌", "🐍", "🐎", "🐑", "🐒", "🐔", "🐗", "🐘", "🐙", "🐚",
-	"🐛", "🐜", "🐝", "🐞", "🐟", "🐠", "🐡", "🐢", "🐣", "🐤", "🐥", "🐦", "🐧", "🐨", "🐩", "🐫",
-	"🐬", "🐭", "🐮", "🐯", "🐰", "🐱", "🐲", "🐳", "🐴", "🐵", "🐶", "🐷", "🐸", "🐹", "🐺", "🐻",
-	"🐼", "🐽", "🐾", "👀", "👂", "👃", "👄", "👅", "👆", "👇", "👈", "👉", "👊", "👋", "👌", "👍",
-	"👎", "👏", "👐", "👑", "👒", "👓", "👔", "👕", "👖", "👗", "👘", "👙", "👚", "👛", "👜", "👝",
-	"👞", "👟", "👠", "👡", "👢", "👣", "👤", "👦", "👧", "👨", "👩", "👪", "👫", "👮", "👯", "👰",
-	"👱", "👲", "👳", "👴", "👵", "👶", "👷", "👸", "👹", "👺", "👻", "👼", "👽", "👾", "👿", "💀",
-	"💁", "💂", "💃", "💄", "💅", "💆", "💇", "💈", "💉", "💊", "💋", "💌", "💍", "💎", "💏", "💐",
-	"💑", "💒", "💓", "💔", "💕", "💖", "💗", "💘", "💙", "💚", "💛", "💜", "💝", "💞", "💟", "💠",
-	"💡", "💢", "💣", "💤", "💥", "💦", "💧", "💨", "💩", "💪", "💫", "💬", "💮", "💯", "💰", "💱",
-	"💲", "💳", "💴", "💵", "💸", "💹", "💺", "💻", "💼", "💽", "💾", "💿", "📀", "📁", "📂", "📃",
-	"📄", "📅", "📆", "📇", "📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "📑", "📒", "📓",
-	"📔", "📕", "📖", "📗", "📘", "📙", "📚", "📛", "📜", "📝", "📞", "📟", "📠", "📡", "📢", "📣",
-	"📤", "📥", "📦", "📧", "📨", "📩", "📪", "📫", "📮", "📰", "📱", "📲", "📳", "📴", "📶", "📷",
-	"📹", "📺", "📻", "📼", "🔃", "🔊", "🔋", "🔌", "🔍", "🔎", "🔏", "🔐", "🔑", "🔒", "🔓", "🔔",
-	"🔖", "🔗", "🔘", "🔙", "🔚", "🔛", "🔜", "🔝", "🔞", "🔟", "🔠", "🔡", "🔢", "🔣", "🔤", "🔥",
-	"🔦", "🔧", "🔨", "🔩", "🔪", "🔫", "🔮", "🔯", "🔰", "🔱", "🔲", "🔳", "🔴", "🔵", "🔶", "🔷",
-	"🔸", "🔹", "🔺", "🔻", "🔼", "🔽", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙",
-	"🕚", "🕛", "🗻", "🗼", "🗽", "🗾", "🗿", "😇", "😈", "😎", "😐", "😑", "😕", "😗", "😙", "😛",
-	"😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶", "🚁", "🚂", "🚆", "🚈", "🚊", "🚍", "🚎", "🚐",
-	"🚔", "🚖", "🚘", "🚛", "🚜", "🚝", "🚞", "🚟", "🚠", "🚡", "🚣", "🚦", "🚮", "🚯", "🚰", "🚱",
-	"🚳", "🚴", "🚵", "🚷", "🚸", "🚿", "🛁", "🛂", "🛃", "🛄", "🛅", "🌍", "🌎", "🌐", "🌒", "🌖",
-	"🌗", "🌘", "🌚", "🌜", "🌝", "🌞", "🌲", "🌳", "🍋", "🍐", "🍼", "🏇", "🏉", "🏤", "🐀", "🐁",
-	"🐂", "🐃", "🐄", "🐅", "🐆", "🐇", "🐈", "🐉", "🐊", "🐋", "🐏", "🐐", "🐓", "🐕", "🐖", "🐪",
-	"👥", "👬", "👭", "💭", "💶", "💷", "📬", "📭", "📯", "📵", "🔀", "🔁", "🔂", "🔄", "🔅", "🔆",
-	"🔇", "🔉", "🔕", "🔬", "🔭", "🕜", "🕝", "🕞", "🕟", "🕠", "🕡", "🕢", "🕣", "🕤", "🕥", "🕦",
-	"🕧",
+/** Группа смайликов в панели вставки. */
+export interface EmojiGroup {
+	/** Название группы; в панели не показывается, уходит в подпись для скринридера. */
+	title: string;
+	emojis: string[];
+}
+
+/** Смайлики по группам (порядок сохраняется в UI). */
+export const EMOJI_GROUPS: EmojiGroup[] = [
+	{
+		title: "Смайлы и жесты",
+		// prettier-ignore
+		emojis: [
+			"😀", "😁", "😂", "😃", "😄", "😅", "😆", "😉", "😊", "😋", "😌", "😍", "😏", "😒", "😓", "😔",
+			"😖", "😘", "😚", "😜", "😝", "😞", "😠", "😡", "😢", "😣", "😤", "😥", "😨", "😩", "😪", "😫",
+			"😭", "😰", "😱", "😲", "😳", "😵", "😷", "😸", "😹", "😺", "😻", "😼", "😽", "😾", "😿", "🙀",
+			"🙅", "🙆", "🙇", "🙈", "🙉", "🙊", "🙋", "🙌", "🙍", "🙎", "🙏", "😇", "😈", "😎", "😐", "😑",
+			"😕", "😗", "😙", "😛", "😟", "😦", "😧", "😬", "😮", "😯", "😴", "😶",
+		],
+	},
+	{
+		title: "Люди",
+		// prettier-ignore
+		emojis: [
+			"👀", "👂", "👃", "👄", "👅", "👆", "👇", "👈", "👉", "👊", "👋", "👌", "👍", "👎", "👏", "👐",
+			"👑", "👒", "👓", "👔", "👕", "👖", "👗", "👘", "👙", "👚", "👛", "👜", "👝", "👞", "👟", "👠",
+			"👡", "👢", "👣", "👤", "👦", "👧", "👨", "👩", "👪", "👫", "👮", "👯", "👰", "👱", "👲", "👳",
+			"👴", "👵", "👶", "👷", "👸", "👹", "👺", "👻", "👼", "👽", "👾", "👿", "💀", "💁", "💂", "💃",
+			"💄", "💅", "💆", "💇", "💏", "💑", "👥", "👬", "👭",
+		],
+	},
+	{
+		title: "Животные",
+		// prettier-ignore
+		emojis: [
+			"🐌", "🐍", "🐎", "🐑", "🐒", "🐔", "🐗", "🐘", "🐙", "🐚", "🐛", "🐜", "🐝", "🐞", "🐟", "🐠",
+			"🐡", "🐢", "🐣", "🐤", "🐥", "🐦", "🐧", "🐨", "🐩", "🐫", "🐬", "🐭", "🐮", "🐯", "🐰", "🐱",
+			"🐲", "🐳", "🐴", "🐵", "🐶", "🐷", "🐸", "🐹", "🐺", "🐻", "🐼", "🐽", "🐾", "🐀", "🐁", "🐂",
+			"🐃", "🐄", "🐅", "🐆", "🐇", "🐈", "🐉", "🐊", "🐋", "🐏", "🐐", "🐓", "🐕", "🐖", "🐪",
+		],
+	},
+	{
+		title: "Природа",
+		// prettier-ignore
+		emojis: [
+			"🌀", "🌁", "🌂", "🌃", "🌄", "🌅", "🌆", "🌇", "🌈", "🌉", "🌊", "🌋", "🌌", "🌏", "🌑", "🌓",
+			"🌔", "🌕", "🌙", "🌛", "🌟", "🌠", "🌰", "🌱", "🌴", "🌵", "🌷", "🌸", "🌹", "🌺", "🌻", "🌼",
+			"🌽", "🌾", "🌿", "🍀", "🍁", "🍂", "🍃", "🌍", "🌎", "🌐", "🌒", "🌖", "🌗", "🌘", "🌚", "🌜",
+			"🌝", "🌞", "🌲", "🌳",
+		],
+	},
+	{
+		title: "Еда",
+		// prettier-ignore
+		emojis: [
+			"🍄", "🍅", "🍆", "🍇", "🍈", "🍉", "🍊", "🍌", "🍍", "🍎", "🍏", "🍑", "🍒", "🍓", "🍔", "🍕",
+			"🍖", "🍗", "🍘", "🍙", "🍚", "🍛", "🍜", "🍝", "🍞", "🍟", "🍠", "🍡", "🍢", "🍣", "🍤", "🍥",
+			"🍦", "🍧", "🍨", "🍩", "🍪", "🍫", "🍬", "🍭", "🍮", "🍯", "🍰", "🍱", "🍲", "🍳", "🍴", "🍵",
+			"🍶", "🍷", "🍸", "🍹", "🍺", "🍻", "🍋", "🍐", "🍼",
+		],
+	},
+	{
+		title: "Праздники и спорт",
+		// prettier-ignore
+		emojis: [
+			"🎀", "🎁", "🎂", "🎃", "🎄", "🎅", "🎆", "🎇", "🎈", "🎉", "🎊", "🎋", "🎌", "🎍", "🎎", "🎏",
+			"🎐", "🎑", "🎒", "🎓", "🎠", "🎡", "🎢", "🎣", "🎤", "🎥", "🎦", "🎧", "🎨", "🎩", "🎪", "🎫",
+			"🎬", "🎭", "🎮", "🎯", "🎰", "🎱", "🎲", "🎳", "🎴", "🎵", "🎶", "🎷", "🎸", "🎹", "🎺", "🎻",
+			"🎼", "🎽", "🎾", "🎿", "🏀", "🏁", "🏂", "🏃", "🏄", "🏆", "🏈", "🏊", "🏇", "🏉",
+		],
+	},
+	{
+		title: "Места",
+		// prettier-ignore
+		emojis: [
+			"🏠", "🏡", "🏢", "🏣", "🏥", "🏦", "🏧", "🏨", "🏩", "🏪", "🏫", "🏬", "🏭", "🏮", "🏯", "🏰",
+			"🗻", "🗼", "🗽", "🗾", "🗿", "🏤",
+		],
+	},
+	{
+		title: "Транспорт",
+		// prettier-ignore
+		emojis: [
+			"🚀", "🚃", "🚄", "🚅", "🚇", "🚉", "🚌", "🚏", "🚑", "🚒", "🚓", "🚕", "🚗", "🚙", "🚚", "🚢",
+			"🚤", "🚥", "🚧", "🚨", "🚩", "🚪", "🚫", "🚬", "🚭", "🚲", "🚶", "🚹", "🚺", "🚻", "🚼", "🚽",
+			"🚾", "🛀", "🚁", "🚂", "🚆", "🚈", "🚊", "🚍", "🚎", "🚐", "🚔", "🚖", "🚘", "🚛", "🚜", "🚝",
+			"🚞", "🚟", "🚠", "🚡", "🚣", "🚦", "🚮", "🚯", "🚰", "🚱", "🚳", "🚴", "🚵", "🚷", "🚸", "🚿",
+			"🛁", "🛂", "🛃", "🛄", "🛅",
+		],
+	},
+	{
+		title: "Предметы",
+		// prettier-ignore
+		emojis: [
+			"💈", "💉", "💊", "💋", "💌", "💍", "💎", "💐", "💠", "💡", "💰", "💱", "💲", "💳", "💴", "💵",
+			"💸", "💹", "💺", "💻", "💼", "💽", "💾", "💿", "📀", "📁", "📂", "📃", "📄", "📅", "📆", "📇",
+			"📈", "📉", "📊", "📋", "📌", "📍", "📎", "📏", "📐", "📑", "📒", "📓", "📔", "📕", "📖", "📗",
+			"📘", "📙", "📚", "📛", "📜", "📝", "📞", "📟", "📠", "📡", "📢", "📣", "📤", "📥", "📦", "📧",
+			"📨", "📩", "📪", "📫", "📮", "📰", "📱", "📲", "📳", "📴", "📶", "📷", "📹", "📺", "📻", "📼",
+			"💶", "💷", "📬", "📭", "📯", "📵",
+		],
+	},
+	{
+		title: "Символы",
+		// prettier-ignore
+		emojis: [
+			"🅰", "🅱", "🅾", "🅿", "🆎", "🆑", "🆒", "🆓", "🆔", "🆕", "🆖", "🆗", "🆘", "🆙", "🆚", "🈁",
+			"🈂", "🈚", "🈯", "🈲", "🈳", "🈴", "🈵", "🈶", "🈷", "🈸", "🈹", "🈺", "🉐", "🉑", "🀄", "🃏",
+			"💒", "💓", "💔", "💕", "💖", "💗", "💘", "💙", "💚", "💛", "💜", "💝", "💞", "💟", "💢", "💣",
+			"💤", "💥", "💦", "💧", "💨", "💩", "💪", "💫", "💬", "💮", "💯", "🔃", "🔊", "🔋", "🔌", "🔍",
+			"🔎", "🔏", "🔐", "🔑", "🔒", "🔓", "🔔", "🔖", "🔗", "🔘", "🔙", "🔚", "🔛", "🔜", "🔝", "🔞",
+			"🔟", "🔠", "🔡", "🔢", "🔣", "🔤", "🔥", "🔦", "🔧", "🔨", "🔩", "🔪", "🔫", "🔮", "🔯", "🔰",
+			"🔱", "🔲", "🔳", "🔴", "🔵", "🔶", "🔷", "🔸", "🔹", "🔺", "🔻", "🔼", "🔽", "🕐", "🕑", "🕒",
+			"🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕛", "💭", "🔀", "🔁", "🔂", "🔄", "🔅", "🔆",
+			"🔇", "🔉", "🔕", "🔬", "🔭", "🕜", "🕝", "🕞", "🕟", "🕠", "🕡", "🕢", "🕣", "🕤", "🕥", "🕦",
+			"🕧",
+		],
+	},
 ];
+
+/** Все смайлики подряд, в порядке групп. */
+export const EMOJIS: string[] = EMOJI_GROUPS.flatMap((group) => group.emojis);