@hyperframes/studio 0.7.106 → 0.7.107

package/src/components/editor/InlineTextToolbar.test.tsx

@@ -0,0 +1,296 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { InlineTextToolbar, swatchBackground } from "./InlineTextToolbar";
+import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+/** An element standing in for one in the preview, and a fake frame around it. */
+function scene(html: string) {
+  document.body.innerHTML = `<h1 contenteditable="true">${html}</h1>`;
+  const element = document.body.firstElementChild as HTMLElement;
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  // The composition is drawn scaled, so the toolbar has to map out of it.
+  iframe.getBoundingClientRect = () => ({ left: 100, top: 50, width: 400 }) as DOMRect;
+  Object.defineProperty(iframe, "contentWindow", { value: window });
+  const session: InlineTextEditSession = {
+    element,
+    original: html,
+    outline: "",
+    outlineOffset: "",
+  };
+  return { element, iframe, session };
+}
+
+function render(session: InlineTextEditSession | null, iframe: HTMLIFrameElement | null) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => root.render(<InlineTextToolbar session={session} iframe={iframe} />));
+  return { host, root, rerender: () => act(() => root.render(<div />)) };
+}
+
+function selectAll(element: HTMLElement) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const selection = document.getSelection()!;
+  act(() => {
+    selection.removeAllRanges();
+    selection.addRange(range);
+    document.dispatchEvent(new Event("selectionchange"));
+  });
+}
+
+function toolbarIn(host: HTMLElement): HTMLElement | null {
+  return host.querySelector<HTMLElement>('[data-inline-text-toolbar="true"]');
+}
+
+function renderSelected(html = "hello world") {
+  const { element, session, iframe } = scene(html);
+  const { host } = render(session, iframe);
+  selectAll(element);
+  return { element, host };
+}
+
+describe("InlineTextToolbar", () => {
+  it("stays out of the way until characters are actually selected", () => {
+    const { session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+
+    expect(toolbarIn(host)).toBeNull();
+  });
+
+  it("appears once a run of characters is selected", () => {
+    const { element, session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    expect(toolbarIn(host)?.getAttribute("role")).toBe("toolbar");
+    expect(toolbarIn(host)?.getAttribute("aria-label")).toBe("Text formatting");
+  });
+
+  it("goes away when the selection collapses again", () => {
+    const { element, session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+    selectAll(element);
+
+    const selection = document.getSelection()!;
+    act(() => {
+      selection.collapseToEnd();
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+
+    expect(toolbarIn(host)).toBeNull();
+  });
+
+  it("shows nothing at all when no text is being edited", () => {
+    const { iframe } = scene("hello");
+    const { host } = render(null, iframe);
+
+    expect(toolbarIn(host)).toBeNull();
+  });
+
+  it("keeps the press, so clicking a control does not collapse the selection", () => {
+    const { element, session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+    selectAll(element);
+
+    const press = new MouseEvent("mousedown", { bubbles: true, cancelable: true });
+    act(() => void toolbarIn(host)!.dispatchEvent(press));
+
+    expect(press.defaultPrevented).toBe(true);
+  });
+
+  // It renders inside the canvas overlay, so a press it lets through is read as
+  // a click on the composition: the element deselects and the edit commits out
+  // from under the button that was just pressed.
+  it("keeps its presses away from the canvas underneath", () => {
+    const { element, session, iframe } = scene("hello world");
+    const seen: string[] = [];
+    // A stand-in for the canvas overlay: the toolbar renders inside it, and
+    // these are the handlers that would deselect the element.
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <div
+          onPointerDown={() => seen.push("pointerdown")}
+          onMouseDown={() => seen.push("mousedown")}
+          onClick={() => seen.push("click")}
+        >
+          <InlineTextToolbar session={session} iframe={iframe} />
+        </div>,
+      ),
+    );
+    selectAll(element);
+
+    const toolbar = toolbarIn(host)!;
+    act(() => {
+      for (const type of ["pointerdown", "mousedown", "click"]) {
+        toolbar.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true }));
+      }
+    });
+
+    expect(seen).toEqual([]);
+  });
+
+  // A colour input has a user-agent minimum width, so an invisible one pinned
+  // only by `inset-0` spills across its neighbours: hovering bold opened the
+  // colour picker.
+  it("keeps the invisible colour input inside its own swatch", () => {
+    const { element, session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+    selectAll(element);
+
+    const input = host.querySelector<HTMLInputElement>('input[type="color"]')!;
+    expect(input.className).toContain("w-full");
+    expect(input.className).toContain("h-full");
+    expect(input.className).toContain("min-w-0");
+  });
+
+  it("styles the selected characters when a control is used", () => {
+    const { element, host } = renderSelected();
+
+    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+
+    expect(element.innerHTML).toBe('<span style="font-weight: 700">hello world</span>');
+  });
+
+  it("ignores a click when the selection disappeared before React hid the toolbar", () => {
+    const { element, host } = renderSelected();
+    const bold = host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!;
+
+    expect(() => {
+      act(() => {
+        document.getSelection()!.removeAllRanges();
+        bold.click();
+      });
+    }).not.toThrow();
+    expect(element.innerHTML).toBe("hello world");
+  });
+
+  it("reads back the styling it applied, so the control shows the truth", () => {
+    const { element, session, iframe } = scene('<span style="font-style: italic">words</span>');
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    expect(host.querySelector('[aria-label="Italic"]')?.getAttribute("aria-pressed")).toBe("true");
+    expect(host.querySelector('[aria-label="Bold"]')?.getAttribute("aria-pressed")).toBe("false");
+  });
+
+  it("turns a style back off when the control is used again", () => {
+    const { element, session, iframe } = scene('<span style="font-weight: 700">words</span>');
+    const { host } = render(session, iframe);
+    selectAll(element);
+
+    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+
+    expect(element.innerHTML).toBe("words");
+  });
+
+  it("places itself over the selection, mapped out of the scaled composition", () => {
+    const { element, session, iframe } = scene("hello world");
+    const { host } = render(session, iframe);
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.getBoundingClientRect = () =>
+      ({ left: 20, top: 40, width: 100, height: 10 }) as unknown as DOMRect;
+    const selection = document.getSelection()!;
+    act(() => {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+
+    const toolbar = toolbarIn(host)!;
+    // Frame at 100,50; scale 400/innerWidth; centre of the range, above it.
+    const scale = 400 / window.innerWidth;
+    expect(toolbar.style.left).toBe(`${100 + (20 + 50) * scale}px`);
+    expect(toolbar.style.top).toBe(`${50 + 40 * scale - 10}px`);
+  });
+  it("moves below a selection that leaves no room above the viewport", () => {
+    const { element, session, iframe } = scene("hello world");
+    iframe.getBoundingClientRect = () => ({ left: 0, top: 0, width: 400 }) as DOMRect;
+    const { host } = render(session, iframe);
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    range.getBoundingClientRect = () =>
+      ({ left: 20, top: 0, width: 100, height: 10 }) as unknown as DOMRect;
+    const selection = document.getSelection()!;
+    act(() => {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      document.dispatchEvent(new Event("selectionchange"));
+    });
+
+    const toolbar = toolbarIn(host)!;
+    const scale = 400 / window.innerWidth;
+    expect(toolbar.style.top).toBe(`${10 * scale + 10}px`);
+    expect(toolbar.style.transform).toBe("translate(-50%, 0)");
+  });
+
+  it("shows the selection's colours in the swatch when they differ", () => {
+    const { element, session, iframe } = scene(
+      '<span style="color: red">Hello</span><span style="color: lime">world</span>',
+    );
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
+    expect(swatch.style.backgroundImage).toBe("linear-gradient(135deg, red 0.00%, lime 100.00%)");
+    // Without this the gradient repeats under the border, painting the end
+    // colour along the leading edge and the start colour along the trailing one.
+    expect(swatch.style.backgroundOrigin).toBe("border-box");
+  });
+
+  it("shows a plain swatch when the whole selection is one colour", () => {
+    const { element, session, iframe } = scene('<span style="color: red">Hello world</span>');
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    const swatch = toolbarIn(host)!.querySelector<HTMLElement>("span[aria-hidden]")!;
+    expect(swatch.style.backgroundColor).toBe("red");
+  });
+
+  it("opens the colour input on a shorthand hex selection", () => {
+    const { element, session, iframe } = scene('<span style="color: #f00">Hello world</span>');
+    const { host } = render(session, iframe);
+
+    selectAll(element);
+
+    expect(host.querySelector<HTMLInputElement>('input[type="color"]')?.value).toBe("#ff0000");
+  });
+});
+
+describe("swatchBackground", () => {
+  it("sweeps through each distinct colour, evenly spaced", () => {
+    expect(swatchBackground(["red", "lime"], undefined)).toBe(
+      "linear-gradient(135deg, red 0.00%, lime 100.00%)",
+    );
+    expect(swatchBackground(["red", "lime", "cyan"], undefined)).toBe(
+      "linear-gradient(135deg, red 0.00%, lime 50.00%, cyan 100.00%)",
+    );
+  });
+
+  it("stays a plain swatch when the selection is one colour", () => {
+    expect(swatchBackground(["red"], "red")).toBe("red");
+  });
+
+  it("falls back to the agreed colour when the characters carry none", () => {
+    expect(swatchBackground([], "rgb(1, 2, 3)")).toBe("rgb(1, 2, 3)");
+    expect(swatchBackground([], undefined)).toBe("#ffffff");
+  });
+});

package/src/components/editor/InlineTextToolbar.tsx

@@ -0,0 +1,281 @@
+import { useCallback, useEffect, useState } from "react";
+import { applyInlineStyle } from "./inlineTextStyleRange";
+import { readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRead";
+import { parseCssColor, toHexColor } from "./colorValue";
+import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
+
+/**
+ * The controls for styling the characters selected inside an open text edit.
+ *
+ * It lives in Studio's document rather than the composition's, positioned over
+ * the selection: putting it in the preview would mean injecting Studio's chrome
+ * into the user's composition, where it would be captured by a render and
+ * inherit the composition's own styling.
+ *
+ * `position: fixed` and viewport coordinates, so it does not have to know which
+ * of the canvas' several nested coordinate systems it was mounted into.
+ */
+
+const READ_PROPERTIES = ["color", "font-weight", "font-style", "text-decoration-line"];
+
+/** Enough above the text to clear it, without leaving the element behind. */
+const GAP_PX = 10;
+/** h-6 controls + p-1 + the border. Used only to keep an above-toolbar onscreen. */
+const TOOLBAR_HEIGHT_PX = 34;
+const DEFAULT_COLOR = "#ffffff";
+
+interface ToolbarPlacement {
+  left: number;
+  top: number;
+  placeBelow: boolean;
+  styles: Record<string, string>;
+  colours: string[];
+  pickerColour: string;
+}
+
+export function InlineTextToolbar({
+  session,
+  iframe,
+}: {
+  session: InlineTextEditSession | null;
+  iframe: HTMLIFrameElement | null;
+}) {
+  const [placement, setPlacement] = useState<ToolbarPlacement | null>(null);
+
+  const refresh = useCallback(() => {
+    setPlacement(session && iframe ? placeOverSelection(session.element, iframe) : null);
+  }, [session, iframe]);
+
+  // The selection lives in the preview's document, so the event does too.
+  useEffect(() => {
+    const doc = session?.element.ownerDocument;
+    if (!doc) {
+      setPlacement(null);
+      return;
+    }
+    doc.addEventListener("selectionchange", refresh);
+    return () => doc.removeEventListener("selectionchange", refresh);
+  }, [session, refresh]);
+
+  const apply = useCallback(
+    (delta: Record<string, string | null>) => {
+      const doc = session?.element.ownerDocument;
+      const selection = doc?.defaultView?.getSelection();
+      if (!selection || selection.rangeCount === 0) return;
+      const range = selection.getRangeAt(0);
+      applyInlineStyle(range, delta);
+      refresh();
+    },
+    [session, refresh],
+  );
+
+  if (!placement) return null;
+  const styles = placement.styles;
+
+  return (
+    <div
+      data-inline-text-toolbar="true"
+      role="toolbar"
+      aria-label="Text formatting"
+      className="pointer-events-auto fixed z-[200] flex items-center gap-1 rounded-lg border border-white/10 bg-[#15171c] p-1 shadow-[0_8px_24px_rgba(0,0,0,0.55)]"
+      style={{
+        left: placement.left,
+        top: placement.top,
+        transform: `translate(-50%, ${placement.placeBelow ? "0" : "-100%"})`,
+      }}
+      // Two different things have to be stopped here, and missing either one
+      // loses the edit the toolbar exists to act on.
+      //
+      // The default, because a press anywhere in Studio moves the focus, and
+      // moving it out of the text collapses the selection being styled.
+      //
+      // The propagation, because this renders inside the canvas overlay: a
+      // press that reaches the canvas is read as a click on the composition,
+      // which deselects the element and commits the edit out from under the
+      // button that was just pressed.
+      onPointerDown={swallow}
+      onMouseDown={swallow}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <label
+        className="group relative flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-white/10"
+        title="Text colour"
+      >
+        <span
+          aria-hidden="true"
+          className="h-4 w-4 rounded-full border-2 border-white/25 transition-transform duration-150 group-hover:scale-110 group-active:scale-95"
+          // `background` maps a gradient to the PADDING box and then repeats it
+          // to fill the border box, so the 1px border shows the strip either
+          // side of the tile: the end colour on the left, the start colour on
+          // the right. A red-to-green swatch grew a green edge and a red one.
+          // Set after the shorthand, which resets it.
+          style={{
+            background: swatchBackground(placement.colours, styles.color),
+            backgroundOrigin: "border-box",
+          }}
+        />
+        {/* `inset-0` is not enough on its own: a colour input carries a
+            user-agent minimum width, which wins over the right edge and lets
+            the invisible input spill across the buttons beside it. Hovering
+            bold then opened the colour picker. The size is pinned instead. */}
+        <input
+          type="color"
+          aria-label="Text colour"
+          className="absolute inset-0 h-full w-full min-w-0 cursor-pointer opacity-0"
+          value={placement.pickerColour}
+          onChange={(event) => apply({ color: event.target.value })}
+        />
+      </label>
+      <ToolbarToggle
+        label="Bold"
+        glyph="B"
+        bold
+        on={isBold(styles["font-weight"])}
+        onToggle={(on) => apply({ "font-weight": on ? "700" : null })}
+      />
+      <ToolbarToggle
+        label="Italic"
+        glyph="I"
+        italic
+        on={styles["font-style"] === "italic"}
+        onToggle={(on) => apply({ "font-style": on ? "italic" : null })}
+      />
+      <ToolbarToggle
+        label="Underline"
+        glyph="U"
+        underline
+        on={styles["text-decoration-line"] === "underline"}
+        onToggle={(on) => apply({ "text-decoration-line": on ? "underline" : null })}
+      />
+    </div>
+  );
+}
+
+/**
+ * The selection's colours as one swatch: a diagonal sweep through each distinct
+ * colour, evenly spaced. A selection with one colour is a plain swatch.
+ *
+ * Distinct rather than weighted, and evenly spaced rather than proportional,
+ * matching the mixed-colour swatch in the design tool this sits alongside. The
+ * swatch answers "which colours are in here", and at 16px a colour used by one
+ * character has to be as visible as one used by thirty or it may as well not be
+ * drawn.
+ */
+export function swatchBackground(
+  distinctColours: readonly string[],
+  agreed: string | undefined,
+): string {
+  if (distinctColours.length === 0) return agreed || DEFAULT_COLOR;
+  if (distinctColours.length === 1) return distinctColours[0]!;
+  const stops = distinctColours.map(
+    (colour, index) => `${colour} ${((index / (distinctColours.length - 1)) * 100).toFixed(2)}%`,
+  );
+  return `linear-gradient(135deg, ${stops.join(", ")})`;
+}
+
+function swallow(event: { preventDefault: () => void; stopPropagation: () => void }): void {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
+function ToolbarToggle({
+  label,
+  glyph,
+  on,
+  onToggle,
+  bold,
+  italic,
+  underline,
+}: {
+  label: string;
+  glyph: string;
+  on: boolean;
+  onToggle: (on: boolean) => void;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      title={label}
+      aria-label={label}
+      aria-pressed={on}
+      className={`flex h-6 w-6 items-center justify-center rounded-md text-xs ${
+        on ? "bg-studio-accent/20 text-studio-accent" : "text-white/70 hover:bg-white/10"
+      }`}
+      style={{
+        fontWeight: bold ? 700 : 400,
+        fontStyle: italic ? "italic" : "normal",
+        textDecoration: underline ? "underline" : "none",
+      }}
+      onClick={() => onToggle(!on)}
+    >
+      {glyph}
+    </button>
+  );
+}
+
+/** Where the selection is on screen, or null when there is nothing selected. */
+function placeOverSelection(
+  element: HTMLElement,
+  iframe: HTMLIFrameElement,
+): ToolbarPlacement | null {
+  const doc = element.ownerDocument;
+  const view = doc.defaultView;
+  const selection = view?.getSelection();
+  if (!view || !selection || selection.rangeCount === 0 || selection.isCollapsed) return null;
+
+  const range = selection.getRangeAt(0);
+  if (!element.contains(range.commonAncestorContainer)) return null;
+  const rect = range.getBoundingClientRect();
+
+  // The composition is drawn scaled into the iframe's box, so a point inside it
+  // is that scale away from a point on Studio's screen. This is the inverse of
+  // the mapping the canvas uses to turn a press into a caret position.
+  const box = iframe.getBoundingClientRect();
+  const scale = view.innerWidth ? box.width / view.innerWidth : 1;
+  const above = box.top + rect.top * scale - GAP_PX;
+  const placeBelow = above < TOOLBAR_HEIGHT_PX;
+
+  const styles = readInlineStyle(range, READ_PROPERTIES);
+  const colours = readInlineStyleSpread(range, "color");
+  return {
+    left: box.left + (rect.left + rect.width / 2) * scale,
+    top: placeBelow ? box.top + (rect.top + rect.height) * scale + GAP_PX : above,
+    placeBelow,
+    styles,
+    colours,
+    pickerColour: toPickerColour(styles.color ?? colours[0], doc),
+  };
+}
+
+function isBold(weight: string | undefined): boolean {
+  if (!weight) return false;
+  if (weight === "bold" || weight === "bolder") return true;
+  return Number.parseInt(weight, 10) >= 600;
+}
+
+/** A colour input accepts only `#rrggbb`; normalise any valid CSS colour to it. */
+function toPickerColour(value: string | undefined, doc: Document): string {
+  if (!value) return DEFAULT_COLOR;
+  const parsed = parseCssColor(value);
+  if (parsed) return toHexColor(parsed);
+
+  // Canvas delegates the full CSS colour grammar to the browser, including
+  // named colours that the small serialisation parser intentionally omits.
+  // DOM-only test environments can lack a canvas implementation, in which
+  // case the picker degrades to its explicit default while the swatch remains
+  // truthful because CSS still paints the original value.
+  try {
+    const context = doc.createElement("canvas").getContext("2d");
+    if (!context) return DEFAULT_COLOR;
+    context.fillStyle = DEFAULT_COLOR;
+    context.fillStyle = value;
+    const normalised =
+      typeof context.fillStyle === "string" ? parseCssColor(context.fillStyle) : null;
+    return normalised ? toHexColor(normalised) : DEFAULT_COLOR;
+  } catch {
+    return DEFAULT_COLOR;
+  }
+}

package/src/components/editor/OffCanvasIndicators.tsx

@@ -143,3 +143,41 @@ export function OffCanvasIndicators({
     </>
   );
 }
+
+/**
+ * The dashed outlines around a selected element's children.
+ *
+ * Extracted from the canvas overlay, which is at its 600-line limit, and it
+ * sits here rather than in its own file because it is the same kind of thing:
+ * a passive, non-interactive mark the overlay draws over the composition.
+ */
+export function ChildRectOutlines({
+  rects,
+}: {
+  rects: ReadonlyArray<{
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    angle?: number;
+  }>;
+}) {
+  return (
+    <>
+      {rects.map((rect, index) => (
+        <div
+          key={index}
+          className="pointer-events-none absolute border border-dashed border-white/20 rounded-sm"
+          style={{
+            left: rect.left,
+            top: rect.top,
+            width: rect.width,
+            height: rect.height,
+            // A child outline is drawn ON the child, so it rotates with it.
+            transform: rect.angle ? `rotate(${rect.angle}deg)` : undefined,
+          }}
+        />
+      ))}
+    </>
+  );
+}