Add a paragraph node to your editor

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

Install

You can add the node component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add paragraph-node

Manual Integration

For frameworks other than Vite or Next.js, add the node component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

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)