mirror of
https://github.com/docmost/docmost.git
synced 2026-05-14 20:54:07 +08:00
David Gallardo
6046d04375
* 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>
108 lines
1.7 KiB
CSS
108 lines
1.7 KiB
CSS
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--mantine-radius-sm);
|
|
|
|
&:hover {
|
|
@mixin light {
|
|
background: var(--mantine-color-gray-1);
|
|
}
|
|
|
|
@mixin dark {
|
|
background: var(--mantine-color-gray-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.active {
|
|
@mixin light {
|
|
background: var(--mantine-color-gray-2);
|
|
}
|
|
|
|
@mixin dark {
|
|
background: var(--mantine-color-gray-light);
|
|
}
|
|
}
|
|
|
|
.catBar {
|
|
display: flex;
|
|
gap: 2px;
|
|
padding: 4px 6px;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
|
|
@mixin light {
|
|
border-bottom: 1px solid var(--mantine-color-gray-2);
|
|
}
|
|
|
|
@mixin dark {
|
|
border-bottom: 1px solid var(--mantine-color-dark-4);
|
|
}
|
|
}
|
|
|
|
.catTab {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
padding: 4px 5px;
|
|
border-radius: var(--mantine-radius-sm);
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
@mixin light {
|
|
background: var(--mantine-color-gray-1);
|
|
}
|
|
|
|
@mixin dark {
|
|
background: var(--mantine-color-gray-light);
|
|
}
|
|
}
|
|
}
|
|
|
|
.catTabActive {
|
|
@mixin light {
|
|
background: var(--mantine-color-gray-2);
|
|
}
|
|
|
|
@mixin dark {
|
|
background: var(--mantine-color-gray-light);
|
|
}
|
|
}
|
|
|
|
.catTabFocused {
|
|
outline: 1px solid var(--mantine-color-blue-filled);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.emojiBtn {
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
padding: 3px;
|
|
border-radius: var(--mantine-radius-sm);
|
|
aspect-ratio: 1 / 1;
|
|
|
|
&:hover {
|
|
@mixin light {
|
|
background: var(--mantine-color-gray-1);
|
|
}
|
|
|
|
@mixin dark {
|
|
background: var(--mantine-color-gray-light);
|
|
}
|
|
}
|
|
}
|
|
|