@beyondwork/docx-react-component 1.0.82 → 1.0.83

package/package.json

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

package/src/ui/WordReviewEditor.tsx

@@ -2414,9 +2414,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     function addReviewComment(): string | null {
       try {
         const { commentId } = activeRuntime.addComment({
-          anchor: snapshot.selection.activeRange,
+          anchor: resolveCommentCommandAnchor(snapshot),
           body: "",
           authorId: currentUser.userId,
+          snapToSafeBoundary: true,
         });
         activeRuntime.openComment(commentId);
         setActiveRailTab("comments");
@@ -4192,6 +4193,176 @@ function summarizeSelectionPreview(snapshot: RuntimeRenderSnapshot): string | nu
   return preview.length > 48 ? `${preview.slice(0, 45)}...` : preview;
 }
 
+function resolveCommentCommandAnchor(
+  snapshot: RuntimeRenderSnapshot,
+): PublicSelectionSnapshot["activeRange"] {
+  const selection = snapshot.selection;
+  if (!selection.isCollapsed && selection.activeRange.kind === "range") {
+    return selection.activeRange;
+  }
+
+  const collapsedRange = resolveCollapsedCommentRange(snapshot.surface, selection);
+  return collapsedRange
+    ? {
+        kind: "range",
+        from: collapsedRange.from,
+        to: collapsedRange.to,
+        assoc: { start: -1, end: 1 },
+      }
+    : selection.activeRange;
+}
+
+function resolveCollapsedCommentRange(
+  surface: RuntimeRenderSnapshot["surface"],
+  selection: RuntimeRenderSnapshot["selection"],
+): { from: number; to: number } | null {
+  if (!surface) {
+    return null;
+  }
+
+  const position = selection.activeRange.kind === "node"
+    ? selection.activeRange.at
+    : selection.head;
+  const paragraph =
+    findParagraphRangeAtPosition(surface.blocks, position) ??
+    findFirstNonEmptyParagraphRange(surface.blocks);
+  return paragraph
+    ? resolveWordRangeInsideParagraph(surface.plainText, paragraph, position)
+    : null;
+}
+
+function findParagraphRangeAtPosition(
+  blocks: readonly SurfaceBlockSnapshot[],
+  position: number,
+): { from: number; to: number } | null {
+  for (const block of blocks) {
+    if (
+      block.kind === "paragraph" &&
+      block.to > block.from &&
+      position >= block.from &&
+      position <= block.to
+    ) {
+      return { from: block.from, to: block.to };
+    }
+    const nested = findParagraphRangeInNestedBlocks(block, position);
+    if (nested) {
+      return nested;
+    }
+  }
+  return null;
+}
+
+function findFirstNonEmptyParagraphRange(
+  blocks: readonly SurfaceBlockSnapshot[],
+): { from: number; to: number } | null {
+  for (const block of blocks) {
+    if (block.kind === "paragraph" && block.to > block.from) {
+      return { from: block.from, to: block.to };
+    }
+    const nested = findFirstNonEmptyParagraphInNestedBlocks(block);
+    if (nested) {
+      return nested;
+    }
+  }
+  return null;
+}
+
+function findParagraphRangeInNestedBlocks(
+  block: SurfaceBlockSnapshot,
+  position: number,
+): { from: number; to: number } | null {
+  if (block.kind === "sdt_block") {
+    return findParagraphRangeAtPosition(block.children, position);
+  }
+  if (block.kind === "table") {
+    for (const row of block.rows) {
+      for (const cell of row.cells) {
+        const nested = findParagraphRangeAtPosition(cell.content, position);
+        if (nested) {
+          return nested;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+function findFirstNonEmptyParagraphInNestedBlocks(
+  block: SurfaceBlockSnapshot,
+): { from: number; to: number } | null {
+  if (block.kind === "sdt_block") {
+    return findFirstNonEmptyParagraphRange(block.children);
+  }
+  if (block.kind === "table") {
+    for (const row of block.rows) {
+      for (const cell of row.cells) {
+        const nested = findFirstNonEmptyParagraphRange(cell.content);
+        if (nested) {
+          return nested;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+function resolveWordRangeInsideParagraph(
+  plainText: string,
+  paragraph: { from: number; to: number },
+  position: number,
+): { from: number; to: number } {
+  const paragraphFrom = paragraph.from;
+  const paragraphTo = paragraph.to;
+  const fallback = { from: paragraphFrom, to: paragraphTo };
+  if (paragraphTo <= paragraphFrom) {
+    return fallback;
+  }
+
+  let cursor = Math.max(paragraphFrom, Math.min(position, paragraphTo - 1));
+  if (isCommentWordBoundary(plainText.charAt(cursor))) {
+    const next = findNearestCommentTextOffset(plainText, cursor, paragraphFrom, paragraphTo);
+    if (next === null) {
+      return fallback;
+    }
+    cursor = next;
+  }
+
+  let from = cursor;
+  while (from > paragraphFrom && !isCommentWordBoundary(plainText.charAt(from - 1))) {
+    from -= 1;
+  }
+
+  let to = cursor + 1;
+  while (to < paragraphTo && !isCommentWordBoundary(plainText.charAt(to))) {
+    to += 1;
+  }
+
+  return to > from ? { from, to } : fallback;
+}
+
+function findNearestCommentTextOffset(
+  plainText: string,
+  cursor: number,
+  from: number,
+  to: number,
+): number | null {
+  for (let distance = 1; distance < to - from; distance += 1) {
+    const right = cursor + distance;
+    if (right < to && !isCommentWordBoundary(plainText.charAt(right))) {
+      return right;
+    }
+    const left = cursor - distance;
+    if (left >= from && !isCommentWordBoundary(plainText.charAt(left))) {
+      return left;
+    }
+  }
+  return null;
+}
+
+function isCommentWordBoundary(value: string): boolean {
+  return value.length === 0 || /\s/.test(value);
+}
+
 function selectionToolbarAnchorsEqual(
   left: SelectionToolbarAnchor | null,
   right: SelectionToolbarAnchor | null,

package/src/ui-tailwind/review-workspace/use-chrome-policy.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 
 import type {
   ActiveListContext,
+  EditorStoryTarget,
   EditorViewStateSnapshot,
   InteractionGuardSnapshot,
   WordReviewEditorChromePreset,
@@ -24,6 +25,7 @@ export interface UseChromePolicyOptions {
   role: EditorViewStateSnapshot["editorRole"];
   hasSidebarPanelAccess: boolean;
   effectiveSelectionMode: ToolbarInteractionPolicy["mode"];
+  activeStoryKind?: EditorStoryTarget["kind"];
 }
 
 export interface ChromePolicy {
@@ -52,8 +54,22 @@ export function useChromePolicy(options: UseChromePolicyOptions): ChromePolicy {
     role,
     hasSidebarPanelAccess,
     effectiveSelectionMode,
+    activeStoryKind,
   } = options;
 
+  const canRunCommentCommand = resolveTopBarCommentAvailability({
+    caps,
+    effectiveSelectionMode,
+    activeStoryKind,
+  });
+  const chromeCaps = useMemo(
+    () =>
+      caps && caps.canAddComment !== canRunCommentCommand
+        ? { ...caps, canAddComment: canRunCommentCommand }
+        : caps,
+    [canRunCommentCommand, caps],
+  );
+
   const responsiveChrome = useMemo(
     () =>
       resolveResponsiveChromeState({
@@ -69,7 +85,7 @@ export function useChromePolicy(options: UseChromePolicyOptions): ChromePolicy {
       resolveScopedChromePolicy({
         preset: chromePreset,
         compactMode: responsiveChrome.isNarrow,
-        capabilities: caps,
+        capabilities: chromeCaps,
         interactionGuardSnapshot,
         workflowScopeSnapshot,
         activeListContext,
@@ -77,7 +93,7 @@ export function useChromePolicy(options: UseChromePolicyOptions): ChromePolicy {
         hasSidebarPanelAccess,
       }),
     [
-      caps,
+      chromeCaps,
       chromePreset,
       hasSidebarPanelAccess,
       activeListContext,
@@ -93,12 +109,22 @@ export function useChromePolicy(options: UseChromePolicyOptions): ChromePolicy {
         mode: effectiveSelectionMode,
         canFormatText: caps.canEdit && effectiveSelectionMode === "edit",
         canInsertStructural: caps.canEdit && effectiveSelectionMode === "edit",
-        canAddComment:
-          caps.canAddComment &&
-          effectiveSelectionMode !== "view" &&
-          effectiveSelectionMode !== "blocked",
+        canAddComment: canRunCommentCommand,
       }
     : undefined;
 
   return { responsiveChrome, scopedChromePolicy, toolbarInteractionPolicy };
 }
+
+export function resolveTopBarCommentAvailability(input: {
+  caps: SessionCapabilities | undefined;
+  effectiveSelectionMode: ToolbarInteractionPolicy["mode"];
+  activeStoryKind?: EditorStoryTarget["kind"];
+}): boolean {
+  const { caps, effectiveSelectionMode, activeStoryKind } = input;
+  if (!caps) return false;
+  if (caps.phase !== "ready" || caps.hasFatalError) return false;
+  if (caps.documentMode === "viewing") return false;
+  if (activeStoryKind !== undefined && activeStoryKind !== "main") return false;
+  return effectiveSelectionMode !== "view" && effectiveSelectionMode !== "blocked";
+}

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -139,6 +139,7 @@ export function TwRoleActionRegion(
   for (const id of order) {
     const entry = props.policy.toolbar[id];
     if (!entry?.visible) continue;
+    if (!isRoleActionRenderable(id, props)) continue;
     if (entry.placement === "overflow") {
       overflowIds.push(id);
     } else if (entry.placement === "inline") {
@@ -171,6 +172,26 @@ export function TwRoleActionRegion(
   );
 }
 
+function isRoleActionRenderable(
+  id: ToolbarChromeItemId,
+  props: TwRoleActionRegionProps,
+): boolean {
+  const reviewQueueTotal = props.reviewQueue?.totalCount ?? 0;
+  switch (id) {
+    case "review-queue-prev":
+    case "review-queue-next":
+    case "review-queue-counts":
+    case "review-queue-active-label":
+    case "review-accept":
+    case "review-reject":
+    case "review-accept-all":
+    case "review-reject-all":
+      return reviewQueueTotal > 0;
+    default:
+      return true;
+  }
+}
+
 interface RoleActionButtonProps {
   id: ToolbarChromeItemId;
   compact: boolean;

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -357,6 +357,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       role: viewState.editorRole,
       hasSidebarPanelAccess,
       effectiveSelectionMode,
+      activeStoryKind: snapshot.activeStory.kind,
     });
 
   // L7 Phase 2 Task 2.2.4a — viewport-scroll wiring. Page marker