"use client";

import * as React from "react";

import { Bold, Italic, List, Underline } from "lucide-react";

import { cn } from "@/lib/utils";

export interface RichTextEditorProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: string;
  onChange?: (value: string) => void;
  placeholder?: string;
}

export const RichTextEditor = React.forwardRef<
  HTMLDivElement,
  RichTextEditorProps
>(({ className, value, onChange, placeholder = "Write something", ...props }, ref) => {
  const [internalValue, setInternalValue] = React.useState("");
  const editorRef = React.useRef<HTMLDivElement>(null);

  const content = value ?? internalValue;

  const updateContent = (nextValue: string) => {
    if (!value) {
      setInternalValue(nextValue);
    }
    onChange?.(nextValue);
  };

  const execCommand = (command: string) => {
    document.execCommand(command, false);
    if (editorRef.current) {
      updateContent(editorRef.current.innerHTML);
    }
  };

  const handleInput = () => {
    if (editorRef.current) {
      updateContent(editorRef.current.innerHTML);
    }
  };

  React.useEffect(() => {
    if (editorRef.current && editorRef.current.innerHTML !== content) {
      editorRef.current.innerHTML = content;
    }
  }, [content]);

  return (
    <div
      ref={ref}
      className={cn("w-full max-w-2xl space-y-3", className)}
      {...props}
    >
      <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card px-2 py-2">
        <button
          type="button"
          className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:text-foreground"
          onClick={() => execCommand("bold")}
        >
          <Bold className="h-4 w-4" />
        </button>
        <button
          type="button"
          className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:text-foreground"
          onClick={() => execCommand("italic")}
        >
          <Italic className="h-4 w-4" />
        </button>
        <button
          type="button"
          className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:text-foreground"
          onClick={() => execCommand("underline")}
        >
          <Underline className="h-4 w-4" />
        </button>
        <button
          type="button"
          className="rounded-md border border-border bg-background p-2 text-muted-foreground transition hover:text-foreground"
          onClick={() => execCommand("insertUnorderedList")}
        >
          <List className="h-4 w-4" />
        </button>
      </div>

      <div
        ref={editorRef}
        role="textbox"
        aria-multiline
        contentEditable
        suppressContentEditableWarning
        onInput={handleInput}
        data-placeholder={placeholder}
        className={cn(
          "min-h-[180px] rounded-lg border border-input bg-background px-4 py-3 text-sm text-foreground",
          "focus:outline-none focus:ring-2 focus:ring-primary/20",
          "before:text-muted-foreground empty:before:content-[attr(data-placeholder)]"
        )}
      />
      <p className="text-xs text-muted-foreground">
        Formatting toolbar supports bold, italic, underline, and bullet list.
      </p>
    </div>
  );
});

RichTextEditor.displayName = "RichTextEditor";
Rich Text Editor

Dependencies

Files

Installation
