Plate

Block Selection

udecode

Installation

No MCP yet? Connect your agent.

Features

  • Select entire blocks with a single action.
  • Multi-block selection using mouse drag or keyboard shortcuts.
  • Copy, cut, and delete operations on selected blocks.
  • Keyboard shortcuts for quick selection:
    • Cmd+A: Select all blocks.
    • Arrow keys: Select the block above or below.
  • Customizable styling for selected blocks.

Usage

Installation

The fastest way to add Block Selection is with the BlockSelectionKit, which includes the pre-configured BlockSelectionPlugin and the BlockSelection UI component.

  • BlockSelection: Renders the selection rectangle around selected blocks.

Add Kit

The BlockSelectionKit enables the context menu by default and provides a default isSelectable logic to exclude common non-selectable blocks like code lines and table cells.

import { createPlateEditor } from "platejs/react";
import { BlockSelectionKit } from "@/components/editor/plugins/block-selection-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...BlockSelectionKit,
  ],
});