@backmatter/studio 0.0.1

package/src/pages/RenderedBody.tsx

@@ -0,0 +1,598 @@
+// packages/studio/src/pages/RenderedBody.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+  type Ref,
+} from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import * as stylex from "@stylexjs/stylex";
+import type { BlockSnapshot } from "../api";
+import { ContentBlockView, contentBlockFields, contentBlockLabel, contentBlockProps } from "../content-blocks";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import {
+  blockFromMarkdown,
+  blocksFromSource,
+  codeParts,
+  joinBlocks,
+  jsxBlockSource,
+  jsxWithProps,
+  type BodyBlock,
+} from "./body-blocks";
+import { editorMdxComponents } from "./body-mdx";
+import { compileBody } from "./compile-body";
+import { BlockSettingsDialog } from "./BlockSettingsDialog";
+import { markdownFromEditable } from "./html-to-markdown";
+import { SelectionBar, type FormatSelection } from "./SelectionBar";
+import {
+  applyBlockFormat,
+  applyLink,
+  blockFormatOf,
+  marksAt,
+  placeCaretAtEnd,
+  toggleInline,
+  type BlockFormat,
+} from "./selection-format";
+
+export type RenderedBodyHandle = {
+  insert: (markdown: string) => void;
+};
+
+export const RenderedBody = forwardRef<
+  RenderedBodyHandle,
+  {
+    value: string;
+    catalog?: Array<BlockSnapshot & { label?: string }>;
+    readOnly?: boolean;
+    labelledBy: string;
+    onChange: (value: string) => void;
+  }
+>(function RenderedBody({ value, catalog = [], readOnly, labelledBy, onChange }, ref) {
+  const local = useRef(value);
+  const hosts = useRef(new Map<string, HTMLElement>());
+  const commits = useRef(new Map<string, () => void>());
+  const linking = useRef(false);
+  const [blocks, setBlocks] = useState(() => blocksFromSource(value));
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [focusId, setFocusId] = useState<string | null>(null);
+  const [selection, setSelection] = useState<FormatSelection | null>(null);
+  const [settingsId, setSettingsId] = useState<string | null>(null);
+  const selectionBlock = useRef<string | null>(null);
+
+  const register = useCallback((id: string, host: HTMLElement, commit: () => void) => {
+    hosts.current.set(id, host);
+    commits.current.set(id, commit);
+  }, []);
+
+  const unregister = useCallback((id: string) => {
+    hosts.current.delete(id);
+    commits.current.delete(id);
+  }, []);
+
+  const syncSelection = useCallback(() => {
+    if (linking.current) return;
+    const next = readSelection(hosts.current);
+    selectionBlock.current = next?.blockId ?? null;
+    setSelection(next?.selection ?? null);
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", syncSelection);
+    window.addEventListener("resize", syncSelection);
+    document.addEventListener("scroll", syncSelection, true);
+    return () => {
+      document.removeEventListener("selectionchange", syncSelection);
+      window.removeEventListener("resize", syncSelection);
+      document.removeEventListener("scroll", syncSelection, true);
+    };
+  }, [syncSelection]);
+
+  useEffect(() => {
+    if (value === local.current) return;
+    local.current = value;
+    setBlocks(blocksFromSource(value));
+  }, [value]);
+
+  function publish(next: BodyBlock[]) {
+    const source = joinBlocks(next);
+    local.current = source;
+    setBlocks(next);
+    if (source !== value) onChange(source);
+  }
+
+  function insert(markdown: string) {
+    const id = crypto.randomUUID();
+    const block = blockFromMarkdown(markdown, id);
+    const index = blocks.findIndex((item) => item.id === activeId);
+    const next = [...blocks];
+    if (index === -1) next.push(block);
+    else next.splice(index + 1, 0, block);
+    if (block.kind === "jsx" && catalog.some((item) => item.name === block.jsxName)) {
+      setSettingsId(id);
+    } else {
+      setFocusId(id);
+    }
+    publish(next);
+  }
+
+  useImperativeHandle(ref, () => ({ insert }));
+
+  function commitHost(id: string) {
+    commits.current.get(id)?.();
+  }
+
+  function onFormat(format: BlockFormat) {
+    const id = selectionBlock.current;
+    const host = id ? hosts.current.get(id) : undefined;
+    const range = currentRange();
+    if (!id || !host || !range) return;
+    if (blockFormatOf(host, range) === format) return;
+    applyBlockFormat(host, format, range);
+    placeCaretAtEnd(host);
+    commitHost(id);
+  }
+
+  function onInline(tag: "strong" | "em") {
+    const id = selectionBlock.current;
+    const host = id ? hosts.current.get(id) : undefined;
+    const range = currentRange();
+    if (!id || !host || !range || !host.contains(range.commonAncestorContainer)) return;
+    toggleInline(range, tag);
+    commitHost(id);
+  }
+
+  function onLink(href: string, range: Range) {
+    const id = selectionBlock.current;
+    const host = id ? hosts.current.get(id) : undefined;
+    if (!id || !host) return;
+    host.focus();
+    applyLink(range, href);
+    commitHost(id);
+  }
+
+  function commit(id: string, markdown: string) {
+    const current = blocks.find((block) => block.id === id);
+    if (!current || current.markdown.trim() === markdown.trim()) return;
+    publish(
+      blocks.map((block) => (block.id === id ? blockFromMarkdown(markdown, id) : block)),
+    );
+  }
+
+  function split(id: string, before: string, after: string) {
+    const nextId = crypto.randomUUID();
+    const next: BodyBlock[] = [];
+    for (const block of blocks) {
+      if (block.id !== id) {
+        next.push(block);
+        continue;
+      }
+      next.push(blockFromMarkdown(before, block.id));
+      next.push(blockFromMarkdown(after, nextId));
+    }
+    setFocusId(nextId);
+    publish(next);
+  }
+
+  const settingsBlock = blocks.find((block) => block.id === settingsId);
+  const settingsDef = settingsBlock?.jsxName
+    ? catalog.find((item) => item.name === settingsBlock.jsxName)
+    : undefined;
+  const settings =
+    settingsBlock && settingsDef ? { block: settingsBlock, def: settingsDef } : null;
+
+  return (
+    <RenderedSurface labelledBy={labelledBy}>
+      {blocks.length === 0 ? (
+        <EditableBlock
+          block={{ id: "empty", markdown: "", kind: "text" }}
+          readOnly={readOnly}
+          autoFocus={false}
+          catalog={catalog}
+          onOpenSettings={setSettingsId}
+          onRegister={register}
+          onUnregister={unregister}
+          onFocus={() => setActiveId(null)}
+          onCommit={(markdown) => {
+            if (!markdown.trim()) return;
+            publish([blockFromMarkdown(markdown, crypto.randomUUID())]);
+          }}
+          onSplit={() => {}}
+          onRemove={() => {}}
+        />
+      ) : (
+        blocks.map((block) => (
+          <EditableBlock
+            key={block.id}
+            block={block}
+            readOnly={readOnly}
+            autoFocus={focusId === block.id}
+            catalog={catalog}
+            onOpenSettings={setSettingsId}
+            onRegister={register}
+            onUnregister={unregister}
+            onFocus={() => setActiveId(block.id)}
+            onCommit={(markdown) => commit(block.id, markdown)}
+            onSplit={(before, after) => split(block.id, before, after)}
+            onRemove={() => publish(blocks.filter((item) => item.id !== block.id))}
+          />
+        ))
+      )}
+      {selection && !readOnly ? (
+        <SelectionBar
+          selection={selection}
+          onFormat={onFormat}
+          onInline={onInline}
+          onLink={onLink}
+          onLinking={(next) => {
+            linking.current = next;
+            if (!next) syncSelection();
+          }}
+        />
+      ) : null}
+      {settings ? (
+        <BlockSettingsDialog
+          key={settings.block.id}
+          name={settings.def.name}
+          title={contentBlockLabel(settings.def.name)}
+          fields={contentBlockFields(settings.def)}
+          value={contentBlockProps(settings.block.markdown, settings.def.name)}
+          readOnly={readOnly}
+          onOpenChange={(open) => {
+            if (!open) setSettingsId(null);
+          }}
+          onSave={(props) => {
+            const markdown =
+              settings.def.name === "Image"
+                ? jsxBlockSource(settings.def.name, props, settings.def.fields)
+                : jsxWithProps(
+                    settings.block.markdown,
+                    settings.def.name,
+                    props,
+                    settings.def.fields,
+                  );
+            commit(settings.block.id, markdown);
+            setSettingsId(null);
+          }}
+          onRemove={() => {
+            publish(blocks.filter((block) => block.id !== settings.block.id));
+            setSettingsId(null);
+          }}
+        />
+      ) : null}
+    </RenderedSurface>
+  );
+});
+
+function RenderedSurface({
+  labelledBy,
+  children,
+}: {
+  labelledBy: string;
+  children: ReactNode;
+}) {
+  const surface = stylex.props(styles.surface);
+  return (
+    <div
+      aria-labelledby={labelledBy}
+      className={["prose-ui", surface.className].filter(Boolean).join(" ")}
+      style={surface.style}
+    >
+      {children}
+    </div>
+  );
+}
+
+function EditableBlock({
+  block,
+  catalog,
+  readOnly,
+  autoFocus,
+  onOpenSettings,
+  onRegister,
+  onUnregister,
+  onFocus,
+  onCommit,
+  onSplit,
+  onRemove,
+}: {
+  block: BodyBlock;
+  catalog: Array<BlockSnapshot & { label?: string }>;
+  readOnly?: boolean;
+  autoFocus: boolean;
+  onOpenSettings: (id: string) => void;
+  onRegister: (id: string, host: HTMLElement, commit: () => void) => void;
+  onUnregister: (id: string) => void;
+  onFocus: () => void;
+  onCommit: (markdown: string) => void;
+  onSplit: (before: string, after: string) => void;
+  onRemove: () => void;
+}) {
+  const ref = useRef<HTMLElement>(null);
+  const editing = useRef(false);
+  const commitRef = useRef<() => void>(() => {});
+  commitRef.current = () => {
+    const host = ref.current;
+    if (!host || readOnly) return;
+    onCommit(markdownFromEditable(host, block));
+  };
+
+  useEffect(() => {
+    if (autoFocus) ref.current?.focus();
+  }, [autoFocus]);
+
+  useEffect(() => {
+    if (block.kind !== "text") return;
+    const host = ref.current;
+    if (!host) return;
+    onRegister(block.id, host, () => commitRef.current());
+    return () => onUnregister(block.id);
+  }, [block.id, block.kind, onRegister, onUnregister]);
+
+  useEffect(() => {
+    const host = ref.current;
+    if (!host || editing.current) return;
+    if (block.kind === "code") {
+      host.textContent = codeParts(block.markdown).code;
+      return;
+    }
+    if (!block.markdown.trim()) {
+      host.innerHTML = "";
+      return;
+    }
+    let cancelled = false;
+    void compileBody(block.markdown, editorMdxComponents(block.jsxName))
+      .then((result) => {
+        if (cancelled || editing.current || ref.current !== host) return;
+        if (result.error || result.node == null) {
+          host.textContent = block.markdown;
+          return;
+        }
+        try {
+          host.innerHTML = renderToStaticMarkup(result.node).replace(/<link\b[^>]*>/g, "");
+        } catch {
+          host.textContent = block.markdown;
+        }
+      })
+      .catch(() => {
+        if (!cancelled && ref.current === host) host.textContent = block.markdown;
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [block.kind, block.markdown]);
+
+  function commitFromDom() {
+    const host = ref.current;
+    if (!host || readOnly) return;
+    onCommit(markdownFromEditable(host, block));
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLElement>) {
+    if (readOnly) return;
+    const emptyText = (ref.current?.innerText ?? "").trim() === "";
+    if (event.key === "Backspace" && block.kind === "text" && emptyText) {
+      event.preventDefault();
+      onRemove();
+      return;
+    }
+    if (event.key !== "Enter" || event.shiftKey || block.kind !== "text") return;
+    const host = ref.current;
+    if (!host) return;
+    const parts = splitAtCaret(host);
+    if (!parts) return;
+    event.preventDefault();
+    onSplit(parts.before, parts.after);
+  }
+
+  const empty = !block.markdown.trim();
+  const catalogBlock =
+    block.kind === "jsx" ? catalog.find((item) => item.name === block.jsxName) : undefined;
+
+  if (catalogBlock) {
+    return (
+      <div data-body-block="" {...stylex.props(styles.block)}>
+        <button
+          type="button"
+          aria-label={`Edit ${catalogBlock.name} settings`}
+          onClick={() => onOpenSettings(block.id)}
+          {...stylex.props(styles.card)}
+        >
+          <ContentBlockView
+            name={catalogBlock.name}
+            props={contentBlockProps(block.markdown, catalogBlock.name)}
+          />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-body-block=""
+      {...stylex.props(styles.block)}
+    >
+      {block.kind === "code" ? (
+        <pre {...stylex.props(styles.pre)}>
+          <code
+            ref={ref as Ref<HTMLElement>}
+            role="textbox"
+            aria-multiline="true"
+            aria-label={block.lang ? `${block.lang} code` : "Code"}
+            contentEditable={!readOnly}
+            suppressContentEditableWarning
+            spellCheck={false}
+            onFocus={() => {
+              editing.current = true;
+              onFocus();
+            }}
+            onBlur={() => {
+              editing.current = false;
+              commitFromDom();
+            }}
+            onKeyDown={onKeyDown}
+            {...stylex.props(styles.codeText)}
+          />
+        </pre>
+      ) : (
+        <div
+          ref={ref as Ref<HTMLDivElement>}
+          role="textbox"
+          aria-multiline="true"
+          aria-label={block.jsxName ?? "Text"}
+          contentEditable={!readOnly}
+          suppressContentEditableWarning
+          spellCheck
+          data-text-block=""
+          data-empty={empty ? "" : undefined}
+          onFocus={() => {
+            editing.current = true;
+            onFocus();
+          }}
+          onBlur={() => {
+            editing.current = false;
+            commitFromDom();
+          }}
+          onKeyDown={onKeyDown}
+          onClick={(event) => {
+            const anchor = (event.target as HTMLElement).closest?.("a");
+            if (anchor) event.preventDefault();
+          }}
+          {...stylex.props(styles.text, empty && styles.placeholder)}
+        />
+      )}
+    </div>
+  );
+}
+
+type SelectionSnap = { blockId: string; selection: FormatSelection };
+
+function readSelection(hosts: Map<string, HTMLElement>): SelectionSnap | null {
+  const current = window.getSelection();
+  if (!current || current.isCollapsed || current.rangeCount === 0) return null;
+  if (current.toString().trim() === "") return null;
+  const range = current.getRangeAt(0);
+  const node = range.commonAncestorContainer;
+  const element = node instanceof Element ? node : node.parentElement;
+  if (element?.closest("[data-selection-bar]")) return null;
+  const host = element?.closest("[data-text-block]");
+  if (!(host instanceof HTMLElement) || !host.isContentEditable) return null;
+  if (host.getClientRects().length === 0) return null;
+  let blockId: string | null = null;
+  for (const [id, registered] of hosts) {
+    if (registered === host) blockId = id;
+  }
+  if (!blockId) return null;
+  const rects = range.getClientRects();
+  const rect = rects.length > 0 ? rects[0] : range.getBoundingClientRect();
+  if (!rect || (rect.width === 0 && rect.height === 0)) return null;
+  return {
+    blockId,
+    selection: {
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      bottom: rect.bottom,
+      format: blockFormatOf(host, range),
+      ...marksAt(range),
+    },
+  };
+}
+
+function currentRange(): Range | null {
+  const current = window.getSelection();
+  if (!current || current.rangeCount === 0) return null;
+  return current.getRangeAt(0);
+}
+
+function splitAtCaret(root: HTMLElement): { before: string; after: string } | null {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return null;
+  const range = selection.getRangeAt(0);
+  if (!root.contains(range.startContainer)) return null;
+
+  const beforeRange = range.cloneRange();
+  beforeRange.selectNodeContents(root);
+  beforeRange.setEnd(range.startContainer, range.startOffset);
+  const afterRange = range.cloneRange();
+  afterRange.selectNodeContents(root);
+  afterRange.setStart(range.endContainer, range.endOffset);
+
+  const beforeHost = document.createElement("div");
+  beforeHost.appendChild(beforeRange.cloneContents());
+  const afterHost = document.createElement("div");
+  afterHost.appendChild(afterRange.cloneContents());
+  return {
+    before: markdownFromEditable(beforeHost, { id: "before", kind: "text", markdown: "" }),
+    after: markdownFromEditable(afterHost, { id: "after", kind: "text", markdown: "" }),
+  };
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  surface: {
+    minHeight: "26rem",
+    overflowX: "auto",
+    padding: space.lg,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgInput,
+  },
+  block: {
+    marginBottom: space.lg,
+    ":last-child": {
+      marginBottom: 0,
+    },
+  },
+  card: {
+    display: "block",
+    width: "100%",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    lineHeight: "inherit",
+    textAlign: "left",
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  text: {
+    minHeight: "1.5em",
+    outlineWidth: 0,
+  },
+  placeholder: {
+    ":empty::before": {
+      content: '"Write…"',
+      color: colors.textMuted,
+    },
+  },
+  pre: {
+    margin: 0,
+    padding: space.md,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    overflowX: "auto",
+  },
+  codeText: {
+    fontFamily: type.mono,
+    fontSize: type.sm,
+    lineHeight: 1.5,
+    whiteSpace: "pre",
+    outlineWidth: 0,
+  },
+});

package/src/pages/ResumeHome.tsx

@@ -0,0 +1,18 @@
+// packages/studio/src/pages/ResumeHome.tsx
+import { Navigate } from "react-router";
+import { useAppChrome } from "../components/AppChromeContext";
+import {
+  forgetLastWorkspace,
+  readLastWorkspace,
+  resumePath,
+} from "../last-workspace";
+import { useReplicaState } from "../replica/useReplica";
+
+export function ResumeHome() {
+  const { userId } = useAppChrome();
+  const replica = useReplicaState();
+  const last = readLastWorkspace(userId);
+  const to = resumePath(last, replica.control?.workspaces ?? []);
+  if (to === "/workspaces" && last) forgetLastWorkspace(userId);
+  return <Navigate to={to} replace />;
+}