Blockquote Node

A styled blockquote node for displaying formatted blockquotes in the editor.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add blockquote-node

Usage

The BlockquoteNode is primarily a styling component that enhances the appearance of blockquotes in the editor. To use it, simply include it in your project and ensure you're using the Blockquote extension from Tiptap.

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'
import '@/components/tiptap-node/blockquote-node/blockquote-node.scss'

export default function EditorWithBlockquote() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
      <h2>Blockquote Example</h2>
      <blockquote>
        This is a blockquote. It can contain <strong>bold text</strong>, <em>italic text</em>.
      </blockquote>
    `,
  })

  return <EditorContent editor={editor} />
}

Features

Syntax highlighting styles for blockquotes
Dark mode support
Proper spacing and margins
Enhanced readability with monospace font