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.

API

exitBreak

Exit a large block using a shortcut.

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

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

Parameters

Collapse all

    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.