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.

When to use

Use HardBreak when you need:

Shift+Enter to insert a soft line break (<br>) inside the current paragraph instead of starting a new block
Address blocks, poetry, song lyrics, or signature lines where line breaks carry meaning but a new paragraph would change spacing

Skip it if:

You prefer Enter to always create a new paragraph for typographic clarity
Your output renderer collapses <br> tags or treats them as whitespace

Usage

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

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

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

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>';
}

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>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Text, Paragraph, HardBreak } from '@domternal/core';

const extensions = [Document, Text, Paragraph, HardBreak];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>First line<br>Second line in the same paragraph</p>">
    <Domternal.Content />
  </Domternal>
</template>

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 (` `) 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()`

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