Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/devscribe-team/webeditor/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The Break component adds customizable vertical spacing between content blocks. It’s useful for controlling layout and visual rhythm in your document.

​
Insertion

Insert a break using the command menu:
  1. Press / to open the command menu
  2. Search for “Break”
  3. Press Enter to insert

​
Attributes

​
size
number
default:"24"
The height of the spacing in pixels (1-200px)

​
Node specification

export const breakNodeSpec: NodeSpec = {
  group: "block",
  content: "",
  attrs: {
    size: { default: 24 },
  },
  selectable: true,
  atom: true,
  defining: true,

  parseDOM: [
    {
      tag: "break",
      getAttrs: (dom) => ({
        size: parseInt(dom.getAttribute("size") || "24"),
      }),
    },
  ],

  toDOM: (node) => [
    "break",
    {
      size: node.attrs.size.toString(),
      style: `height: ${node.attrs.size}px; display: block;`,
    },
  ],
};

​
Usage examples

​
Default break (24px)

Use the command menu to insert a break with the default 24px spacing: 
<break size="24"></break>

​
Custom spacing

Click on a break to edit its size. You can set any value from 1 to 200 pixels: 
<break size="48"></break>

​
Input rule

You can also create a break using the input rule syntax: 
<break />
<break size="32" />
Type the above syntax and it will be converted to a break component.

​
Editing

In edit mode, the break component displays interactive features:
  • Hover state: A dotted line appears when you hover over the break
  • Proximity indicator: The dotted line also appears when your cursor is near the break
  • Click to edit: Click anywhere on the break to open a modal where you can adjust the size
  • Visual label: Shows the current size (e.g., “Break (24px) - Click to edit”)
The edit modal allows you to:
  • Set a custom size between 1 and 200 pixels
  • Preview the current size
  • Save or cancel changes

​
DOM structure

The break component renders as: 
<break size="24" style="height: 24px; display: block;"></break>

​
TypeScript types

interface BreakAttrs {
  size: number; // 1-200px
}

​
Insert function

Programmatically insert a break: 
import { insertBreak } from "@devscribe-team/webeditor";

// In your editor state
const tr = insertBreak(state);
dispatch(tr);
The insertBreak function:
  • Creates a break node with default 24px size
  • Replaces the current selection
  • Positions the cursor after the break
  • Inserts a new paragraph if needed to continue editing

​
Best practices

  • Use consistent spacing sizes throughout your document for visual harmony
  • Common spacing values: 24px (default), 32px (medium), 48px (large)
  • Avoid very small values (< 12px) or very large values (> 100px) for better readability
  • In read-only mode, the break renders as pure spacing with no visual indicators

Build docs developers (and LLMs) love

Get started for freeTalk to us