Block Menu

Provides quick access to block-specific actions.

Block Context MenuBlock MenuBlock Context Menu
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>
  );
}

功能特点

  • 右键点击块元素打开菜单。
  • 允许对块执行转换、复制或删除等操作。
  • 可自定义菜单项和操作。
  • 支持键盘导航

Installation

npm install @udecode/plate-selection @udecode/plate-node-id

Usage

import { BlockMenuPlugin } from '@udecode/plate-selection/react';
import { NodeIdPlugin } from '@udecode/plate-node-id';
const plugins = [
  // ...otherPlugins,
  NodeIdPlugin,
  BlockSelectionPlugin.configure({
    options: {
      enableContextMenu: true,
    },
  }),
  BlockMenuPlugin.configure({
    render: { aboveEditable: BlockContextMenu },
  }),
]

要控制特定元素的上下文菜单的打开，你可以使用 data-plate-open-context-menu 属性：

<PlateElement data-plate-open-context-menu={false} {...props}>
  {children}
</PlateElement>

通常，我们只需要阻止在 <Editor /> 的内边距上右键点击。

示例

Plate UI

参考上面的预览。

Plate Plus

插件

BlockMenuPlugin

块菜单状态管理。

API

editor.api.blockMenu.hide

隐藏块菜单。

editor.api.blockMenu.show

显示特定块的菜单。

Parameters

Collapse all

    要显示菜单的块的 ID。

    显示菜单的位置。

editor.api.blockMenu.showContextMenu

显示特定块的上下文菜单。

Parameters

Collapse all

    要显示上下文菜单的块的 ID。

    显示上下文菜单的位置。

Basic MarksBlock Selection