Skip to main content

Block Selection

Adds a visual way of selecting blocks.

Installation#

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

Usage#

import React from 'react';
import { createNodeIdPlugin, Plate } from '@udecode/plate';
import { createBlockSelectionPlugin } from '@udecode/plate-selection';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { basicNodesValue } from './basic-nodes/basicNodesValue';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { getNodesWithId } from './dnd/getNodesWithId';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [...basicNodesPlugins, createNodeIdPlugin(), createBlockSelectionPlugin()],
  {
    components: plateUI,
  }
);

const initialValue = getNodesWithId(basicNodesValue);

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    plugins={plugins}
    initialValue={initialValue}
  />
);

Styling#

You can style the selection area by using the slate-selection-area class:

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

Options#

export interface BlockSelectionPlugin {
query?: QueryNodeOptions;
}

Source Code#