Ghost text

GhostText.tsxA textarea over a mirror, so the suggestion starts at the caret. Asks for a suggestion on a pause, Tab takes a word, Escape dismisses and stays dismissed, a live region announces it once.Copy

import { useEffect, useRef, useState, type KeyboardEvent } from "react";
import { cn } from "@/lib/utils";

/**
 * A completion after the caret, in the place the viewer's next words would go.
 *
 * The textarea is real and sits on top; underneath it a mirror repeats the
 * committed text invisibly so the suggestion starts exactly where the caret
 * is. The suggestion is muted and italic, because the muted grey alone has
 * a narrow window between unreadable and indistinguishable, and the slant
 * carries the provisional state when the grey is at either edge of it.
 */
type Props = {
  value: string;
  onChange: (value: string) => void;
  /** Asked once the typing has paused, never per keystroke. Return null for
   *  no suggestion. */
  suggest: (value: string) => string | null | Promise<string | null>;
  /** How long a pause is. Shorter gets more suggestions and worse ones. */
  pauseMs?: number;
  /** A suggestion to show before the first pause. Mostly for a server render. */
  initialSuggestion?: string | null;
  placeholder?: string;
  className?: string;
};

/** The first word of the suggestion and the space after it. */
const firstWord = (s: string) => s.match(/^\s*\S+\s?/)?.[0] ?? s;

export function GhostText({ value, onChange, suggest, pauseMs = 400, initialSuggestion = null, placeholder, className }: Props) {
  const [suggestion, setSuggestion] = useState<string | null>(initialSuggestion);
  // The value a dismissed suggestion belonged to. The next pause on the same
  // text stays quiet rather than offering back the thing that was just refused.
  const dismissedFor = useRef<string | null>(null);

  useEffect(() => {
    if (dismissedFor.current === value) return;
    const t = setTimeout(async () => setSuggestion(await suggest(value)), pauseMs);
    return () => clearTimeout(t);
  }, [value, pauseMs, suggest]);

  const accept = (text: string) => {
    onChange(value + text);
    const rest = suggestion!.slice(text.length);
    setSuggestion(rest.length ? rest : null);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (!suggestion) return;
    if (e.key === "Tab") { e.preventDefault(); accept(firstWord(suggestion)); }
    else if (e.key === "ArrowRight" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); accept(suggestion); }
    else if (e.key === "Escape") { e.preventDefault(); dismissedFor.current = value; setSuggestion(null); }
    // Any other key: the suggestion stays until the pause timer replaces it,
    // so it is not dismissed by the keystroke that was already in flight.
  };

  const editor = "whitespace-pre-wrap break-words px-3 py-2 text-sm leading-relaxed";

  return (
    <div className={cn("relative rounded-md border border-input bg-card", className)}>
      <div aria-hidden="true" className={cn(editor, "pointer-events-none min-h-[60px]")}>
        <span className="invisible">{value}</span>
        {suggestion && <span className="italic text-muted-foreground">{suggestion}</span>}
      </div>
      <textarea
        value={value}
        onChange={(e) => { dismissedFor.current = null; onChange(e.target.value); }}
        onKeyDown={onKeyDown}
        placeholder={placeholder}
        spellCheck={false}
        className={cn(editor, "absolute inset-0 h-full w-full resize-none overflow-hidden bg-transparent text-card-foreground caret-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring")}
      />
      {/* Sighted readers see the grey; a screen reader hears it once, on arrival. */}
      <div className="sr-only" aria-live="polite">{suggestion ? `Suggestion: ${suggestion}` : ""}</div>
      {suggestion && (
        <p className="border-t px-3 py-1.5 text-[11px] text-muted-foreground">
          tab takes one word <span className="mx-1.5">·</span> ⌘→ takes all of it <span className="mx-1.5">·</span> esc dismisses
        </p>
      )}
    </div>
  );
}

demo.tsxHow it is called: the pricing page draft, with completions looked up from how the sentence ends.Copy

import { useState } from "react";
import { GhostText } from "./GhostText";

/**
 * The pricing page draft. The completions are a lookup on how the sentence
 * ends, which is enough to show the mechanics: a pause brings one, Tab takes
 * a word of it, and typing something else lets the next pause replace it.
 */
const COMPLETIONS: [ending: RegExp, text: string][] = [
  [/the price is for the workspace, $/, "not for the people in it."],
  [/the price is for the $/, "workspace, not for the people in it."],
  [/the price is $/, "for the workspace, not for the people in it."],
  [/unlimited seats\.? ?$/, " The price is for the workspace, not for the people in it."],
  [/\bper (seat|person)\b[^.]*$/, ", which is the case with every plan we sell."],
];

const suggest = (value: string) =>
  COMPLETIONS.find(([ending]) => ending.test(value))?.[1] ?? null;

export default function Demo() {
  const [draft, setDraft] = useState("Every plan includes unlimited seats, so the price is ");

  return (
    <GhostText
      value={draft}
      onChange={setDraft}
      suggest={suggest}
      initialSuggestion={suggest(draft)}
      placeholder="Pricing page"
    />
  );
}