@backmatter/studio 0.0.10 → 0.0.12

package/src/pages/RenderedBody.tsx

@@ -6,28 +6,23 @@ import {
   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 { contentBlockFields, contentBlockLabel, contentBlockProps } from "../content-blocks";
+import { colors, radius, space } 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 { documentNodes } from "./document-paint";
 import { BlockSettingsDialog } from "./BlockSettingsDialog";
-import { markdownFromEditable } from "./html-to-markdown";
+import { markdownFromDocument } from "./html-to-markdown";
 import { SelectionBar, type FormatSelection } from "./SelectionBar";
 import {
   applyBlockFormat,
@@ -43,6 +38,8 @@ export type RenderedBodyHandle = {
   insert: (markdown: string) => void;
 };
 
+const BODY_HOST = "body";
+
 export const RenderedBody = forwardRef<
   RenderedBodyHandle,
   {
@@ -55,29 +52,24 @@ export const RenderedBody = forwardRef<
 >(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 repaint = useRef(true);
+  const editing = useRef(false);
   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) => {
+  const register = useCallback((id: string, host: HTMLElement) => {
     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);
   }, []);
 
@@ -95,87 +87,95 @@ export const RenderedBody = forwardRef<
   useEffect(() => {
     if (value === local.current) return;
     local.current = value;
+    repaint.current = true;
     setBlocks(blocksFromSource(value));
   }, [value]);
 
   function publish(next: BodyBlock[]) {
     const source = joinBlocks(next);
     local.current = source;
+    repaint.current = true;
     setBlocks(next);
     if (source !== value) onChange(source);
   }
 
+  function bodyHost(): HTMLElement | undefined {
+    return hosts.current.get(BODY_HOST);
+  }
+
+  function commitDocument() {
+    const host = bodyHost();
+    if (!host) return;
+    const source = markdownFromDocument(host);
+    if (source === local.current) return;
+    local.current = source;
+    setBlocks(blocksFromSource(source));
+    if (source !== value) onChange(source);
+  }
+
   function insert(markdown: string) {
+    const host = bodyHost();
+    const source = host ? markdownFromDocument(host) : local.current;
+    const current = blocksFromSource(source);
     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);
+    const index = caretIndex(host);
+    const next = [...current];
+    if (index < 0) 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 host = bodyHost();
     const range = currentRange();
-    if (!id || !host || !range) return;
+    if (!host || !range || !host.contains(range.startContainer)) return;
     if (blockFormatOf(host, range) === format) return;
-    applyBlockFormat(host, format, range);
-    placeCaretAtEnd(host);
-    commitHost(id);
+    const next = applyBlockFormat(host, format, range);
+    placeCaretAtEnd(next);
+    commitDocument();
   }
 
   function onInline(tag: "strong" | "em") {
-    const id = selectionBlock.current;
-    const host = id ? hosts.current.get(id) : undefined;
+    const host = bodyHost();
     const range = currentRange();
-    if (!id || !host || !range || !host.contains(range.commonAncestorContainer)) return;
+    if (!host || !range || !host.contains(range.commonAncestorContainer)) return;
     toggleInline(range, tag);
-    commitHost(id);
+    commitDocument();
   }
 
   function onLink(href: string, range: Range) {
-    const id = selectionBlock.current;
-    const host = id ? hosts.current.get(id) : undefined;
-    if (!id || !host) return;
+    const host = bodyHost();
+    if (!host) return;
     host.focus();
     applyLink(range, href);
-    commitHost(id);
+    commitDocument();
   }
 
-  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 caretIndex(host: HTMLElement | undefined): number {
+    if (!host) return -1;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return -1;
+    let node: Node | null = selection.getRangeAt(0).startContainer;
+    while (node && node.parentElement !== host) node = node.parentNode;
+    if (!(node instanceof HTMLElement) || node.parentElement !== host) return -1;
+    return [...host.children].indexOf(node);
   }
 
-  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);
+  function replaceAtom(id: string, markdown: string) {
+    const host = bodyHost();
+    const atom = host?.querySelector(`[data-body-atom="${id}"]`);
+    if (atom) atom.setAttribute("data-body-markdown", encodeURIComponent(markdown));
+    const source = host ? markdownFromDocument(host) : markdown;
+    local.current = source;
+    repaint.current = true;
+    setBlocks(blocksFromSource(source));
+    if (source !== value) onChange(source);
   }
 
   const settingsBlock = blocks.find((block) => block.id === settingsId);
@@ -187,41 +187,18 @@ export const RenderedBody = forwardRef<
 
   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))}
-          />
-        ))
-      )}
+      <DocumentField
+        blocks={blocks}
+        catalog={catalog}
+        readOnly={readOnly}
+        labelledBy={labelledBy}
+        repaint={repaint}
+        editing={editing}
+        onRegister={register}
+        onUnregister={unregister}
+        onCommit={commitDocument}
+        onOpenSettings={setSettingsId}
+      />
       {selection && !readOnly ? (
         <SelectionBar
           selection={selection}
@@ -255,11 +232,17 @@ export const RenderedBody = forwardRef<
                     props,
                     settings.def.fields,
                   );
-            commit(settings.block.id, markdown);
+            replaceAtom(settings.block.id, markdown);
             setSettingsId(null);
           }}
           onRemove={() => {
-            publish(blocks.filter((block) => block.id !== settings.block.id));
+            const host = bodyHost();
+            host?.querySelector(`[data-body-atom="${settings.block.id}"]`)?.remove();
+            const source = host ? markdownFromDocument(host) : "";
+            local.current = source;
+            repaint.current = true;
+            setBlocks(blocksFromSource(source));
+            if (source !== value) onChange(source);
             setSettingsId(null);
           }}
         />
@@ -287,185 +270,86 @@ function RenderedSurface({
   );
 }
 
-function EditableBlock({
-  block,
+function DocumentField({
+  blocks,
   catalog,
   readOnly,
-  autoFocus,
-  onOpenSettings,
+  labelledBy,
+  repaint,
+  editing,
   onRegister,
   onUnregister,
-  onFocus,
   onCommit,
-  onSplit,
-  onRemove,
+  onOpenSettings,
 }: {
-  block: BodyBlock;
+  blocks: BodyBlock[];
   catalog: Array<BlockSnapshot & { label?: string }>;
   readOnly?: boolean;
-  autoFocus: boolean;
-  onOpenSettings: (id: string) => void;
-  onRegister: (id: string, host: HTMLElement, commit: () => void) => void;
+  labelledBy: string;
+  repaint: { current: boolean };
+  editing: { current: boolean };
+  onRegister: (id: string, host: HTMLElement) => void;
   onUnregister: (id: string) => void;
-  onFocus: () => void;
-  onCommit: (markdown: string) => void;
-  onSplit: (before: string, after: string) => void;
-  onRemove: () => void;
+  onCommit: () => void;
+  onOpenSettings: (id: string) => 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));
-  };
+  const ref = useRef<HTMLDivElement>(null);
 
   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]);
+    onRegister(BODY_HOST, host);
+    return () => onUnregister(BODY_HOST);
+  }, [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;
-    }
+    if (!host) return;
+    const forced = repaint.current;
+    repaint.current = false;
+    if (editing.current && !forced) 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;
-      });
+    void documentNodes(blocks, catalog).then((nodes) => {
+      if (cancelled || ref.current !== host) return;
+      if (editing.current && !forced) return;
+      host.replaceChildren(...nodes);
+    });
     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>
-    );
-  }
+  }, [blocks, catalog, editing, repaint]);
 
   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>
+      ref={ref}
+      role="textbox"
+      aria-multiline="true"
+      aria-labelledby={labelledBy}
+      contentEditable={readOnly ? "false" : "true"}
+      suppressContentEditableWarning
+      spellCheck
+      data-text-block=""
+      data-no-ring=""
+      onFocus={() => {
+        editing.current = true;
+      }}
+      onBlur={() => {
+        editing.current = false;
+        if (!readOnly) onCommit();
+      }}
+      onClick={(event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) return;
+        const atom = target.closest("[data-body-atom]");
+        if (atom instanceof HTMLElement) {
+          event.preventDefault();
+          onOpenSettings(atom.getAttribute("data-body-atom") ?? "");
+          return;
+        }
+        if (target.closest("a")) event.preventDefault();
+      }}
+      {...stylex.props(styles.text)}
+    />
   );
 }
 
@@ -509,31 +393,6 @@ function currentRange(): Range | 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",
@@ -545,54 +404,14 @@ const styles = stylex.create({
     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,
+    outline: "none",
+    ":focus": {
+      outline: "none",
+    },
+    ":focus-visible": {
+      outline: "none",
     },
-  },
-  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,
   },
 });