Text

The Text node holds the actual character content in the editor. Every visible string you see is a Text node inside a block node like Paragraph or Heading. Text nodes carry marks (bold, italic, link, etc.), which is how inline formatting works.

Usage

Text 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

Text is a leaf node with no commands of its own. You interact with text content through the editor’s content methods:

// Insert text at the cursor
editor.commands.insertContent('Hello');

// Get all text content
const text = editor.state.doc.textContent;

// Get text between positions
const slice = editor.state.doc.textBetween(0, 10);

Tip

Document, Text, and Paragraph are the three minimum required nodes for a working editor. Every setup must include all three.

Schema

Property	Value
ProseMirror name	text
Type	Node
Group	inline
Content	None (leaf node)
Rendered in DOM	As plain text (no wrapper element)

Text nodes are leaf nodes: they contain characters but no child nodes. ProseMirror renders them directly as DOM text nodes without any wrapping HTML element.

How text and marks work together

Text nodes carry marks. When you apply bold to a word, ProseMirror splits the text into separate Text nodes, each with its own set of marks:

<p>Hello <strong>world</strong></p>

In the document model, this is two text nodes inside one paragraph:

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

Multiple marks can stack on the same text node:

{
  "type": "text",
  "text": "important",
  "marks": [
    { "type": "bold" },
    { "type": "italic" },
    { "type": "link", "attrs": { "href": "https://example.com" } }
  ]
}

Note

ProseMirror automatically merges adjacent text nodes that have the same set of marks. You will never see two consecutive text nodes with identical marks in the JSON output. If you remove bold from a word, ProseMirror merges the surrounding text nodes back into one.

Where text nodes can appear

Text nodes belong to the inline group. They can appear inside any node whose content expression allows inline content:

Node	Content expression
Paragraph	inline*
Heading	inline*
Code Block	text* (plain text only, no marks)
Details Summary	inline*

Options

Text has no configurable options.

Commands

Text adds no commands.

Keyboard shortcuts

Text adds no keyboard shortcuts.

Source

@domternal/core - Text.ts