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

package/package.json

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

package/src/api/public-types.ts

@@ -1398,7 +1398,6 @@ export interface WordReviewEditorProps {
   loadSourcePolicy?: LoadSourcePolicy;
   readOnly?: boolean;
   reviewMode?: "editing" | "review";
-  suggestionsEnabled?: boolean;
   markupDisplay?: "clean" | "simple" | "all";
   showReviewPanel?: boolean;
   chromeVisibility?: Partial<WordReviewEditorChromeVisibility>;

package/src/core/commands/index.ts

@@ -1309,7 +1309,7 @@ function applySuggestingInsert(
   }
 
   if (isCollapsed) {
-    // Pure insertion at cursor: apply normally, then create or extend an insertion revision.
+    // Pure insertion at cursor: apply normally, then create insertion revision
     const result = insertText(state.document, selection, text, { timestamp: context.timestamp });
     const insertedFrom = from;
     const insertedTo = from + Array.from(text).length;
@@ -1321,53 +1321,25 @@ function applySuggestingInsert(
       result.mapping,
     );
 
-    // If there is an authored insertion revision that ends exactly where this
-    // text was inserted (i.e. the cursor was at the end of a prior insertion),
-    // extend that revision to cover the new text rather than creating a new one.
-    // This groups consecutive keystrokes into a single tracked change.
-    const adjacentInsertion = findAdjacentAuthoredInsertion(
+    // Create the revision with pre-mapping positions — it refers to content
+    // that was just inserted, so its anchors are already correct in the new document
+    const revision = createAuthoredRevision(
       reviewState.document.review.revisions,
+      "insertion",
       insertedFrom,
+      insertedTo,
+      authorId,
+      context.timestamp,
     );
 
-    let finalRevisionId: string;
-    let finalRevisions: Record<string, CanonicalRevisionRecord>;
-
-    if (adjacentInsertion && adjacentInsertion.anchor.kind === "range") {
-      const extended: CanonicalRevisionRecord = {
-        ...adjacentInsertion,
-        anchor: {
-          kind: "range",
-          range: { from: adjacentInsertion.anchor.range.from, to: insertedTo },
-          assoc: { start: 1, end: -1 },
-        },
-      };
-      finalRevisionId = extended.changeId;
-      finalRevisions = {
-        ...reviewState.document.review.revisions,
-        [extended.changeId]: extended,
-      };
-    } else {
-      const revision = createAuthoredRevision(
-        reviewState.document.review.revisions,
-        "insertion",
-        insertedFrom,
-        insertedTo,
-        authorId,
-        context.timestamp,
-      );
-      finalRevisionId = revision.changeId;
-      finalRevisions = {
-        ...reviewState.document.review.revisions,
-        [revision.changeId]: revision,
-      };
-    }
-
     const finalDocument: CanonicalDocumentEnvelope = {
       ...reviewState.document,
       review: {
         ...reviewState.document.review,
-        revisions: finalRevisions,
+        revisions: {
+          ...reviewState.document.review.revisions,
+          [revision.changeId]: revision,
+        },
       },
     };
 
@@ -1388,7 +1360,7 @@ function applySuggestingInsert(
         mapping: result.mapping,
         effects: {
           ...reviewState.effects,
-          revisionAuthored: { changeId: finalRevisionId, kind: "insertion" },
+          revisionAuthored: { changeId: revision.changeId, kind: "insertion" },
         },
       },
     );
@@ -1732,26 +1704,3 @@ function findOverlappingAuthoredDeletion(
   }
   return undefined;
 }
-
-/**
- * Find an open authored insertion revision whose end position equals `cursorAt`.
- * Used to extend an existing insertion when the user keeps typing at the same
- * position rather than creating a new revision for every character.
- */
-function findAdjacentAuthoredInsertion(
-  revisions: Record<string, CanonicalRevisionRecord>,
-  cursorAt: number,
-): CanonicalRevisionRecord | undefined {
-  for (const revision of Object.values(revisions)) {
-    if (
-      revision.kind === "insertion" &&
-      revision.status === "open" &&
-      revision.metadata?.source === "runtime" &&
-      revision.anchor.kind === "range" &&
-      revision.anchor.range.to === cursorAt
-    ) {
-      return revision;
-    }
-  }
-  return undefined;
-}

package/src/ui/WordReviewEditor.tsx

@@ -520,7 +520,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onWarning,
       readOnly = false,
       reviewMode = "review",
-      suggestionsEnabled = false,
       showReviewPanel = true,
       chromeVisibility,
     } = props;
@@ -694,10 +693,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       activeRuntime.setViewMode(effectiveViewMode);
     }, [activeRuntime, effectiveViewMode]);
 
-    useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
-
     useEffect(() => {
       runtimeViewStateSeedRef.current = {
         workspaceMode: viewState.workspaceMode,
@@ -1712,7 +1707,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         markupDisplay={liveMarkupDisplay}
         activeRevisionId={activeRevisionId}
         showTrackedChanges={showTrackedChanges}
-        suggestionsEnabled={suggestionsEnabled}
         mediaPreviews={mediaPreviews}
         isPageWorkspace={isPageWorkspace}
         workflowScopes={workflowScopeSnapshot?.scopes}

package/src/ui/editor-surface-controller.tsx

@@ -27,7 +27,6 @@ export interface EditorSurfaceControllerProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   showTrackedChanges?: boolean;
-  suggestionsEnabled?: boolean;
   mediaPreviews?: Record<string, MediaPreviewDescriptor>;
   isPageWorkspace?: boolean;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;

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 {
@@ -190,13 +211,10 @@ export function buildDecorations(
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
   activeWorkflowWorkItemId?: string | null,
   activeWorkflowScopeIds?: readonly string[],
-  suggestionsEnabled = false,
 ): DecorationSet {
   const decorations: Decoration[] = [];
   const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
   const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
-  // In suggestions mode, tracked changes are always shown regardless of the toggle.
-  const effectiveShowTracked = suggestionsEnabled ? true : showTrackedChanges;
 
   // Walk comment threads and create inline decorations
   if (commentModel) {
@@ -230,7 +248,7 @@ export function buildDecorations(
       // Always hide deletions in clean mode (final-text semantics).
       // This is the critical behavior: "hide tracked changes" must show
       // the document as if accepted, not show deleted text as kept text.
-      if (markupDisplay === "clean" && rev.kind === "deletion" && !suggestionsEnabled) {
+      if (markupDisplay === "clean" && rev.kind === "deletion") {
         const pmFrom = positionMap.runtimeToPm(rev.from);
         const pmTo = positionMap.runtimeToPm(rev.to);
         if (pmFrom < pmTo) {
@@ -245,48 +263,7 @@ export function buildDecorations(
       }
 
       // Skip visual styling when tracked changes display is off
-      if (!effectiveShowTracked) continue;
-
-      const pmFrom = positionMap.runtimeToPm(rev.from);
-      const pmTo = positionMap.runtimeToPm(rev.to);
-      if (pmFrom >= pmTo) continue;
-
-      if (suggestionsEnabled) {
-        if (rev.kind === "insertion") {
-          decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-insert",
-              "data-revision-id": rev.revisionId,
-            }),
-          );
-          decorations.push(
-            Decoration.widget(pmFrom, () => {
-              const el = document.createElement("span");
-              el.textContent = "[";
-              el.className = "text-insert";
-              el.setAttribute("contenteditable", "false");
-              return el;
-            }, { side: -1, key: `${rev.revisionId}-open` }),
-          );
-          decorations.push(
-            Decoration.widget(pmTo, () => {
-              const el = document.createElement("span");
-              el.textContent = "]";
-              el.className = "text-insert";
-              el.setAttribute("contenteditable", "false");
-              return el;
-            }, { side: 1, key: `${rev.revisionId}-close` }),
-          );
-        } else if (rev.kind === "deletion") {
-          decorations.push(
-            Decoration.inline(pmFrom, pmTo, {
-              class: "text-danger line-through decoration-danger/80 decoration-1",
-              "data-revision-id": rev.revisionId,
-            }),
-          );
-        }
-        continue;
-      }
+      if (!showTrackedChanges) continue;
 
       const cls = getRevisionHighlightClass(
         revisionModel,
@@ -296,12 +273,16 @@ export function buildDecorations(
       );
       if (!cls) continue;
 
-      decorations.push(
-        Decoration.inline(pmFrom, pmTo, {
-          class: cls,
-          "data-revision-id": rev.revisionId,
-        }),
-      );
+      const pmFrom = positionMap.runtimeToPm(rev.from);
+      const pmTo = positionMap.runtimeToPm(rev.to);
+      if (pmFrom < pmTo) {
+        decorations.push(
+          Decoration.inline(pmFrom, pmTo, {
+            class: cls,
+            "data-revision-id": rev.revisionId,
+          }),
+        );
+      }
     }
   }
 
@@ -311,6 +292,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 +303,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/editor-surface/surface-build-keys.ts

@@ -43,7 +43,6 @@ export function createSurfaceDecorationKey(input: {
   workflowBlockedSignature?: string;
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
-  suggestionsEnabled?: boolean;
 }): string {
   return JSON.stringify({
     markupDisplay: input.markupDisplay,
@@ -56,6 +55,5 @@ export function createSurfaceDecorationKey(input: {
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
     activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
     activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
-    suggestionsEnabled: input.suggestionsEnabled ?? false,
   });
 }

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -75,7 +75,6 @@ export interface TwProseMirrorSurfaceProps {
   markupDisplay: MarkupDisplay;
   activeRevisionId?: string;
   showTrackedChanges?: boolean;
-  suggestionsEnabled?: boolean;
   /** When true, the surface renders inside the page workspace (vs canvas). */
   isPageWorkspace?: boolean;
   onFocus: FocusEventHandler<HTMLDivElement>;
@@ -205,7 +204,6 @@ export const TwProseMirrorSurface = forwardRef<
       }),
     [mediaPreviewKey, snapshot.activeStory, surface],
   );
-  const suggestionsEnabled = props.suggestionsEnabled === true;
   const decorationBuildKey = useMemo(
     () =>
       createSurfaceDecorationKey({
@@ -219,7 +217,6 @@ export const TwProseMirrorSurface = forwardRef<
         workflowBlockedSignature: createWorkflowBlockedSignature(props.workflowBlockedReasons),
         activeWorkflowWorkItemId: props.activeWorkflowWorkItemId ?? null,
         activeWorkflowScopeIds: props.activeWorkflowScopeIds ?? [],
-        suggestionsEnabled,
       }),
     [
       canEdit,
@@ -232,7 +229,6 @@ export const TwProseMirrorSurface = forwardRef<
       props.workflowScopes,
       showTrackedChanges,
       snapshot.comments.activeCommentId,
-      suggestionsEnabled,
     ],
   );
 
@@ -278,7 +274,6 @@ export const TwProseMirrorSurface = forwardRef<
         props.workflowBlockedReasons,
         props.activeWorkflowWorkItemId,
         props.activeWorkflowScopeIds,
-        suggestionsEnabled,
       );
       view.setProps({
         editable: () => canEdit,

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;
 }