@beyondwork/docx-react-component 1.0.60 → 1.0.62

package/src/ui-tailwind/chrome/tw-runtime-repl-dialog.tsx

@@ -0,0 +1,514 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import type { WordReviewEditorRef } from "../../api/public-types";
+import type { DocumentRuntime } from "../../runtime/document-runtime";
+
+export interface TwRuntimeReplDialogProps {
+  runtime: DocumentRuntime | null;
+  /**
+   * Optional editor ref. When provided, the REPL exposes it to evaluated
+   * expressions as `ref` — e.g. `ref.getRenderSnapshot()`. The REPL reads
+   * the live `.current` at evaluation time, so a stable refObject is fine.
+   */
+  editorRef?: React.RefObject<WordReviewEditorRef | null>;
+  disabled?: boolean;
+}
+
+interface ReplEntry {
+  id: number;
+  input: string;
+  status: "ok" | "error";
+  output: string;
+}
+
+const MAX_HISTORY = 30;
+const MAX_ENTRIES = 50;
+const MAX_OUTPUT_CHARS = 8000;
+const HISTORY_STORAGE_KEY = "wre-runtime-repl-history";
+const HISTORY_STORAGE_VERSION = 1;
+
+export function TwRuntimeReplDialog(props: TwRuntimeReplDialogProps): React.JSX.Element | null {
+  const { runtime, editorRef, disabled = false } = props;
+  const [open, setOpen] = useState(false);
+  const [input, setInput] = useState("");
+  const [entries, setEntries] = useState<readonly ReplEntry[]>([]);
+  const [history, setHistory] = useState<readonly string[]>(() =>
+    loadPersistedHistory(),
+  );
+  const [historyIndex, setHistoryIndex] = useState<number | null>(null);
+  const openRef = useRef(false);
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const outputRef = useRef<HTMLDivElement | null>(null);
+  const nextEntryIdRef = useRef(1);
+
+  const appendToHistory = useCallback((code: string) => {
+    setHistory((prev) => {
+      const next = appendHistoryEntry(prev, code);
+      if (next === prev) return prev;
+      savePersistedHistory(next);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (disabled) return;
+    if (typeof window === "undefined") return;
+    const handler = (event: KeyboardEvent): void => {
+      if (!isReplToggleShortcut(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const next = !openRef.current;
+      openRef.current = next;
+      setOpen(next);
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => {
+      window.removeEventListener("keydown", handler, true);
+    };
+  }, [disabled]);
+
+  useEffect(() => {
+    openRef.current = open;
+    if (open) {
+      const id = requestAnimationFrame(() => {
+        textareaRef.current?.focus();
+      });
+      return () => cancelAnimationFrame(id);
+    }
+    return undefined;
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const el = outputRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [entries, open]);
+
+  const handleClose = useCallback(() => {
+    openRef.current = false;
+    setOpen(false);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setEntries([]);
+  }, []);
+
+  const pushEntry = useCallback((entry: Omit<ReplEntry, "id">) => {
+    setEntries((prev) => {
+      const next = [...prev, { ...entry, id: nextEntryIdRef.current }];
+      nextEntryIdRef.current += 1;
+      return next.length > MAX_ENTRIES ? next.slice(next.length - MAX_ENTRIES) : next;
+    });
+  }, []);
+
+  const runEval = useCallback(
+    async (code: string): Promise<void> => {
+      const trimmed = code.trim();
+      if (trimmed.length === 0) return;
+      appendToHistory(code);
+      if (!runtime) {
+        pushEntry({
+          input: code,
+          status: "error",
+          output: "runtime is not available yet",
+        });
+        return;
+      }
+      try {
+        const value = await evaluateReplExpression(
+          code,
+          runtime,
+          editorRef?.current ?? null,
+        );
+        pushEntry({
+          input: code,
+          status: "ok",
+          output: formatReplValue(value),
+        });
+      } catch (error) {
+        pushEntry({
+          input: code,
+          status: "error",
+          output: formatReplError(error),
+        });
+      }
+    },
+    [appendToHistory, editorRef, pushEntry, runtime],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        handleClose();
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        const snapshot = input;
+        setInput("");
+        setHistoryIndex(null);
+        void runEval(snapshot);
+        return;
+      }
+      if (event.key === "ArrowUp" && !event.shiftKey && !event.altKey) {
+        const textarea = event.currentTarget;
+        const isFirstLine = textarea.selectionStart <= (textarea.value.indexOf("\n") === -1 ? textarea.value.length : textarea.value.indexOf("\n"));
+        if (!isFirstLine || history.length === 0) return;
+        event.preventDefault();
+        const nextIndex =
+          historyIndex === null
+            ? history.length - 1
+            : Math.max(0, historyIndex - 1);
+        setHistoryIndex(nextIndex);
+        setInput(history[nextIndex] ?? "");
+        return;
+      }
+      if (event.key === "ArrowDown" && !event.shiftKey && !event.altKey && historyIndex !== null) {
+        const textarea = event.currentTarget;
+        const afterLastNewline = textarea.value.lastIndexOf("\n");
+        const isLastLine = textarea.selectionStart > afterLastNewline;
+        if (!isLastLine) return;
+        event.preventDefault();
+        const nextIndex = historyIndex + 1;
+        if (nextIndex >= history.length) {
+          setHistoryIndex(null);
+          setInput("");
+        } else {
+          setHistoryIndex(nextIndex);
+          setInput(history[nextIndex] ?? "");
+        }
+      }
+    },
+    [handleClose, history, historyIndex, input, runEval],
+  );
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[10vh]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="tw-runtime-repl__title"
+      data-testid="tw-runtime-repl"
+    >
+      <div
+        className="absolute inset-0 bg-[var(--color-bg-overlay)] backdrop-blur-sm transition-opacity duration-[var(--motion-fast)]"
+        onClick={handleClose}
+        data-testid="tw-runtime-repl__backdrop"
+      />
+      <div
+        className={[
+          "relative mx-4 flex w-full max-w-3xl flex-col",
+          "rounded-[var(--radius-sm)]",
+          "bg-[var(--color-bg-elevated)]",
+          "shadow-[var(--shadow-float)]",
+          "ring-1 ring-[var(--color-border-subtle)]",
+        ].join(" ")}
+        data-testid="tw-runtime-repl__card"
+      >
+        <div className="flex items-center justify-between border-b border-[var(--color-border-subtle)] px-4 py-3">
+          <div className="flex items-baseline gap-2">
+            <h3
+              id="tw-runtime-repl__title"
+              className="text-sm font-semibold text-[var(--color-text-primary)]"
+            >
+              Runtime REPL
+            </h3>
+            <span className="text-xs text-[var(--color-text-tertiary)]">
+              evaluates against <code>runtime</code>
+              {editorRef ? (
+                <>
+                  {" "}and <code>ref</code>
+                </>
+              ) : null}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={handleClear}
+              className={[
+                "rounded-[var(--radius-sm)] px-2 py-1 text-xs font-medium",
+                "text-[var(--color-text-secondary)]",
+                "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]",
+                "transition-colors duration-[var(--motion-fast)]",
+                "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+              ].join(" ")}
+              data-testid="tw-runtime-repl__clear"
+            >
+              Clear
+            </button>
+            <button
+              type="button"
+              onClick={handleClose}
+              className={[
+                "rounded-[var(--radius-sm)] px-2 py-1 text-xs font-medium",
+                "text-[var(--color-text-secondary)]",
+                "hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-primary)]",
+                "transition-colors duration-[var(--motion-fast)]",
+                "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+              ].join(" ")}
+              data-testid="tw-runtime-repl__close"
+              aria-label="Close REPL"
+            >
+              Esc
+            </button>
+          </div>
+        </div>
+
+        <div
+          ref={outputRef}
+          className="max-h-[50vh] min-h-[160px] overflow-y-auto px-4 py-3 font-mono text-xs leading-relaxed text-[var(--color-text-primary)]"
+          data-testid="tw-runtime-repl__output"
+        >
+          {entries.length === 0 ? (
+            <p className="text-[var(--color-text-tertiary)]">
+              Evaluate JavaScript against the active runtime
+              {editorRef ? " and editor ref" : ""}. Example:
+              {" "}
+              <code>
+                {editorRef
+                  ? "ref.getRenderSnapshot().surface?.blocks.length"
+                  : "runtime.getRenderSnapshot().surface?.blocks.length"}
+              </code>
+            </p>
+          ) : (
+            entries.map((entry) => (
+              <div key={entry.id} className="mb-3 last:mb-0">
+                <div className="flex items-start gap-2">
+                  <span
+                    aria-hidden="true"
+                    className="select-none text-[var(--color-text-tertiary)]"
+                  >
+                    &gt;
+                  </span>
+                  <pre
+                    className="whitespace-pre-wrap break-all text-[var(--color-text-primary)]"
+                    data-testid="tw-runtime-repl__entry-input"
+                  >
+                    {entry.input}
+                  </pre>
+                </div>
+                <pre
+                  data-testid={
+                    entry.status === "error"
+                      ? "tw-runtime-repl__entry-error"
+                      : "tw-runtime-repl__entry-output"
+                  }
+                  className={[
+                    "mt-1 whitespace-pre-wrap break-all pl-4",
+                    entry.status === "error"
+                      ? "text-[var(--color-semantic-error)]"
+                      : "text-[var(--color-text-secondary)]",
+                  ].join(" ")}
+                >
+                  {entry.output}
+                </pre>
+              </div>
+            ))
+          )}
+        </div>
+
+        <div className="border-t border-[var(--color-border-subtle)] px-4 py-3">
+          <label className="sr-only" htmlFor="tw-runtime-repl__input">
+            Runtime expression
+          </label>
+          <textarea
+            ref={textareaRef}
+            id="tw-runtime-repl__input"
+            data-testid="tw-runtime-repl__input"
+            value={input}
+            onChange={(event) => {
+              setInput(event.target.value);
+              setHistoryIndex(null);
+            }}
+            onKeyDown={handleKeyDown}
+            rows={3}
+            spellCheck={false}
+            placeholder={
+              editorRef
+                ? "ref.getRenderSnapshot().selection"
+                : "runtime.getRenderSnapshot().selection"
+            }
+            className={[
+              "w-full resize-y rounded-[var(--radius-sm)] bg-[var(--color-bg-muted)]",
+              "px-3 py-2 font-mono text-xs leading-relaxed",
+              "text-[var(--color-text-primary)]",
+              "placeholder:text-[var(--color-text-tertiary)]",
+              "ring-1 ring-[var(--color-border-subtle)]",
+              "focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)]",
+            ].join(" ")}
+          />
+          <div className="mt-1.5 flex items-center justify-between text-[10px] text-[var(--color-text-tertiary)]">
+            <span>Enter to evaluate · Shift+Enter for newline · ↑/↓ history · Esc to close</span>
+            <span>{entries.length > 0 ? `${entries.length} entries` : ""}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function isReplToggleShortcut(event: KeyboardEvent): boolean {
+  const isP =
+    event.code === "KeyP" ||
+    event.key === "p" ||
+    event.key === "P" ||
+    event.key === "π";
+  if (!isP) return false;
+  if (!event.altKey) return false;
+  if (event.shiftKey) return false;
+  return event.metaKey || event.ctrlKey;
+}
+
+export async function evaluateReplExpression(
+  code: string,
+  runtime: DocumentRuntime,
+  ref: WordReviewEditorRef | null = null,
+): Promise<unknown> {
+  type ReplFn = (
+    runtime: DocumentRuntime,
+    ref: WordReviewEditorRef | null,
+  ) => Promise<unknown>;
+  let fn: ReplFn | null = null;
+  try {
+    fn = new Function(
+      "runtime",
+      "ref",
+      `return (async () => { return (${code}); })();`,
+    ) as ReplFn;
+  } catch (exprError) {
+    if (!(exprError instanceof SyntaxError)) throw exprError;
+  }
+  if (fn === null) {
+    fn = new Function(
+      "runtime",
+      "ref",
+      `return (async () => { ${code}\n })();`,
+    ) as ReplFn;
+  }
+  return await fn(runtime, ref);
+}
+
+export function formatReplValue(value: unknown): string {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  const type = typeof value;
+  if (type === "string") return JSON.stringify(value);
+  if (type === "number" || type === "boolean" || type === "bigint") {
+    return String(value);
+  }
+  if (type === "symbol") return value.toString();
+  if (type === "function") {
+    const fn = value as (...args: unknown[]) => unknown;
+    return `[Function${fn.name ? `: ${fn.name}` : ""}]`;
+  }
+  try {
+    const serialized = JSON.stringify(value, createCircularReplacer(), 2);
+    if (serialized === undefined) {
+      return String(value);
+    }
+    return truncate(serialized, MAX_OUTPUT_CHARS);
+  } catch (error) {
+    return `[unserializable value: ${formatReplError(error)}]`;
+  }
+}
+
+export function formatReplError(error: unknown): string {
+  if (error instanceof Error) {
+    const name = error.name || "Error";
+    return truncate(`${name}: ${error.message}`, MAX_OUTPUT_CHARS);
+  }
+  return truncate(String(error), MAX_OUTPUT_CHARS);
+}
+
+function createCircularReplacer(): (key: string, value: unknown) => unknown {
+  const seen = new WeakSet<object>();
+  return function replacer(_key: string, value: unknown): unknown {
+    if (typeof value === "bigint") return `${value.toString()}n`;
+    if (typeof value === "function") {
+      const fn = value as (...args: unknown[]) => unknown;
+      return `[Function${fn.name ? `: ${fn.name}` : ""}]`;
+    }
+    if (typeof value === "symbol") return value.toString();
+    if (value !== null && typeof value === "object") {
+      if (seen.has(value as object)) return "[Circular]";
+      seen.add(value as object);
+    }
+    return value;
+  };
+}
+
+function truncate(text: string, max: number): string {
+  if (text.length <= max) return text;
+  return `${text.slice(0, max)}\n... [truncated ${text.length - max} chars]`;
+}
+
+export function appendHistoryEntry(
+  history: readonly string[],
+  code: string,
+): readonly string[] {
+  const trimmed = code.trim();
+  if (trimmed.length === 0) return history;
+  if (history.length > 0 && history[history.length - 1] === trimmed) {
+    return history;
+  }
+  return history.length >= MAX_HISTORY
+    ? [...history.slice(history.length - MAX_HISTORY + 1), trimmed]
+    : [...history, trimmed];
+}
+
+export function loadPersistedHistory(): readonly string[] {
+  if (typeof window === "undefined") return [];
+  try {
+    const raw = window.localStorage.getItem(HISTORY_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed: unknown = JSON.parse(raw);
+    if (
+      typeof parsed !== "object" ||
+      parsed === null ||
+      !("version" in parsed) ||
+      !("entries" in parsed)
+    ) {
+      return [];
+    }
+    const record = parsed as { version: unknown; entries: unknown };
+    if (record.version !== HISTORY_STORAGE_VERSION) return [];
+    if (!Array.isArray(record.entries)) return [];
+    const strings = record.entries.filter(
+      (entry): entry is string => typeof entry === "string" && entry.length > 0,
+    );
+    return strings.slice(-MAX_HISTORY);
+  } catch {
+    return [];
+  }
+}
+
+export function savePersistedHistory(history: readonly string[]): void {
+  if (typeof window === "undefined") return;
+  try {
+    const payload = JSON.stringify({
+      version: HISTORY_STORAGE_VERSION,
+      entries: history.slice(-MAX_HISTORY),
+    });
+    window.localStorage.setItem(HISTORY_STORAGE_KEY, payload);
+  } catch {
+    return;
+  }
+}
+
+export function clearPersistedHistory(): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(HISTORY_STORAGE_KEY);
+  } catch {
+    return;
+  }
+}

package/src/ui-tailwind/editor-surface/pm-schema.ts

@@ -498,6 +498,8 @@ export const editorSchema = new Schema({
         wrapMode: { default: null },
         distMargins: { default: null },
         positionH: { default: null },
+        positionV: { default: null },
+        renderInPageOverlay: { default: false },
         // Lane 6d N9.b — polygon clip for tight/through wrap.
         wrapPolygon: { default: null },
         // Lane 6d N11.b — CSS filter effects (soft-edge, outer shadow, glow).
@@ -508,9 +510,21 @@ export const editorSchema = new Schema({
       toDOM(node) {
         const isMissing = node.attrs.state === "missing";
         const isFloating = node.attrs.display === "floating";
+        const renderInPageOverlay = Boolean(node.attrs.renderInPageOverlay);
         const src = node.attrs.src as string | null;
         const widthEmu = node.attrs.widthEmu as number | null;
         const heightEmu = node.attrs.heightEmu as number | null;
+        if (renderInPageOverlay && isFloating) {
+          return [
+            "span",
+            {
+              class: "inline-block h-0 w-0 overflow-hidden align-middle",
+              "data-node-type": "image-floating-anchor",
+              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Floating image anchor",
+              "aria-hidden": "true",
+            },
+          ];
+        }
         if (!isMissing && src) {
           const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / EMU_PER_PX)) : undefined;
           const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / EMU_PER_PX)) : undefined;