@beyondwork/docx-react-component 1.0.38 → 1.0.39

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

@@ -1,4 +1,4 @@
-import { Fragment, type Node as PMNode } from "prosemirror-model";
+import { Fragment, type Mark, type Node as PMNode, type Schema } from "prosemirror-model";
 import { EditorState, NodeSelection, type Plugin, Selection, TextSelection } from "prosemirror-state";
 
 import type {
@@ -17,6 +17,123 @@ export interface PMStateResult {
   positionMap: PositionMap;
 }
 
+/**
+ * Test-friendly wrapper: build a PM EditorState from a minimal snapshot with no
+ * selection or plugins. The snapshot is cast to EditorSurfaceSnapshot so callers
+ * can pass partial objects in tests.
+ */
+export function buildPmStateFromSnapshot(snapshot: EditorSurfaceSnapshot): EditorState {
+  const doc = buildPMDoc(snapshot, {}, false);
+  return EditorState.create({ doc, plugins: [] });
+}
+
+/**
+ * Build the set of PM marks for a text segment by merging direct marks with the
+ * cascaded resolvedRunFormatting. Direct marks win over cascade values.
+ */
+function applyEffectiveMarks(
+  segment: Extract<SurfaceInlineSegment, { kind: "text" }>,
+  schema: Schema,
+): Mark[] {
+  const marks: Mark[] = [];
+  const directList = segment.marks ?? [];
+  const directAttrs = segment.markAttrs ?? {};
+  const cascade = segment.resolvedRunFormatting ?? {};
+
+  // Boolean marks: direct presence wins; direct absence (explicit false in markAttrs is not
+  // representable in the marks array, so we check the marks array truthiness).
+  // If the mark is absent from the direct marks list but cascade supplies it, apply it.
+  const hasDirect = (name: string) => directList.includes(name as never);
+
+  // bold
+  const directBold = hasDirect("bold");
+  const cascadeBold = cascade.bold === true;
+  if (directBold || (!("bold" in directAttrs) && cascadeBold)) {
+    marks.push(schema.marks.bold.create());
+  }
+
+  // italic
+  const directItalic = hasDirect("italic");
+  const cascadeItalic = cascade.italic === true;
+  if (directItalic || (!("italic" in directAttrs) && cascadeItalic)) {
+    marks.push(schema.marks.italic.create());
+  }
+
+  // underline
+  const directUnderline = hasDirect("underline");
+  const cascadeUnderline = cascade.underline && cascade.underline !== "none";
+  if (directUnderline || (!("underline" in directAttrs) && cascadeUnderline)) {
+    marks.push(schema.marks.underline.create());
+  }
+
+  // strikethrough
+  const directStrikethrough = hasDirect("strikethrough");
+  const cascadeStrikethrough = cascade.strikethrough === true;
+  if (directStrikethrough || (!("strikethrough" in directAttrs) && cascadeStrikethrough)) {
+    marks.push(schema.marks.strikethrough.create());
+  }
+
+  // pass-through marks from marks array (no cascade equivalent)
+  if (hasDirect("doubleStrikethrough")) marks.push(schema.marks.doubleStrikethrough.create());
+  if (hasDirect("vanish")) marks.push(schema.marks.vanish.create());
+  if (hasDirect("emboss")) marks.push(schema.marks.emboss.create());
+  if (hasDirect("imprint")) marks.push(schema.marks.imprint.create());
+  if (hasDirect("shadow")) marks.push(schema.marks.shadow.create());
+
+  // smallCaps / allCaps
+  if (hasDirect("smallCaps")) marks.push(schema.marks.small_caps.create());
+  if (hasDirect("allCaps")) marks.push(schema.marks.all_caps.create());
+
+  // superscript / subscript from marks array
+  if (hasDirect("superscript")) marks.push(schema.marks.superscript.create());
+  if (hasDirect("subscript")) marks.push(schema.marks.subscript.create());
+
+  // fontSize: direct.markAttrs.fontSize is in half-points; cascade.fontSizeHalfPoints is half-points
+  const directFontSize = typeof directAttrs.fontSize === "number" ? directAttrs.fontSize / 2 : undefined;
+  const cascadeFontSize = typeof cascade.fontSizeHalfPoints === "number" ? cascade.fontSizeHalfPoints / 2 : undefined;
+  const effectiveFontSize = directFontSize ?? cascadeFontSize;
+  if (typeof effectiveFontSize === "number") {
+    marks.push(schema.marks.font_size.create({ size: effectiveFontSize }));
+  }
+
+  // fontFamily: direct.markAttrs.fontFamily wins over cascade
+  const effectiveFontFamily = directAttrs.fontFamily ?? cascade.fontFamily ?? cascade.fontFamilyAscii;
+  if (effectiveFontFamily) {
+    marks.push(schema.marks.font_family.create({ family: effectiveFontFamily }));
+  }
+
+  // textColor: direct.markAttrs.textColor wins over cascade.colorHex
+  if (directAttrs.textFill && !directAttrs.textColor) {
+    const colorMatch = directAttrs.textFill.match(/\bval="([0-9A-Fa-f]{6})"/);
+    if (colorMatch) {
+      marks.push(schema.marks.text_color.create({ color: `#${colorMatch[1]}` }));
+    }
+  } else {
+    const directColor = directAttrs.textColor ? `#${directAttrs.textColor}` : undefined;
+    const cascadeColor = cascade.colorHex && cascade.colorHex !== "auto" ? `#${cascade.colorHex}` : undefined;
+    const effectiveColor = directColor ?? cascadeColor;
+    if (effectiveColor) {
+      marks.push(schema.marks.text_color.create({ color: effectiveColor }));
+    }
+  }
+
+  // highlight / background color
+  const effectiveBg = directAttrs.backgroundColor;
+  if (effectiveBg) {
+    marks.push(schema.marks.highlight.create({ color: `#${effectiveBg}` }));
+  }
+
+  // charSpacing / kerning
+  if (typeof directAttrs.charSpacing === "number") {
+    marks.push(schema.marks.char_spacing.create({ value: directAttrs.charSpacing }));
+  }
+  if (typeof directAttrs.kerning === "number") {
+    marks.push(schema.marks.font_kerning.create({ threshold: directAttrs.kerning }));
+  }
+
+  return marks;
+}
+
 export interface MediaPreviewDescriptor {
   src: string;
   widthEmu?: number;
@@ -222,6 +339,9 @@ function buildParagraph(
       (previousParagraph.styleId ?? "__default__") === (block.styleId ?? "__default__"),
   );
 
+  const cascade = block.resolvedParagraphFormatting;
+  const cascadeBorders = cascade?.borders as Record<string, unknown> | undefined;
+
   return editorSchema.nodes.paragraph.create(
     {
       styleId: block.styleId ?? null,
@@ -233,12 +353,12 @@ function buildParagraph(
       numberingSuffix:
         (block as typeof block & { numberingSuffix?: string }).numberingSuffix ??
         null,
-      alignment: block.alignment ?? null,
+      alignment: block.alignment ?? cascade?.alignment ?? null,
       spacingBefore: paragraphLayout.spacing?.before ?? null,
       spacingAfter: paragraphLayout.spacing?.after ?? null,
       lineSpacing: paragraphLayout.spacing?.line ?? null,
       lineRule: paragraphLayout.spacing?.lineRule ?? null,
-      contextualSpacing: block.contextualSpacing ?? null,
+      contextualSpacing: block.contextualSpacing ?? cascade?.contextualSpacing ?? null,
       listContinuation: listContinuation || null,
       contextualSpacingBefore: contextualSpacingBefore || null,
       contextualSpacingAfter: contextualSpacingAfter || null,
@@ -248,14 +368,15 @@ function buildParagraph(
       indentHanging: paragraphLayout.indentation?.hanging ?? null,
       numberingMarkerWidth: paragraphLayout.markerLane?.width ?? null,
       numberingMarkerJustification: paragraphLayout.markerJustification ?? null,
-      shadingFill: block.shading?.fill ?? null,
-      borderTop: (block.borders as Record<string, unknown>)?.top ?? null,
-      borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? null,
-      borderLeft: (block.borders as Record<string, unknown>)?.left ?? null,
-      borderRight: (block.borders as Record<string, unknown>)?.right ?? null,
-      outlineLevel: block.outlineLevel ?? null,
-      bidi: block.bidi ?? null,
-      pageBreakBefore: block.pageBreakBefore ?? null,
+      numberingMarkerRunProperties: block.resolvedNumbering?.markerRunProperties ?? null,
+      shadingFill: block.shading?.fill ?? cascade?.shading?.fill ?? null,
+      borderTop: (block.borders as Record<string, unknown>)?.top ?? cascadeBorders?.top ?? null,
+      borderBottom: (block.borders as Record<string, unknown>)?.bottom ?? cascadeBorders?.bottom ?? null,
+      borderLeft: (block.borders as Record<string, unknown>)?.left ?? cascadeBorders?.left ?? null,
+      borderRight: (block.borders as Record<string, unknown>)?.right ?? cascadeBorders?.right ?? null,
+      outlineLevel: block.outlineLevel ?? cascade?.outlineLevel ?? null,
+      bidi: block.bidi ?? cascade?.bidi ?? null,
+      pageBreakBefore: block.pageBreakBefore ?? cascade?.pageBreakBefore ?? null,
       hiddenTextOnly: fullyVanishedParagraph || null,
     },
     content.length > 0 ? Fragment.from(content) : undefined,
@@ -275,9 +396,16 @@ function resolveParagraphLayout(
     NonNullable<Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["resolvedNumbering"]>["geometry"]["markerJustification"]
   > | undefined;
 } {
+  const cascadeFormatting = block.resolvedParagraphFormatting;
   return {
-    spacing: block.resolvedNumbering?.geometry.spacing ?? block.spacing,
-    indentation: block.resolvedNumbering?.geometry.indentation ?? block.indentation,
+    spacing:
+      block.resolvedNumbering?.geometry.spacing ??
+      block.spacing ??
+      cascadeFormatting?.spacing,
+    indentation:
+      block.resolvedNumbering?.geometry.indentation ??
+      block.indentation ??
+      cascadeFormatting?.indentation,
     tabStops: block.resolvedNumbering?.geometry.tabStops ?? block.tabStops ?? [],
     markerLane: block.resolvedNumbering?.geometry.markerLane,
     markerJustification: block.resolvedNumbering?.geometry.markerJustification,
@@ -293,55 +421,7 @@ function buildInlineContent(
     case "text": {
       if (!segment.text) return [];
 
-      // Build PM marks from segment marks
-      let marks = editorSchema.marks.bold.isInSet([])
-        ? [] // shouldn't happen, just type safety
-        : [];
-
-      const pmMarks = [];
-      if (segment.marks) {
-        for (const mark of segment.marks) {
-          // Map surface mark names that differ from PM schema mark names
-          if (mark === "smallCaps") {
-            pmMarks.push(editorSchema.marks.small_caps.create());
-            continue;
-          }
-          if (mark === "allCaps") {
-            pmMarks.push(editorSchema.marks.all_caps.create());
-            continue;
-          }
-          const pmMark = editorSchema.marks[mark];
-          if (pmMark) {
-            pmMarks.push(pmMark.create());
-          }
-        }
-      }
-      if (segment.kind === "text" && segment.markAttrs) {
-        if (segment.markAttrs.backgroundColor) {
-          pmMarks.push(editorSchema.marks.highlight.create({ color: `#${segment.markAttrs.backgroundColor}` }));
-        }
-        if (segment.markAttrs.fontFamily) {
-          pmMarks.push(editorSchema.marks.font_family.create({ family: segment.markAttrs.fontFamily }));
-        }
-        if (segment.markAttrs.fontSize) {
-          pmMarks.push(editorSchema.marks.font_size.create({ size: segment.markAttrs.fontSize / 2 }));
-        }
-        if (segment.markAttrs.textColor) {
-          pmMarks.push(editorSchema.marks.text_color.create({ color: `#${segment.markAttrs.textColor}` }));
-        }
-        if (segment.markAttrs.charSpacing) {
-          pmMarks.push(editorSchema.marks.char_spacing.create({ value: segment.markAttrs.charSpacing }));
-        }
-        if (segment.markAttrs.kerning) {
-          pmMarks.push(editorSchema.marks.font_kerning.create({ threshold: segment.markAttrs.kerning }));
-        }
-        if (segment.markAttrs.textFill && !segment.markAttrs.textColor) {
-          const colorMatch = segment.markAttrs.textFill.match(/\bval="([0-9A-Fa-f]{6})"/);
-          if (colorMatch) {
-            pmMarks.push(editorSchema.marks.text_color.create({ color: `#${colorMatch[1]}` }));
-          }
-        }
-      }
+      const pmMarks = applyEffectiveMarks(segment, editorSchema);
       if (segment.hyperlinkHref) {
         pmMarks.push(editorSchema.marks.link.create({ href: segment.hyperlinkHref }));
       }
@@ -433,6 +513,7 @@ function buildTable(
             borderRight: cell.borderRight ?? null,
             borderBottom: cell.borderBottom ?? null,
             borderLeft: cell.borderLeft ?? null,
+            bandClasses: cell.bandClasses ?? null,
           },
           Fragment.from(cellContent),
         ),
@@ -460,6 +541,7 @@ function buildTable(
       tblLookLastColumn: block.tblLook?.lastColumn ?? false,
       tblLookNoHBand: block.tblLook?.noHBand ?? false,
       tblLookNoVBand: block.tblLook?.noVBand ?? false,
+      tblLookVal: block.tblLook?.val ?? null,
     },
     Fragment.from(rows),
   );

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

@@ -0,0 +1,179 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import type { EditorState, Transaction } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import type { EditorView } from "prosemirror-view";
+import type { Awareness } from "y-protocols/awareness";
+
+import type { EditorStoryTarget } from "../../api/public-types";
+import { storyTargetsEqual } from "../../core/selection/mapping";
+import type { PositionMap } from "./pm-position-map";
+import {
+  getRemoteCursorStates,
+  type RemoteCursorState,
+} from "../../runtime/collab/remote-cursor-awareness";
+
+interface RemoteCursorPluginState {
+  cursors: RemoteCursorState[];
+}
+
+export const remoteCursorPluginKey = new PluginKey<RemoteCursorPluginState>(
+  "remoteCursor",
+);
+
+export interface RemoteCursorPluginOptions {
+  awareness: Awareness;
+  localClientId: number;
+  getPositionMap: () => PositionMap | null;
+  getActiveStory: () => EditorStoryTarget;
+}
+
+export function createRemoteCursorPlugin(
+  options: RemoteCursorPluginOptions,
+): Plugin<RemoteCursorPluginState> {
+  const { awareness, localClientId, getPositionMap, getActiveStory } = options;
+
+  function computeCursors(): RemoteCursorState[] {
+    const activeStory = getActiveStory();
+    const allCursors = getRemoteCursorStates(awareness, localClientId);
+    return allCursors.filter((cursor) =>
+      storyTargetsEqual(cursor.storyTarget, activeStory),
+    );
+  }
+
+  function buildDecorations(state: EditorState): DecorationSet {
+    const positionMap = getPositionMap();
+    if (!positionMap) {
+      return DecorationSet.empty;
+    }
+
+    const pluginState = remoteCursorPluginKey.getState(state);
+    const cursors = pluginState?.cursors ?? [];
+    if (cursors.length === 0) {
+      return DecorationSet.empty;
+    }
+
+    const decorations: Decoration[] = [];
+
+    for (const cursor of cursors) {
+      const pmAnchor = positionMap.runtimeToPm(cursor.anchor);
+      const pmHead = positionMap.runtimeToPm(cursor.head);
+
+      const from = Math.min(pmAnchor, pmHead);
+      const to = Math.max(pmAnchor, pmHead);
+
+      if (from < 1 || to > state.doc.content.size) {
+        continue;
+      }
+
+      if (from !== to) {
+        decorations.push(
+          Decoration.inline(from, to, {
+            style: `background-color: ${cursor.color}33;`,
+            class: "remote-cursor-selection",
+          }),
+        );
+      }
+
+      decorations.push(
+        Decoration.widget(to, () => createCursorWidget(cursor), {
+          side: 1,
+          key: cursor.userId,
+        }),
+      );
+    }
+
+    return DecorationSet.create(state.doc, decorations);
+  }
+
+  const plugin = new Plugin<RemoteCursorPluginState>({
+    key: remoteCursorPluginKey,
+
+    state: {
+      init(): RemoteCursorPluginState {
+        return { cursors: computeCursors() };
+      },
+
+      apply(
+        tr: Transaction,
+        pluginState: RemoteCursorPluginState,
+      ): RemoteCursorPluginState {
+        const meta = tr.getMeta(remoteCursorPluginKey);
+        if (meta !== undefined) {
+          return meta;
+        }
+        return pluginState;
+      },
+    },
+
+    props: {
+      decorations(state: EditorState): DecorationSet {
+        return buildDecorations(state);
+      },
+    },
+
+    view(editorView: EditorView) {
+      const onChange = (): void => {
+        const newCursors = computeCursors();
+        const tr = editorView.state.tr.setMeta(remoteCursorPluginKey, {
+          cursors: newCursors,
+        });
+        editorView.dispatch(tr);
+      };
+
+      awareness.on("change", onChange);
+
+      return {
+        destroy() {
+          awareness.off("change", onChange);
+        },
+      };
+    },
+  });
+
+  return plugin;
+}
+
+function createCursorWidget(cursor: RemoteCursorState): HTMLElement {
+  const container = document.createElement("span");
+  container.className = "remote-cursor-widget";
+  container.style.cssText = `
+    position: relative;
+    display: inline-block;
+    pointer-events: none;
+  `;
+
+  const caret = document.createElement("span");
+  caret.style.cssText = `
+    position: absolute;
+    left: -1px;
+    top: -0.2em;
+    width: 2px;
+    height: 1.2em;
+    background-color: ${cursor.color};
+    border-radius: 1px;
+  `;
+  container.appendChild(caret);
+
+  const label = document.createElement("span");
+  label.style.cssText = `
+    position: absolute;
+    left: 0;
+    top: -1.4em;
+    font-size: 11px;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-weight: 500;
+    color: white;
+    background-color: ${cursor.color};
+    padding: 1px 4px;
+    border-radius: 3px;
+    white-space: nowrap;
+    line-height: 1.3;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  `;
+  label.textContent = cursor.displayName;
+  container.appendChild(label);
+
+  return container;
+}
+
+export type { RemoteCursorState };