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.

Options

Collapse all

    An array of rule objects specifying the hotkey to activate the soft break and an optional filter query.