Redact

"use client";

import { createContext, useContext, useState } from "react";
import type { ComponentProps, KeyboardEvent, ReactNode } from "react";
import "./redact.css";

/** True while redaction is on for this subtree. Outside any scope it is on. */
const RedactContext = createContext(true);

export type RedactScopeProps = ComponentProps<"div"> & {
  /** Turns redaction on or off for every Redact inside. */
  active?: boolean;
};

export function RedactScope({ active = true, className, children, ...rest }: RedactScopeProps) {
  return (
    <div
      {...rest}
      className={["eq-redact-scope", className].filter(Boolean).join(" ")}
      data-redact-scope={active ? "on" : "off"}
    >
      <RedactContext.Provider value={active}>{children}</RedactContext.Provider>
    </div>
  );
}

export type RedactProps = Omit<ComponentProps<"span">, "children" | "ref"> & {
  /** The content to hide. */
  children: ReactNode;
  /** What is hidden, such as "Customer email". Names the reveal button. */
  label: string;
  /** hold reveals only while pressed; toggle flips on each press. */
  reveal?: "hold" | "toggle";
  /** span for inline text, div for a block such as a paragraph. */
  as?: "span" | "div";
};

/** "Customer email" reads as "customer email" mid-sentence; "API key" keeps its capitals. */
function midSentence(label: string) {
  const second = label.charAt(1);
  return second && second === second.toLowerCase() ? label.charAt(0).toLowerCase() + label.slice(1) : label;
}

export function Redact({ children, label, reveal = "hold", as = "span", className, ...rest }: RedactProps) {
  const active = useContext(RedactContext);
  const [revealed, setRevealed] = useState(false);
  // Turning a scope off and on again starts every item hidden, never left open from before.
  const [wasActive, setWasActive] = useState(active);
  if (wasActive !== active) {
    setWasActive(active);
    if (!active) setRevealed(false);
  }
  const Tag = as;
  const classes = ["eq-redact", className].filter(Boolean).join(" ");

  if (!active) {
    return (
      <Tag {...rest} className={classes} data-state="off" data-as={as}>
        <Tag className="eq-redact-content">{children}</Tag>
      </Tag>
    );
  }

  const hold = reveal === "hold";
  const show = () => setRevealed(true);
  const hide = () => setRevealed(false);

  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
    if (!hold || (event.key !== " " && event.key !== "Enter")) return;
    // Held keys reveal; nothing else on the page should hear them meanwhile.
    event.preventDefault();
    event.stopPropagation();
    show();
  }

  function handleKeyUp(event: KeyboardEvent<HTMLButtonElement>) {
    if (!hold || (event.key !== " " && event.key !== "Enter")) return;
    event.preventDefault();
    event.stopPropagation();
    hide();
  }

  return (
    <Tag {...rest} className={classes} data-state={revealed ? "shown" : "hidden"} data-reveal={reveal} data-as={as}>
      <button
        type="button"
        className="eq-redact-button"
        aria-label={`Reveal ${midSentence(label)}`}
        aria-pressed={hold ? undefined : revealed}
        onClick={hold ? undefined : () => setRevealed((r) => !r)}
        onPointerDown={hold ? (event) => event.button === 0 && show() : undefined}
        onPointerUp={hold ? hide : undefined}
        onPointerLeave={hold ? hide : undefined}
        onPointerCancel={hold ? hide : undefined}
        onContextMenu={hold ? (event) => event.preventDefault() : undefined}
        onKeyDown={handleKeyDown}
        onKeyUp={handleKeyUp}
        onBlur={hold ? hide : undefined}
      />
      <Tag className="eq-redact-content" aria-hidden={!revealed || undefined} inert={!revealed || undefined}>
        {children}
      </Tag>
    </Tag>
  );
}