@beyondwork/docx-react-component 1.0.41 → 1.0.43

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

@@ -178,24 +178,24 @@ export const editorSchema = new Schema({
         const spacingBefore = node.attrs.spacingBefore as number | null;
         const contextualSpacingBefore = node.attrs.contextualSpacingBefore as boolean | null;
         if (contextualSpacingBefore) styles.push("margin-top: 0");
-        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}pt`);
         const contextualSpacingAfter = node.attrs.contextualSpacingAfter as boolean | null;
         const spacingAfter = node.attrs.spacingAfter as number | null;
         if (contextualSpacingAfter) styles.push("margin-bottom: 0");
-        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}pt`);
         const lineSpacing = node.attrs.lineSpacing as number | null;
         const lineRule = node.attrs.lineRule as string | null;
         if (lineSpacing && lineRule === "auto") styles.push(`line-height: ${lineSpacing / 240}`);
-        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}px`);
-        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}px`);
+        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}pt`);
+        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}pt`);
         const indentLeft = node.attrs.indentLeft as number | null;
-        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}px`);
+        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}pt`);
         const indentRight = node.attrs.indentRight as number | null;
-        if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
+        if (indentRight) styles.push(`padding-right: ${indentRight / 20}pt`);
         const indentFirstLine = node.attrs.indentFirstLine as number | null;
         const indentHanging = node.attrs.indentHanging as number | null;
-        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}px`);
-        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}pt`);
+        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}pt`);
         const shadingColor = safeHexColor(node.attrs.shadingFill as string | null);
         if (shadingColor) styles.push(`background-color: ${shadingColor}`);
         for (const [side, attrName] of [["top", "borderTop"], ["bottom", "borderBottom"], ["left", "borderLeft"], ["right", "borderRight"]] as const) {
@@ -309,11 +309,13 @@ export const editorSchema = new Schema({
           }
 
           if (hasResolvedMarkerWidth) {
-            const markerWidthPx = Math.max(1, Math.round(numberingMarkerWidth / 20));
+            // P13.a: emit marker geometry in pt (twips/20 == pt) so it
+            // self-scales under CSS `zoom` and matches Word's intent.
+            const markerWidthPt = Math.max(1, numberingMarkerWidth / 20);
             prefixStyles.push(
-              `width: ${markerWidthPx}px`,
-              `min-width: ${markerWidthPx}px`,
-              `flex-basis: ${markerWidthPx}px`,
+              `width: ${markerWidthPt}pt`,
+              `min-width: ${markerWidthPt}pt`,
+              `flex-basis: ${markerWidthPt}pt`,
               `margin-right: 0`,
               `overflow: visible`,
             );
@@ -632,16 +634,51 @@ export const editorSchema = new Schema({
       selectable: false,
       attrs: {
         previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? "Chart";
+        if (previewSrc) {
+          // Bitmap-backed: render the fallback image Word cached in mc:Fallback.
+          // The corner chip preserves the typed identity so agents and humans
+          // still see "this is a chart" at a glance.
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "chart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-blue-200 bg-blue-50/90 px-1 py-0.5 text-[10px] text-blue-700",
+                "aria-hidden": "true",
+              },
+              "\uD83D\uDCC8 Chart",
+            ],
+          ];
+        }
         return [
           "span",
           {
             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",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? "Chart",
+            title: detail,
           },
           "\uD83D\uDCC8 Chart",
         ];
@@ -655,16 +692,48 @@ export const editorSchema = new Schema({
       selectable: false,
       attrs: {
         previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? "SmartArt";
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "smartart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-purple-200 bg-purple-50/90 px-1 py-0.5 text-[10px] text-purple-700",
+                "aria-hidden": "true",
+              },
+              "\uD83D\uDDFA SmartArt",
+            ],
+          ];
+        }
         return [
           "span",
           {
             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",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? "SmartArt",
+            title: detail,
           },
           "\uD83D\uDDFA SmartArt",
         ];
@@ -705,17 +774,50 @@ export const editorSchema = new Schema({
       attrs: {
         text: { default: "" },
         geometry: { default: null },
+        previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
         const text = node.attrs.text as string;
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? (text ? `WordArt: ${text}` : "WordArt");
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "wordart_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-orange-200 bg-orange-50/90 px-1 py-0.5 text-[10px] text-orange-700",
+                "aria-hidden": "true",
+              },
+              "\u2728 WordArt",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-orange-700 bg-orange-50 border border-orange-200 font-medium italic",
             "data-node-type": "wordart_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? `WordArt: ${text}`,
+            title: detail,
           },
           "\u2728 " + (text || "WordArt"),
         ];
@@ -730,18 +832,51 @@ export const editorSchema = new Schema({
       attrs: {
         text: { default: null },
         shapeType: { default: null },
+        previewMediaId: { default: null },
+        previewSrc: { default: null },
         detail: { default: null },
       },
       toDOM(node) {
         const text = node.attrs.text as string | null;
         const label = text ? `VML: ${text}` : "VML shape";
+        const previewSrc = node.attrs.previewSrc as string | null;
+        const detail = (node.attrs.detail as string) ?? label;
+        if (previewSrc) {
+          return [
+            "span",
+            {
+              class: "relative inline-block align-baseline mx-0.5 max-w-full",
+              "data-node-type": "vml_atom",
+              "data-preview-media-id": (node.attrs.previewMediaId as string) ?? "",
+              contenteditable: "false",
+              title: detail,
+            },
+            [
+              "img",
+              {
+                src: previewSrc,
+                alt: detail,
+                class: "block max-w-full h-auto",
+                draggable: "false",
+              },
+            ],
+            [
+              "span",
+              {
+                class: "absolute top-1 right-1 inline-flex items-center gap-0.5 rounded border border-gray-300 bg-gray-100/90 px-1 py-0.5 text-[10px] text-gray-600",
+                "aria-hidden": "true",
+              },
+              "\u25A6 VML",
+            ],
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-gray-600 bg-gray-100 border border-gray-300",
             "data-node-type": "vml_atom",
             contenteditable: "false",
-            title: (node.attrs.detail as string) ?? label,
+            title: detail,
           },
           "\u25A6 " + label,
         ];
@@ -757,10 +892,25 @@ export const editorSchema = new Schema({
         warningId: { default: "" },
         label: { default: "Locked" },
         detail: { default: "" },
+        presentation: { default: "callout" },
       },
       toDOM(node) {
         const fragmentId = node.attrs.fragmentId as string;
         const isPreview = fragmentId.startsWith("preview:");
+        const presentation = node.attrs.presentation as string;
+        if (presentation === "quiet-marker") {
+          return [
+            "div",
+            {
+              class: "block h-0 w-0 overflow-hidden",
+              contenteditable: "false",
+              "data-node-type": "opaque_block",
+              "data-block-presentation": "quiet-marker",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+          ];
+        }
         return [
           "div",
           {
@@ -889,7 +1039,7 @@ export const editorSchema = new Schema({
       attrs: { value: { default: 0 } },
       toDOM(mark) {
         const twips = mark.attrs.value as number;
-        return ["span", { style: `letter-spacing: ${twips / 20}px` }, 0];
+        return ["span", { style: `letter-spacing: ${twips / 20}pt` }, 0];
       },
     },
     font_kerning: {

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

@@ -268,7 +268,7 @@ function buildPMBlocks(
     } else if (block.kind === "sdt_block") {
       nodes.push(buildSdtBlock(block, mediaPreviews, showUnsupportedObjectPreviews));
     } else {
-      nodes.push(buildOpaqueBlock(block));
+      nodes.push(buildOpaqueBlock(block, showUnsupportedObjectPreviews));
     }
   }
 
@@ -366,7 +366,13 @@ function buildParagraph(
       indentRight: paragraphLayout.indentation?.right ?? null,
       indentFirstLine: paragraphLayout.indentation?.firstLine ?? null,
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
-      numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
+      numberingMarkerWidth:
+        paragraphLayout.markerLane?.width ??
+        paragraphLayout.indentation?.hanging ??
+        (paragraphLayout.indentation?.firstLine !== undefined &&
+        paragraphLayout.indentation.firstLine < 0
+          ? Math.abs(paragraphLayout.indentation.firstLine)
+          : null),
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
       numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,
       shadingFill: block.shading?.fill ?? cascade?.shading?.fill ?? null,
@@ -453,7 +459,7 @@ function buildInlineContent(
       }
 
     case "opaque_inline":
-      return [buildOpaqueInlineOrComplexAtom(segment, showUnsupportedObjectPreviews)];
+      return [buildOpaqueInlineOrComplexAtom(segment, mediaPreviews, showUnsupportedObjectPreviews)];
 
     case "note_ref": {
       const text = editorSchema.text(
@@ -602,6 +608,7 @@ const UNSUPPORTED_COMPLEX_PREVIEW_LABELS = new Set<string>([
  */
 function buildOpaqueInlineOrComplexAtom(
   segment: Extract<import("../../api/public-types").SurfaceInlineSegment, { kind: "opaque_inline" }>,
+  mediaPreviews: Record<string, MediaPreviewDescriptor>,
   showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   const label = segment.label;
@@ -618,11 +625,30 @@ function buildOpaqueInlineOrComplexAtom(
     });
   }
 
-  if (showUnsupportedObjectPreviews && label === "Embedded chart") {
-    return editorSchema.nodes.chart_atom.create({ detail });
+  // Bitmap-backed complex objects always upgrade to the typed atom so the
+  // reviewer sees Word's own cached rendering regardless of the debug-preview
+  // flag.  The flag still gates the badge-only path for shape/wordart/vml
+  // families (below) which are decoration-weight.  Chart and SmartArt are
+  // *always* rendered as typed atoms regardless of flag — a silent quiet
+  // marker over a chart leaves the reviewer with no signal that data is
+  // missing, which is worse than the small cost of an always-visible chip.
+  const previewSrc = segment.previewMediaId
+    ? mediaPreviews[segment.previewMediaId]?.src ?? null
+    : null;
+
+  if (label === "Embedded chart") {
+    return editorSchema.nodes.chart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
-  if (showUnsupportedObjectPreviews && label === "SmartArt diagram") {
-    return editorSchema.nodes.smartart_atom.create({ detail });
+  if (label === "SmartArt diagram") {
+    return editorSchema.nodes.smartart_atom.create({
+      previewMediaId: segment.previewMediaId ?? null,
+      previewSrc,
+      detail,
+    });
   }
   if (showUnsupportedObjectPreviews && (label === "Drawing shape" || label === "Text box")) {
     const textMatch = /(?:Text content|Content): "([^"]+)"/.exec(detail);
@@ -672,12 +698,14 @@ function buildOpaqueInlineOrComplexAtom(
 
 function buildOpaqueBlock(
   block: Extract<SurfaceBlockSnapshot, { kind: "opaque_block" }>,
+  showUnsupportedObjectPreviews: boolean,
 ): PMNode {
   return editorSchema.nodes.opaque_block.create({
     fragmentId: block.fragmentId,
     warningId: block.warningId,
     label: block.label,
     detail: block.detail,
+    presentation: showUnsupportedObjectPreviews ? "callout" : "quiet-marker",
   });
 }
 

package/src/ui-tailwind/editor-surface/remote-cursor-plugin.ts

@@ -12,6 +12,23 @@ import {
   type RemoteCursorState,
 } from "../../runtime/collab/remote-cursor-awareness";
 
+/**
+ * Remote `cursor.color` comes straight off Yjs Awareness — another peer
+ * can set it to anything.  Validate to a narrow CSS-color allowlist
+ * before interpolating into an inline style, otherwise a malicious peer
+ * could inject arbitrary CSS declarations via `; background: url(...)`.
+ * Returns a fallback neutral color when the input is rejected.
+ */
+const SAFE_REMOTE_CURSOR_FALLBACK = "#6b7280";
+function safeRemoteCursorColor(raw: unknown): string {
+  if (typeof raw !== "string") return SAFE_REMOTE_CURSOR_FALLBACK;
+  const value = raw.trim();
+  if (value.length === 0 || value.length > 32) return SAFE_REMOTE_CURSOR_FALLBACK;
+  if (/^#[0-9a-fA-F]{3}$|^#[0-9a-fA-F]{6}$|^#[0-9a-fA-F]{8}$/.test(value)) return value;
+  if (/^rgba?\(\s*\d+(\.\d+)?%?(\s*,\s*\d+(\.\d+)?%?){2,3}\s*\)$/.test(value)) return value;
+  return SAFE_REMOTE_CURSOR_FALLBACK;
+}
+
 interface RemoteCursorPluginState {
   cursors: RemoteCursorState[];
 }
@@ -68,7 +85,7 @@ export function createRemoteCursorPlugin(
       if (from !== to) {
         decorations.push(
           Decoration.inline(from, to, {
-            style: `background-color: ${cursor.color}33;`,
+            style: `background-color: ${safeRemoteCursorColor(cursor.color)}33;`,
             class: "remote-cursor-selection",
           }),
         );
@@ -149,7 +166,7 @@ function createCursorWidget(cursor: RemoteCursorState): HTMLElement {
     top: -0.2em;
     width: 2px;
     height: 1.2em;
-    background-color: ${cursor.color};
+    background-color: ${safeRemoteCursorColor(cursor.color)};
     border-radius: 1px;
   `;
   container.appendChild(caret);
@@ -163,7 +180,7 @@ function createCursorWidget(cursor: RemoteCursorState): HTMLElement {
     font-family: system-ui, -apple-system, sans-serif;
     font-weight: 500;
     color: white;
-    background-color: ${cursor.color};
+    background-color: ${safeRemoteCursorColor(cursor.color)};
     padding: 1px 4px;
     border-radius: 3px;
     white-space: nowrap;