Skip to main content
The Blockquote extension allows you to create blockquote nodes for quoted content. It wraps block-level content and is commonly used for citations or emphasized passages.

​
Installation

npm install @tiptap/extension-blockquote

​
Usage

The Blockquote extension is included in the StarterKit by default: 
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

const editor = new Editor({
  extensions: [StarterKit],
})
To use it standalone: 
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Blockquote from '@tiptap/extension-blockquote'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'

const editor = new Editor({
  extensions: [
    Document,
    Paragraph,
    Text,
    Blockquote,
  ],
})

​
Configuration

​
HTMLAttributes

Custom HTML attributes to add to the blockquote element.
​
HTMLAttributes
Record<string, any>
default:"{}"
Custom HTML attributes that should be added to the rendered HTML tag.
Blockquote.configure({
  HTMLAttributes: {
    class: 'my-blockquote',
  },
})

​
Commands

​
setBlockquote

Wraps the current selection in a blockquote. 
editor.commands.setBlockquote()

​
toggleBlockquote

Toggles a blockquote. If the current node is already wrapped in a blockquote, it unwraps it. 
editor.commands.toggleBlockquote()

​
unsetBlockquote

Removes the blockquote wrapping from the current selection. 
editor.commands.unsetBlockquote()

​
Keyboard Shortcuts

  • Mod-Shift-B: Toggle blockquote

​
Input Rules

The Blockquote extension supports Markdown-style input rules:
  • Type > followed by a space to create a blockquote

​
Source Code

View the source code on GitHub: packages/extension-blockquote/src/blockquote.tsx