@olddevs/ui 0.0.0-stage → 4.0.0

package/src/editor/features/color/styleExtensions.ts

@@ -0,0 +1,316 @@
+"use client";
+
+import type { DOMOutputSpec } from "@tiptap/pm/model";
+import { mergeAttributes, type Extension, type Mark } from "@tiptap/core";
+import { Highlight } from "@tiptap/extension-highlight";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { Color, TextStyle } from "@tiptap/extension-text-style";
+import {
+  CUSTOM_COLOR_PROPERTY,
+  customColorFromStyle,
+  customColorStyle,
+  normalizeCustomColor,
+} from "./customColor.js";
+import {
+  alignmentFromElement,
+  DEFAULT_ALIGNMENT,
+  EDITOR_ALIGNMENTS,
+  EDITOR_MARKER_NAMES,
+  EDITOR_TEXT_COLOR_NAMES,
+  markerNameFromAttribute,
+  type EditorAlignment,
+} from "../../styles/palette.js";
+
+/**
+ * Цвет текста, маркер и выравнивание: расширения Tiptap, переписанные с
+ * `style` на `data-*`.
+ *
+ * ПОЧЕМУ НЕ «ИЗ КОРОБКИ». `Color`, `Highlight` и `TextAlign` пишут
+ * `style="color: …"` и читают любое значение CSS, которое пришло. Для кита это
+ * два обещания, которые такой разбор нарушает: в сохранённом HTML нет `style`
+ * (сервер потребителя может не разрешать его вовсе), и цвет — только из
+ * палитры токенов, а не `#ff0000` из вставки из Word. Поэтому пакеты взяты ради
+ * команд и разметки Схемы, а атрибуты, разбор и вывод заменены.
+ *
+ * ЕДИНСТВЕННОЕ ИСКЛЮЧЕНИЕ — ЦВЕТ АВТОРА (`customColor.ts`): `style="color:#rrggbb"`
+ * на `span` и `style="background-color:#rrggbb"` на `mark`, и только в этой
+ * строгой форме, никогда вместе с `data-color`. Остальной `style` по-прежнему не
+ * разбирается.
+ *
+ * ЧТО НЕ ИЗ ПАЛИТРЫ — ОТБРАСЫВАЕТСЯ ВМЕСТЕ С ОБЁРТКОЙ, ТЕКСТ ОСТАЁТСЯ.
+ * `<span data-color="hotpink">` разбирается без метки, `<span style="…">` не
+ * разбирается вовсе: значение CSS из чужого HTML не переводится в ближайший
+ * цвет палитры. Перевод угадывал бы за автора, а в тёмной теме угаданный цвет
+ * мог бы оказаться нечитаемым.
+ */
+
+const textColorNames: ReadonlySet<string> = new Set(EDITOR_TEXT_COLOR_NAMES);
+const markerNames: ReadonlySet<string> = new Set(EDITOR_MARKER_NAMES);
+
+const knownAlignments: ReadonlySet<string> = new Set(EDITOR_ALIGNMENTS);
+
+type ColorProperty = (typeof CUSTOM_COLOR_PROPERTY)[keyof typeof CUSTOM_COLOR_PROPERTY];
+
+/**
+ * Что считать именем палитры на метке. Палитр две (`palette.ts`): `span`
+ * берёт имена цвета текста, `mark` — имена маркера, и чужое имя на теге не
+ * принимается. `named` — имя в том виде, в каком оно пишется в документ;
+ * `parsed` — то же из чужого или сохранённого HTML: маркер там переводит
+ * старое имя в новое (`LEGACY_MARKER_NAMES`), текст — нет.
+ */
+interface ColorKind {
+  property: ColorProperty;
+  named: (value: string | null) => string | null;
+  parsed: (value: string | null) => string | null;
+}
+
+const TEXT_KIND: ColorKind = {
+  property: CUSTOM_COLOR_PROPERTY.span,
+  named: (value) => (value !== null && textColorNames.has(value) ? value : null),
+  parsed: (value) => (value !== null && textColorNames.has(value) ? value : null),
+};
+
+const MARKER_KIND: ColorKind = {
+  property: CUSTOM_COLOR_PROPERTY.mark,
+  named: (value) => (value !== null && markerNames.has(value) ? value : null),
+  parsed: markerNameFromAttribute,
+};
+
+/**
+ * Значение цвета метки: имя её палитры или произвольный `#rrggbb` (регистр
+ * приводится к нижнему). Метка хранит одну строку, и это же делает палитру и
+ * произвольный цвет взаимоисключающими: второй не может «добавиться» к первому.
+ */
+const colorValue = (value: unknown, kind: ColorKind): string | null =>
+  typeof value === "string" ? (kind.named(value) ?? normalizeCustomColor(value)) : null;
+
+/** Атрибуты HTML для значения цвета метки: `data-color` ИЛИ `style`, не оба. */
+const renderColor = (value: string | null | undefined, kind: ColorKind): Record<string, string> => {
+  const color = colorValue(value, kind);
+  if (color === null) return {};
+  return kind.named(color) !== null
+    ? { "data-color": color }
+    : { style: customColorStyle(kind.property, color) };
+};
+
+/**
+ * Разметка метки со `style`, которая сохраняет его ДОСЛОВНО.
+ *
+ * ПОЧЕМУ НЕ МАССИВ `["span", { style }, 0]`. ProseMirror пишет ключ `style`
+ * через `element.style.cssText`, и браузер возвращает значение в своей записи:
+ * `color:#ff0000` выходит как `color: rgb(255, 0, 0);`. Такой документ при
+ * следующей загрузке не прошёл бы строгий разбор, а правило «в `style` только
+ * `color:#rrggbb`» для очистки на сервере (`sanitizeRichText`) перестало бы быть правдой.
+ * `setAttribute("style", …)` строку не трогает, поэтому элемент собирается
+ * руками, а ProseMirror получает готовый узел и место для содержимого.
+ */
+const renderMark = (tag: "span" | "mark", attributes: Record<string, string>): DOMOutputSpec => {
+  const { style, ...rest } = attributes;
+  if (style === undefined || typeof document === "undefined") return [tag, attributes, 0];
+  const element = document.createElement(tag);
+  for (const [name, value] of Object.entries(rest)) element.setAttribute(name, value);
+  element.setAttribute("style", style);
+  return { dom: element, contentDOM: element };
+};
+
+/**
+ * Цвет элемента из чужого HTML. Имя палитры метки в `data-color` — первым;
+ * `style` читается, только когда `data-color` нет вовсе: элемент с чужим именем
+ * и со `style` не получает ничего, а не «хотя бы style».
+ */
+const colorOf = (element: HTMLElement, kind: ColorKind): string | null => {
+  const name = element.getAttribute("data-color");
+  if (name !== null) return kind.parsed(name);
+  return customColorFromStyle(element.getAttribute("style"), kind.property);
+};
+
+/**
+ * Метка цвета текста: `<span data-color="danger">`.
+ *
+ * Метка движка называется `textStyle` — под этим именем её знает `Color`,
+ * поэтому имя не меняется. Правило разбора берёт только `span` с именем из
+ * палитры: пустая обёртка `<span>` (разметка пункта чек-листа) и `span` со
+ * `style` метки не получают.
+ */
+const TextColorMark: Mark = TextStyle.extend({
+  // Снаружи маркера (у него 1001): `span[data-color]` › `mark` › `sup`. Тёмный
+  // текст маркера (`prose.ts`) стоит на `mark` и потому сильнее цвета автора
+  // вокруг — на яркой подложке текст читается в любой теме.
+  priority: 1002,
+  renderHTML({ HTMLAttributes }) {
+    return renderMark("span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes));
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-color],span[style]",
+        getAttrs: (element) => (colorOf(element, TEXT_KIND) ? {} : false),
+      },
+    ];
+  },
+});
+
+/** Значение метки цвета: имя палитры в `data-color` или `#rrggbb` в `style`. */
+const TextColorValue: Extension = Color.extend({
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element: HTMLElement) => colorOf(element, TEXT_KIND),
+            renderHTML: (attributes: { color?: string | null }) =>
+              renderColor(attributes.color, TEXT_KIND),
+          },
+        },
+      },
+    ];
+  },
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      // Ни имя палитры, ни `#rrggbb` — не ставится: метка без значения вышла
+      // бы пустым `<span>` в сохранённом HTML.
+      setColor:
+        (color) =>
+        ({ chain }) => {
+          const value = colorValue(color, TEXT_KIND);
+          return value !== null && chain().setMark("textStyle", { color: value }).run();
+        },
+    } as ReturnType<NonNullable<typeof Color.config.addCommands>>;
+  },
+});
+
+/** Инструмент `color`: метка и её значение вместе. */
+export const TEXT_COLOR_EXTENSIONS = [TextColorMark, TextColorValue];
+
+/**
+ * Маркер: `<mark data-color="yellow">`. Маркер без цвета из палитры не
+ * существует: голый `<mark>` браузер красит жёлтым с чёрным текстом, и в
+ * тёмной теме это светящаяся плашка поверх всего документа. Поэтому разбор
+ * берёт только `mark[data-color]` с известным именем, а команда без цвета
+ * ничего не ставит.
+ *
+ * Выключены и всё, что ставило маркер без цвета: `Mod-Shift-H`, правило ввода
+ * и вставки `==текст==`, разбор Markdown. Последнее ещё и закрывает утечку
+ * между Редакторами: правила Markdown живут в общем `marked`, и маркер одного
+ * Редактора разбирал бы `==` у другого — без инструмента.
+ */
+export const HighlightExtension: Mark = Highlight.configure({ multicolor: true }).extend({
+  /*
+    Маркер — САМАЯ ВНЕШНЯЯ Метка. Вложенность Меток в DOM задаёт порядок в
+    Схеме, а его — приоритет расширения. С обычным приоритетом маркер ложился
+    внутрь `<sup>`/`<sub>` и поднимался вместе с индексом: полоса прыгала
+    вверх-вниз посреди строки. Снаружи его подложка остаётся на строке, а индекс
+    поднимается внутри неё. Выше и ссылки (у `RichLink` приоритет 1000), чтобы
+    помеченная ссылка тоже не рвала полосу.
+  */
+  priority: 1001,
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element: HTMLElement) => colorOf(element, MARKER_KIND),
+        renderHTML: (attributes: { color?: string | null }) =>
+          renderColor(attributes.color, MARKER_KIND),
+      },
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    return renderMark("mark", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes));
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "mark[data-color],mark[style]",
+        getAttrs: (element) => (colorOf(element, MARKER_KIND) ? {} : false),
+      },
+    ];
+  },
+  addCommands() {
+    const parent = this.parent?.();
+    return {
+      ...parent!,
+      // Маркер без цвета (палитры или `#rrggbb`) не ставится: см. комментарий
+      // к расширению.
+      setHighlight:
+        (attributes) =>
+        ({ commands }) => {
+          const color = colorValue(attributes?.color, MARKER_KIND);
+          return color !== null && commands.setMark(this.name, { ...attributes, color });
+        },
+    };
+  },
+  addKeyboardShortcuts: () => ({}),
+  addInputRules: () => [],
+  addPasteRules: () => [],
+  // Расширение-родитель держит свой токенайзер, а `undefined` в `extend`
+  // родителя не заглушает, поэтому подменяется токенайзером, который не находит
+  // ничего: `start` без совпадения не даёт разбору остановиться на `==`.
+  markdownTokenizer: {
+    name: "highlight",
+    level: "inline",
+    start: () => -1,
+    tokenize: () => undefined,
+  },
+  // Цвет при экспорте в Markdown теряется (спека, «Markdown»): остаётся текст.
+  renderMarkdown: (node, helpers) => helpers.renderChildren(node),
+  parseMarkdown: (token, helpers) => helpers.parseInline(token.tokens ?? []),
+});
+
+/**
+ * Выравнивание Блока: `<p data-align="center">`.
+ *
+ * `left` — умолчание, и в разметку не пишется: документ без выравнивания
+ * остаётся прежним, а `setTextAlign("left")` снимает атрибут, а не ставит
+ * «явно слева». Читается `left` из чужого HTML как отсутствие атрибута.
+ *
+ * Типы — абзац и заголовок. Заголовков Схема знает четыре уровня (первый — с `heading1`),
+ * поэтому выравниваются `p` и `h1`–`h4`; абзац внутри списка или цитаты — тоже `p`.
+ */
+export const TextAlignExtension: Extension = TextAlign.extend({
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          textAlign: {
+            default: null,
+            // `data-align`, а из чужого HTML — `text-align` и `align` (`palette.ts`).
+            parseHTML: (element: HTMLElement): EditorAlignment | null =>
+              alignmentFromElement(element),
+            renderHTML: (attributes: { textAlign?: string | null }) =>
+              attributes.textAlign &&
+              knownAlignments.has(attributes.textAlign) &&
+              attributes.textAlign !== DEFAULT_ALIGNMENT
+                ? { "data-align": attributes.textAlign }
+                : {},
+          },
+        },
+      },
+    ];
+  },
+  addCommands() {
+    const parent = this.parent?.();
+    return {
+      ...parent!,
+      setTextAlign:
+        (alignment) =>
+        ({ commands }) => {
+          if (alignment === DEFAULT_ALIGNMENT) return commands.unsetTextAlign();
+          if (!knownAlignments.has(alignment)) return false;
+          return this.options.types
+            .map((type) => commands.updateAttributes(type, { textAlign: alignment }))
+            .some(Boolean);
+        },
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Shift-l": () => this.editor.commands.setTextAlign("left"),
+      "Mod-Shift-e": () => this.editor.commands.setTextAlign("center"),
+      "Mod-Shift-r": () => this.editor.commands.setTextAlign("right"),
+    };
+  },
+}).configure({ types: ["paragraph", "heading"], alignments: [...EDITOR_ALIGNMENTS] });

package/src/editor/features/emoji/EmojiGrid.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from "react";
+import { useMessages } from "../../../i18n/useMessages.js";
+import { cn } from "../../../lib/cn.js";
+import { EMOJI_CATEGORIES, EMOJI_COLUMNS, EMOJI_SET, type Emoji } from "./emoji.js";
+
+export interface EmojiGridProps {
+  /** Эмодзи выбран: `Enter` или пробел в сетке, щелчок по ячейке. */
+  onPick: (emoji: Emoji) => void;
+  /**
+   * Взять фокус при монтировании. Хозяину, у которого фокус ставит ловушка
+   * (поповер Radix), — `false`: сетка, взявшая его раньше ловушки, внутри
+   * `Dialog` теряет его обратно.
+   */
+  autoFocus?: boolean;
+  className?: string;
+}
+
+/** Все эмодзи набора подряд, как их обходит клавиатура. */
+const FLAT: readonly { emoji: Emoji; category: (typeof EMOJI_CATEGORIES)[number] }[] =
+  EMOJI_CATEGORIES.flatMap((category) => EMOJI_SET[category].map((emoji) => ({ emoji, category })));
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+/**
+ * Сетка эмодзи: категории по порядку, в каждой — строки по десять.
+ *
+ * ARIA: ШАБЛОН GRID ИЗ APG, КАК У `TableSizeGrid`. `role="grid"` — группы строк
+ * (`rowgroup`, по одной на категорию, с именем категории), строки (`row`) и
+ * ячейки (`gridcell`); фокус остаётся на самой сетке, а текущую ячейку называет
+ * `aria-activedescendant`. Roving tabindex отвергнут по той же причине: ячеек
+ * восемьдесят, и Tab, проходящий по каждой, — это восемьдесят остановок вместо
+ * одной. Стрелки двигают выбор на ячейку и на строку, `Home` и `End` — по
+ * строке (с `Ctrl` — в углы сетки), `Enter` и пробел вставляют. `Escape` сетка
+ * не слушает: закрывает поповер Radix, а вместе с ним — стек слоёв (ADR-0041).
+ *
+ * ИМЯ ЯЧЕЙКИ — СЛОВАМИ. Символ эмодзи скринридеры читают по-разному, а то и
+ * молчат, поэтому имя ячейки — из каталога сообщений (`emojiName`), а сам
+ * символ только рисуется. Подпись категории видна глазу, а слуху её читает
+ * имя группы строк: дубль в дереве доступности был бы шумом.
+ *
+ * ОДИН ЭМОДЗИ В ДВУХ КАТЕГОРИЯХ — ДВЕ ЯЧЕЙКИ. Идентификатор ячейки берётся по
+ * её месту в сетке, а не по имени: «Избранное» повторяет часть остальных.
+ */
+export function EmojiGrid({ onPick, autoFocus = true, className }: EmojiGridProps) {
+  const messages = useMessages().editor;
+  const id = useId();
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [active, setActive] = useState(0);
+
+  useEffect(() => {
+    if (autoFocus) gridRef.current?.focus();
+  }, [autoFocus]);
+
+  // Активная ячейка не уходит из виду, когда сетка прокручивается стрелками.
+  const activeId = `${id}-${active}`;
+  useEffect(() => {
+    const node = document.getElementById(activeId);
+    // В jsdom метода нет; в браузере он есть всегда.
+    node?.scrollIntoView?.({ block: "nearest" });
+  }, [activeId]);
+
+  const last = FLAT.length - 1;
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    // Enter, которым IME подтверждает слово, и сочетания с Alt и Meta — не наши.
+    if (event.nativeEvent.isComposing || event.altKey || event.metaKey) return;
+    const rowStart = active - (active % EMOJI_COLUMNS);
+    let next: number;
+    switch (event.key) {
+      case "ArrowRight":
+        next = active + 1;
+        break;
+      case "ArrowLeft":
+        next = active - 1;
+        break;
+      case "ArrowDown":
+        next = active + EMOJI_COLUMNS;
+        break;
+      case "ArrowUp":
+        next = active - EMOJI_COLUMNS;
+        break;
+      case "Home":
+        next = event.ctrlKey ? 0 : rowStart;
+        break;
+      case "End":
+        next = event.ctrlKey ? last : rowStart + EMOJI_COLUMNS - 1;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        onPick(FLAT[active]!.emoji);
+        return;
+      default:
+        return;
+    }
+    event.preventDefault();
+    setActive(clamp(next, 0, last));
+  };
+
+  let index = 0;
+  return (
+    <div
+      ref={gridRef}
+      role="grid"
+      tabIndex={0}
+      aria-label={messages.emojiGrid}
+      aria-activedescendant={activeId}
+      onKeyDown={onKeyDown}
+      className={cn(
+        "focus-visible:ring-focus flex max-h-72 flex-col gap-2 overflow-y-auto rounded-xs p-1",
+        "outline-none focus-visible:ring-2",
+        className
+      )}
+    >
+      {EMOJI_CATEGORIES.map((category) => {
+        const items = EMOJI_SET[category];
+        const rows = Array.from({ length: items.length / EMOJI_COLUMNS }, (_, row) =>
+          items.slice(row * EMOJI_COLUMNS, (row + 1) * EMOJI_COLUMNS)
+        );
+        const label = messages.emojiCategory[category];
+        return (
+          <div key={category} role="rowgroup" aria-label={label} className="flex flex-col gap-0.5">
+            <div aria-hidden="true" className="text-fg-2 text-caption px-1 font-medium">
+              {label}
+            </div>
+            {rows.map((row, rowIndex) => (
+              <div key={rowIndex} role="row" className="flex gap-0.5">
+                {row.map((emoji) => {
+                  const position = index++;
+                  const name = messages.emojiName[emoji.name];
+                  return (
+                    <div
+                      key={position}
+                      id={`${id}-${position}`}
+                      role="gridcell"
+                      aria-selected={position === active}
+                      aria-label={name}
+                      title={name}
+                      onMouseEnter={() => setActive(position)}
+                      onClick={() => onPick(emoji)}
+                      className={cn(
+                        "flex size-8 cursor-pointer items-center justify-center rounded-xs",
+                        "text-lg leading-none select-none",
+                        position === active ? "bg-accent-soft" : "hover:bg-bg-2"
+                      )}
+                    >
+                      <span aria-hidden="true">{emoji.char}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/editor/features/emoji/emoji.ts

@@ -0,0 +1,156 @@
+import type { EmojiCategory, EmojiName } from "../../../i18n/messages.js";
+
+/**
+ * Набор эмодзи Редактора: курированные данные, без библиотеки эмодзи.
+ *
+ * ЧТО ЗДЕСЬ И ЧЕГО НЕТ. Категории по порядку, у каждого эмодзи — символ и ключ
+ * имени. Имён здесь нет: их озвучивает скринридер, а значит они — строки
+ * интерфейса и живут в каталоге сообщений `editor` (`emojiName`,
+ * `emojiCategory`), по ключу. Полного Unicode-набора, поиска, «недавних» и
+ * оттенков кожи нет и не будет: сетка — быстрый путь к дюжине привычных
+ * символов, а не палитра ОС.
+ *
+ * МОДУЛЬ СЕРВЕРНО-БЕЗОПАСЕН: ни React, ни `"use client"`, ни DOM. Это данные,
+ * и читать их вправе и сервер (например, чтобы проверить, что строка — один
+ * из эмодзи набора).
+ *
+ * ЭМОДЗИ — ОБЫЧНЫЙ ТЕКСТ. Своего Блока и Метки у него нет, как у
+ * `clearFormatting`: Схема, санитайзер и Markdown не меняются, а вставленный
+ * символ попадает в выходной HTML и в `getMarkdown` как любой другой текст.
+ * Символы с вариантом оформления (`❤️`, `✌️`, `✈️`) хранят селектор `U+FE0F`:
+ * без него часть платформ рисует их чёрно-белыми.
+ *
+ * Типы ключей (`EmojiCategory`, `EmojiName`) живут в каталоге сообщений
+ * (`i18n/messages.ts`), а не здесь: каталог — часть главного входа, а ему
+ * запрещено тянуться в `src/editor/` (`tests/editor-entry.test.ts`). Каталог
+ * обязан назвать каждый ключ, а набор — брать имена только оттуда, и компилятор
+ * сводит их: забытое имя в одной из двух сторон не соберётся.
+ *
+ * Один и тот же эмодзи вправе стоять в двух категориях («Избранное» повторяет
+ * часть остальных): ключ имени у него тогда общий, а позиция в сетке — своя.
+ */
+
+/** Категории набора по порядку показа. */
+export const EMOJI_CATEGORIES: readonly EmojiCategory[] = [
+  "favorites",
+  "smileys",
+  "gestures",
+  "animals",
+  "food",
+  "activities",
+  "travel",
+];
+
+export interface Emoji {
+  /** Сам символ — он и вставляется в Документ. */
+  char: string;
+  /** Ключ имени в каталоге сообщений (`editor.emojiName`). */
+  name: EmojiName;
+}
+
+/** Сколько эмодзи в строке сетки: и ширина сетки, и шаг стрелок вверх и вниз. */
+export const EMOJI_COLUMNS = 10;
+
+const e = (char: string, name: EmojiName): Emoji => ({ char, name });
+
+/**
+ * Сам набор. Размер каждой категории кратен `EMOJI_COLUMNS`: строка сетки не
+ * переходит из категории в категорию, и стрелка вниз всегда попадает на
+ * эмодзи прямо под текущим.
+ */
+export const EMOJI_SET: Readonly<Record<EmojiCategory, readonly Emoji[]>> = {
+  favorites: [
+    e("😂", "faceWithTearsOfJoy"),
+    e("❤️", "redHeart"),
+    e("🤣", "rollingOnTheFloorLaughing"),
+    e("👍", "thumbsUp"),
+    e("😭", "loudlyCrying"),
+    e("🙏", "foldedHands"),
+    e("😘", "blowingKiss"),
+    e("🥰", "smilingWithHearts"),
+    e("😍", "heartEyes"),
+    e("🎉", "partyPopper"),
+    e("😁", "beamingFace"),
+    e("🔥", "fire"),
+    e("🎂", "birthdayCake"),
+    e("😳", "flushedFace"),
+    e("😎", "sunglassesFace"),
+    e("✨", "sparkles"),
+    e("👀", "eyes"),
+    e("👉", "pointingRight"),
+    e("💯", "hundredPoints"),
+    e("😡", "angryFace"),
+  ],
+  smileys: [
+    e("🙂", "slightlySmiling"),
+    e("😄", "grinningSmilingEyes"),
+    e("😆", "grinningSquinting"),
+    e("😉", "winkingFace"),
+    e("😍", "heartEyes"),
+    e("😛", "tongueFace"),
+    e("😊", "smilingBlushing"),
+    e("😏", "smirkingFace"),
+    e("🤔", "thinkingFace"),
+    e("😪", "sleepyFace"),
+  ],
+  gestures: [
+    e("👍", "thumbsUp"),
+    e("👎", "thumbsDown"),
+    e("✌️", "victoryHand"),
+    e("👏", "clappingHands"),
+    e("🙌", "raisedHands"),
+    e("🤦", "facepalm"),
+    e("🤷", "shrug"),
+    e("👊", "oncomingFist"),
+    e("👋", "wavingHand"),
+    e("👌", "okHand"),
+  ],
+  animals: [
+    e("🐶", "dog"),
+    e("🐱", "cat"),
+    e("🐭", "mouse"),
+    e("🐹", "hamster"),
+    e("🐰", "rabbit"),
+    e("🐻", "bear"),
+    e("🐼", "panda"),
+    e("🦁", "lion"),
+    e("🐷", "pig"),
+    e("🐸", "frog"),
+  ],
+  food: [
+    e("🍏", "greenApple"),
+    e("🍕", "pizza"),
+    e("🍔", "hamburger"),
+    e("🍟", "frenchFries"),
+    e("🍝", "spaghetti"),
+    e("🍣", "sushi"),
+    e("🍨", "iceCream"),
+    e("🍩", "doughnut"),
+    e("🍪", "cookie"),
+    e("🍰", "shortcake"),
+  ],
+  activities: [
+    e("⚽", "soccerBall"),
+    e("🏀", "basketball"),
+    e("🏈", "americanFootball"),
+    e("⚾", "baseball"),
+    e("🎾", "tennis"),
+    e("🎳", "bowling"),
+    e("🏌️", "golfer"),
+    e("🎣", "fishing"),
+    e("🚴", "cyclist"),
+    e("🎮", "videoGame"),
+  ],
+  travel: [
+    e("✈️", "airplane"),
+    e("🚗", "car"),
+    e("🚲", "bicycle"),
+    e("🚆", "train"),
+    e("⛵", "sailboat"),
+    e("🗺️", "worldMap"),
+    e("🏖️", "beach"),
+    e("🏔️", "mountain"),
+    e("🏕️", "camping"),
+    e("🧳", "luggage"),
+  ],
+};