"use client";

import * as React from "react";

import { Bold, Italic, Link, Unlink } from "lucide-react";

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

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

export const RichTextInput = React.forwardRef<
  HTMLDivElement,
  RichTextInputProps
>(({ className, value, onChange, placeholder = "Start typing..." }, ref) => {
  const [isBold, setIsBold] = React.useState(false);
  const [isItalic, setIsItalic] = React.useState(false);
  const [isLink, setIsLink] = React.useState(false);
  const editorRef = React.useRef<HTMLDivElement>(null);
  const containerRef = React.useRef<HTMLDivElement>(null);

  const updateFormattingState = React.useCallback(() => {
    setIsBold(document.queryCommandState("bold"));
    setIsItalic(document.queryCommandState("italic"));

    const selection = window.getSelection();
    if (selection && selection.rangeCount > 0) {
      let node: Node | null = selection.anchorNode;
      let foundLink = false;
      while (node && node !== editorRef.current) {
        if (node.nodeName === "A") {
          foundLink = true;
          break;
        }
        node = node.parentNode;
      }
      setIsLink(foundLink);
    } else {
      setIsLink(false);
    }
  }, []);

  React.useEffect(() => {
    const handleSelectionChange = () => {
      if (
        editorRef.current &&
        editorRef.current.contains(document.activeElement)
      ) {
        updateFormattingState();
      }
    };

    document.addEventListener("selectionchange", handleSelectionChange);
    return () => {
      document.removeEventListener("selectionchange", handleSelectionChange);
    };
  }, [updateFormattingState]);

  const execCommand = (command: string, value?: string) => {
    document.execCommand(command, false, value);
    editorRef.current?.focus();
    updateFormattingState();
    handleInput();
  };

  const handleBold = () => {
    execCommand("bold");
  };

  const handleItalic = () => {
    execCommand("italic");
  };

  const handleLink = () => {
    if (isLink) {
      execCommand("unlink");
    } else {
      const url = window.prompt("Enter URL:");
      if (url) {
        execCommand("createLink", url);
      }
    }
  };

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

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

  const showPlaceholder =
    !value || value === "" || value === "<br>" || value === "<div><br></div>";

  return (
    <div
      ref={(node) => {
        containerRef.current = node;
        if (typeof ref === "function") {
          ref(node);
        } else if (ref) {
          ref.current = node;
        }
      }}
      className={cn("w-full max-w-lg", className)}
    >
      <div className="flex items-center gap-1 rounded-t-lg border border-b-0 border-border bg-muted px-2 py-1.5">
        <button
          type="button"
          onClick={handleBold}
          className={cn(
            "rounded-md p-1.5 text-muted-foreground transition hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            isBold && "bg-background text-primary"
          )}
          aria-label="Bold"
          aria-pressed={isBold}
        >
          <Bold className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={handleItalic}
          className={cn(
            "rounded-md p-1.5 text-muted-foreground transition hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            isItalic && "bg-background text-primary"
          )}
          aria-label="Italic"
          aria-pressed={isItalic}
        >
          <Italic className="h-4 w-4" />
        </button>
        <div className="mx-1 h-4 w-px bg-border" />
        <button
          type="button"
          onClick={handleLink}
          className={cn(
            "rounded-md p-1.5 text-muted-foreground transition hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            isLink && "bg-background text-primary"
          )}
          aria-label={isLink ? "Remove link" : "Add link"}
          aria-pressed={isLink}
        >
          {isLink ? (
            <Unlink className="h-4 w-4" />
          ) : (
            <Link className="h-4 w-4" />
          )}
        </button>
      </div>
      <div className="relative">
        <div
          ref={editorRef}
          contentEditable
          onInput={handleInput}
          onBlur={handleInput}
          onKeyUp={updateFormattingState}
          onMouseUp={updateFormattingState}
          className={cn(
            "min-h-[120px] w-full rounded-b-lg border border-border bg-background px-4 py-3 text-sm text-foreground",
            "focus:outline-none focus:ring-2 focus:ring-ring",
            "[&_a]:text-primary [&_a]:underline"
          )}
          role="textbox"
          aria-multiline="true"
          aria-placeholder={placeholder}
        />
        {showPlaceholder && (
          <div className="pointer-events-none absolute left-4 top-3 text-sm text-muted-foreground">
            {placeholder}
          </div>
        )}
      </div>
    </div>
  );
});

RichTextInput.displayName = "RichTextInput";
Rich Text Input

Dependencies

Files

Installation
