Exit Break

Exit a large block using a shortcut.

Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Exit large text blocks with a single hotkey.

Installation

npm install @udecode/plate-break

Usage

import { ExitBreakPlugin } from '@udecode/plate-break/react';
 
const plugins = [
  // ...otherPlugins,
  ExitBreakPlugin.configure({
    options: {
      rules: [
        {
          hotkey: 'mod+enter',
        },
        {
          hotkey: 'mod+shift+enter',
          before: true,
        },
        {
          hotkey: 'enter',
          query: {
            start: true,
            end: true,
            allow: KEYS_HEADING,
          },
          relative: true,
          level: 1,
        },
      ],
    },
  }),
];

Keyboard Shortcuts

KeyDescription
Cmd + Enter

Start a new block after the selected block.

Cmd + Shift + Enter

Start a new block before the selected block.

Plugins

ExitBreakPlugin

Options

Collapse all

    An array of rule objects each containing the following properties:

API

exitBreak

Exit a large block using a shortcut.

Parameters

Collapse all

    The editor instance.

    The options for the exit break operation.

Returns

Collapse all

    Indicates whether the exit break was successful.

exitBreakAtEdges

Checks if the selection is at the edge of its parent block and performs an "exit break" operation if specified.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    Indicates whether the edge of the selection was queried.

    Indicates whether the selection is at the edge of its parent block.

    Indicates whether the selection is at the start of its parent block.

ExcalidrawFont