Soft 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

  • Allows insertion of line breaks within a text block without starting a new block

Installation

npm install @udecode/plate-break

Usage

import { SoftBreakPlugin } from '@udecode/plate-break/react';
import { CodeBlockPlugin } from '@udecode/plate-code-block/react';
import { BlockquotePlugin } from '@udecode/plate-block-quote/react';
import { TablePlugin } from '@udecode/plate-table/react';
 
const plugins = [
  // ...otherPlugins,
  SoftBreakPlugin.configure({
    options: {
      rules: [
        { hotkey: 'shift+enter' },
        {
          hotkey: 'enter',
          query: {
            allow: [CodeBlockPlugin.key, BlockquotePlugin.key, TablePlugin.key],
          },
        },
      ],
    },
  }),
];

Keyboard Shortcuts

KeyDescription
Shift + Enter

Insert a line break within a block of text without starting a new block

Plugins

SoftBreakPlugin

Plugin for inserting line breaks within text blocks.

Attributes

Collapse all

    Rules specifying hotkeys and filters for soft breaks.

    Optionsrules

    Collapse all

      Key combination that activates soft break.

      Filter options for block types where rule applies.

const plugins = [
  SoftBreakPlugin.configure({
    options: {
      rules: [
        // Shift+Enter always inserts soft break
        { hotkey: 'shift+enter' },
        // Enter inserts soft break only in specified blocks
        {
          hotkey: 'enter',
          query: {
            allow: ['code_block', 'blockquote', 'table'],
          },
        },
      ],
    },
  }),
];