or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tiptap--extension-blockquote

A blockquote extension for the Tiptap rich text editor framework

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-blockquote@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-blockquote@3.4.0

index.mddocs/

Tiptap Blockquote Extension

The Tiptap Blockquote Extension provides blockquote functionality for the Tiptap rich text editor framework. It allows users to create, toggle, and manipulate blockquote elements with keyboard shortcuts, input rules, and programmatic commands.

Package Information

  • Package Name: @tiptap/extension-blockquote
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-blockquote

Core Imports

import { Blockquote } from '@tiptap/extension-blockquote';

For default import:

import Blockquote from '@tiptap/extension-blockquote';

For importing additional exports:

import { Blockquote, inputRegex, type BlockquoteOptions } from '@tiptap/extension-blockquote';

For CommonJS:

const { Blockquote } = require('@tiptap/extension-blockquote');

Basic Usage

import { Editor } from '@tiptap/core';
import { Blockquote } from '@tiptap/extension-blockquote';

const editor = new Editor({
  extensions: [
    Blockquote.configure({
      HTMLAttributes: {
        class: 'my-custom-blockquote',
      },
    }),
  ],
  content: '<p>Type > and a space to create a blockquote</p>',
});

// Use commands programmatically
editor.commands.setBlockquote();        // Wrap selection in blockquote
editor.commands.toggleBlockquote();     // Toggle blockquote
editor.commands.unsetBlockquote();      // Remove blockquote wrapping

Capabilities

Extension Class

The main Blockquote extension that integrates with Tiptap's node system.

/**
 * Blockquote extension for Tiptap editor
 * Provides blockquote functionality with commands, keyboard shortcuts, and input rules
 */
const Blockquote: Node<BlockquoteOptions, any>;

Configuration Options

Configure the blockquote extension behavior and HTML attributes.

interface BlockquoteOptions {
  /**
   * HTML attributes to add to the blockquote element
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Usage Example:

import { Blockquote } from '@tiptap/extension-blockquote';

const editor = new Editor({
  extensions: [
    Blockquote.configure({
      HTMLAttributes: {
        class: 'prose-blockquote',
        'data-type': 'blockquote',
      },
    }),
  ],
});

Commands

The extension adds three commands to the editor's command system.

interface Commands {
  blockQuote: {
    /**
     * Set a blockquote node - wraps the current selection in a blockquote
     * @returns Command function that returns boolean indicating success
     */
    setBlockquote(): Command;
    /**
     * Toggle a blockquote node - toggles blockquote wrapping on selection
     * @returns Command function that returns boolean indicating success
     */
    toggleBlockquote(): Command;
    /**
     * Unset a blockquote node - removes blockquote wrapping from selection
     * @returns Command function that returns boolean indicating success
     */
    unsetBlockquote(): Command;
  };
}

Usage Examples:

// Wrap current selection in blockquote
if (editor.commands.setBlockquote()) {
  console.log('Successfully created blockquote');
}

// Toggle blockquote (create if none, remove if exists)
editor.commands.toggleBlockquote();

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

// Check if current selection can be wrapped in blockquote
if (editor.can().setBlockquote()) {
  editor.commands.setBlockquote();
}

Input Rules

The extension automatically creates blockquotes when users type the trigger pattern.

/**
 * Regular expression that matches blockquote input trigger
 * Matches "> " at the beginning of a line (with optional whitespace)
 */
const inputRegex: RegExp;

Behavior:

  • Typing > followed by a space at the start of a line automatically creates a blockquote
  • The > and space are consumed and replaced with the blockquote structure

Keyboard Shortcuts

The extension provides keyboard shortcuts for quick blockquote manipulation.

Available Shortcuts:

  • Mod-Shift-b: Toggle blockquote (⌘⇧B on Mac, Ctrl+Shift+B on Windows/Linux)

Node Properties

The blockquote node has the following ProseMirror characteristics:

  • Name: 'blockquote'
  • Content: 'block+' (contains one or more block-level elements)
  • Group: 'block' (belongs to the block content group)
  • Defining: true (creates structural boundaries in the document)

HTML Integration

The extension handles HTML parsing and rendering:

HTML Parsing:

  • Recognizes <blockquote> elements when parsing HTML content
  • Preserves existing blockquote structure during content import

HTML Rendering:

  • Renders as semantic <blockquote> elements
  • Merges configured HTMLAttributes with any runtime attributes
  • Maintains proper nesting of block content within blockquotes

Types

interface BlockquoteOptions {
  HTMLAttributes: Record<string, any>;
}

type Command = (props: {
  editor: Editor;
  tr: Transaction;
  commands: Commands;
  can: () => Commands;
  chain: () => Commands;
  state: EditorState;
  dispatch: ((tr: Transaction) => void) | undefined;
  view: EditorView;
}) => boolean;

Error Handling

The extension follows Tiptap's standard error handling patterns:

  • Commands return boolean values indicating success/failure
  • Failed operations (e.g., trying to create blockquote in invalid context) return false
  • No exceptions are thrown during normal operation
  • Invalid configurations are handled gracefully with fallback to defaults