Horizontal Rule Node

A styled horizontal rule node for displaying formatted horizontal rules in the editor.

Installation

You can add the node component via Tiptap CLI

npx @tiptap/cli@latest add horizontal-rule-node

Usage

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

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import HorizontalRule from '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension'

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

export default function EditorWithHorizontalRule() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit.configure({ horizontalRule: false }), HorizontalRule],
    content: `
      <p>This is a paragraph before the horizontal rule.</p>
      <hr />
      <p>This is a paragraph after the horizontal rule.</p>
    `,
  })

  return <EditorContent editor={editor} />
}

Features

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