"use client"

import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import Link from "@tiptap/extension-link"
import Placeholder from "@tiptap/extension-placeholder"
import { Bold, Italic, Link as LinkIcon, Unlink } from "lucide-react"
import { useCallback, useEffect, useState } from "react"
import { cn } from "@/registry/lib/utils"
import { Button } from "@/registry/ui/button"
import { Input } from "@/registry/ui/input"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/registry/ui/popover"

interface RichTextEditorProps {
  value: string
  onChange: (value: string) => void
  onBlur?: () => void
  placeholder?: string
  className?: string
}

export function RichTextEditor({
  value,
  onChange,
  onBlur,
  placeholder,
  className,
}: RichTextEditorProps) {
  const [linkUrl, setLinkUrl] = useState("")
  const [linkPopoverOpen, setLinkPopoverOpen] = useState(false)

  const editor = useEditor({
    immediatelyRender: false,
    extensions: [
      StarterKit.configure({
        // Disable features we don't need
        heading: false,
        bulletList: false,
        orderedList: false,
        listItem: false,
        blockquote: false,
        codeBlock: false,
        code: false,
        horizontalRule: false,
        hardBreak: false,
        link: false,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          class: "text-accent underline",
        },
      }),
      Placeholder.configure({
        placeholder,
      }),
    ],
    content: value,
    editorProps: {
      attributes: {
        class: cn(
          "prose prose-sm dark:prose-invert max-w-none",
          "min-h-36 px-3 py-2 text-base md:text-sm",
          "focus:outline-none",
          "[&_p]:my-0 [&_p:not(:last-child)]:mb-2"
        ),
      },
    },
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML())
    },
    onBlur: () => {
      onBlur?.()
    },
  })

  // Sync external value changes
  useEffect(() => {
    if (editor && value !== editor.getHTML()) {
      editor.commands.setContent(value)
    }
  }, [editor, value])

  const handleSetLink = useCallback(() => {
    if (!editor) return

    if (linkUrl === "") {
      editor.chain().focus().extendMarkRange("link").unsetLink().run()
    } else {
      editor
        .chain()
        .focus()
        .extendMarkRange("link")
        .setLink({ href: linkUrl })
        .run()
    }

    setLinkUrl("")
    setLinkPopoverOpen(false)
  }, [editor, linkUrl])

  const handleOpenLinkPopover = useCallback(() => {
    if (!editor) return
    const previousUrl = editor.getAttributes("link").href || ""
    setLinkUrl(previousUrl)
    setLinkPopoverOpen(true)
  }, [editor])

  const isLinkActive = editor?.isActive("link") ?? false

  return (
    <div
      className={cn(
        "rounded-md border border-border bg-transparent shadow-xs transition-[color,box-shadow]",
        "focus-within:border-accent focus-within:ring-ring-accent focus-within:ring-1",
        className
      )}
    >
      {/* Toolbar */}
      <div
        role="toolbar"
        aria-label="Formatting"
        className="flex items-center gap-0.5 border-b border-border px-1 py-1 h-9"
      >
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className={cn(
            "h-7 w-7 pointer-coarse:size-9",
            editor?.isActive("bold") && "bg-accent-500/15 text-accent"
          )}
          onClick={() => editor?.chain().focus().toggleBold().run()}
          disabled={!editor}
          aria-label="Bold"
          aria-pressed={editor?.isActive("bold") ?? false}
        >
          <Bold className="h-3 w-3" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className={cn(
            "h-7 w-7 pointer-coarse:size-9",
            editor?.isActive("italic") && "bg-accent-500/15 text-accent"
          )}
          onClick={() => editor?.chain().focus().toggleItalic().run()}
          disabled={!editor}
          aria-label="Italic"
          aria-pressed={editor?.isActive("italic") ?? false}
        >
          <Italic className="h-3 w-3" />
        </Button>

        <Popover open={linkPopoverOpen} onOpenChange={setLinkPopoverOpen}>
          <PopoverTrigger asChild>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className={cn(
                "h-7 w-7 pointer-coarse:size-9",
                isLinkActive && "bg-accent-500/15 text-accent"
              )}
              onClick={handleOpenLinkPopover}
              disabled={!editor}
              aria-label="Link"
              aria-pressed={isLinkActive}
            >
              <LinkIcon className="h-3 w-3" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-80 p-2" align="start">
            <div className="flex gap-2">
              <Input
                value={linkUrl}
                onChange={(e) => setLinkUrl(e.target.value)}
                placeholder="https://example.com"
                className="h-8 text-base md:text-sm"
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    e.preventDefault()
                    handleSetLink()
                  }
                }}
              />
              <Button
                type="button"
                size="sm"
                className="h-8 px-3"
                onClick={handleSetLink}
              >
                {linkUrl ? "Set" : "Remove"}
              </Button>
            </div>
          </PopoverContent>
        </Popover>

        {isLinkActive && (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            className="h-7 w-7 pointer-coarse:size-9"
            onClick={() => editor?.chain().focus().unsetLink().run()}
            aria-label="Remove link"
          >
            <Unlink className="h-3 w-3" />
          </Button>
        )}
      </div>

      {/* Editor content area - fixed height whether editor loaded or not */}
      <div className="min-h-36">
        {editor && (
          <EditorContent
            editor={editor}
            placeholder={placeholder}
          />
        )}
      </div>
    </div>
  )
}
Search documentation

Rich Text Editor

Installation

Usage

Examples

Default
