char-slop/berry

git clone https://git.t4t.associates/char-slop/berry

Charlotte Somdirectly copy selection to clipboard to work around firefox bug871f1592026-10-09

import type { Channel, ChannelMessage, View, ViewContext } from "@berry/api/web.ts";
import type { Ghostty, Terminal } from "./ghostty.ts";
import { Grid } from "./grid.ts";
import { COLORS } from "./palette.ts";
import { type ClientMessage, OUTPUT, type ServerMessage, SNAPSHOT } from "./protocol.ts";

const FALLBACK = { width: 8, height: 18 };

const css = ([r, g, b]: readonly number[]) => `rgb(${r} ${g} ${b})`;

const zoomKey = (key: KeyboardEvent) =>
  (key.ctrlKey || key.metaKey) &&
  ["Equal", "Minus", "Digit0", "NumpadAdd", "NumpadSubtract", "Numpad0"].includes(key.code);

/** A conversation's shell, drawn from the terminal state the server sends and the output that follows it. */
export function terminalView(load: () => Promise<Ghostty>): View {
  const rows = <div class="terminal-rows" /> as HTMLElement;
  const canvas = <canvas class="terminal-grid" aria-hidden="true" /> as HTMLCanvasElement;
  const grid = new Grid(rows, canvas);
  const browser = document.defaultView!;
  const probe = <span class="terminal-probe" aria-hidden="true">{"M".repeat(32)}
  </span> as HTMLElement;
  const input = (
    <textarea
      class="terminal-input"
      aria-label="terminal input"
      autocapitalize="off"
      autocomplete="off"
      spellcheck={false}
    />
  ) as HTMLTextAreaElement;
  const screen = (
    <div class="terminal-screen" tabIndex={-1} role="region" aria-label="terminal">
      {canvas}
      {rows}
      {probe}
      {input}
    </div>
  ) as HTMLElement;
  const status = <p class="terminal-status-text" /> as HTMLElement;
  const restart = (
    <button type="button" hidden _onclick={() => send({ t: "start", ...size })}>
      start a new shell
    </button>
  ) as HTMLButtonElement;
  const bar = <div class="terminal-status" hidden>{status}{restart}</div> as HTMLElement;
  const element = <div class="terminal-view">{screen}{bar}</div> as HTMLElement;
  // the defaults the shell is told, so what it draws in them and what it draws explicitly agree
  element.style.backgroundColor = css(COLORS.background);
  screen.style.color = css(COLORS.foreground);

  let context: ViewContext | null = null;
  let ghostty: Ghostty | null = null;
  let terminal: Terminal | null = null;
  let channel: Channel | null = null;
  let disposed = false;
  // only opening the view starts a shell by itself; after an exit, or a restart of the server, starting is asked for
  let autostart = true;
  let retry = 0;
  let frame = 0;
  let cell = FALLBACK;
  let size = { cols: 80, rows: 24 };

  const send = (message: ClientMessage | Uint8Array) => channel?.send(message);

  function tell(text: string | null, offerStart = false) {
    bar.hidden = text === null;
    status.textContent = text ?? "";
    restart.hidden = !offerStart;
  }

  function draw() {
    frame = 0;
    // a freed terminal's memory may hold anything by now
    if (!terminal || disposed) return;
    grid.update(terminal.frame());
  }
  const redraw = () => void (disposed || (frame ||= requestAnimationFrame(draw)));

  function measure() {
    const box = probe.getBoundingClientRect();
    cell = box.width > 0 ? { width: box.width / 32, height: box.height } : FALLBACK;
  }

  /** Fit the session to this view, which is the size it was opened, or last resized, at. */
  function fit() {
    if (disposed) return;
    measure();
    const box = screen.getBoundingClientRect();
    grid.fit({
      width: box.width || size.cols * cell.width,
      height: box.height || size.rows * cell.height,
      ratio: browser.devicePixelRatio || 1,
      cell,
    });
    const next = box.width > 0
      ? {
        cols: Math.max(2, Math.floor(box.width / cell.width)),
        rows: Math.max(1, Math.floor(box.height / cell.height)),
      }
      : size;
    if (next.cols === size.cols && next.rows === size.rows) return;
    size = next;
    terminal?.resize(size.cols, size.rows);
    send({ t: "resize", ...size });
    redraw();
  }
  const resizing = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(fit);
  resizing?.observe(screen);
  // the probe changes size once the font loads, which changes how many cells fit
  resizing?.observe(probe);
  let resolution: MediaQueryList | undefined;
  let ratioFrame = 0;
  function watchRatio() {
    resolution?.removeEventListener("change", ratioChanged);
    resolution = browser.matchMedia(`(resolution: ${browser.devicePixelRatio || 1}dppx)`);
    resolution.addEventListener("change", ratioChanged);
  }
  function ratioChanged() {
    ratioFrame ||= requestAnimationFrame(() => {
      ratioFrame = 0;
      if (disposed) return;
      watchRatio();
      fit();
    });
  }
  watchRatio();
  browser.addEventListener("resize", fit);
  document.fonts?.ready.then(fit);
  element.addEventListener("focusin", () => grid.focus(true));
  element.addEventListener("focusout", (event) => {
    grid.focus(element.contains((event as FocusEvent).relatedTarget as Node | null));
  });

  function hear(message: ChannelMessage) {
    retry = 0;
    if (message instanceof Uint8Array) {
      if (message[0] === SNAPSHOT) {
        terminal?.free();
        terminal = ghostty!.restore(message.subarray(1));
        tell(null);
        element.classList.remove("exited");
        // the session takes this view's size, unless it already has it
        terminal.resize(size.cols, size.rows);
        send({ t: "resize", ...size });
      } else if (message[0] === OUTPUT) terminal?.write(message.subarray(1));
      redraw();
      return;
    }
    const said = message as ServerMessage;
    if (said.t === "none") {
      if (autostart) send({ t: "start", ...size });
      else tell("no shell is running here", true);
    } else if (said.t === "exit") {
      element.classList.add("exited");
      tell(`the shell exited${said.code === null ? "" : ` with ${said.code}`}`, true);
    } else if (said.t === "size") {
      terminal?.resize(said.cols, said.rows);
      redraw();
    } else if (said.t === "error") tell(said.message, true);
    autostart = false;
  }

  async function connect() {
    if (disposed || !context) return;
    try {
      ghostty ??= await load();
      const opened = channel = context.connect("session");
      for await (const message of opened.messages) {
        if (disposed || channel !== opened) return;
        hear(message);
      }
      if (disposed || channel !== opened) return;
      tell("disconnected: reconnecting…");
    } catch (error) {
      if (disposed) return;
      tell(`${error instanceof Error ? error.message : String(error)}: reconnecting…`);
    }
    autostart = false;
    setTimeout(connect, Math.min(10_000, 500 * 2 ** retry++));
  }

  const selected = () => {
    const selection = getSelection();
    return selection !== null && !selection.isCollapsed && screen.contains(selection.anchorNode);
  };
  // firefox inserts line breaks between positioned glyphs in a native copy.
  screen.addEventListener("copy", (event) => {
    const selection = getSelection();
    const clipboard = (event as ClipboardEvent).clipboardData;
    if (
      !selection || selection.isCollapsed || !screen.contains(selection.anchorNode) || !clipboard
    ) return;
    clipboard.setData("text/plain", selection.toString());
    event.preventDefault();
  });

  element.addEventListener("keydown", (event) => {
    const key = event as KeyboardEvent;
    if (!terminal || key.isComposing || key.key === "Process" || key.key === "Dead") return;
    const command = key.ctrlKey || key.metaKey;
    if (zoomKey(key)) return;
    // the browser copies and pastes these; everything else is the shell's
    if (command && key.code === "KeyC" && selected()) return;
    if ((command && key.code === "KeyV") || (key.shiftKey && key.code === "Insert")) return;
    const bytes = terminal.key(key);
    if (bytes === null) return;
    key.preventDefault();
    send(bytes);
    terminal.scroll("bottom");
    redraw();
    if (document.activeElement !== input) input.focus({ preventScroll: true });
  });
  element.addEventListener("keyup", (event) => {
    if (zoomKey(event as KeyboardEvent)) return;
    const bytes = terminal?.key(event as KeyboardEvent, "release");
    if (bytes) send(bytes);
  });
  // what reaches the textarea without a key press of its own: an input method's composition, or a mobile keyboard
  input.addEventListener("input", (event) => {
    if (!input.value || (event as InputEvent).isComposing) return;
    send(new TextEncoder().encode(input.value));
    input.value = "";
  });
  input.addEventListener("compositionend", () => {
    if (input.value) send(new TextEncoder().encode(input.value));
    input.value = "";
  });
  element.addEventListener("paste", (event) => {
    const text = (event as ClipboardEvent).clipboardData?.getData("text/plain");
    if (!terminal || !text) return;
    event.preventDefault();
    send(terminal.paste(text));
  });
  let scrolled = 0;
  screen.addEventListener("wheel", (event) => {
    if ((event as WheelEvent).ctrlKey) return;
    if (!terminal) return;
    event.preventDefault();
    scrolled += (event as WheelEvent).deltaY / cell.height;
    const rows = Math.trunc(scrolled);
    if (rows === 0) return;
    scrolled -= rows;
    terminal.scroll(rows);
    redraw();
  }, { passive: false });
  screen.addEventListener("mouseup", () => {
    if (!selected()) input.focus({ preventScroll: true });
  });

  return {
    element,
    update(next) {
      const first = context === null;
      context = next;
      if (!first) return;
      queueMicrotask(() => {
        fit();
        input.focus({ preventScroll: true });
      });
      void connect();
    },
    dispose() {
      disposed = true;
      resizing?.disconnect();
      browser.removeEventListener("resize", fit);
      resolution?.removeEventListener("change", ratioChanged);
      cancelAnimationFrame(frame);
      cancelAnimationFrame(ratioFrame);
      channel?.close();
      terminal?.free();
      terminal = null;
    },
  };
}