Block Menu

PreviewCode

Paragraph

Editing

📝 Block Menu

The Block Menu provides quick access to actions for individual blocks. You can open this menu by right-clicking on any block in the editor.

Key features of the Block Context Menu:

• Right-click on any block to open the menu

• Try using block selection to select multiple blocks, then open the menu for the selected blocks.

• When you try to right-click the block at the cursor's location, the default menu will open.This allows users to use browser extensions or paste plain text, etc.

• Options to duplicate, delete, or other what you want

• Transform blocks into different types

Edit link

1

100%

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>

Plus

In Plate Plus, We have provided a more advanced menu.

1. More advanced menu items.
2. Supports search functionality and carefully designed shortcuts.
3. More refined styles and animations.
4. You can open this menu in various ways, such as through the drag button.

API

editor.api.blockMenu.hide

Hides the block menu.

editor.api.blockMenu.show

Shows the block menu for a specific block.

editor.api.blockMenu.showContextMenu

Shows the context menu for a specific block.