Blockquote

Create blockquote nodes for quoted text or 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

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