@beyondwork/docx-react-component 1.0.24-rc → 1.0.26-rc

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beyondwork/docx-react-component",
   "publisher": "beyondwork",
-  "version": "1.0.24rc",
+  "version": "1.0.26rc",
   "description": "Embeddable React Word (docx) editor with review, comments, tracked changes, and round-trip OOXML fidelity.",
   "type": "module",
   "sideEffects": [

package/src/core/selection/review-anchors.ts

@@ -104,7 +104,6 @@ export function rangeStaysWithinSingleParagraph(
 }
 
 export function canCreateDocxCommentAnchor(
-  content: unknown,
   anchor: ReviewAnchor,
 ): boolean {
   if (anchor.kind !== "range") {
@@ -112,11 +111,7 @@ export function canCreateDocxCommentAnchor(
   }
 
   const normalized = normalizeRange(anchor.range);
-  if (normalized.from === normalized.to) {
-    return false;
-  }
-
-  return rangeStaysWithinSingleParagraph(content, normalized);
+  return normalized.from !== normalized.to;
 }
 
 function readSurfaceBlocks(

package/src/io/export/serialize-comments.ts

@@ -261,19 +261,25 @@ export function serializeCommentAnchorsIntoDocumentXml(
       continue;
     }
 
-    const paragraph = paragraphs.find(
+    const startParagraph = paragraphs.find(
       (candidate) =>
         anchor.range.from >= candidate.start &&
+        anchor.range.from <= candidate.end,
+    );
+
+    const endParagraph = paragraphs.find(
+      (candidate) =>
+        anchor.range.to >= candidate.start &&
         anchor.range.to <= candidate.end,
     );
 
-    if (!paragraph) {
+    if (!startParagraph || !endParagraph) {
       skippedCommentIds.push(thread.commentId);
       continue;
     }
 
-    const startIndex = paragraph.boundaries.get(anchor.range.from);
-    const endIndex = paragraph.boundaries.get(anchor.range.to);
+    const startIndex = startParagraph.boundaries.get(anchor.range.from);
+    const endIndex = endParagraph.boundaries.get(anchor.range.to);
 
     if (startIndex === undefined || endIndex === undefined) {
       skippedCommentIds.push(thread.commentId);

package/src/runtime/document-runtime.ts

@@ -1160,9 +1160,9 @@ export function createDocumentRuntime(
       const selection = params.anchor
         ? createSelectionFromPublicAnchor(params.anchor)
         : state.selection;
-      if (!canCreateDocxCommentAnchor(state.document.content, anchor)) {
+      if (!canCreateDocxCommentAnchor(anchor)) {
         const message =
-          "DOCX comments must use a non-empty range that stays within a single paragraph.";
+          "DOCX comments must use a non-empty range.";
         emitError({
           errorId: createSessionId("comment-anchor", clock()),
           code: "validation_failed",

package/src/runtime/session-capabilities.ts

@@ -110,7 +110,7 @@ export function deriveCapabilities(
     activeStory.kind === "main" &&
     !snapshot.selection.isCollapsed &&
     Boolean(snapshot.surface) &&
-    canCreateDocxCommentAnchor(snapshot.surface, toRuntimeAnchor(snapshot.selection.activeRange));
+    canCreateDocxCommentAnchor(toRuntimeAnchor(snapshot.selection.activeRange));
   const canExport = isReady && !exportBlocked && !hasFatalError;
 
   // Revision capabilities

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

@@ -21,7 +21,22 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
-function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+function isSelectionZoneScope(scope: WorkflowScope): boolean {
+  return (
+    scope.scopeId.startsWith("scope-lab-") ||
+    scope.scopeId.startsWith("metadata-lab-") ||
+    scope.workItemId?.startsWith("scope-lab-") === true ||
+    scope.workItemId?.startsWith("metadata-lab-") === true ||
+    scope.label?.toLowerCase().includes("scope lab") === true ||
+    scope.label?.toLowerCase().includes("metadata lab") === true
+  );
+}
+
+function getWorkflowInlineClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
   const base =
     scope.mode === "edit"
       ? "wre-workflow-inline wre-workflow-inline-edit"
@@ -30,10 +45,15 @@ function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean)
         : scope.mode === "comment"
           ? "wre-workflow-inline wre-workflow-inline-comment"
           : "wre-workflow-inline wre-workflow-inline-view";
-  return isActiveWorkItem ? `${base} wre-workflow-inline-active` : base;
+  const withZone = isSelectionZone ? `${base} wre-workflow-inline-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-inline-active` : withZone;
 }
 
-function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+function getWorkflowRailClass(
+  scope: WorkflowScope,
+  isActiveWorkItem: boolean,
+  isSelectionZone: boolean,
+): string {
   const base =
     scope.mode === "edit"
       ? "wre-workflow-rail wre-workflow-rail-edit"
@@ -42,7 +62,8 @@ function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean):
         : scope.mode === "comment"
           ? "wre-workflow-rail wre-workflow-rail-comment"
           : "wre-workflow-rail wre-workflow-rail-view";
-  return isActiveWorkItem ? `${base} wre-workflow-rail-active` : base;
+  const withZone = isSelectionZone ? `${base} wre-workflow-rail-selection-zone` : base;
+  return isActiveWorkItem ? `${withZone} wre-workflow-rail-active` : withZone;
 }
 
 function getWorkflowCandidateInlineClass(): string {
@@ -311,6 +332,7 @@ export function buildDecorations(
       if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
       const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
       if (!pmRange) continue;
+      const isSelectionZone = isSelectionZoneScope(scope);
       const isActiveWorkItem =
         Boolean(activeWorkflowWorkItemId) &&
         (
@@ -321,21 +343,23 @@ export function buildDecorations(
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
         decorations.push(
           Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope, isActiveWorkItem),
+            class: getWorkflowInlineClass(scope, isActiveWorkItem, isSelectionZone),
             "data-workflow-scope-id": scope.scopeId,
             "data-workflow-scope-mode": scope.mode,
             "data-workflow-active": isActiveWorkItem ? "true" : "false",
+            ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
           }),
         );
       }
 
       pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
         railKind: "scope",
-        className: getWorkflowRailClass(scope, isActiveWorkItem),
+        className: getWorkflowRailClass(scope, isActiveWorkItem, isSelectionZone),
         attrs: {
           "data-workflow-scope-id": scope.scopeId,
           "data-workflow-scope-mode": scope.mode,
           "data-workflow-active": isActiveWorkItem ? "true" : "false",
+          ...(isSelectionZone ? { "data-workflow-zone": "selection" } : {}),
         },
       }, railRangeCache);
     }

package/src/ui-tailwind/theme/editor-theme.css

@@ -261,6 +261,8 @@
 .prosemirror-surface .ProseMirror .wre-workflow-inline {
   border-radius: 0.25rem;
   box-shadow: inset 0 0 0 1px transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .prosemirror-surface .ProseMirror .wre-workflow-inline-edit {
@@ -333,6 +335,13 @@
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 28%, transparent);
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-inline-zone {
+  border-radius: 0.35rem;
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 18%, transparent),
+    inset 0 0 0 999px color-mix(in srgb, var(--wre-workflow-rail-color, var(--color-accent)) 8%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
   --wre-workflow-rail-color: var(--color-accent);
   background: color-mix(in srgb, var(--color-accent) 7%, transparent);
@@ -394,6 +403,15 @@
     );
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone {
+  background: transparent;
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-rail-selection-zone::before {
+  width: 0.25rem;
+  opacity: 0.95;
+}
+
 .prosemirror-surface:focus-visible {
   outline: none;
 }