@beyondwork/docx-react-component 1.0.30 → 1.0.31

package/src/ui-tailwind/chrome/tw-table-context-toolbar.tsx

@@ -34,138 +34,188 @@ const CELL_COLORS = [
 ] as const;
 
 export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
+  const tableContext = props.tableContext;
+  const tableSizeLabel = tableContext ? `${tableContext.rowCount} x ${tableContext.columnCount}` : null;
+  const selectionLabel = tableContext
+    ? tableContext.selectedCellCount > 1
+      ? `${tableContext.selectedCellCount} cells`
+      : `R${tableContext.currentCell.rowIndex + 1} C${tableContext.currentCell.columnIndex + 1}`
+    : null;
+
   return (
     <div
       data-testid="table-context-toolbar"
-      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+      className="flex max-w-[min(30rem,calc(100vw-1.5rem))] flex-wrap items-start gap-1.5 rounded-lg border border-border bg-canvas px-2.5 py-1.5 shadow-sm"
     >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.12em] text-tertiary">
         Table
       </span>
+      {tableSizeLabel ? <ToolbarBadge>{tableSizeLabel}</ToolbarBadge> : null}
+      {selectionLabel ? <ToolbarBadge>{selectionLabel}</ToolbarBadge> : null}
+      {tableContext?.currentCell.isHeader ? <ToolbarBadge tone="accent">Header row</ToolbarBadge> : null}
+
+      <ToolbarSection label="Style">
+        <select
+          aria-label="Table style"
+          className="h-7 min-w-[9rem] rounded-md border border-border bg-canvas px-2 text-[11px] text-primary disabled:opacity-40"
+          disabled={
+            props.disabled ||
+            props.tableStyles.length === 0 ||
+            !props.onSetTableStyle ||
+            !tableContext?.operations.setTableStyle.enabled
+          }
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+          value={tableContext?.currentStyleId ?? ""}
+          title={tableContext?.operations.setTableStyle.reason}
+        >
+          <option value="" disabled>Table style</option>
+          {props.tableStyles.map((style) => (
+            <option key={style.styleId} value={style.styleId}>
+              {style.displayName}
+            </option>
+          ))}
+        </select>
+      </ToolbarSection>
+
+      <ToolbarSection label="Rows">
+        <ToolbarButton
+          ariaLabel="Add row above"
+          capability={tableContext?.operations.addRowBefore}
+          disabled={props.disabled}
+          onClick={props.onAddRowBefore}
+        >
+          Above
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add row below"
+          capability={tableContext?.operations.addRowAfter}
+          disabled={props.disabled}
+          onClick={props.onAddRowAfter}
+        >
+          Below
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete row"
+          capability={tableContext?.operations.deleteRow}
+          disabled={props.disabled}
+          onClick={props.onDeleteRow}
+        >
+          Delete row
+        </ToolbarButton>
+      </ToolbarSection>
 
-      {props.tableContext?.currentCell.isHeader ? (
-        <span className="rounded bg-accent-soft px-2 py-1 text-[10px] font-medium text-accent">
-          Header row
-        </span>
-      ) : null}
+      <ToolbarSection label="Columns">
+        <ToolbarButton
+          ariaLabel="Add column left"
+          capability={tableContext?.operations.addColumnBefore}
+          disabled={props.disabled}
+          onClick={props.onAddColumnBefore}
+        >
+          Left
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Add column right"
+          capability={tableContext?.operations.addColumnAfter}
+          disabled={props.disabled}
+          onClick={props.onAddColumnAfter}
+        >
+          Right
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Delete column"
+          capability={tableContext?.operations.deleteColumn}
+          disabled={props.disabled}
+          onClick={props.onDeleteColumn}
+        >
+          Delete column
+        </ToolbarButton>
+      </ToolbarSection>
 
-      <select
-        aria-label="Table style"
-        className="h-8 rounded-md border border-border bg-canvas px-2 text-xs text-primary disabled:opacity-40"
-        disabled={
-          props.disabled ||
-          props.tableStyles.length === 0 ||
-          !props.onSetTableStyle ||
-          !props.tableContext?.operations.setTableStyle.enabled
-        }
-        onMouseDown={preserveEditorSelectionMouseDown}
-        onChange={(event) => props.onSetTableStyle?.(event.target.value)}
-        value={props.tableContext?.currentStyleId ?? ""}
-        title={props.tableContext?.operations.setTableStyle.reason}
-      >
-        <option value="" disabled>Table style</option>
-        {props.tableStyles.map((style) => (
-          <option key={style.styleId} value={style.styleId}>
-            {style.displayName}
-          </option>
-        ))}
-      </select>
+      <ToolbarSection label="Cells">
+        <ToolbarButton
+          ariaLabel="Merge cells"
+          capability={tableContext?.operations.mergeCells}
+          disabled={props.disabled}
+          onClick={props.onMergeCells}
+        >
+          Merge
+        </ToolbarButton>
+        <ToolbarButton
+          ariaLabel="Split cell"
+          capability={tableContext?.operations.splitCell}
+          disabled={props.disabled}
+          onClick={props.onSplitCell}
+        >
+          Split
+        </ToolbarButton>
+      </ToolbarSection>
 
-      <ToolbarButton
-        ariaLabel="Add row above"
-        capability={props.tableContext?.operations.addRowBefore}
-        disabled={props.disabled}
-        onClick={props.onAddRowBefore}
-      >
-        Row above
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add row below"
-        capability={props.tableContext?.operations.addRowAfter}
-        disabled={props.disabled}
-        onClick={props.onAddRowAfter}
-      >
-        Row below
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete row"
-        capability={props.tableContext?.operations.deleteRow}
-        disabled={props.disabled}
-        onClick={props.onDeleteRow}
-      >
-        Delete row
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add column left"
-        capability={props.tableContext?.operations.addColumnBefore}
-        disabled={props.disabled}
-        onClick={props.onAddColumnBefore}
-      >
-        Column left
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Add column right"
-        capability={props.tableContext?.operations.addColumnAfter}
-        disabled={props.disabled}
-        onClick={props.onAddColumnAfter}
-      >
-        Column right
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete column"
-        capability={props.tableContext?.operations.deleteColumn}
-        disabled={props.disabled}
-        onClick={props.onDeleteColumn}
-      >
-        Delete column
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Merge cells"
-        capability={props.tableContext?.operations.mergeCells}
-        disabled={props.disabled}
-        onClick={props.onMergeCells}
-      >
-        Merge
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Split cell"
-        capability={props.tableContext?.operations.splitCell}
-        disabled={props.disabled}
-        onClick={props.onSplitCell}
-      >
-        Split
-      </ToolbarButton>
+      <ToolbarSection label="Fill">
+        <div className="flex items-center gap-1">
+          {CELL_COLORS.map((color) => (
+            <button
+              key={color}
+              type="button"
+              aria-label={`Set cell fill ${color}`}
+              disabled={
+                props.disabled ||
+                !props.onSetCellBackground ||
+                !tableContext?.operations.setCellBackground.enabled
+              }
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={() => props.onSetCellBackground?.(color)}
+              className="h-5 w-5 rounded border border-border disabled:opacity-40"
+              style={{ backgroundColor: color }}
+              title={tableContext?.operations.setCellBackground.reason}
+            />
+          ))}
+        </div>
+      </ToolbarSection>
 
-      <div className="flex items-center gap-1">
-        <span className="text-[11px] text-secondary">Fill</span>
-        {CELL_COLORS.map((color) => (
-          <button
-            key={color}
-            type="button"
-            aria-label={`Set cell fill ${color}`}
-            disabled={
-              props.disabled ||
-              !props.onSetCellBackground ||
-              !props.tableContext?.operations.setCellBackground.enabled
-            }
-            onMouseDown={preserveEditorSelectionMouseDown}
-            onClick={() => props.onSetCellBackground?.(color)}
-            className="h-6 w-6 rounded border border-border disabled:opacity-40"
-            style={{ backgroundColor: color }}
-            title={props.tableContext?.operations.setCellBackground.reason}
-          />
-        ))}
-      </div>
+      <ToolbarSection label="Table">
+        <ToolbarButton
+          ariaLabel="Delete table"
+          capability={tableContext?.operations.deleteTable}
+          danger
+          disabled={props.disabled}
+          onClick={props.onDeleteTable}
+        >
+          Delete table
+        </ToolbarButton>
+      </ToolbarSection>
+    </div>
+  );
+}
+
+function ToolbarBadge(props: {
+  children: React.ReactNode;
+  tone?: "neutral" | "accent";
+}) {
+  return (
+    <span
+      className={[
+        "rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-[0.08em]",
+        props.tone === "accent"
+          ? "bg-accent-soft text-accent"
+          : "bg-surface text-secondary",
+      ].join(" ")}
+    >
+      {props.children}
+    </span>
+  );
+}
 
-      <ToolbarButton
-        ariaLabel="Delete table"
-        capability={props.tableContext?.operations.deleteTable}
-        danger
-        disabled={props.disabled}
-        onClick={props.onDeleteTable}
-      >
-        Delete table
-      </ToolbarButton>
+function ToolbarSection(props: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-1 rounded-md bg-surface/60 px-1.5 py-1 ring-1 ring-border/35">
+      <span className="text-[9px] font-semibold uppercase tracking-[0.08em] text-tertiary">
+        {props.label}
+      </span>
+      <div className="flex flex-wrap items-center gap-1">{props.children}</div>
     </div>
   );
 }
@@ -188,7 +238,7 @@ function ToolbarButton(props: {
       onMouseDown={preserveEditorSelectionMouseDown}
       onClick={props.onClick}
       title={title}
-      className={`inline-flex h-8 items-center rounded-md px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+      className={`inline-flex h-7 items-center rounded-md px-2 text-[11px] font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
         props.danger
           ? "text-danger hover:bg-danger/10"
           : "text-primary hover:bg-surface"

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -34,7 +34,7 @@ export function createPMStateFromSnapshot(
   selection: SelectionSnapshot,
   plugins: Plugin[],
   mediaPreviews: Record<string, MediaPreviewDescriptor> = {},
-  showUnsupportedObjectPreviews = true,
+  showUnsupportedObjectPreviews = false,
 ): PMStateResult {
   const doc = buildPMDoc(surface, mediaPreviews, showUnsupportedObjectPreviews);
   const positionMap = buildPositionMap(surface);

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -30,7 +30,7 @@ export function createSurfaceDocumentBuildKey(input: {
         : getSurfaceIdentity(input.surface),
     activeStory: input.activeStory,
     mediaPreviewKey: input.mediaPreviewKey,
-    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? true,
+    showUnsupportedObjectPreviews: input.showUnsupportedObjectPreviews ?? false,
   });
 }
 
@@ -46,7 +46,6 @@ export function createSurfaceDecorationKey(input: {
   workflowMetadataSignature?: string;
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
-  suggestionsEnabled?: boolean;
 }): string {
   return JSON.stringify({
     markupDisplay: input.markupDisplay,
@@ -60,6 +59,5 @@ export function createSurfaceDecorationKey(input: {
     workflowMetadataSignature: input.workflowMetadataSignature ?? null,
     activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
     activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
-    suggestionsEnabled: input.suggestionsEnabled ?? false,
   });
 }

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

@@ -20,6 +20,7 @@ export type ReviewRailTab = "comments" | "changes";
 
 export interface TwReviewRailProps {
   activeTab: ReviewRailTab;
+  variant?: "docked" | "drawer";
   currentUserId?: string;
   comments: CommentSidebarSnapshot;
   trackedChanges: TrackedChangesSnapshot;
@@ -46,10 +47,17 @@ 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 TwReviewRail(props: TwReviewRailProps) {
+  const variant = props.variant ?? "docked";
   return (
     <aside
       aria-label="Review rail"
-      className="flex w-[336px] shrink-0 flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]"
+      data-wre-drawer={variant === "drawer" ? "true" : "false"}
+      className={[
+        "flex flex-col border-l border-border/60 bg-[var(--color-sidebar-tint)]",
+        variant === "drawer"
+          ? "h-full w-[min(336px,calc(100vw-1rem))] max-w-full shrink-0 shadow-[0_18px_40px_-22px_var(--color-shadow-strong)]"
+          : "w-[336px] shrink-0",
+      ].join(" ")}
     >
       <Tabs.Root
         value={props.activeTab}

package/src/ui-tailwind/toolbar/toolbar-layout.ts

@@ -0,0 +1,47 @@
+import type { WordReviewEditorChromePreset } from "../../api/public-types";
+
+export interface ToolbarLayoutModelInput {
+  compactMode: boolean;
+  preset: WordReviewEditorChromePreset;
+  hasActiveListContext: boolean;
+}
+
+export interface ToolbarLayoutModel {
+  showStyleSelectorsInRow: boolean;
+  showListActionsInRow: boolean;
+  showSpacingActionsInRow: boolean;
+  showInsertActionsInRow: boolean;
+  showUpdateActionsInRow: boolean;
+  showCompactOverflow: boolean;
+  showListContinuationInRow: boolean;
+}
+
+export function resolveToolbarLayoutModel(
+  input: ToolbarLayoutModelInput,
+): ToolbarLayoutModel {
+  if (!input.compactMode) {
+    const showListActions = input.preset === "simple" || input.preset === "advanced";
+    return {
+      showStyleSelectorsInRow: input.preset === "advanced",
+      showListActionsInRow: showListActions,
+      showSpacingActionsInRow: true,
+      showInsertActionsInRow: input.preset === "simple" || input.preset === "advanced",
+      showUpdateActionsInRow: input.preset === "advanced",
+      showCompactOverflow: false,
+      showListContinuationInRow: showListActions && input.hasActiveListContext,
+    };
+  }
+
+  const compactOverflowHasSecondaryActions =
+    input.preset === "simple" || input.preset === "advanced";
+
+  return {
+    showStyleSelectorsInRow: false,
+    showListActionsInRow: false,
+    showSpacingActionsInRow: false,
+    showInsertActionsInRow: false,
+    showUpdateActionsInRow: false,
+    showCompactOverflow: compactOverflowHasSecondaryActions,
+    showListContinuationInRow: false,
+  };
+}