David Gallardo 6046d04375 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>
2026-05-08 21:33:43 +01:00
2026-03-03 20:25:39 +00:00
2026-05-01 14:53:30 +01:00
2026-01-16 13:21:42 +00:00
2026-04-14 16:26:54 +01:00
2025-03-06 13:38:37 +00:00
2025-03-06 13:38:37 +00:00
2024-01-09 18:58:26 +01:00
2025-01-04 13:22:31 +00:00
2026-02-06 10:28:52 -08:00
2026-01-16 13:21:42 +00:00
2023-11-15 23:11:15 +00:00
2026-03-25 10:07:01 +00:00
2026-05-01 14:53:30 +01:00
2025-04-21 21:50:21 +01:00

Docmost

Open-source collaborative wiki and documentation software.
Website | Documentation | Twitter / X


Getting started

To get started with Docmost, please refer to our documentation or try our cloud version .

Features

  • Real-time collaboration
  • Diagrams (Draw.io, Excalidraw and Mermaid)
  • Spaces
  • Permissions management
  • Groups
  • Comments
  • Page history
  • Search
  • File attachments
  • Embeds (Airtable, Loom, Miro and more)
  • Translations (10+ languages)

Screenshots

home editor

License

Docmost core is licensed under the open-source AGPL 3.0 license.
Enterprise features are available under an enterprise license (Enterprise Edition).

All files in the following directories are licensed under the Docmost Enterprise license defined in packages/ee/License.

  • apps/server/src/ee
  • apps/client/src/ee
  • packages/ee

Contributing

See the development documentation

Thanks

Special thanks to;

Crowdin

Crowdin for providing access to their localization platform.

Algolia-mark-square-white

Algolia for providing full-text search to the docs.

Languages
TypeScript 95.8%
CSS 4%