RichTextEditor

"use client";
import { useEffect, useId, useState } from "react";
import { useEditor, EditorContent, useEditorState } from "@tiptap/react";
import type { JSONContent } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import styles from "./rich-text-editor.module.css";
import {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  List,
  ListOrdered,
  Quote,
  Undo2,
  Redo2,
  Link2,
  Unlink,
} from "lucide-react";
import { Button } from "@dashboardpack/core/components/ui/button";
import { Input } from "@dashboardpack/core/components/ui/input";
import { Label } from "@dashboardpack/core/components/ui/label";
import { cn } from "@dashboardpack/core/lib/utils";
export interface RichTextEditorProps {
  label: string;
  value?: JSONContent;
  defaultValue?: JSONContent;
  onValueChange?: (document: JSONContent) => void;
  readOnly?: boolean;
  compact?: boolean;
  className?: string;
}
export function safeEditorLink(value: string) {
  try {
    const url = new URL(value);
    return ["https:", "http:", "mailto:"].includes(url.protocol)
      ? url.href
      : null;
  } catch {
    return null;
  }
}
export function RichTextEditor({
  label,
  value,
  defaultValue,
  onValueChange,
  readOnly = false,
  compact = false,
  className,
}: RichTextEditorProps) {
  const id = useId();
  const [linkOpen, setLinkOpen] = useState(false);
  const [href, setHref] = useState("");
  const [error, setError] = useState("");
  const editor = useEditor({
    immediatelyRender: false,
    shouldRerenderOnTransaction: false,
    extensions: [
      StarterKit.configure({
        heading: { levels: [2, 3] },
        link: {
          openOnClick: false,
          autolink: false,
          protocols: ["http", "https", "mailto"],
        },
      }),
    ],
    content: value ??
      defaultValue ?? { type: "doc", content: [{ type: "paragraph" }] },
    editable: !readOnly,
    editorProps: {
      attributes: {
        role: "textbox",
        "aria-label": label,
        "aria-multiline": "true",
        "aria-readonly": String(readOnly),
        class: `min-h-40 p-4 text-sm leading-7 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring ${styles.content}`,
      },
    },
    onUpdate: ({ editor: current }) => onValueChange?.(current.getJSON()),
  });
  const state = useEditorState({
    editor,
    selector: ({ editor: current }) =>
      current
        ? {
            bold: current.isActive("bold"),
            italic: current.isActive("italic"),
            underline: current.isActive("underline"),
            strike: current.isActive("strike"),
            bullet: current.isActive("bulletList"),
            ordered: current.isActive("orderedList"),
            quote: current.isActive("blockquote"),
            heading: current.isActive("heading", { level: 2 }),
            undo: current.can().undo(),
            redo: current.can().redo(),
            link: current.isActive("link"),
            characters: current.getText().length,
          }
        : null,
  });
  useEffect(() => {
    if (editor) editor.setEditable(!readOnly);
  }, [editor, readOnly]);
  useEffect(() => {
    if (
      editor &&
      value &&
      JSON.stringify(editor.getJSON()) !== JSON.stringify(value)
    )
      editor.commands.setContent(value, { emitUpdate: false });
  }, [editor, value]);
  const applyLink = () => {
    const safe = safeEditorLink(href);
    if (!safe) {
      setError("Enter an absolute http, https, or mailto URL.");
      return;
    }
    editor
      ?.chain()
      .focus()
      .extendMarkRange("link")
      .setLink({ href: safe })
      .run();
    setLinkOpen(false);
  };
  const tools =
    editor && state
      ? [
          {
            label: "Bold",
            icon: Bold,
            active: state.bold,
            run: () => editor.chain().focus().toggleBold().run(),
          },
          {
            label: "Italic",
            icon: Italic,
            active: state.italic,
            run: () => editor.chain().focus().toggleItalic().run(),
          },
          {
            label: "Underline",
            icon: Underline,
            active: state.underline,
            run: () => editor.chain().focus().toggleUnderline().run(),
          },
          {
            label: "Strikethrough",
            icon: Strikethrough,
            active: state.strike,
            run: () => editor.chain().focus().toggleStrike().run(),
          },
          {
            label: "Bullet list",
            icon: List,
            active: state.bullet,
            run: () => editor.chain().focus().toggleBulletList().run(),
          },
          {
            label: "Numbered list",
            icon: ListOrdered,
            active: state.ordered,
            run: () => editor.chain().focus().toggleOrderedList().run(),
          },
          {
            label: "Blockquote",
            icon: Quote,
            active: state.quote,
            run: () => editor.chain().focus().toggleBlockquote().run(),
          },
        ]
      : [];
  return (
    <div className={cn("min-w-0 space-y-2", className)}>
      <p className="text-sm font-medium">{label}</p>
      <div className="overflow-hidden rounded-xl border bg-background">
        {!readOnly && (
          <div
            role="group"
            aria-label={`${label} formatting`}
            className="flex flex-wrap gap-1 border-b bg-muted/20 p-2"
          >
            {tools.map((tool) => (
              <Button
                key={tool.label}
                type="button"
                size="icon-sm"
                variant={tool.active ? "secondary" : "ghost"}
                aria-label={tool.label}
                aria-pressed={tool.active}
                onClick={tool.run}
              >
                <tool.icon className="size-4" />
              </Button>
            ))}
            {!compact && (
              <>
                <Button
                  type="button"
                  size="sm"
                  variant={state?.heading ? "secondary" : "ghost"}
                  aria-pressed={state?.heading ?? false}
                  disabled={!editor}
                  onClick={() =>
                    editor?.chain().focus().toggleHeading({ level: 2 }).run()
                  }
                >
                  Heading
                </Button>
                <Button
                  type="button"
                  size="icon-sm"
                  variant="ghost"
                  aria-label="Insert link"
                  aria-expanded={linkOpen}
                  disabled={!editor}
                  onClick={() => {
                    setHref(editor?.getAttributes("link").href ?? "");
                    setError("");
                    setLinkOpen(!linkOpen);
                  }}
                >
                  <Link2 className="size-4" />
                </Button>
                <Button
                  type="button"
                  size="icon-sm"
                  variant="ghost"
                  aria-label="Remove link"
                  disabled={!state?.link}
                  onClick={() =>
                    editor
                      ?.chain()
                      .focus()
                      .extendMarkRange("link")
                      .unsetLink()
                      .run()
                  }
                >
                  <Unlink className="size-4" />
                </Button>
              </>
            )}
            <Button
              type="button"
              size="icon-sm"
              variant="ghost"
              aria-label="Undo edit"
              disabled={!state?.undo}
              onClick={() => editor?.chain().focus().undo().run()}
            >
              <Undo2 className="size-4" />
            </Button>
            <Button
              type="button"
              size="icon-sm"
              variant="ghost"
              aria-label="Redo edit"
              disabled={!state?.redo}
              onClick={() => editor?.chain().focus().redo().run()}
            >
              <Redo2 className="size-4" />
            </Button>
          </div>
        )}
        {linkOpen && !readOnly && (
          <div className="space-y-2 border-b p-3">
            <Label htmlFor={id}>Link address</Label>
            <div className="flex gap-2">
              <Input
                id={id}
                value={href}
                onChange={(event) => setHref(event.target.value)}
                placeholder="https://example.com"
                onKeyDown={(event) => {
                  if (event.key === "Enter") {
                    event.preventDefault();
                    applyLink();
                  }
                }}
              />
              <Button type="button" size="sm" onClick={applyLink}>
                Apply link
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={() => {
                  setLinkOpen(false);
                  editor?.commands.focus();
                }}
              >
                Cancel
              </Button>
            </div>
            {error && (
              <p role="alert" className="text-xs text-destructive">
                {error}
              </p>
            )}
          </div>
        )}
        <EditorContent editor={editor} />
        {!editor && (
          <p className="p-4 text-sm text-muted-foreground" role="status">
            Loading editor…
          </p>
        )}
      </div>
      <p className="text-xs text-muted-foreground">
        {state?.characters ?? 0} characters ·{" "}
        {readOnly
          ? "Read-only document"
          : "Supports keyboard formatting and undo"}
      </p>
    </div>
  );
}