Exit Break

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

import React from 'react';

import { Plate } from '@udecode/plate/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

    Array of rules for exit break behavior.

OptionsExitBreakRule

Collapse all

    Hotkey to trigger exit break.

    Conditions for exit break.

    Path level where to exit.

    • Default: 1

    Whether to exit before the selected block.

    Default type of node to insert upon exit.

API

exitBreak

Parameters

Collapse all

    The editor instance.

    Options for the exit break operation.

OptionsExitBreakOptions

Collapse all

    Path level where to exit.

    • Default: 0

    Whether to exit relative to the selection.

    • Default: false

    Default type of node to insert upon exit.

    • Default: editor.getType(ParagraphPlugin)

    Conditions for exit break.

    Whether to exit before the selected block.

Returnsboolean

    Whether the exit break was successful.

exitBreakAtEdges

Parameters

Collapse all

    The editor instance.

    Options for checking edges.

Optionsobject

Collapse all

    Whether to check if selection is at start of block.

    Whether to check if selection is at end of block.

Returnsobject

Collapse all

    Whether the edge was queried.

    Whether selection is at block edge.

    Whether selection is at block start.