Add a paragraph node to your editor

Comprehensive styling for the core paragraph node and various other text elements in the Tiptap editor.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add paragraph-node

Usage

The ParagraphNode provides styling for paragraphs and other text-related elements within the editor. To use it, include it in your project alongside the Tiptap editor.

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

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

export default function BasicEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <p>A paragraph with <a href="#">a link</a> and <strong>bold text</strong>.</p>
      <blockquote>A blockquote with some insightful text.</blockquote>
      <hr/>
      <p>Another paragraph after a horizontal rule.</p>
    `,
  })

  return <EditorContent editor={editor} className="control-showcase" />
}

Features

Core styling for paragraphs with proper spacing
Heading styles (h1-h4) with appropriate sizing
Blockquote styling with left border
Link styling with appropriate colors
Horizontal rule (hr) styling
Text decoration inheritance for nested spans
Selection highlighting
Proper cursor styles
Empty paragraph placeholders
Thread markup styles integration
Highlight color variables
Mathematics component integration
Dark mode support
Gap cursor styling

Requirements

The paragraph-node.scss provides styling for many core Tiptap features. While it has no direct dependencies, it works best with:

Open source feature(s)