Block Menu

Block Context MenuBlock MenuBlock Context Menu
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/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>
  );
}

Features

  • Right-click on a block to open the menu.
  • Allows you to perform actions on blocks such as turn into, duplicating or deleting.
  • Customizable menu items and actions.
  • Keyboard navigation

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 },
  }),
]

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

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

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

Examples

Plate UI

Refer to the preview above.

Plate Plus

Plugins

BlockMenuPlugin

Block menu state management.

Options

Collapse all

    Render options for the block menu.

API

editor.api.blockMenu.hide

Hide 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.