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)