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.

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 using the slate-selection-area class:

.slate-selection-area {
  background: #4f90f22d;
  border: 1px solid #4f90f2;
}

API

createBlockSelectionPlugin

Attributes

Collapse all

    A function to query block selections.

    A function to handle the keydown event when selecting.

    The dimensions of the selection.

copySelectedBlocks

extractSelectableIds

getSelectedBlocks

pasteSelectedBlocks

selectInsertedBlocks

API Components

BlockSelectable

BlockSelectionArea

blockSelectionStore

BlockStartArea

SelectionArea

Basic MarksCloud