Block Menu

PreviousNext
PlusBlock Context Menu
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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.

'use client';
 
import { BlockMenuPlugin } from '@platejs/selection/react';
 
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
import { BlockSelectionKit } from './block-selection-kit';
 
export const BlockMenuKit = [
  ...BlockSelectionKit,
  BlockMenuPlugin.configure({
    render: { aboveEditable: BlockContextMenu },
  }),
];

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

  • Open the menu via the drag button or the three-dot menu on specific blocks (e.g. images)
  • Includes a combobox that filters options as you type
  • Supports nested menu options
  • Advanced actions such as "Ask AI", colors, and commenting
  • Beautifully crafted UI

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

Collapse all

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

    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

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

    The position to show the context menu at.

AutoformatBlock Placeholder