Block Selection

Adds a visual way of selecting blocks.

Installation

npm

npm install @udecode/plate-selection

npm install @udecode/plate-node-id

Yarn

yarn add @udecode/plate-selection

yarn add @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 { createMyPlugins, MyValue } from './typescript/plateTypes';

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

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

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

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

• Plugin
• Variables