{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "emoji-docs",
  "title": "Emoji",
  "description": "Inline emoji search and toolbar emoji picking.",
  "files": [
    {
      "path": "../../content/docs/(plugins)/(functionality)/(combobox)/emoji.mdx",
      "content": "---\ntitle: Emoji\ndescription: Inline emoji search and toolbar emoji picking.\ndocs:\n  - route: /docs/combobox\n    title: Combobox\n  - route: /docs/components/emoji-node\n    title: Emoji Input Element\n  - route: /docs/components/emoji-toolbar-button\n    title: Emoji Toolbar Button\n---\n\nEmoji adds two insertion paths: a `:` trigger that opens an inline combobox, and a toolbar popover for browsing categories. The package owns emoji data, trigger behavior, index search, picker state, frequent emoji storage, and insertion. The registry owns the inline input element and toolbar picker UI.\n\n<ComponentPreview name=\"emoji-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- `:` trigger powered by `@platejs/combobox`.\n- Edit-only inline void `emoji_input` node.\n- Emoji search from `@emoji-mart/data`.\n- Default insertion as Unicode text.\n- Custom inserted node support through `createEmojiNode`.\n- Toolbar popover with categories, search, preview, and frequent emoji tracking.\n- Markdown shortcode deserialization to Unicode text.\n\n</PackageInfo>\n\n## Fast Path\n\n<Steps>\n\n### Add The Kit\n\n`EmojiKit` installs `EmojiPlugin` with `@emoji-mart/data` and renders `EmojiInputPlugin` with the registry inline combobox.\n\n<ComponentSource name=\"emoji-kit\" />\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\n\nimport { EmojiKit } from '@/components/editor/plugins/emoji-kit';\n\nexport const editor = createPlateEditor({\n  plugins: EmojiKit,\n});\n```\n\n### Render The Inline Input\n\n`emoji-node` debounces the search text, queries `EmojiInlineIndexSearch`, and inserts the selected emoji.\n\n<ComponentSource name=\"emoji-node\" />\n\n### Add Toolbar Picking\n\n`emoji-toolbar-button` renders the Radix popover picker backed by `useEmojiDropdownMenuState`.\n\n<ComponentSource name=\"emoji-toolbar-button\" />\n\n</Steps>\n\n## Ownership\n\n| Layer | Owner | What It Does |\n|-------|-------|--------------|\n| `@platejs/emoji` | Package | Exports `BaseEmojiPlugin`, `BaseEmojiInputPlugin`, `insertEmoji`, emoji search libraries, settings, categories, and types. |\n| `@platejs/emoji/react` | Package | Exports `EmojiPlugin`, `EmojiInputPlugin`, picker hooks, and frequent emoji storage. |\n| `@platejs/combobox` | Package | Provides trigger detection and transient input cleanup for the `:` flow. |\n| `@emoji-mart/data` | Dependency | Provides the emoji dataset used by the registry kit. |\n| `emoji-kit` | Registry | Adds `EmojiPlugin` with emoji-mart data and `EmojiInputPlugin.withComponent(EmojiInputElement)`. |\n| `emoji-node` | Registry UI | Renders inline emoji search with `InlineCombobox`. |\n| `emoji-toolbar-button` | Registry UI | Renders the toolbar popover, category grid, search bar, and preview. |\n| `inline-combobox` | Registry UI | Renders the inline trigger input and popover primitives. |\n| `@platejs/markdown` | Package | Deserializes emoji shortcodes such as `:fire:` to Unicode text. |\n\nThe emoji plugin is edit-only. It inserts text or your custom node, then the transient `emoji_input` disappears.\n\n## Manual Setup\n\n<Steps>\n\n### Install Packages\n\n```bash\nnpm install @platejs/emoji @emoji-mart/data\n```\n\n### Add Plugins\n\nUse `@emoji-mart/data` when you want the full emoji dataset instead of the package default library.\n\n```tsx\nimport emojiMartData from '@emoji-mart/data';\nimport { EmojiInputPlugin, EmojiPlugin } from '@platejs/emoji/react';\nimport { createPlateEditor } from 'platejs/react';\n\nimport { EmojiInputElement } from '@/components/ui/emoji-node';\n\nexport const editor = createPlateEditor({\n  plugins: [\n    EmojiPlugin.configure({\n      options: {\n        data: emojiMartData as any,\n      },\n    }),\n    EmojiInputPlugin.withComponent(EmojiInputElement),\n  ],\n});\n```\n\n### Add A Toolbar Button\n\nRender `EmojiToolbarButton` in your toolbar when users should browse emoji without typing `:`.\n\n```tsx\nimport { EmojiToolbarButton } from '@/components/ui/emoji-toolbar-button';\n\nexport function FixedToolbarButtons() {\n  return <EmojiToolbarButton />;\n}\n```\n\n</Steps>\n\n## Inline Flow\n\nThe inline path is a combobox flow.\n\n| Step | Source |\n|------|--------|\n| Type `:` | `BaseEmojiPlugin` trigger. |\n| Previous character must match `/^\\s?$/` | Start of block or whitespace by default. |\n| Insert transient input | `createComboboxInput` creates `{ type: KEYS.emojiInput, children: [{ text: '' }] }`. |\n| Search emoji data | `EmojiInputElement` calls `EmojiInlineIndexSearch.getInstance(data).search(query).get()`. |\n| Select a result | `InlineComboboxItem` removes the input and calls `insertEmoji(editor, emoji)`. |\n| Insert final content | `insertEmoji` calls `createEmojiNode(emoji)` and inserts that node. |\n\n`EmojiInputElement` sets `filter={false}` because emoji search already returns filtered results. It also uses `hideWhenNoValue`, so the popover stays closed until the user types a search value after `:`.\n\n## Inserted Value\n\nBy default, selecting an emoji inserts the first native skin as text.\n\n```tsx\nEmojiPlugin.configure({\n  options: {\n    createEmojiNode: ({ skins }) => ({ text: skins[0].native }),\n  },\n});\n```\n\nUse `createEmojiNode` when your app stores emoji as structured inline nodes instead of text.\n\n```tsx\nEmojiPlugin.configure({\n  options: {\n    createEmojiNode: (emoji) => ({\n      children: [{ text: emoji.id }],\n      emojiId: emoji.id,\n      type: 'emoji-chip',\n    }),\n  },\n});\n```\n\n## Toolbar Picker\n\n`EmojiToolbarButton` calls `useEmojiDropdownMenuState`, then passes the picker state into `EmojiPicker`.\n\n| Option | Default | Use |\n|--------|---------|-----|\n| `closeOnSelect` | `true` | Close the toolbar popover after insertion. |\n| `settings` | `EmojiSettings` | Configure categories, per-line count, button size, and frequent emoji behavior. |\n| `settings.showFrequent.limit` | Package setting | Limits the frequent emoji category. |\n\nFrequent emoji counts are stored in `window.localStorage` through `FrequentEmojiStorage`. On the server, the storage class returns the default frequent set.\n\n## Markdown\n\n`@platejs/markdown` deserializes emoji shortcodes to Unicode text.\n\n```md\nLaunch :fire: soon\n```\n\nSerializing the resulting value writes the Unicode emoji:\n\n```md\nLaunch 🔥 soon\n```\n\n## API Reference\n\n| API | Package | Use |\n|-----|---------|-----|\n| `BaseEmojiPlugin` | `@platejs/emoji` | Edit-only trigger plugin with default `:`, emoji data, input creation, and text insertion. |\n| `BaseEmojiInputPlugin` | `@platejs/emoji` | Edit-only inline void `emoji_input` plugin. |\n| `EmojiPlugin` | `@platejs/emoji/react` | React emoji plugin with nested `EmojiInputPlugin`. |\n| `EmojiInputPlugin` | `@platejs/emoji/react` | React input plugin for `EmojiInputElement`. |\n| `insertEmoji(editor, emoji)` | `@platejs/emoji` | Inserts `createEmojiNode(emoji)`. |\n| `EmojiInlineIndexSearch` | `@platejs/emoji` | Inline search index used by `emoji-node`. |\n| `useEmojiDropdownMenuState(options?)` | `@platejs/emoji/react` | Builds toolbar popover state and picker state. |\n| `useEmojiPicker(options)` | `@platejs/emoji/react` | Handles search, category focus, preview, selection, and frequent emoji updates. |\n| `FrequentEmojiStorage` | `@platejs/emoji/react` | Reads and writes frequent emoji counts through localStorage. |\n",
      "type": "registry:file",
      "target": "content/docs/plate/(plugins)/(functionality)/(combobox)/emoji.mdx"
    }
  ],
  "type": "registry:file"
}