@tiptap/extension-blockquote

What is @tiptap/extension-blockquote?

@tiptap/extension-blockquote is an extension for the Tiptap editor that allows users to easily add and manage blockquotes within their rich text content. It provides a simple way to include blockquote formatting, making it easier to highlight quotes or important text in a visually distinct manner.

What are @tiptap/extension-blockquote's main functionalities?

Adding a Blockquote

This code demonstrates how to add the Blockquote extension to a Tiptap editor instance and toggle a blockquote in the editor content.

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

const editor = new Editor({
  extensions: [
    Blockquote,
  ],
  content: '<p>Hello World!</p>',
});

editor.chain().focus().toggleBlockquote().run();

Customizing Blockquote Styling

This code shows how to extend the Blockquote extension to add custom styling attributes and apply custom CSS to the blockquote element.

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

const CustomBlockquote = Blockquote.extend({
  addAttributes() {
    return {
      class: {
        default: 'custom-blockquote',
      },
    };
  },
});

const editor = new Editor({
  extensions: [
    CustomBlockquote,
  ],
  content: '<p>Hello World!</p>',
});

const styles = css`
  .custom-blockquote {
    border-left: 4px solid #ccc;
    padding-left: 16px;
    color: #666;
  }
`;

editor.chain().focus().toggleBlockquote().run();

Other packages similar to @tiptap/extension-blockquote

prosemirror-schema-basic

The prosemirror-schema-basic package provides a basic schema for ProseMirror, including blockquote functionality. It is more low-level compared to @tiptap/extension-blockquote and requires more manual setup and configuration.

quill

Quill is a rich text editor that includes built-in support for blockquotes. It provides a more comprehensive editor experience with a wide range of formatting options, including blockquotes, but may be more heavyweight compared to the focused functionality of @tiptap/extension-blockquote.

README

@tiptap/extension-blockquote

Introduction

Tiptap is a headless wrapper around ProseMirror – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as New York Times, The Guardian or Atlassian.

Official Documentation

Documentation can be found on the Tiptap website.

License

Tiptap is open sourced software licensed under the MIT license.

Changelog

v3.6.0

@tiptap/core

Patch Changes

• Improve typing and docs for EditorOptions.element to reflect all supported mounting modes and align behavior across adapters.

  • element now accepts:
    • Element: the editor is appended inside the given element.
    • { mount: HTMLElement }: the editor is mounted directly to mount (no extra wrapper).
    • (editorEl: HTMLElement) => void: a function that receives the editor element so you can place it anywhere in the DOM.
    • null: no automatic mounting.

@tiptap/extension-table

Patch Changes

• Parse cell colwidth from nearest <colgroup> when missing on the cell

  When importing HTML, table column widths are often declared on a surrounding <colgroup> rather than on each <td>. Previously, tableCell only read the colwidth attribute from the cell itself and would lose width information in that case. The implementation now falls back to reading the corresponding <col>'s width from the table's <colgroup> using the cell's index.

  This is a non-breaking bugfix that preserves layout information when HTML uses <colgroup>. Consider adding a small demo or unit test to assert colwidth is preserved for cells when only the <colgroup> contains width attributes.

• Fixes table wrapper replacement and lost selections when resizable: true.

  TableView.ignoreMutation now ignores attribute/childList/characterData mutations that occur inside the table wrapper but outside the editable contentDOM, preventing wrapper re-creation during resize interactions so selections (e.g. mergeCells()) are preserved.

  No API or breaking changes.

@tiptap/extension-bubble-menu

Patch Changes

• Remove recently added updateBubbleMenuPosition method because it would not work in the React and Vue versions of the BubbleMenu, only in the vanilla extension. And that would confuse developers.

  Write the transactionHandler method as an arrow function because arrow functions have no this, so the this remains the instance of the BubbleMenuView class.

@tiptap/extension-unique-id

Minor Changes

• Create a utility to add unique IDs to a document in the server

  The utility is called generateUniqueIds and is exported from the @tiptap/extension-unique-id package.

  It has the same functionality as the UniqueID extension, but without the need to create an Editor instance. This lets you add unique IDs to the document in the server.

  It takes the following parameters:

  • doc: The Tiptap JSON document to add unique IDs to.
  • extensions: The extensions to use. Must include the UniqueID extension.

  It returns the updated Tiptap JSON document, with the unique IDs added to the nodes.

@tiptap/vue-3

Minor Changes

• Pass attrs through Vue 3 menus