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.