From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Exit Break

PreviousNext

Exit a large block using a shortcut.

Loading…
ListSingle Block

On This Page

FeaturesKit UsageInstallationAdd KitManual UsageAdd PluginConfigure PluginKeyboard ShortcutsPluginsExitBreakPluginHow Exit Break WorksExit Point DeterminationExamplesCustom Plugin Configuration
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Exit from nested block structures (like code blocks, tables, columns) using keyboard shortcuts.
  • Automatically determines the appropriate exit point based on block hierarchy.
Report an issue

Kit Usage

Installation

The fastest way to add exit break functionality is with the ExitBreakKit, which includes pre-configured ExitBreakPlugin with keyboard shortcuts.

'use client';
 
import { ExitBreakPlugin } from 'platejs';
 
export const ExitBreakKit = [
  ExitBreakPlugin.configure({
    shortcuts: {
      insert: { keys: 'mod+enter' },
      insertBefore: { keys: 'mod+shift+enter' },
    },
  }),
];
'use client';
 
import { ExitBreakPlugin } from 'platejs';
 
export const ExitBreakKit = [
  ExitBreakPlugin.configure({
    shortcuts: {
      insert: { keys: 'mod+enter' },
      insertBefore: { keys: 'mod+shift+enter' },
    },
  }),
];

Add Kit

import { createPlateEditor } from 'platejs/react';
import { ExitBreakKit } from '@/components/editor/exit-break';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...ExitBreakKit,
  ],
});
import { createPlateEditor } from 'platejs/react';
import { ExitBreakKit } from '@/components/editor/exit-break';
 
const editor = createPlateEditor

Manual Usage

Add Plugin

import { ExitBreakPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ExitBreakPlugin,
  ],
});
import { ExitBreakPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ExitBreakPlugin,
  ],
});

Configure Plugin

import { ExitBreakPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ExitBreakPlugin.configure({
      shortcuts: {
        insert: { keys: 'mod+enter' },
        insertBefore: { keys: 'mod+shift+enter' },
      },
    }),
  ],
});
  • shortcuts.insert: Defines a keyboard shortcut to exit and insert block after.
  • shortcuts.insertBefore: Defines a keyboard shortcut to exit and insert block before.

Keyboard Shortcuts

KeyDescription
Cmd + Enter

Exit the current block structure and insert a new block after.

Cmd + Shift + Enter

Exit the current block structure and insert a new block before.

Plugins

ExitBreakPlugin

Provides transforms to exit nested block structures automatically. The plugin determines the appropriate exit point by finding the first ancestor that allows standard block siblings.

Options

    Keyboard shortcuts configuration.

How Exit Break Works

Exit break uses the compiled element content grammar to determine where a paragraph can be inserted when exiting nested structures.

Exit Point Determination

When you trigger exit break:

  1. Starts from the current text block (e.g., paragraph inside a table cell)
  2. Traverses up the document tree looking at each ancestor
  3. Finds the first ancestor whose parent allows a paragraph child
  4. Inserts a new paragraph as a sibling to that ancestor

Examples

Code Block:

<codeBlock>                              // ← Exit point (top-level block)
  <codeLine>code|</codeLine>             // ← Starting position
</codeBlock>
<paragraph>|</paragraph>                 // ← New paragraph inserted here
<codeBlock>                              // ← Exit point (top-level block)
  <codeLine>code|</codeLine>             // ← Starting position
</codeBlock>
<paragraph>|</paragraph>                 // ← New paragraph inserted here

Table in Column (exits at table level):

// First exit
<columnGroup>
  <column>                               
    <table>                              // ← Exit point (column allows blocks)
      <tableRow>                         // table allows rows only
        <tableCell>                      // row allows cells only
          <paragraph>content|</paragraph>// ← Starting position
        </tableCell>
      </tableRow>
    </table>
    <paragraph>|</paragraph>             // ← New paragraph inserted here
  </column>
</columnGroup>
 
// Second exit
<columnGroup>                            // ← Exit point (root allows blocks)
  <column>                               // group allows columns only
    <table>                              
      <tableRow>
        <tableCell>
          <paragraph>content</paragraph>
        </tableCell>
      </tableRow>
    </table>
    <paragraph>|</paragraph>             // ← Starting position
  </column>
</columnGroup>
<paragraph>|</paragraph>                 // ← New paragraph inserted here
// First exit
<columnGroup>
  <column>                               
    <table>                              // ← Exit point (column allows blocks)
      <tableRow>                         // table allows rows only
        <tableCell>                      // row allows cells only
          <paragraph>content|</paragraph>// ← Starting position
        </tableCell>
      </tableRow>
    </table>
    <paragraph>|</paragraph>             // ← New paragraph inserted here
  </column>
</columnGroup>
 
// Second exit
<columnGroup>                            // ← Exit point (root allows blocks)
  <column

Custom Plugin Configuration

Declare each custom element's allowed child content:

import { defineBasePlugin, schema } from 'platejs';
 
// Table structure
const CustomTablePlugin = defineBasePlugin('table', {
  schema: {
    element: {
      content: schema.content.type('tr', { min: 1 }),
    },
  },
});
 
const CustomTableRowPlugin = defineBasePlugin('tr', {
  schema: {
    element: {
      content: schema.content.types(['td', 'th'], { min: 1 }),
    },
  },
});
 
const CustomTableCellPlugin = defineBasePlugin('td', {
  schema: {
    element: {
      content: schema.content.group('block', { min: 1 }),
    },
  },
});
import { defineBasePlugin, schema } from 'platejs';
 
// Table structure
const CustomTablePlugin = defineBasePlugin('table', {
  schema: {
    element: {
      content: schema.content.type('tr', { min: 1 }),
    },
  },
});
 
const CustomTableRowPlugin = defineBasePlugin('tr', {
  schema: {
    element: {
      content: schema.content.types(['td', 'th'], { min: 1 }),
    },
  },
});
 
const CustomTableCellPlugin =
({
plugins: [
// ...otherPlugins,
...ExitBreakKit,
],
});
import { ExitBreakPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
ExitBreakPlugin.configure({
shortcuts: {
insert: { keys: 'mod+enter' },
insertBefore: { keys: 'mod+shift+enter' },
},
}),
],
});
> // group allows columns only
<table>
<tableRow>
<tableCell>
<paragraph>content</paragraph>
</tableCell>
</tableRow>
</table>
<paragraph>|</paragraph> // ← Starting position
</column>
</columnGroup>
<paragraph>|</paragraph> // ← New paragraph inserted here
defineBasePlugin
(
'td'
, {
schema: {
element: {
content: schema.content.group('block', { min: 1 }),
},
},
});