@beyondwork/docx-react-component 1.0.18 → 1.0.20

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

@@ -4,6 +4,8 @@ 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 { EditorStoryTarget, 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";
 
@@ -21,6 +23,8 @@ export function buildDecorations(
   revisionModel: RevisionDecorationModel | undefined,
   markupDisplay: MarkupDisplay,
   showTrackedChanges = true,
+  workflowScopes?: readonly WorkflowScope[],
+  activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
 ): DecorationSet {
   const decorations: Decoration[] = [];
 
@@ -94,5 +98,36 @@ export function buildDecorations(
     }
   }
 
+  // Walk workflow scopes and create inline decorations for scope emphasis.
+  if (workflowScopes) {
+    for (const scope of workflowScopes) {
+      const scopeStoryTarget = scope.storyTarget ?? MAIN_STORY_TARGET;
+      if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
+      if (scope.anchor.kind === "detached") continue;
+      const from = scope.anchor.kind === "range" ? scope.anchor.from : scope.anchor.at;
+      const to = scope.anchor.kind === "range" ? scope.anchor.to : scope.anchor.at;
+      const pmFrom = positionMap.runtimeToPm(from);
+      const pmTo = positionMap.runtimeToPm(to);
+      if (pmFrom >= pmTo) continue;
+
+      const modeClass =
+        scope.mode === "edit"
+          ? "bg-blue-50/40 ring-1 ring-blue-200/50"
+          : scope.mode === "suggest"
+            ? "bg-amber-50/40 ring-1 ring-amber-200/50"
+            : scope.mode === "comment"
+              ? "bg-green-50/40 ring-1 ring-green-200/50"
+              : "bg-gray-50/40 ring-1 ring-gray-200/50";
+
+      decorations.push(
+        Decoration.inline(pmFrom, pmTo, {
+          class: modeClass,
+          "data-workflow-scope-id": scope.scopeId,
+          "data-workflow-scope-mode": scope.mode,
+        }),
+      );
+    }
+  }
+
   return DecorationSet.create(doc, decorations);
 }

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

@@ -25,11 +25,11 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
         return entries[0]?.pmStart ?? 1;
       }
       if (runtimePos >= runtimeStorySize) {
-        return pmDocSize - 1;
+        return entries[entries.length - 1]?.pmEnd ?? pmDocSize - 1;
       }
 
       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) {
@@ -75,7 +75,7 @@ function walkBlocks(
   for (const block of blocks) {
     switch (block.kind) {
       case "paragraph": {
-        const pmContentStart = nextPmCursor + 1;
+        const pmContentStart = nextPmCursor;
         const runtimeLength = block.to - block.from;
         entries.push({
           runtimeStart: block.from,

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.
  *
@@ -95,14 +120,20 @@ export const editorSchema = new Schema({
         numberingInstanceId: { default: null },
         numberingLevel: { default: null },
         numberingPrefix: { default: null },
+        numberingSuffix: { default: null },
         alignment: { default: null },
         spacingBefore: { default: null },
         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 },
@@ -127,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}`);
@@ -140,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) {
@@ -159,9 +196,28 @@ 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;
+        const numberingSuffix = node.attrs.numberingSuffix as "tab" | "space" | "nothing" | null;
         const children: Array<string | number | readonly unknown[]> = [];
         if (pageBreak) {
           children.push([
@@ -177,6 +233,7 @@ export const editorSchema = new Schema({
         }
         if (numberingPrefix) {
           const minWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          const marginRight = numberingSuffix === "nothing" ? "0.25rem" : numberingSuffix === "space" ? "0.5rem" : "0.75rem";
           children.push([
             "span",
             {
@@ -187,7 +244,8 @@ export const editorSchema = new Schema({
               ...(typeof numberingLevel === "number"
                 ? { "data-numbering-level": String(numberingLevel) }
                 : {}),
-              style: `min-width: ${minWidth}ch; margin-right: 0.75rem; font-variant-numeric: tabular-nums;`,
+              ...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {}),
+              style: `min-width: ${minWidth}ch; margin-right: ${marginRight}; font-variant-numeric: tabular-nums;`,
             },
             numberingPrefix,
           ]);
@@ -273,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",
           {
@@ -300,14 +391,28 @@ export const editorSchema = new Schema({
         alias: { default: null },
         tag: { default: null },
         lock: { default: null },
+        checkboxChecked: { default: null },
+        dateValue: { default: null },
+        dropdownItems: { default: null },
+        comboBoxItems: { default: null },
+        showingPlcHdr: { default: false },
       },
       toDOM(node) {
-        const meta = [node.attrs.alias, node.attrs.tag, node.attrs.sdtType].filter(Boolean).join(" · ");
+        const sdtType = node.attrs.sdtType as string | null;
+        const typeLabel = sdtType === "checkbox" ? "\u2611 Checkbox"
+          : sdtType === "date" ? "\uD83D\uDCC5 Date"
+          : sdtType === "dropDownList" ? "\u25BE Dropdown"
+          : sdtType === "comboBox" ? "\u25BE Combo box"
+          : sdtType === "plainText" ? "\u270E Plain text"
+          : sdtType === "richText" ? "\u270E Rich text"
+          : sdtType ?? undefined;
+        const meta = [node.attrs.alias, node.attrs.tag, typeLabel].filter(Boolean).join(" \u00B7 ");
         return [
           "section",
           {
             class: "my-2 rounded-xl border border-primary/15 bg-surface-raised/60 px-3 py-2",
             "data-node-type": "sdt_block",
+            ...(sdtType ? { "data-sdt-type": sdtType } : {}),
           },
           [
             "div",
@@ -332,13 +437,29 @@ export const editorSchema = new Schema({
         warningId: { default: "" },
         label: { default: "Locked" },
         detail: { default: "" },
+        presentation: { default: "inline-chip" },
       },
       toDOM(node) {
+        const presentation = node.attrs.presentation as string;
+        if (presentation === "quiet-marker") {
+          return [
+            "span",
+            {
+              class: "inline-block h-0 w-0 overflow-hidden align-baseline",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "quiet-marker",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft",
             "data-node-type": "opaque_inline",
+            "data-inline-presentation": "inline-chip",
             title: node.attrs.detail as string,
           },
           "\uD83D\uDD12 " + (node.attrs.label as string),
@@ -346,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,
@@ -403,7 +557,7 @@ export const editorSchema = new Schema({
       inline: true,
       group: "inline",
       atom: true,
-      selectable: false,
+      selectable: true,
       attrs: {
         text: { default: null },
         geometry: { default: null },
@@ -454,7 +608,7 @@ export const editorSchema = new Schema({
       inline: true,
       group: "inline",
       atom: true,
-      selectable: false,
+      selectable: true,
       attrs: {
         text: { default: null },
         shapeType: { default: null },
@@ -551,7 +705,15 @@ export const editorSchema = new Schema({
     },
     vanish: {
       toDOM() {
-        return ["span", { style: "opacity: 0.3; text-decoration: underline dotted; text-decoration-color: rgba(0,0,0,0.3)" }, 0];
+        return [
+          "span",
+          {
+            style: "display: none",
+            "data-hidden-text": "true",
+            "aria-hidden": "true",
+          },
+          0,
+        ];
       },
     },
     emboss: {
@@ -682,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",