@beyondwork/docx-react-component 1.0.54 → 1.0.56

package/src/ui/WordReviewEditor.tsx

@@ -220,6 +220,12 @@ import {
   getCursorColorForUser,
   setLocalCursorState,
 } from "../runtime/collab/remote-cursor-awareness.ts";
+import {
+  stableChartId,
+} from "../runtime/chart/chart-model-store.ts";
+import {
+  projectChartSnapshot,
+} from "../runtime/chart/chart-snapshot.ts";
 
 export {
   __createFallbackRuntime,
@@ -466,6 +472,40 @@ async function runConvertScopesToExternal(args: {
 
 // ---------------------------------------------------------------------------
 
+type CanonicalDocType = ReturnType<WordReviewEditorRuntime["getCanonicalDocument"]>;
+
+function collectChartSnapshots(doc: CanonicalDocType): import("../api/public-types").ChartSnapshot[] {
+  const results: import("../api/public-types").ChartSnapshot[] = [];
+  collectChartSnapshotsFromBlocks(doc.content.children, results);
+  return results;
+}
+
+function collectChartSnapshotsFromBlocks(
+  blocks: CanonicalDocType["content"]["children"],
+  results: import("../api/public-types").ChartSnapshot[],
+): void {
+  for (const block of blocks) {
+    if (block.type === "paragraph") {
+      for (const inline of block.children) {
+        if (inline.type === "chart_preview" && inline.parsedData) {
+          const chartId = stableChartId(inline.rawXml);
+          results.push(projectChartSnapshot(chartId, inline.parsedData));
+        }
+      }
+    } else if (block.type === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          collectChartSnapshotsFromBlocks(cell.children, results);
+        }
+      }
+    } else if (block.type === "sdt" || block.type === "custom_xml") {
+      collectChartSnapshotsFromBlocks(block.children, results);
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+
 export function __createWordReviewEditorRefBridge(
   runtime: WordReviewEditorRuntime,
   mountedSurface?: TwProseMirrorSurfaceRef | null,
@@ -514,6 +554,12 @@ export function __createWordReviewEditorRefBridge(
     getRenderSnapshot: () => clonePublicValue(runtime.getRenderSnapshot()),
     getCompatibilityReport: () => runtime.getCompatibilityReport(),
     getWarnings: () => runtime.getWarnings(),
+    getChartSnapshot: (chartId) => {
+      return collectChartSnapshots(runtime.getCanonicalDocument()).find(
+        (s) => s.chartId === chartId,
+      ) ?? null;
+    },
+    getChartSnapshots: () => collectChartSnapshots(runtime.getCanonicalDocument()),
     getCommentSidebarSnapshot: () =>
       clonePublicValue(runtime.getRenderSnapshot().comments),
     getTrackedChangesSnapshot: () =>
@@ -1537,6 +1583,11 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         getRenderSnapshot: () => clonePublicValue(activeRuntime.getRenderSnapshot()),
         getCompatibilityReport: () => activeRuntime.getCompatibilityReport(),
         getWarnings: () => activeRuntime.getWarnings(),
+        getChartSnapshot: (chartId) =>
+          collectChartSnapshots(activeRuntime.getCanonicalDocument()).find(
+            (s) => s.chartId === chartId,
+          ) ?? null,
+        getChartSnapshots: () => collectChartSnapshots(activeRuntime.getCanonicalDocument()),
         getCommentSidebarSnapshot: () =>
           clonePublicValue(activeRuntime.getRenderSnapshot().comments),
         getTrackedChangesSnapshot: () =>

package/src/ui-tailwind/editor-surface/chart-node-view.tsx

@@ -0,0 +1,90 @@
+/**
+ * ProseMirror NodeView for `chart_atom` (Stage 6).
+ *
+ * When `parsedChartId` is present in the node's attrs, looks up the
+ * `ChartStoreEntry` from `chartModelStore` and renders `ChartSurface` into the
+ * PM-provided DOM node using `ReactDOM.createRoot`. Falls back to the static
+ * `toDOM` output (bitmap preview or badge) when no parsed model is available.
+ *
+ * Each ChartNodeView instance owns a separate React root so chart renders are
+ * isolated and don't interfere with the host React tree. The root is unmounted
+ * in `destroy()`.
+ */
+
+import React from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { Node as PMNode } from "prosemirror-model";
+import type { NodeViewConstructor } from "prosemirror-view";
+import { ChartSurface } from "../chart/ChartSurface.tsx";
+import { chartModelStore } from "../../runtime/chart/chart-model-store.ts";
+
+const DEFAULT_WIDTH = 576;
+const DEFAULT_HEIGHT = 336;
+
+class ChartNodeViewInstance {
+  readonly dom: HTMLElement;
+  private _root: Root | null = null;
+
+  constructor(node: PMNode) {
+    this.dom = document.createElement("span");
+    this.dom.setAttribute("contenteditable", "false");
+    this.dom.setAttribute("data-node-type", "chart_atom");
+    this.dom.className = "inline-block align-baseline mx-0.5 max-w-full";
+    this._mount(node);
+  }
+
+  private _mount(node: PMNode): void {
+    const parsedChartId = node.attrs.parsedChartId as string | null;
+    if (!parsedChartId) return;
+
+    const entry = chartModelStore.get(parsedChartId);
+    if (!entry) return;
+
+    const width = (node.attrs.widthPx as number | null) ?? entry.widthPx ?? DEFAULT_WIDTH;
+    const height = (node.attrs.heightPx as number | null) ?? entry.heightPx ?? DEFAULT_HEIGHT;
+
+    const el = React.createElement(ChartSurface, {
+      model: entry.model,
+      width,
+      height,
+      theme: entry.theme,
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this.dom);
+    }
+    this._root.render(el);
+  }
+
+  update(node: PMNode): boolean {
+    const parsedChartId = node.attrs.parsedChartId as string | null;
+    if (!parsedChartId) return false;
+    this._mount(node);
+    return true;
+  }
+
+  destroy(): void {
+    if (this._root) {
+      this._root.unmount();
+      this._root = null;
+    }
+  }
+
+  stopEvent(): boolean {
+    return false;
+  }
+
+  ignoreMutation(): boolean {
+    return true;
+  }
+}
+
+/**
+ * NodeView factory map for `chart_atom`. Merge with `tableNodeViews` when
+ * constructing the `EditorView`:
+ *
+ *   new EditorView(mount, { nodeViews: { ...tableNodeViews, ...chartNodeViews }, ... })
+ */
+export const chartNodeViews: { [node: string]: NodeViewConstructor } = {
+  chart_atom: (node: PMNode) => new ChartNodeViewInstance(node),
+};

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

@@ -653,9 +653,14 @@ export const editorSchema = new Schema({
         previewMediaId: { default: null },
         previewSrc: { default: null },
         detail: { default: null },
+        /** Stage 6: stable chart ID keying into chartModelStore for native SVG render. */
+        parsedChartId: { default: null },
+        widthPx: { default: null },
+        heightPx: { default: null },
       },
       toDOM(node) {
         const previewSrc = node.attrs.previewSrc as string | null;
+        const previewMediaId = node.attrs.previewMediaId as string | null;
         const detail = (node.attrs.detail as string) ?? "Chart";
         if (previewSrc) {
           // Bitmap-backed: render the fallback image Word cached in mc:Fallback.
@@ -694,6 +699,7 @@ export const editorSchema = new Schema({
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-blue-700 bg-blue-50 border border-blue-200",
             "data-node-type": "chart_atom",
+            ...(previewMediaId ? { "data-preview-media-id": previewMediaId } : {}),
             contenteditable: "false",
             title: detail,
           },
@@ -714,6 +720,7 @@ export const editorSchema = new Schema({
       },
       toDOM(node) {
         const previewSrc = node.attrs.previewSrc as string | null;
+        const previewMediaId = node.attrs.previewMediaId as string | null;
         const detail = (node.attrs.detail as string) ?? "SmartArt";
         if (previewSrc) {
           return [
@@ -749,6 +756,7 @@ export const editorSchema = new Schema({
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-purple-700 bg-purple-50 border border-purple-200",
             "data-node-type": "smartart_atom",
+            ...(previewMediaId ? { "data-preview-media-id": previewMediaId } : {}),
             contenteditable: "false",
             title: detail,
           },

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -11,6 +11,7 @@ import type {
 } from "../../api/public-types";
 import { editorSchema } from "./pm-schema";
 import { buildPositionMap, type PositionMap } from "./pm-position-map";
+import { chartModelStore } from "../../runtime/chart/chart-model-store.ts";
 
 export interface PMStateResult {
   state: EditorState;
@@ -667,7 +668,6 @@ function buildOpaqueInlineOrComplexAtom(
 ): PMNode {
   const label = segment.label;
   const detail = segment.detail;
-
   if (segment.presentation === "text-box" || segment.presentation === "checkbox") {
     return editorSchema.nodes.opaque_inline.create({
       fragmentId: segment.fragmentId,
@@ -691,10 +691,23 @@ function buildOpaqueInlineOrComplexAtom(
     : null;
 
   if (label === "Embedded chart") {
+    const parsedChartId = segment.parsedChartId ?? null;
+    let widthPx: number | null = null;
+    let heightPx: number | null = null;
+    if (parsedChartId) {
+      const entry = chartModelStore.get(parsedChartId);
+      if (entry) {
+        widthPx = entry.widthPx;
+        heightPx = entry.heightPx;
+      }
+    }
     return editorSchema.nodes.chart_atom.create({
       previewMediaId: segment.previewMediaId ?? null,
       previewSrc,
       detail,
+      parsedChartId,
+      widthPx,
+      heightPx,
     });
   }
   if (label === "SmartArt diagram") {

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -73,6 +73,7 @@ import {
   createSurfaceDocumentBuildKey,
 } from "./surface-build-keys";
 import { tableNodeViews } from "./tw-table-node-view";
+import { chartNodeViews } from "./chart-node-view.tsx";
 import type { SelectionToolbarAnchor } from "../../ui/headless/selection-toolbar-model";
 import type { MediaPreviewDescriptor } from "./pm-state-from-snapshot";
 
@@ -742,7 +743,7 @@ export const TwProseMirrorSurface = forwardRef<
     if (!viewRef.current) {
       const view = new EditorView(mountRef.current, {
         state,
-        nodeViews: tableNodeViews,
+        nodeViews: { ...tableNodeViews, ...chartNodeViews },
         editable: () => canEdit,
         decorations: () => decorations,
       });