Horizontal Rule Plugin

PreviousNext

A plugin for the horizontal rule.

Docs
shadcn-editorui

Preview

Loading preview…
registry/new-york-v4/editor/plugins/toolbar/block-insert/insert-horizontal-rule.tsx
"use client"

import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode"
import { ScissorsIcon } from "lucide-react"

import { useToolbarContext } from "@/registry/new-york-v4/editor/context/toolbar-context"
import { SelectItem } from "@/registry/new-york-v4/ui/select"

export function InsertHorizontalRule() {
  const { activeEditor } = useToolbarContext()

  return (
    <SelectItem
      value="horizontal-rule"
      onPointerUp={() =>
        activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined)
      }
      className=""
    >
      <div className="flex items-center gap-1">
        <ScissorsIcon className="size-4" />
        <span>Horizontal Rule</span>
      </div>
    </SelectItem>
  )
}

Installation

npx shadcn@latest add @shadcn-editor/horizontal-rule-plugin

Usage

import { HorizontalRulePlugin } from "@/components/ui/horizontal-rule-plugin"
<HorizontalRulePlugin />