Combobox

Utilities for adding combobox to your editor.

Mention PluginSlash Command PluginEmoji Plugin

TriggerComboboxPluginOptions 配置你的插件，当用户输入指定触发字符时插入一个组合框输入元素。

例如：

  • Mention 插件在输入 @ 时插入组合框
  • Slash Command 插件在输入 / 时激活
  • Emoji 插件在输入 : 时显示建议

Usage

创建一个组合框输入插件：

const ComboboxInputPlugin = createPlatePlugin({
  key: 'combobox_input',
  node: {
    isElement: true,
    isInline: true,
    isVoid: true,
  },
});

创建你的主插件，使用 withTriggerCombobox：

const MyPlugin = createPlatePlugin({
  key: 'my_plugin',
  extendEditor: withTriggerCombobox,
  // Plugin node options
  node: {
    isElement: true,
    isInline: true,
    isVoid: true,
  },
  // Combobox options
  options: {
    createComboboxInput: (trigger) => ({
      children: [{ text: '' }],
      trigger,
      type: ComboboxInputPlugin.key,
    }),
    trigger: '@',
    triggerPreviousCharPattern: /^\s?$/,
  },
  // Include the input plugin
  plugins: [ComboboxInputPlugin],
});

输入元素组件可以使用 Inline Combobox 构建。

Examples

Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Types

TriggerComboboxPluginOptions

Parameters

Collapse all

    当触发器被激活时创建输入节点的函数。

    触发组合框的字符。可以是：

    • 单个字符（例如 '@'）
    • 字符数组
    • 正则表达式

    匹配触发字符前的字符模式。

    • 示例： /^\s?$/ 匹配行首或空格

    自定义查询函数，用于控制触发器何时激活。

Hooks

useComboboxInput

用于管理组合框输入行为和键盘交互的 Hook。

Parameters

Collapse all

Returns

Collapse all

    取消输入的函数。

    移除输入节点的函数。

Example:

const MyCombobox = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const cursorState = useHTMLInputCursorState(inputRef);
 
  const { props: inputProps, removeInput } = useComboboxInput({
    ref: inputRef,
    cursorState,
    cancelInputOnBlur: false,
    onCancelInput: (cause) => {
      if (cause !== 'backspace') {
        insertText(editor, trigger + value);
      }
      if (cause === 'arrowLeft' || cause === 'arrowRight') {
        moveSelection(editor, {
          distance: 1,
          reverse: cause === 'arrowLeft',
        });
      }
    },
  });
 
  return <input ref={inputRef} {...inputProps} />;
};

useHTMLInputCursorState

用于跟踪 HTML 输入元素中光标位置的 Hook。

Parameters

Collapse all

    要跟踪的输入元素的引用。

Returns

Collapse all

ColumnComments