Block Menu

PreviousNext
PlusBlock Context Menu
Loading...

Features

  • Right-click on blocks to open a context menu.
  • Perform actions on blocks such as turning into different types, duplicating, or deleting.
  • Customizable menu items and actions.
  • Keyboard navigation support.
  • Block selection integration.

Kit Usage

Installation

The fastest way to add the block menu is with the BlockMenuKit, which includes the pre-configured BlockMenuPlugin along with BlockSelectionPlugin and their Plate UI components.

Add Kit

import { createPlateEditor } from 'platejs/react';
import { BlockMenuKit } from '@/components/editor/plugins/block-menu-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BlockMenuKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/selection

Add Plugins

The block menu requires both BlockSelectionPlugin and BlockMenuPlugin to function properly.

import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin,
  ],
});

Configure Plugins

Configure the block menu with a context menu component:

import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin.configure({
      render: { aboveEditable: BlockContextMenu },
    }),
  ],
});
  • BlockSelectionPlugin.options.enableContextMenu: Enables the context menu functionality.
  • BlockMenuPlugin.render.aboveEditable: Assigns BlockContextMenu to render the context menu.

Controlling Context Menu Behavior

To control the opening of the context menu for specific elements, use the data-plate-open-context-menu attribute:

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

This is commonly used to prevent right-clicking on the padding of the <Editor /> component from opening the menu.

Plate Plus

Plugins

BlockMenuPlugin

Plugin for block menu state management and context menu functionality.

API

api.blockMenu.hide

Hides the block menu.

api.blockMenu.show

Shows the block menu for a specific block.

Parameters

  • id 'context' | string

    The ID of the block to show the menu for, or 'context' for the context menu.

  • position optional { x: number; y: number }

    The position to show the menu at. If not provided, only the openId is updated.

api.blockMenu.showContextMenu

Shows the context menu for a specific block and automatically selects that block.

Parameters

Collapse all

  • blockId string

    The ID of the block to show the context menu for.

  • position { x: number; y: number }

    The position to show the context menu at.

块菜单块占位符