@beyondwork/docx-react-component 1.0.19 → 1.0.21

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

@@ -4,9 +4,156 @@ import type { CommentDecorationModel } from "../../ui/headless/comment-decoratio
 import { getCommentHighlightClass, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
 import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
 import { getRevisionHighlightClass } from "../../ui/headless/revision-decoration-model";
+import type {
+  EditorAnchorProjection,
+  EditorStoryTarget,
+  WorkflowBlockedCommandReason,
+  WorkflowCandidateRange,
+  WorkflowScope,
+} from "../../api/public-types";
+import { MAIN_STORY_TARGET, storyTargetsEqual } from "../../core/selection/mapping.ts";
 import type { PositionMap } from "./pm-position-map";
 import type { Node as PMNode } from "prosemirror-model";
 
+type RailDecorationSpec = {
+  railKind: "scope" | "candidate" | "blocked";
+  className: string;
+  attrs: Record<string, string>;
+};
+
+function getWorkflowInlineClass(scope: WorkflowScope): string {
+  if (scope.mode === "edit") return "wre-workflow-inline wre-workflow-inline-edit";
+  if (scope.mode === "suggest") return "wre-workflow-inline wre-workflow-inline-suggest";
+  if (scope.mode === "comment") return "wre-workflow-inline wre-workflow-inline-comment";
+  return "wre-workflow-inline wre-workflow-inline-view";
+}
+
+function getWorkflowRailClass(scope: WorkflowScope): string {
+  if (scope.mode === "edit") return "wre-workflow-rail wre-workflow-rail-edit";
+  if (scope.mode === "suggest") return "wre-workflow-rail wre-workflow-rail-suggest";
+  if (scope.mode === "comment") return "wre-workflow-rail wre-workflow-rail-comment";
+  return "wre-workflow-rail wre-workflow-rail-view";
+}
+
+function getWorkflowCandidateInlineClass(): string {
+  return "wre-workflow-inline wre-workflow-inline-candidate";
+}
+
+function getWorkflowCandidateRailClass(): string {
+  return "wre-workflow-rail wre-workflow-rail-candidate";
+}
+
+function getWorkflowBlockedInlineClass(reason: WorkflowBlockedCommandReason): string {
+  if (reason.code === "workflow_blocked_import") {
+    return "wre-workflow-inline wre-workflow-inline-blocked-import";
+  }
+  return "wre-workflow-inline wre-workflow-inline-preserve-only";
+}
+
+function getWorkflowBlockedRailClass(reason: WorkflowBlockedCommandReason): string {
+  if (reason.code === "workflow_blocked_import") {
+    return "wre-workflow-rail wre-workflow-rail-blocked-import";
+  }
+  return "wre-workflow-rail wre-workflow-rail-preserve-only";
+}
+
+function hasBlockChildren(node: PMNode): boolean {
+  for (let index = 0; index < node.childCount; index += 1) {
+    if (node.child(index).isBlock) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function collectRailRanges(doc: PMNode, from: number, to: number): Array<{ from: number; to: number }> {
+  const effectiveTo = Math.max(to, from + 1);
+  const ranges = new Map<string, { from: number; to: number }>();
+  let fallbackFrom: number | null = null;
+  let fallbackTo: number | null = null;
+  let fallbackSize: number | null = null;
+
+  doc.descendants((node, pos) => {
+    if (!node.isBlock || node.type.name === "doc") {
+      return true;
+    }
+
+    const nodeFrom = pos;
+    const nodeTo = pos + node.nodeSize;
+    if (nodeTo <= from || nodeFrom >= effectiveTo) {
+      return true;
+    }
+
+    if (!hasBlockChildren(node)) {
+      ranges.set(`${nodeFrom}:${nodeTo}`, { from: nodeFrom, to: nodeTo });
+      return true;
+    }
+
+    if (nodeFrom <= from && nodeTo >= effectiveTo) {
+      const size = nodeTo - nodeFrom;
+      if (fallbackSize === null || size < fallbackSize) {
+        fallbackFrom = nodeFrom;
+        fallbackTo = nodeTo;
+        fallbackSize = size;
+      }
+    }
+
+    return true;
+  });
+
+  if (ranges.size > 0) {
+    return [...ranges.values()];
+  }
+
+  if (fallbackFrom !== null && fallbackTo !== null) {
+    return [{ from: fallbackFrom, to: fallbackTo }];
+  }
+
+  return [];
+}
+
+function buildAnchorPmRange(
+  anchor: EditorAnchorProjection,
+  positionMap: PositionMap,
+): { from: number; to: number; allowInline: boolean } | null {
+  if (anchor.kind === "detached") {
+    return null;
+  }
+
+  if (anchor.kind === "range") {
+    return {
+      from: positionMap.runtimeToPm(anchor.from),
+      to: positionMap.runtimeToPm(anchor.to),
+      allowInline: true,
+    };
+  }
+
+  const pmAt = positionMap.runtimeToPm(anchor.at);
+  return {
+    from: pmAt,
+    to: pmAt + 1,
+    allowInline: false,
+  };
+}
+
+function pushRailDecorations(
+  decorations: Decoration[],
+  doc: PMNode,
+  from: number,
+  to: number,
+  spec: RailDecorationSpec,
+): void {
+  for (const range of collectRailRanges(doc, from, to)) {
+    decorations.push(
+      Decoration.node(range.from, range.to, {
+        class: spec.className,
+        "data-workflow-rail": spec.railKind,
+        ...spec.attrs,
+      }),
+    );
+  }
+}
+
 /**
  * Build ProseMirror DecorationSet from runtime comment and revision models.
  *
@@ -21,6 +168,10 @@ export function buildDecorations(
   revisionModel: RevisionDecorationModel | undefined,
   markupDisplay: MarkupDisplay,
   showTrackedChanges = true,
+  workflowScopes?: readonly WorkflowScope[],
+  activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
+  workflowCandidates?: readonly WorkflowCandidateRange[],
+  workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
 ): DecorationSet {
   const decorations: Decoration[] = [];
 
@@ -94,5 +245,91 @@ export function buildDecorations(
     }
   }
 
+  if (workflowScopes) {
+    for (const scope of workflowScopes) {
+      const scopeStoryTarget = scope.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
+      if (!pmRange) continue;
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowInlineClass(scope),
+            "data-workflow-scope-id": scope.scopeId,
+            "data-workflow-scope-mode": scope.mode,
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "scope",
+        className: getWorkflowRailClass(scope),
+        attrs: {
+          "data-workflow-scope-id": scope.scopeId,
+          "data-workflow-scope-mode": scope.mode,
+        },
+      });
+    }
+  }
+
+  if (workflowCandidates) {
+    for (const candidate of workflowCandidates) {
+      const candidateStoryTarget = candidate.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(candidateStoryTarget, activeStory)) continue;
+      const pmRange = buildAnchorPmRange(candidate.anchor, positionMap);
+      if (!pmRange) continue;
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowCandidateInlineClass(),
+            "data-workflow-candidate-id": candidate.candidateId,
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "candidate",
+        className: getWorkflowCandidateRailClass(),
+        attrs: {
+          "data-workflow-candidate-id": candidate.candidateId,
+        },
+      });
+    }
+  }
+
+  if (workflowBlockedReasons) {
+    for (const reason of workflowBlockedReasons) {
+      if (
+        reason.code !== "workflow_preserve_only" &&
+        reason.code !== "workflow_blocked_import"
+      ) {
+        continue;
+      }
+      const reasonStoryTarget = reason.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(reasonStoryTarget, activeStory) || !reason.anchor) continue;
+      const pmRange = buildAnchorPmRange(reason.anchor, positionMap);
+      if (!pmRange) continue;
+
+      if (pmRange.allowInline && pmRange.from < pmRange.to) {
+        decorations.push(
+          Decoration.inline(pmRange.from, pmRange.to, {
+            class: getWorkflowBlockedInlineClass(reason),
+            "data-workflow-blocked-code": reason.code,
+          }),
+        );
+      }
+
+      pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
+        railKind: "blocked",
+        className: getWorkflowBlockedRailClass(reason),
+        attrs: {
+          "data-workflow-blocked-code": reason.code,
+        },
+      });
+    }
+  }
+
   return DecorationSet.create(doc, decorations);
 }

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -29,7 +29,7 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
       }
 
       for (const entry of entries) {
-        if (runtimePos >= entry.runtimeStart && runtimePos <= entry.runtimeEnd) {
+        if (runtimePos >= entry.runtimeStart && runtimePos < entry.runtimeEnd) {
           return entry.pmStart + (runtimePos - entry.runtimeStart);
         }
         if (runtimePos < entry.runtimeStart) {

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

@@ -16,14 +16,21 @@ function resolveHeadingLevel(
 ): number | null {
   if (styleId) {
     const normalized = styleId.toLowerCase();
-    const headingMatch = /^heading([1-6])$/.exec(normalized);
+    const compact = normalized.replace(/[\s_-]+/g, "");
+    const headingMatch = /^heading([1-6])$/.exec(compact);
     if (headingMatch) {
       return Number.parseInt(headingMatch[1], 10);
     }
-    if (normalized === "title") {
+    if (compact === "title") {
       return 1;
     }
-    if (normalized === "subtitle") {
+    if (compact === "subtitle") {
+      return 2;
+    }
+    if (compact === "tocheading") {
+      return 1;
+    }
+    if (/^(appendix|schedule|annex|exhibit|attachment)(heading|title)$/.test(compact)) {
       return 2;
     }
   }
@@ -74,6 +81,24 @@ function safeCssColor(raw: string | null | undefined): string | null {
   return null;
 }
 
+function sanitizeLinkHref(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) {
+    return trimmed;
+  }
+  const lower = trimmed.toLowerCase();
+  if (
+    lower.startsWith("http://") ||
+    lower.startsWith("https://") ||
+    lower.startsWith("mailto:") ||
+    lower.startsWith("tel:")
+  ) {
+    return trimmed;
+  }
+  return null;
+}
+
 /**
  * ProseMirror schema for the supported live surface slice.
  *
@@ -101,9 +126,14 @@ export const editorSchema = new Schema({
         spacingAfter: { default: null },
         lineSpacing: { default: null },
         lineRule: { default: null },
+        contextualSpacing: { default: null },
+        listContinuation: { default: null },
+        contextualSpacingBefore: { default: null },
+        contextualSpacingAfter: { default: null },
         indentLeft: { default: null },
         indentRight: { default: null },
         indentFirstLine: { default: null },
+        indentHanging: { default: null },
         shadingFill: { default: null },
         borderTop: { default: null },
         borderBottom: { default: null },
@@ -128,9 +158,13 @@ export const editorSchema = new Schema({
         const safeAlign = alignment === "both" ? "justify" : alignment;
         if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) styles.push(`text-align: ${safeAlign}`);
         const spacingBefore = node.attrs.spacingBefore as number | null;
-        if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        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`);
+        const contextualSpacingAfter = node.attrs.contextualSpacingAfter as boolean | null;
         const spacingAfter = node.attrs.spacingAfter as number | null;
-        if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        if (contextualSpacingAfter) styles.push("margin-bottom: 0");
+        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
         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}`);
@@ -141,7 +175,9 @@ export const editorSchema = new Schema({
         const indentRight = node.attrs.indentRight as number | null;
         if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
         const indentFirstLine = node.attrs.indentFirstLine as number | null;
-        if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        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`);
         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) {
@@ -160,6 +196,24 @@ export const editorSchema = new Schema({
         if (headingLevel) {
           attrs["data-heading-level"] = String(headingLevel);
         }
+        const isNumbered = node.attrs.numberingInstanceId !== null;
+        if (isNumbered) {
+          attrs["data-numbered"] = "true";
+        }
+        const contextualSpacing = node.attrs.contextualSpacing as boolean | null;
+        if (contextualSpacing) {
+          attrs["data-contextual-spacing"] = "true";
+        }
+        const listContinuation = node.attrs.listContinuation as boolean | null;
+        if (listContinuation) {
+          attrs["data-list-continuation"] = "true";
+        }
+        if (contextualSpacingBefore) {
+          attrs["data-contextual-spacing-before"] = "true";
+        }
+        if (contextualSpacingAfter) {
+          attrs["data-contextual-spacing-after"] = "true";
+        }
         if (styles.length > 0) attrs.style = styles.join("; ");
         const numberingPrefix = node.attrs.numberingPrefix as string | null;
         const numberingLevel = node.attrs.numberingLevel as number | null;
@@ -277,10 +331,43 @@ export const editorSchema = new Schema({
         state: { default: "editable" },
         display: { default: "inline" },
         detail: { default: null },
+        src: { default: null },
+        widthEmu: { default: null },
+        heightEmu: { default: null },
       },
       toDOM(node) {
         const isMissing = node.attrs.state === "missing";
         const isFloating = node.attrs.display === "floating";
+        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 (!isMissing && src) {
+          const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / 9525)) : undefined;
+          const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / 9525)) : undefined;
+          const style = [
+            "display:inline-block",
+            "vertical-align:middle",
+            "margin:0 4px",
+            widthPx ? `width:${widthPx}px` : "",
+            heightPx ? `height:${heightPx}px` : "",
+          ].filter(Boolean).join(";");
+          return [
+            "span",
+            {
+              class: "inline-flex items-center rounded",
+              "data-node-type": "image",
+              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
+            },
+            [
+              "img",
+              {
+                src,
+                alt: (node.attrs.altText as string) ?? "",
+                style,
+              },
+            ],
+          ];
+        }
         return [
           "span",
           {
@@ -380,6 +467,39 @@ export const editorSchema = new Schema({
       },
     },
 
+    field_ref_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        fieldFamily: { default: "REF" },
+        fieldTarget: { default: null },
+        instruction: { default: "" },
+        refreshStatus: { default: "stale" },
+        label: { default: "Field" },
+      },
+      toDOM(node) {
+        const refreshStatus = node.attrs.refreshStatus as string;
+        const statusClass =
+          refreshStatus === "current"
+            ? "text-blue-700 bg-blue-50 border-blue-200"
+            : refreshStatus === "unresolvable"
+              ? "text-amber-800 bg-amber-50 border-amber-200"
+              : "text-slate-700 bg-slate-50 border-slate-200";
+        return [
+          "span",
+          {
+            class: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border ${statusClass}`,
+            "data-node-type": "field_ref_atom",
+            "data-field-family": node.attrs.fieldFamily as string,
+            title: node.attrs.instruction as string,
+          },
+          (node.attrs.label as string) || "Field",
+        ];
+      },
+    },
+
     table: tableNodeSpec,
     table_row: tableRowNodeSpec,
     table_cell: tableCellNodeSpec,
@@ -724,15 +844,26 @@ export const editorSchema = new Schema({
         {
           tag: "a[href]",
           getAttrs(dom) {
-            return { href: (dom as HTMLElement).getAttribute("href") };
+            return { href: sanitizeLinkHref((dom as HTMLElement).getAttribute("href")) ?? "" };
           },
         },
       ],
       toDOM(mark) {
+        const href = sanitizeLinkHref(mark.attrs.href as string);
+        if (!href) {
+          return [
+            "span",
+            {
+              class: "text-accent underline decoration-1 underline-offset-2",
+              "data-invalid-link": "true",
+            },
+            0,
+          ];
+        }
         return [
           "a",
           {
-            href: mark.attrs.href as string,
+            href,
             class: "text-accent underline decoration-1 underline-offset-2",
             target: "_blank",
             rel: "noopener noreferrer",