Find out what's new in Tiptap Editor 3.0

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)