Select

Features

  • Set a list of element types to remove on backspace
  • Set a list of element types to select on backspace, instead of removing

Installation

npm install @udecode/plate-select

Usage

import { DeletePlugin, SelectOnBackspacePlugin } from '@udecode/plate-select';
const plugins = [
  // ...otherPlugins,
  SelectOnBackspacePlugin.configure({
    options: {
      query: {
        allow: ['img', 'hr'],
      },
    },
  }),
  DeletePlugin,
];

Plugins

DeletePlugin

Plugin that removes empty blocks when pressing delete (forward delete) if they match the query options.

Options

Collapse all

    Query options to filter which empty blocks can be removed.

    • Default: { allow: ['p'] }

Example:

const plugins = [
  DeletePlugin.configure({
    options: {
      // Only remove empty paragraphs and blockquotes
      query: {
        allow: ['p', 'blockquote'],
      },
    },
  }),
];

Behavior:

  1. Check if current block is empty and matches query options
  2. If true: Remove entire block
  3. If false: Use default delete behavior
// Empty paragraph followed by code block
<editor>
  <p>
    <cursor />
  </p>
  <codeblock>
    <codeline>test</codeline>
  </codeblock>
</editor>
 
// Pressing delete will remove the empty paragraph instead of nothing
<editor>
  <codeblock>
    <codeline>test</codeline>
  </codeblock>
</editor>

SelectOnBackspacePlugin

Plugin that selects nodes instead of deleting them when pressing backspace.

Options

Collapse all

    Query options to determine which nodes trigger selection.

    Whether to remove node if empty when backspacing.

    • Default: false

Example:

const plugins = [
  SelectOnBackspacePlugin.configure({
    options: {
      // Select these nodes instead of deleting them
      query: {
        allow: ['img', 'hr'],
      },
      // Remove current node if empty
      removeNodeIfEmpty: true,
    },
  }),
];

Behavior:

  1. When backspace is pressed at block start:
  2. Check if previous node matches query options
  3. If true:
    • Select previous node instead of deleting
    • Optionally remove current node if empty
  4. If false: Use default backspace behavior
// Empty paragraph after an image
<editor>
  <img src="..." />
  <p>
    <cursor />
  </p>
</editor>
 
// Pressing backspace will select the image instead of deleting it
<editor>
  <img src="..." selected />
  <p></p>
</editor>
 
// If removeNodeIfEmpty is true, the empty paragraph is also removed
<editor>
  <img src="..." selected />
</editor>