Slash Command

Slash command menu for quick insertion of various content types.

ComboboxSlash Input ElementSlash Input Element
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>
  );
}

Features

  • 快速访问各种编辑器命令
  • 键盘导航和过滤

Installation

npm install @udecode/plate-slash-command

Usage

import { SlashPlugin, SlashInputPlugin } from '@udecode/plate-slash-command/react';
const plugins = [
  // ...otherPlugins,
  SlashPlugin,
];
const components = {
  // ...otherComponents,
  [SlashInputPlugin.key]: SlashInputElement,
};

如何使用：

  1. 在文档中的任何位置输入 / 以打开斜杠菜单。
  2. 开始输入以过滤选项或使用箭头键导航。
  3. 按 Enter 或点击选择一个选项。
  4. 按 Escape 关闭菜单而不选择。

可用选项包括：

  • 标题
  • 列表

Examples

Plate UI

参考上面的预览。

Plate Plus

Plugins

SlashPlugin

扩展 TriggerComboboxPlugin

Options

Collapse all

    创建组合框输入元素的函数。

    • Default:
    () => ({
  children: [{ text: '' }],
  type: SlashInputPlugin.key,
});

    触发斜杠命令组合框的字符。

    • Default: '/'

    匹配触发斜杠命令组合框之前的字符的正则表达式。

    • 默认: /^\s?$/

SlashInputPlugin

斜杠输入功能的插件。

Single LineSoft Break