Blockquote

The Blockquote node provides a block-level quote container (<blockquote>). Blockquotes can hold one or more block nodes (paragraphs, headings, lists, etc.) and support nesting. A markdown-style input rule (> + space) and a keyboard shortcut (Mod-Shift-B) are included.

Live Playground

Type > + space at the start of a line to create a blockquote. Use Mod-Shift-B to toggle.

Vanilla JS/TS

Click to try it out

Angular

Click to try it out

Vanilla JS preview · Angular components produce the same output

React

Click to try it out

Vanilla JS preview · React components produce the same output

Headless

The buttons above the editor are custom HTML buttons wired to toggleBlockquote() and unsetBlockquote(). Active state is tracked with editor.isActive('blockquote').

Click to try it out

Usage

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

Vanilla JS/TS

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

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

Angular

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

React

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

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Text, Paragraph, Blockquote]}
      content="<blockquote><p>A wise quote</p></blockquote>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Schema

Property	Value
ProseMirror name	blockquote
Type	Node
Group	block
Content	block+ (one or more block nodes)
Defining	Yes
HTML tag	<blockquote>

The content expression block+ means a blockquote must contain at least one block node. You can nest paragraphs, headings, lists, code blocks, or even other blockquotes inside it.

The defining property means that when you select a blockquote and paste content over it, the replacement keeps the blockquote wrapper rather than converting to the pasted node type.

Options

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

Custom HTML attributes

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

const CustomBlockquote = Blockquote.configure({
  HTMLAttributes: { class: 'my-quote' },
});

Commands

Command	Description
setBlockquote()	Wrap the current selection in a blockquote
toggleBlockquote()	Toggle blockquote wrapping on the current selection
unsetBlockquote()	Remove the blockquote wrapping (lift content out)

// Wrap selection in a blockquote
editor.commands.setBlockquote();

// Toggle blockquote on/off
editor.commands.toggleBlockquote();

// Remove blockquote
editor.commands.unsetBlockquote();

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

setBlockquote wraps the selected blocks inside a <blockquote>. toggleBlockquote removes the wrapper if the selection is already inside a blockquote. unsetBlockquote always lifts the content out of the nearest blockquote.

Keyboard shortcuts

Shortcut	Command
Mod-Shift-B	toggleBlockquote()

Blockquote does not register custom Backspace or Enter handlers. Standard ProseMirror behavior applies:

• Enter at the end of the last paragraph inside a blockquote creates a new paragraph still inside the blockquote. Pressing Enter again on an empty paragraph exits the blockquote.
• Backspace at the start of the first paragraph inside a blockquote lifts the content out of the blockquote.

Input rules

Input	Result
> + space	Wrap line in a blockquote

Type > at the start of a new line, then press space. The line wraps in a blockquote. Unlike heading input rules, blockquote wrapping is additive: typing > + space inside an existing blockquote creates a nested blockquote.

Toolbar items

Blockquote registers a button in the toolbar with the name blockquote in group blocks at priority 150.

Item	Command	Icon	Shortcut
Blockquote	toggleBlockquote	quotes	Mod-Shift-B

JSON representation

{
  "type": "blockquote",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "A wise quote" }
      ]
    }
  ]
}

A blockquote with multiple paragraphs:

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

A nested blockquote (created by typing > + space inside an existing blockquote):

{
  "type": "blockquote",
  "content": [
    {
      "type": "blockquote",
      "content": [
        {
          "type": "paragraph",
          "content": [
            { "type": "text", "text": "Nested quote" }
          ]
        }
      ]
    }
  ]
}

Source

@domternal/core - Blockquote.ts