Plate

Components

Combobox

Combine a text input field with a dropdown menu for enhanced user interaction.

Installation

npx @udecode/plate-ui@latest add combobox

Examples

＠ Mention

Mention and reference other users or entities within your text using @-mentions.

Try mentioning

BB-8

Boba Fett

import React from 'react';
 
import type { ComboboxItemProps } from '@udecode/plate-combobox';
 
import {
  type EmojiItemData,
  KEY_EMOJI,
  type TEmojiCombobox,
  useEmojiComboboxState,
} from '@udecode/plate-emoji';
 
import { Combobox } from './combobox';
 
export function EmojiComboboxItem({ item }: ComboboxItemProps<EmojiItemData>) {
  const {
    data: { emoji, id },
  } = item;
 
  return (
    <div>
      {emoji} :{id}:
    </div>
  );
}
 
export function EmojiCombobox({
  pluginKey = KEY_EMOJI,
  id = pluginKey,
  ...props
}: TEmojiCombobox) {
  const { onSelectItem, trigger } = useEmojiComboboxState({ pluginKey });
 
  return (
    <Combobox
      controlled
      id={id}
      onRenderItem={EmojiComboboxItem}
      onSelectItem={onSelectItem as any}
      trigger={trigger}
      {...props}
    />
  );
}

import React from 'react';
 
import type { ComboboxProps } from '@udecode/plate-combobox';
 
import { getPluginOptions, useEditorRef } from '@udecode/plate-common';
import {
  ELEMENT_MENTION,
  type MentionPlugin,
  getMentionOnSelectItem,
} from '@udecode/plate-mention';
 
import { Combobox } from './combobox';
 
export function MentionCombobox({
  pluginKey = ELEMENT_MENTION,
  id = pluginKey,
  ...props
}: {
  pluginKey?: string;
} & Partial<ComboboxProps>) {
  const editor = useEditorRef();
 
  const { trigger } = getPluginOptions<MentionPlugin>(editor, pluginKey);
 
  return (
    <div onMouseDown={(e) => e.preventDefault()}>
      <Combobox
        controlled
        id={id}
        onSelectItem={getMentionOnSelectItem({
          key: pluginKey,
        })}
        trigger={trigger!}
        {...props}
      />
    </div>
  );
}