Docs
Block Menu

Block Menu

Allows you to perform a series of custom operations on the block.

Block MenuBlock Context Menu

Features

  • Provides quick transform for a single block.
  • Allows you to perform actions on blocks such as duplicating, deleting, or moving.
  • Customizable menu items and actions.
  • Accessible via right-click or a dedicated button like drag-handle.
  • Supports keyboard navigation for improved accessibility.

Installation

npm install @udecode/plate-selection

Usage

We recommend installing the BlockSelection plugin.When you want to use the block menu

Block Selection provides a visual effect to indicate which block the user is about to interact with

// ...
import { BlockMenuPlugin } from '@udecode/plate-selection/react';
 
const editor = usePlateEditor({
  id: 'context-menu-demo',
  override: {
    components: createPotionUI(),
  },
  plugins: [
    ...otherPlugins,
    NodeIdPlugin,
    BlockSelectionPlugin.configure({
      options: {
        areaOptions: {
          behaviour: {
            scrolling: {
              speedDivider: 1.5,
            },
            startThreshold: 10,
          },
          boundaries: '#scroll_container',
          container: '#scroll_container',
          selectables: '#scroll_container .slate-selectable',
          selectionAreaClass: 'slate-selection-area',
        },
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin.configure({
      render: { aboveEditable: BlockContextMenu },
    }),
  ],
  value: contextMenuValue,
});

Prevent opening of the right-click menu

To control the opening of the right-click menu for specific elements, you can use the data-open-context-menu attribute:

Generally, we only need to prevent right-clicking on the padding of the <Editor />.

If you have a special plugin that needs to prevent the right-click menu from opening, you can use this property.

Example usage:

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

API

editor.api.blockMenu.hide

Hides the block menu.

editor.api.blockMenu.show

Shows the block menu for a specific block.

Parameters

Collapse all

    The ID of the block to show the menu for.

    The position to show the menu at.

editor.api.blockMenu.showContextMenu

Shows the context menu for a specific block.

Parameters

Collapse all

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

    The position to show the context menu at.

AutoformatBasic Elements