mirror of
https://github.com/docmost/docmost.git
synced 2026-08-24 10:32:13 +10:00
feat(editor): replace emoji picker with browse + search (#2171)
* feat(editor): show emoji name in suggestion list Replace the fixed-column emoji grid with a vertical list that displays each emoji alongside its :shortcode: name. This makes the picker more discoverable—users can see and learn shortcodes without prior knowledge. Changes: - EmojiList: switch from SimpleGrid/ActionIcon to UnstyledButton list rows showing emoji glyph + monospace 🆔 label - Navigation simplified to ArrowUp/ArrowDown (list has no columns) - Results capped at 8 items for a focused, scannable dropdown - CSS module: rename menuBtn -> menuItem, tighten padding * feat(editor): replace SearchIndex with name/id includes search Port the exact search algorithm from the original extension: - Build a flat index from @emoji-mart/data: { id, name (lowercase), native } - Filter with name.includes(q) || id.includes(q) — predictable, no keyword indirection - Results capped at 5 (same as extension) - Frequently-used emojis (sorted by usage) shown when query is empty - Remove emoji-mart init() / SearchIndex / getEmojiDataFromNative dependencies; index is built lazily and cached in memory - Remove unused GRID_COLUMNS constant * feat(editor): emoji picker with browse and search modes When the query is empty the picker shows a category bar with 8 tabs (people, nature, food…) and a scrollable emoji grid. Typing after ':' switches to a compact list that shows the glyph and :shortcode: side by side, making it easy to discover emoji names while you type. - Category data is loaded lazily from @emoji-mart/data and cached, so opening the picker more than once has no overhead - Grid keyboard nav: arrow keys move by cell/row, Enter picks - List keyboard nav: up/down through results, Enter picks - Mouse hover syncs the keyboard selection index in both modes - incrementEmojiUsage tracks picks so frequently used ones bubble up in future sessions * fix(editor): polish emoji picker copy and loading * feat: add emoji to slash command * Add keyboard support to emoji group navigation --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
This commit is contained in:
co-authored by
Philipinho
parent
5d8c11e741
commit
6046d04375
@@ -25,6 +25,7 @@ import {
|
||||
IconColumns3,
|
||||
IconColumns2,
|
||||
IconTag,
|
||||
IconMoodSmile,
|
||||
IconRotate2,
|
||||
} from "@tabler/icons-react";
|
||||
import {
|
||||
@@ -477,6 +478,15 @@ const CommandGroups: SlashMenuGroupedItemsType = {
|
||||
.run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Emoji",
|
||||
description: "Insert emoji.",
|
||||
searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
|
||||
icon: IconMoodSmile,
|
||||
command: ({ editor, range }: CommandProps) => {
|
||||
editor.chain().focus().deleteRange(range).insertContent(":").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Subpages (Child pages)",
|
||||
description: "List all subpages of the current page",
|
||||
|
||||
Reference in New Issue
Block a user