@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/markup.ts

@@ -0,0 +1,382 @@
+/**
+ * Markup drawn over an attached image before it is sent: pen, highlighter, arrows, boxes, ellipses, and text
+ * labels. Shapes live in the image's own pixel space, so the same list draws the on-screen overlay (scaled to
+ * the pane) and the flattened file (at full size). This file is the canvas renderer and flattening; the
+ * DOM-free shape model is `./markup-model.ts`, re-exported here. Everything takes its canvas as an argument, so
+ * it runs under unit tests without a real canvas.
+ */
+import {
+  arrowHead,
+  contrastText,
+  flattenedName,
+  HIGHLIGHT_ALPHA,
+  markupFont,
+  markupMetrics,
+  strokeWidth,
+  textLayout,
+  toRect,
+  type ArrowShape,
+  type Box,
+  type BoxShape,
+  type MarkupMetrics,
+  type MarkupShape,
+  type MeasureText,
+  type StrokeShape,
+  type TextShape,
+} from "./markup-model.js";
+
+export * from "./markup-model.js";
+
+/** Canvas area browsers reliably allocate (Safari's cap is 16 777 216 px); a bigger image is flattened smaller. */
+export const MAX_CANVAS_PIXELS = 16_000_000;
+/** The selection outline's blue, matching the toolbar's accent. */
+const SELECTION_INK = "#0a84ff";
+/** JPEG qualities tried at full size, once the PNG is over the limit. */
+const JPEG_FULL_SIZE = [0.92, 0.85, 0.75] as const;
+/** JPEG qualities retried after a halving; PNG is not worth another try smaller. */
+const JPEG_SMALLER = [0.85, 0.75] as const;
+/** Halvings tried after the full-size attempts run out. */
+const MAX_HALVINGS = 3;
+
+/** The 2D context calls the renderer uses. A real CanvasRenderingContext2D satisfies it; tests pass a recorder. */
+export type MarkupContext = Pick<
+  CanvasRenderingContext2D,
+  | "save"
+  | "restore"
+  | "beginPath"
+  | "closePath"
+  | "moveTo"
+  | "lineTo"
+  | "quadraticCurveTo"
+  | "arcTo"
+  | "ellipse"
+  | "rect"
+  | "stroke"
+  | "fill"
+  | "fillText"
+  | "measureText"
+  | "drawImage"
+  | "scale"
+  | "setLineDash"
+> & {
+  strokeStyle: CanvasRenderingContext2D["strokeStyle"];
+  fillStyle: CanvasRenderingContext2D["fillStyle"];
+  lineWidth: number;
+  lineCap: CanvasLineCap;
+  lineJoin: CanvasLineJoin;
+  globalAlpha: number;
+  globalCompositeOperation: GlobalCompositeOperation;
+  font: string;
+  textBaseline: CanvasTextBaseline;
+  textAlign: CanvasTextAlign;
+};
+
+export type FlattenCanvas = {
+  width: number;
+  height: number;
+  getContext(kind: "2d"): MarkupContext | null;
+  toBlob(callback: (blob: Blob | null) => void, type?: string, quality?: number): void;
+};
+
+export type FlattenInput = {
+  /** The original image, already decoded. */
+  image: CanvasImageSource;
+  /** The image's natural size; shapes are in this space. */
+  width: number;
+  height: number;
+  shapes: MarkupShape[];
+  /** File name of the original; the result keeps its base name with the new extension. */
+  name: string;
+  maxBytes: number;
+  /** Test seam; defaults to a detached `<canvas>`. */
+  createCanvas?: (width: number, height: number) => FlattenCanvas;
+};
+
+/** Measures with `ctx.measureText`, or estimates 0.6 em per character when there is no canvas (jsdom). */
+export function createMeasure(
+  ctx: Pick<MarkupContext, "measureText" | "font"> | null,
+): MeasureText {
+  if (!ctx) return (text, px) => text.length * px * 0.6;
+  return (text, px) => {
+    ctx.font = markupFont(px);
+    return ctx.measureText(text).width;
+  };
+}
+
+/**
+ * Draws shapes in order on a context already scaled to image px. Pen strokes are smoothed through quadratic
+ * midpoints with round caps and joins; a one-point stroke draws a dot. Highlighter strokes draw the same way at
+ * `HIGHLIGHT_ALPHA` with normal ("source-over") compositing, so the overlay on screen matches the file. Arrows
+ * draw a shaft and a filled head sized from the stroke width (head length 4x width, min 10u), with the shaft
+ * stopping at the head's base.
+ * Rectangles have rounded corners (radius 1.5x width, clamped to half the short side). Text draws a filled
+ * rounded label (radius 0.3 em) in the shape colour with `contrastText` lines. Each shape restores the context.
+ */
+export function drawShapes(
+  ctx: MarkupContext,
+  shapes: MarkupShape[],
+  metrics: MarkupMetrics,
+): void {
+  for (const shape of shapes) drawShape(ctx, shape, metrics);
+}
+
+/** A dashed outline around `box` (padded by 4 screen px / `scale`), for the selected shape on screen. */
+export function drawSelection(ctx: MarkupContext, box: Box, scale: number): void {
+  const zoom = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  const pad = 4 / zoom;
+  ctx.save();
+  ctx.strokeStyle = SELECTION_INK;
+  ctx.lineWidth = 1 / zoom;
+  ctx.setLineDash([4 / zoom, 3 / zoom]);
+  ctx.beginPath();
+  ctx.rect(box.x - pad, box.y - pad, box.w + 2 * pad, box.h + 2 * pad);
+  ctx.stroke();
+  ctx.setLineDash([]);
+  ctx.restore();
+}
+
+/**
+ * Draws the image and its shapes into one file. Tries PNG at full size (scaled down to fit
+ * `MAX_CANVAS_PIXELS`); if that is over `maxBytes`, JPEG at quality 0.92, 0.85, 0.75 on a white background;
+ * then halves the size and tries again, up to three times. Rejects with a readable Error when the canvas has no
+ * 2D context, `toBlob` gives null, or nothing fits.
+ */
+export async function flattenMarkup(input: FlattenInput): Promise<{ blob: Blob; name: string }> {
+  const { image, width, height, shapes, name, maxBytes } = input;
+  const createCanvas = input.createCanvas ?? detachedCanvas;
+  const metrics = markupMetrics(width, height);
+  const area = width * height;
+  const fit = area > MAX_CANVAS_PIXELS ? Math.sqrt(MAX_CANVAS_PIXELS / area) : 1;
+
+  for (let step = 0; step <= MAX_HALVINGS; step += 1) {
+    const scale = fit / 2 ** step;
+    const canvasWidth = Math.max(1, Math.floor(width * scale));
+    const canvasHeight = Math.max(1, Math.floor(height * scale));
+    const attempts: FlattenAttempt[] =
+      step === 0
+        ? [
+            { type: "image/png" },
+            ...JPEG_FULL_SIZE.map((quality): FlattenAttempt => ({ type: "image/jpeg", quality })),
+          ]
+        : JPEG_SMALLER.map((quality): FlattenAttempt => ({ type: "image/jpeg", quality }));
+
+    for (const attempt of attempts) {
+      const canvas = createCanvas(canvasWidth, canvasHeight);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Couldn’t draw the marked-up image.");
+      // Shapes are in image px; the canvas may be smaller, so draw everything through one scale.
+      const k = width > 0 ? canvasWidth / width : 1;
+      ctx.scale(k, k);
+      if (attempt.type === "image/jpeg") {
+        // JPEG has no alpha, so a transparent PNG screenshot would turn black without this.
+        ctx.fillStyle = "#ffffff";
+        ctx.beginPath();
+        ctx.rect(0, 0, width, height);
+        ctx.fill();
+      }
+      ctx.drawImage(image, 0, 0, width, height);
+      drawShapes(ctx, shapes, metrics);
+      const blob = await toBlob(canvas, attempt.type, attempt.quality);
+      if (!blob) throw new Error("Couldn’t save the marked-up image.");
+      if (blob.size <= maxBytes) return { blob, name: flattenedName(name, attempt.type) };
+    }
+  }
+  throw new Error("The marked-up image is over the upload limit.");
+}
+
+/** Decodes an image URL. Rejects with a readable Error when it does not load. */
+export function loadImage(url: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    // The source is a same-page blob: URL, so the decode is local and needs no crossOrigin.
+    image.decoding = "async";
+    image.onload = () => {
+      if (typeof image.decode !== "function") {
+        resolve(image);
+        return;
+      }
+      // A decode failure after load still leaves a usable element in every browser we support.
+      const settled = () => resolve(image);
+      image.decode().then(settled, settled);
+    };
+    image.onerror = () => reject(new Error("Couldn’t open this image."));
+    image.src = url;
+  });
+}
+
+// ----------------------------------------------------------------------------
+// Private helpers
+// ----------------------------------------------------------------------------
+
+type FlattenAttempt = { type: "image/png" | "image/jpeg"; quality?: number };
+
+/** One shape, saved and restored so nothing it sets leaks into the next. */
+function drawShape(ctx: MarkupContext, shape: MarkupShape, metrics: MarkupMetrics): void {
+  ctx.save();
+  try {
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = shape.color;
+    ctx.fillStyle = shape.color;
+    ctx.lineWidth = metrics.stroke(shape.size);
+    ctx.globalAlpha = shape.kind === "highlight" ? HIGHLIGHT_ALPHA : 1;
+    ctx.globalCompositeOperation = "source-over";
+    switch (shape.kind) {
+      case "pen":
+      case "highlight":
+        drawStroke(ctx, shape, metrics);
+        break;
+      case "arrow":
+        drawArrow(ctx, shape, metrics);
+        break;
+      case "rect":
+        drawRect(ctx, shape, metrics);
+        break;
+      case "ellipse":
+        drawEllipse(ctx, shape, metrics);
+        break;
+      case "text":
+        drawLabel(ctx, shape, metrics);
+        break;
+      default: {
+        const unknown: never = shape;
+        throw new Error(`Unknown markup shape: ${JSON.stringify(unknown)}`);
+      }
+    }
+  } finally {
+    ctx.restore();
+  }
+}
+
+function drawStroke(ctx: MarkupContext, shape: StrokeShape, metrics: MarkupMetrics): void {
+  const width = strokeWidth(shape, metrics);
+  const points = shape.points;
+  ctx.lineWidth = width;
+  if (points.length === 0) return;
+  if (points.length === 1) {
+    // A single tap is a dot the width of the stroke.
+    const only = points[0]!;
+    const radius = width / 2;
+    ctx.beginPath();
+    ctx.ellipse(only.x, only.y, radius, radius, 0, 0, Math.PI * 2);
+    ctx.fill();
+    return;
+  }
+  ctx.beginPath();
+  const first = points[0]!;
+  ctx.moveTo(first.x, first.y);
+  if (points.length === 2) {
+    const last = points[1]!;
+    ctx.lineTo(last.x, last.y);
+  } else {
+    // Curve through the midpoints, using each point as the control point, then land on the last point.
+    for (let i = 1; i < points.length - 1; i += 1) {
+      const current = points[i]!;
+      const next = points[i + 1]!;
+      ctx.quadraticCurveTo(
+        current.x,
+        current.y,
+        (current.x + next.x) / 2,
+        (current.y + next.y) / 2,
+      );
+    }
+    const last = points[points.length - 1]!;
+    ctx.lineTo(last.x, last.y);
+  }
+  ctx.stroke();
+}
+
+function drawArrow(ctx: MarkupContext, shape: ArrowShape, metrics: MarkupMetrics): void {
+  const width = metrics.stroke(shape.size);
+  const { length, halfWidth } = arrowHead(width, metrics.unit);
+  const dx = shape.to.x - shape.from.x;
+  const dy = shape.to.y - shape.from.y;
+  const distance = Math.hypot(dx, dy);
+  if (distance === 0) return;
+  const ux = dx / distance;
+  const uy = dy / distance;
+  const base = { x: shape.to.x - ux * length, y: shape.to.y - uy * length };
+  ctx.lineWidth = width;
+  if (distance > length) {
+    ctx.beginPath();
+    ctx.moveTo(shape.from.x, shape.from.y);
+    ctx.lineTo(base.x, base.y);
+    ctx.stroke();
+  }
+  const nx = -uy;
+  const ny = ux;
+  ctx.beginPath();
+  ctx.moveTo(shape.to.x, shape.to.y);
+  ctx.lineTo(base.x + nx * halfWidth, base.y + ny * halfWidth);
+  ctx.lineTo(base.x - nx * halfWidth, base.y - ny * halfWidth);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function drawRect(ctx: MarkupContext, shape: BoxShape, metrics: MarkupMetrics): void {
+  const width = metrics.stroke(shape.size);
+  const rect = toRect(shape.box);
+  ctx.lineWidth = width;
+  ctx.beginPath();
+  roundRectPath(ctx, rect, Math.min(1.5 * width, rect.w / 2, rect.h / 2));
+  ctx.stroke();
+}
+
+function drawEllipse(ctx: MarkupContext, shape: BoxShape, metrics: MarkupMetrics): void {
+  const rect = toRect(shape.box);
+  const rx = rect.w / 2;
+  const ry = rect.h / 2;
+  ctx.lineWidth = metrics.stroke(shape.size);
+  ctx.beginPath();
+  ctx.ellipse(rect.x + rx, rect.y + ry, Math.max(rx, 0), Math.max(ry, 0), 0, 0, Math.PI * 2);
+  ctx.stroke();
+}
+
+function drawLabel(ctx: MarkupContext, shape: TextShape, metrics: MarkupMetrics): void {
+  const layout = textLayout(shape, metrics, createMeasure(ctx));
+  const { box, font, pad, lineHeight, lines } = layout;
+  ctx.fillStyle = shape.color;
+  ctx.beginPath();
+  roundRectPath(ctx, box, Math.min(0.3 * font, box.w / 2, box.h / 2));
+  ctx.fill();
+  ctx.font = markupFont(font);
+  ctx.textBaseline = "top";
+  ctx.textAlign = "left";
+  ctx.fillStyle = contrastText(shape.color);
+  for (let i = 0; i < lines.length; i += 1) {
+    const top = box.y + pad + i * lineHeight + (lineHeight - font) / 2;
+    ctx.fillText(lines[i]!, box.x + pad, top);
+  }
+}
+
+/** A closed rounded rectangle; the caller opens the path. */
+function roundRectPath(ctx: MarkupContext, box: Box, radius: number): void {
+  const r = Math.max(0, Math.min(radius, box.w / 2, box.h / 2));
+  const right = box.x + box.w;
+  const bottom = box.y + box.h;
+  ctx.moveTo(box.x + r, box.y);
+  ctx.lineTo(right - r, box.y);
+  ctx.arcTo(right, box.y, right, box.y + r, r);
+  ctx.lineTo(right, bottom - r);
+  ctx.arcTo(right, bottom, right - r, bottom, r);
+  ctx.lineTo(box.x + r, bottom);
+  ctx.arcTo(box.x, bottom, box.x, bottom - r, r);
+  ctx.lineTo(box.x, box.y + r);
+  ctx.arcTo(box.x, box.y, box.x + r, box.y, r);
+  ctx.closePath();
+}
+
+/** The production canvas: a detached element the browser never paints. */
+function detachedCanvas(width: number, height: number): FlattenCanvas {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+}
+
+/** `toBlob` as a promise, so each attempt can be awaited and measured. */
+function toBlob(canvas: FlattenCanvas, type: string, quality?: number): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), type, quality);
+  });
+}

package/src/runtime/members.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { listMembers, type Member } from "./client.js";
+import type { Session } from "./session.js";
+
+/** Who can be @mentioned changes rarely: a fetched list is reused this long, then fetched again when next needed. */
+const MEMBERS_TTL_MS = 10 * 60_000;
+
+type LoadMembers = (
+  session: Session,
+  memberToken: string,
+  environment?: string,
+) => Promise<Member[]>;
+
+/** One request per environment, shared by every caller and kept for MEMBERS_TTL_MS. A failed request isn't kept. */
+export function membersCache(load: LoadMembers, now = Date.now): LoadMembers {
+  const kept = new Map<string, { at: number; list: Promise<Member[]> }>();
+  return (session, memberToken, environment) => {
+    const key = [session.apiUrl, session.project, session.environment, environment ?? ""].join(
+      "\n",
+    );
+    const entry = kept.get(key);
+    if (entry && now() - entry.at < MEMBERS_TTL_MS) return entry.list;
+    const list = load(session, memberToken, environment);
+    kept.set(key, { at: now(), list });
+    list.catch(() => {
+      if (kept.get(key)?.list === list) kept.delete(key);
+    });
+    return list;
+  };
+}
+
+const loadMembers = membersCache(listMembers);
+
+/**
+ * People who can be @mentioned in `environment` (this one when omitted), fetched only while `wanted`, which the
+ * toolbar sets when a composer or reply box can be typed in.
+ */
+export function useMembers(
+  session: Session | null,
+  memberToken: string | null,
+  environment: string | undefined,
+  wanted: boolean,
+) {
+  const [members, setMembers] = useState<{ environment?: string; list: Member[] }>({ list: [] });
+  useEffect(() => {
+    if (!wanted || !session || !memberToken) return;
+    let stop = false;
+    loadMembers(session, memberToken, environment)
+      .then((list) => {
+        if (!stop) setMembers({ environment, list });
+      })
+      .catch(() => undefined);
+    return () => {
+      stop = true;
+    };
+  }, [environment, memberToken, session, wanted]);
+  return members.environment === environment ? members.list : [];
+}

package/src/runtime/mention-parse.ts

@@ -0,0 +1,56 @@
+/** Mention parsing for the composer and message text. DOM-free, so native clients share it. */
+import type { Member, Mentioned } from "./api.js";
+
+/** The `@query` being typed just before `caret`, and where its `@` is, or null. */
+export function mentionQueryAt(text: string, caret: number) {
+  const query = text.slice(0, caret).match(/(^|\s)@([^\s@]{0,30})$/)?.[2];
+  return query === undefined ? null : { query, start: caret - query.length - 1 };
+}
+
+/** Most members the @-suggestion list shows. */
+const MENTION_SUGGESTIONS_MAX = 6;
+
+/** Members whose name contains, or whose email starts with, `query` (any case); never the writer. */
+export function mentionMatches(
+  members: readonly Member[],
+  query: string,
+  selfEmail: string | null | undefined,
+): Member[] {
+  const needle = query.toLowerCase();
+  return members
+    .filter((member) => member.email !== selfEmail)
+    .filter(
+      (member) =>
+        member.name.toLowerCase().includes(needle) ||
+        (member.email ?? "").toLowerCase().startsWith(needle),
+    )
+    .slice(0, MENTION_SUGGESTIONS_MAX);
+}
+
+/** `text` with the `@query` at `start` (up to `caret`) replaced by `@Name `, and the caret after it. */
+export function insertMention(text: string, start: number, caret: number, member: Member) {
+  const inserted = `@${member.name} `;
+  return {
+    text: `${text.slice(0, start)}${inserted}${text.slice(caret)}`,
+    caret: start + inserted.length,
+  };
+}
+
+function escapeRegex(value: string) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/** Members picked while writing whose `@Name` is still in the text. */
+export function mentionsIn(text: string, picked: Map<string, Member>) {
+  return [...picked.values()].filter((member) => text.includes(`@${member.name}`));
+}
+
+/** Splits a message body around its mentions: odd entries are the `@Name` parts. */
+export function mentionParts(body: string, mentions: readonly Mentioned[] | undefined): string[] {
+  if (!mentions?.length) return [body];
+  const pattern = new RegExp(
+    `(@(?:${mentions.map((mention) => escapeRegex(mention.name)).join("|")}))`,
+    "g",
+  );
+  return body.split(pattern);
+}

package/src/runtime/mentions.tsx

@@ -0,0 +1,205 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from "react";
+import { createPortal } from "react-dom";
+import type { Member, Mentioned } from "./client.js";
+import { colorFor, initials } from "./format.js";
+import { insertMention, mentionMatches, mentionParts, mentionQueryAt } from "./mention-parse.js";
+
+export { mentionParts, mentionQueryAt, mentionsIn } from "./mention-parse.js";
+
+type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+  value: string;
+  onValueChange: (next: string) => void;
+  members: Member[];
+  selfEmail?: string;
+  onMention: (member: Member) => void;
+  /** Grow the field to its text. The composer uses this so a long draft stays visible. */
+  grow?: boolean;
+};
+
+export function MessageText({ body, mentions }: { body: string; mentions?: Mentioned[] }) {
+  if (!mentions?.length) return <>{body}</>;
+  const parts: ReactNode[] = mentionParts(body, mentions).map((part, index) =>
+    index % 2 === 1 ? (
+      <span key={index} className="cs-mention">
+        {part}
+      </span>
+    ) : (
+      part
+    ),
+  );
+  return <>{parts}</>;
+}
+
+export function MentionTextarea({
+  value,
+  onValueChange,
+  members,
+  selfEmail,
+  onMention,
+  onKeyDown,
+  grow = false,
+  ...rest
+}: Props) {
+  const [caret, setCaret] = useState(0);
+  const [index, setIndex] = useState(0);
+  const [dismissed, setDismissed] = useState<number | null>(null);
+  const active = mentionQueryAt(value, caret);
+  const query = active?.query ?? null;
+  const matches = useMemo(
+    () => (query === null ? [] : mentionMatches(members, query, selfEmail)),
+    [members, query, selfEmail],
+  );
+  const open =
+    active !== null && active !== undefined && matches.length > 0 && dismissed !== active.start;
+  const selected = matches[Math.min(index, matches.length - 1)];
+  const [measured, setMeasured] = useState<{ left: number; top?: number; bottom?: number } | null>(
+    null,
+  );
+  const box = open ? measured : null;
+  const field = useRef<HTMLTextAreaElement | null>(null);
+  const [root, setRoot] = useState<HTMLElement | null>(null);
+  const ref = useCallback((node: HTMLTextAreaElement | null) => {
+    field.current = node;
+    const parent = node?.closest("#cs-root");
+    setRoot(parent instanceof HTMLElement ? parent : null);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!grow) return;
+    const node = field.current;
+    if (!node || node.value !== value) return;
+    node.style.height = "auto";
+    node.style.height = `${node.scrollHeight}px`;
+  }, [grow, value]);
+
+  useLayoutEffect(() => {
+    if (!open || !root) return;
+    const place = () => {
+      const node = field.current;
+      if (!node || node.value !== value) return;
+      const rect = node.getBoundingClientRect();
+      const rootBox = root.getBoundingClientRect();
+      const below = rootBox.bottom - rect.bottom > 220;
+      const left = Math.min(
+        Math.max(8, rect.left - rootBox.left),
+        Math.max(8, rootBox.width - 272),
+      );
+      const next = below
+        ? { left, top: rect.bottom - rootBox.top + 6 }
+        : { left, bottom: rootBox.bottom - rect.top + 6 };
+      setMeasured((prev) =>
+        prev && prev.left === next.left && prev.top === next.top && prev.bottom === next.bottom
+          ? prev
+          : next,
+      );
+    };
+    place();
+    window.addEventListener("resize", place);
+    window.addEventListener("scroll", place, true);
+    return () => {
+      window.removeEventListener("resize", place);
+      window.removeEventListener("scroll", place, true);
+    };
+  }, [open, root, value]);
+
+  const insert = (member: Member) => {
+    if (!active) return;
+    const { text: next, caret: position } = insertMention(value, active.start, caret, member);
+    onValueChange(next);
+    onMention(member);
+    setIndex(0);
+    requestAnimationFrame(() => {
+      field.current?.focus();
+      field.current?.setSelectionRange(position, position);
+      setCaret(position);
+    });
+  };
+
+  const rootNode = open && box ? root : null;
+
+  return (
+    <>
+      <textarea
+        ref={ref}
+        {...rest}
+        value={value}
+        aria-autocomplete="list"
+        aria-expanded={open}
+        onChange={(event) => {
+          onValueChange(event.target.value);
+          setCaret(event.target.selectionStart ?? event.target.value.length);
+          setIndex(0);
+          setDismissed(null);
+        }}
+        onSelect={(event) => setCaret(event.currentTarget.selectionStart ?? 0)}
+        onKeyDown={(event) => {
+          if (open && selected && !event.metaKey && !event.ctrlKey) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+              event.preventDefault();
+              const step = event.key === "ArrowDown" ? 1 : -1;
+              setIndex((current) => (current + step + matches.length) % matches.length);
+              return;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+              event.preventDefault();
+              insert(selected);
+              return;
+            }
+            if (event.key === "Escape") {
+              event.preventDefault();
+              event.stopPropagation();
+              setDismissed(active.start);
+              return;
+            }
+          }
+          onKeyDown?.(event);
+        }}
+      />
+      {open && box && rootNode
+        ? createPortal(
+            <div className="cs-people cs-hit" role="listbox" data-cs-ui="mention-list" style={box}>
+              {matches.map((member) => (
+                <div
+                  key={member.id}
+                  role="option"
+                  aria-selected={member === selected}
+                  data-cs-ui="mention-option"
+                  className={member === selected ? "cs-person is-on" : "cs-person"}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    insert(member);
+                  }}
+                  onMouseEnter={() => setIndex(matches.indexOf(member))}
+                >
+                  <span
+                    className="cs-avatar"
+                    style={{
+                      width: 18,
+                      height: 18,
+                      fontSize: 7,
+                      background: colorFor(member.name),
+                    }}
+                  >
+                    {initials(member.name)}
+                  </span>
+                  <span className="cs-person-text">
+                    <strong>{member.name}</strong>
+                    <small>{member.email}</small>
+                  </span>
+                </div>
+              ))}
+            </div>,
+            rootNode,
+          )
+        : null}
+    </>
+  );
+}