Skip to main content

Exit Break

Allows you to create hotkeys which exit the current block.

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-break

Usage#

import React from 'react';
import {
  createExitBreakPlugin,
  createListPlugin,
  createResetNodePlugin,
  createSoftBreakPlugin,
  createTablePlugin,
  createTrailingBlockPlugin,
  Plate,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { exitBreakPlugin } from './exit-break/exitBreakPlugin';
import { exitBreakValue } from './exit-break/exitBreakValue';
import { resetBlockTypePlugin } from './reset-node/resetBlockTypePlugin';
import { softBreakPlugin } from './soft-break/softBreakPlugin';
import { trailingBlockPlugin } from './trailing-block/trailingBlockPlugin';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createListPlugin(),
    createTablePlugin(),
    createResetNodePlugin(resetBlockTypePlugin),
    createSoftBreakPlugin(softBreakPlugin),
    createTrailingBlockPlugin(trailingBlockPlugin),
    createExitBreakPlugin(exitBreakPlugin),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    plugins={plugins}
    initialValue={exitBreakValue}
  />
);

Options#

export interface ExitBreakRule {
/**
* Hotkey to trigger exit break.
*/
hotkey: string;
/**
* @see {@link QueryNodeOptions}
*/
query?: QueryNodeOptions & {
/**
* When the selection is at the start of the block above.
*/
start?: boolean;
/**
* When the selection is at the end of the block above.
*/
end?: boolean;
};
/**
* Path level where to exit. Default is 1.
*/
level?: number;
/**
* Exit before the selected block if true.
*/
before?: boolean;
defaultType?: string;
}
export interface ExitBreakPlugin {
rules?: ExitBreakRule[];
}

Source Code#

Edit this page