Paragraph

The Paragraph node is the default block-level text container. Every line of regular text in the editor is a paragraph. When you press Enter, a new paragraph is created. It renders as a <p> element in HTML.

Usage

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

Vanilla JS/TS

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

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Text, Paragraph],
  content: '<p>Hello world</p>',
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent } from '@domternal/angular';
import { Editor, Document, Text, Paragraph } 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];
  content = '<p>Hello world</p>';
}

React

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

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Text, Paragraph]}
      content="<p>Hello world</p>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Headless

Without a toolbar, use commands to convert blocks to paragraphs programmatically:

// Convert the current block to a paragraph
editor.commands.setParagraph();

// Check if the current block is a paragraph
editor.isActive('paragraph'); // true or false

// Insert a new paragraph with content
editor.commands.insertContent('<p>New paragraph</p>');

Schema

Property	Value
ProseMirror name	paragraph
Type	Node
Group	block
Content	inline* (zero or more inline nodes)
HTML tag	<p>
Priority	1000

The inline* content expression means a paragraph can contain Text nodes and other inline nodes (like Emoji or Mention). An empty paragraph contains no children and renders as an empty <p> tag.

The high priority (1000) ensures Paragraph is the default node type. When ProseMirror needs to create a block node (for example, after pressing Enter or when the document needs at least one child), it picks the highest-priority block node, which is Paragraph.

Options

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

Custom HTML attributes

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

const CustomParagraph = Paragraph.configure({
  HTMLAttributes: { class: 'my-paragraph' },
});

This renders every paragraph as <p class="my-paragraph">.

Commands

Command	Description
setParagraph()	Convert the current block to a paragraph

// Convert the current block (heading, blockquote, etc.) to a paragraph
editor.commands.setParagraph();

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

Keyboard shortcuts

Shortcut	Command
Mod-Alt-0	setParagraph()

This is useful when you have a heading or code block and want to convert it back to a regular paragraph.

JSON representation

{
  "type": "paragraph",
  "content": [
    { "type": "text", "text": "Hello world" }
  ]
}

An empty paragraph:

{
  "type": "paragraph"
}

Source

@domternal/core - Paragraph.ts