@beyondwork/docx-react-component 1.0.42 → 1.0.45

package/src/ui-tailwind/review/tw-comment-sidebar.tsx

@@ -1,12 +1,33 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Check, CornerDownRight, RotateCcw } from "lucide-react";
 
 import type { CommentSidebarSnapshot, CommentSidebarThreadSnapshot } from "../../api/public-types";
+import type {
+  CommentPresentation,
+  CommentPresentationReply,
+  CommentPresentationSnapshot,
+} from "../../api/comment-presentation-types";
+import { CommentMarkdownRenderer } from "./comment-markdown-renderer";
 
 export interface TwCommentSidebarProps {
   comments: CommentSidebarSnapshot;
   activeCommentId?: string;
   currentUserId?: string;
+  /**
+   * Optional per-comment rich presentation (markdown body + mentions +
+   * attachments + replies). When a thread's commentId matches an entry here
+   * we render its body through {@link CommentMarkdownRenderer} instead of
+   * the flat plaintext fallback. Threads without a presentation entry keep
+   * the legacy plaintext render — required for back-compat with docx
+   * authored outside BW.
+   */
+  commentPresentations?: CommentPresentationSnapshot;
+  /**
+   * Forwarded to the markdown renderer to resolve attachment
+   * `relationshipId` refs against `word/_rels/` image blobs. Hosts that do
+   * not render inline images can omit this.
+   */
+  resolveAttachmentHref?: (relationshipId: string) => string | undefined;
   onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
   onResolveComment?: (commentId: string) => void;
   onReopenComment?: (commentId: string) => void;
@@ -18,7 +39,15 @@ const focusRingClass =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
 
 export function TwCommentSidebar(props: TwCommentSidebarProps) {
-  const { comments, activeCommentId, currentUserId } = props;
+  const { comments, activeCommentId, currentUserId, commentPresentations, resolveAttachmentHref } = props;
+
+  const presentationByCommentId = useMemo(() => {
+    const map = new Map<string, CommentPresentation>();
+    for (const entry of commentPresentations?.entries ?? []) {
+      map.set(entry.commentId, entry);
+    }
+    return map;
+  }, [commentPresentations]);
 
   return (
     <div className="outline-none">
@@ -41,6 +70,8 @@ export function TwCommentSidebar(props: TwCommentSidebarProps) {
               thread={thread}
               isActive={activeCommentId === thread.commentId}
               currentUserId={currentUserId}
+              presentation={presentationByCommentId.get(thread.commentId)}
+              resolveAttachmentHref={resolveAttachmentHref}
               onOpenComment={props.onOpenComment}
               onResolveComment={props.onResolveComment}
               onReopenComment={props.onReopenComment}
@@ -62,13 +93,22 @@ function CommentThreadCard(props: {
   thread: CommentSidebarThreadSnapshot;
   isActive: boolean;
   currentUserId?: string;
+  presentation?: CommentPresentation;
+  resolveAttachmentHref?: (relationshipId: string) => string | undefined;
   onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
   onResolveComment?: (commentId: string) => void;
   onReopenComment?: (commentId: string) => void;
   onAddReply?: (commentId: string, body: string) => void;
   onEditBody?: (commentId: string, body: string) => void;
 }) {
-  const { thread, isActive } = props;
+  const { thread, isActive, presentation, resolveAttachmentHref } = props;
+  const replyPresentationByEntryId = useMemo(() => {
+    const map = new Map<string, CommentPresentationReply>();
+    for (const reply of presentation?.replies ?? []) {
+      map.set(reply.entryId, reply);
+    }
+    return map;
+  }, [presentation]);
   const leadEntry = thread.entries[0];
   const isDraftThread = thread.status === "open" && thread.entryCount === 1 && isEmptyCommentBody(leadEntry?.body);
   const isOwnComment = props.currentUserId != null && leadEntry?.authorId === props.currentUserId;
@@ -138,6 +178,14 @@ function CommentThreadCard(props: {
           onSave={(newBody) => props.onEditBody?.(thread.commentId, newBody)}
           label={isDraftThread ? "New comment" : undefined}
         />
+      ) : presentation ? (
+        <CommentMarkdownRenderer
+          body={presentation.body}
+          mentions={presentation.mentions}
+          attachments={presentation.attachments}
+          resolveAttachmentHref={resolveAttachmentHref}
+          className="text-[10px] leading-[1.1rem] text-secondary break-words"
+        />
       ) : leadEntry?.body ? (
         <p
           className="text-[10px] leading-[1.1rem] text-secondary whitespace-pre-wrap break-words line-clamp-4"
@@ -158,20 +206,33 @@ function CommentThreadCard(props: {
       ) : null}
 
       {/* Reply entries (compact) */}
-      {thread.entries.slice(1).map((entry) => (
-        <div key={entry.entryId} className="mt-2 ml-4 border-l border-border/50 pl-2.5">
-          <div className="mb-0.5 flex items-center gap-1">
-            <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
-            <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
+      {thread.entries.slice(1).map((entry) => {
+        const replyPresentation = replyPresentationByEntryId.get(entry.entryId);
+        return (
+          <div key={entry.entryId} className="mt-2 ml-4 border-l border-border/50 pl-2.5">
+            <div className="mb-0.5 flex items-center gap-1">
+              <span className="text-[9px] font-medium text-secondary">{entry.authorId}</span>
+              <span className="text-[9px] text-tertiary">{formatCommentDate(entry.createdAt)}</span>
+            </div>
+            {replyPresentation ? (
+              <CommentMarkdownRenderer
+                body={replyPresentation.body}
+                mentions={presentation?.mentions}
+                attachments={presentation?.attachments}
+                resolveAttachmentHref={resolveAttachmentHref}
+                className="text-[10px] leading-4 text-secondary break-words"
+              />
+            ) : (
+              <p
+                className="text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3"
+                data-comment-reply-body="true"
+              >
+                {entry.body}
+              </p>
+            )}
           </div>
-          <p
-            className="text-[10px] leading-4 text-secondary whitespace-pre-wrap break-words line-clamp-3"
-            data-comment-reply-body="true"
-          >
-            {entry.body}
-          </p>
-        </div>
-      ))}
+        );
+      })}
 
       {thread.entryCount > thread.entries.length ? (
         <p className="mt-1 text-[9px] text-tertiary">

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

@@ -77,6 +77,18 @@
   --color-page-border: rgba(0, 0, 0, 0.04);
   --color-page-bg: #ffffff;
   --color-page-ruler: color-mix(in srgb, var(--color-border) 65%, transparent);
+  /*
+   * Phase A (L8 page-native layout): the workspace canvas is the gray
+   * surface BEHIND the paper frame(s) — LibreOffice Print Layout idiom.
+   * The outer `.wre-page-chrome` wrapper paints this; the inner paper
+   * frame paints the white `--color-page-bg` on top.
+   *
+   * L8 polish (2026-04-19): darkened from #e7e5e4 → #d4d1cc so the canvas
+   * reads as a distinctly different surface from the white paper (the
+   * earlier tone was close enough that the paper edges blurred against
+   * the canvas on high-brightness screens).
+   */
+  --color-workspace-canvas: #d4d1cc;
 
   /*
    * ─── Radius tokens (balanced 10 / 8 / 4 / 2) ───
@@ -188,6 +200,7 @@
   --color-page-border: rgba(255, 255, 255, 0.06);
   --color-page-bg: #1B2620;
   --color-page-ruler: color-mix(in srgb, var(--color-border) 70%, transparent);
+  --color-workspace-canvas: #111827;
 
   --shadow-soft: 0 6px 18px -10px rgba(0, 0, 0, 0.55);
   --shadow-float: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
@@ -253,26 +266,39 @@
   widows: 2;
 }
 
-/* Page chrome — shadow, border, and background for the page-mode document panel */
+/*
+ * Phase A (L8 page-native layout): the outer `.wre-page-chrome` wrapper is
+ * now the **workspace canvas** — the gray surface behind the paper frame(s),
+ * mirroring LibreOffice Writer's Print Layout.  Paper styling (white
+ * background, rounded corners, drop shadow, border) lives solely on the
+ * inner `[data-paper-frame]` wrapper via `pageShellMetrics.pageFrameStyle`,
+ * eliminating the pre-Phase-A double-chrome artefact.
+ *
+ * Historical note: before 2026-04-19 this selector painted paper chrome
+ * (background/border/radius/shadow) AND the outer wrapper was sized to
+ * `frameWidthPx`.  The inner wrapper painted the SAME paper chrome, producing
+ * two nested rounded rectangles visible in every page-mode screenshot.
+ */
 .wre-page-chrome {
-  background: var(--color-page-bg);
-  border: 1px solid var(--color-page-border);
-  border-radius: var(--radius-page);
-  box-shadow: 0 8px 24px -20px var(--color-page-shadow);
+  background: var(--color-workspace-canvas);
+  padding: 2rem 0;
 }
 
-/* Canvas-mode typography — lighter, review-first baseline */
+/*
+ * Canvas-mode typography — lighter, review-first baseline.
+ *
+ * L8 Phase B (2026-04-19): canvas mode is **continuous flow, no paper
+ * card**.  Paper-card declarations (width cap, min-height, background,
+ * border, rounded corners, drop shadow) were removed so the review
+ * surface reads as a single scrollable column.  The mode-contract gate
+ * (page-mode paper card vs canvas-mode continuous flow) is pinned by
+ * `test/ui/pm-page-break-decorations-posture.test.ts`.
+ */
 .wre-canvas-surface {
   font-family: var(--font-legal-serif);
   font-size: 15px;
   line-height: 1.6;
   color: var(--color-primary);
-  width: min(100%, 920px);
-  min-height: 100%;
-  background: var(--color-page-bg);
-  border: 1px solid var(--color-page-border);
-  border-radius: var(--radius-page);
-  box-shadow: 0 6px 18px -14px var(--color-page-shadow);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
@@ -734,8 +760,15 @@
   pointer-events: none;
 }
 
-/* ─── Page workspace zoom scaling ─── */
-.wre-page-chrome[style*="scale"] {
+/*
+ * ─── Paper-frame zoom scaling ───
+ *
+ * Phase A (L8 page-native layout): browser-native CSS `zoom` lives on the
+ * inner paper frame, not the workspace canvas, so layout measurement stays
+ * truthful inside the card.  `will-change: transform` primes the compositor
+ * when a zoom is active.
+ */
+[data-paper-frame][style*="zoom"] {
   will-change: transform;
 }