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.

When to use

Use Blockquote when you need:

A <blockquote> wrapper with > markdown shortcut and Cmd+Shift+B
Quotation styling for citations, pull quotes, or notable passages
Nested content inside the quote (multiple paragraphs, lists, even other blockquotes)

Skip it if:

You want callout/alert styling instead of true quotations (use Details for collapsible callouts or build a custom node)
Your content is short and inline-only (a Code mark or italic phrase may read better)

Live Playground

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

Themed
Headless

Click to try it out

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:

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

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

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

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

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

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

<template>
  <Domternal :extensions="extensions" content="<blockquote><p>A wise quote</p></blockquote>">
    <Domternal.Content />
  </Domternal>
</template>

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.

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