Docs
Block Selection

Block Selection

Select and manipulate entire text blocks.

📸 Image

Add images by either uploading them or providing the image URL:

Customize image captions and resize images.

📺 Embed

Embed various types of content, such as videos and tweets:




Features

  • Select entire blocks, as opposed to individual words or characters.
  • To select an entire block, mouse down outside the text area and then move the cursor into the block. Once it is selected, you'll see a background color.
  • Keep moving down or up to select multiple blocks.
  • Once selected, the available actions are: copy, cut, and delete.
  • Keyboard shortcuts:
    • Cmd+A (Mac) / Ctrl+A (Windows/Linux):
      • First press: Selects the current block
      • Double press: Selects the whole document using block selection
    • Note: This behavior can be disabled by setting handlers.onKeyDown = null when creating the plugin

Installation

npm install @udecode/plate-selection @udecode/plate-node-id

Usage

import { createNodeIdPlugin } from '@udecode/plate-node-id';
import { createBlockSelectionPlugin } from '@udecode/plate-selection';
 
const plugins = [
  // ...otherPlugins,
  createNodeIdPlugin(),
  createBlockSelectionPlugin(),
];

Styling

You can style the selection area by adding this class to body, selecting slate-selection-area.

'[&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/20'

API

createBlockSelectionPlugin

Options

Collapse all

    A function to query block selections.

    A function to handle the keydown event when selecting.

    The dimensions of the selection.

copySelectedBlocks

Copies the selected blocks in the editor to the clipboard.

Parameters

Collapse all

    The editor instance.

getSelectedBlocks

Gets the selected blocks in the editor.

Parameters

Collapse all

    The editor instance.

pasteSelectedBlocks

Pastes the selected blocks from the clipboard into the editor.

Parameters

Collapse all

    The editor instance.

    The clipboard event containing the clipboard data.

selectInsertedBlocks

Selects the inserted blocks from the last editor insert operations.

Parameters

Collapse all

    The editor instance.

API Components

BlockSelectable

Props

Collapse all

BlockStartArea

A primitive component for rendering the start area of a block.

Props

Collapse all

    The placement of the start area.

    • Default: 'left'

    The size of the start area.

    • Default: 'auto'

Returns

Collapse all

useBlockSelectionArea

The behavior hook for the BlockSelectionArea component.

Returns

Collapse all

SelectionArea

Props

Collapse all

    The callback to execute before the selection starts.

    The callback to execute when the selection starts.

    The callback to execute when the selection moves.

    The callback to execute when the selection stops.

    Function to calculate the boundaries of the selection area.

Basic MarksCaption