Hard Break

The HardBreak node provides an inline line break (<br>). Unlike pressing Enter (which creates a new paragraph), a hard break inserts a line break within the same paragraph. It also provides a command for inserting non-breaking spaces.

Usage

HardBreak is included in StarterKit. If you are building a custom setup without StarterKit, add it manually:

Vanilla JS/TS

import { Editor, Document, Text, Paragraph, HardBreak } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Text, Paragraph, HardBreak],
  content: '<p>First line<br>Second line in the same paragraph</p>',
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent } from '@domternal/angular';
import { Editor, Document, Text, Paragraph, HardBreak } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent],
  template: `
    <domternal-editor
      [extensions]="extensions"
      [content]="content"
      (editorCreated)="editor.set($event)"
    />
  `,
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Text, Paragraph, HardBreak];
  content = '<p>First line<br>Second line in the same paragraph</p>';
}

React

import { Domternal } from '@domternal/react';
import { Document, Text, Paragraph, HardBreak } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Text, Paragraph, HardBreak]}
      content="<p>First line<br>Second line in the same paragraph</p>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Headless

Without a toolbar, insert hard breaks and non-breaking spaces programmatically:

// Insert a line break at the cursor
editor.commands.setHardBreak();

// Insert a non-breaking space
editor.commands.insertNbsp();

// Chain with focus
editor.chain().focus().setHardBreak().run();

Schema

Property	Value
ProseMirror name	hardBreak
Type	Node
Group	inline
Inline	Yes
Selectable	No
Content	None (leaf node)
HTML tag	<br>

HardBreak is an inline leaf node. It sits inside text content alongside text nodes and marks. It is not selectable, so the cursor skips over it rather than selecting it as a node.

Options

Option	Type	Default	Description
HTMLAttributes	Record<string, unknown>	{}	HTML attributes added to the <br> element

Custom HTML attributes

import { HardBreak } from '@domternal/core';

const CustomHardBreak = HardBreak.configure({
  HTMLAttributes: { class: 'my-break' },
});

Commands

Command	Description
setHardBreak()	Insert a hard break (<br>) at the current cursor position
insertNbsp()	Insert a non-breaking space (&nbsp;) at the current cursor position

// Insert a line break
editor.commands.setHardBreak();

// Insert a non-breaking space
editor.commands.insertNbsp();

// With chaining
editor.chain().focus().setHardBreak().run();

setHardBreak inserts a <br> node at the cursor position. insertNbsp inserts a Unicode non-breaking space character (U+00A0), which prevents the browser from collapsing whitespace at that position.

Keyboard shortcuts

Shortcut	Command
Mod-Enter	setHardBreak()
Shift-Enter	setHardBreak()
Mod-Shift-Space	insertNbsp()

Note

Mod-Enter is also used by TaskItem for toggling the checked state. When the cursor is inside a task item, TaskItem’s handler takes priority. In all other contexts, Mod-Enter inserts a hard break.

Toolbar items

HardBreak registers a button in the toolbar with the name hardBreak in group insert at priority 50.

Item	Command	Icon	Shortcut
Hard Break	setHardBreak	linkBreak	Shift-Enter

JSON representation

{
  "type": "hardBreak"
}

A paragraph with a hard break:

{
  "type": "paragraph",
  "content": [
    { "type": "text", "text": "First line" },
    { "type": "hardBreak" },
    { "type": "text", "text": "Second line" }
  ]
}

Source

@domternal/core - HardBreak.ts