@beyondwork/docx-react-component 1.0.18 → 1.0.19

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

@@ -68,6 +68,11 @@
   --font-legal-serif: var(--font-legal-serif, "Source Serif 4", "Georgia", "Times New Roman", serif);
   --font-legal-sans: var(--font-legal-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
   --font-legal-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Consolas", monospace;
+
+  /* Page-mode document surface */
+  --color-page-shadow: rgba(16, 24, 40, 0.06);
+  --color-page-border: rgba(0, 0, 0, 0.04);
+  --color-page-bg: #ffffff;
 }
 
 /* ─── Dark mode overrides ─── */
@@ -108,6 +113,96 @@
 
   --color-shadow: rgba(0, 0, 0, 0.32);
   --color-shadow-strong: rgba(0, 0, 0, 0.48);
+
+  --color-page-shadow: rgba(0, 0, 0, 0.18);
+  --color-page-border: rgba(255, 255, 255, 0.06);
+  --color-page-bg: #1e1e1e;
+}
+
+/*
+ * ─── Font substitution map ───
+ *
+ * Common Word font families mapped to redistributable metric-compatible or
+ * open substitutes. These CSS custom properties are consumed by the
+ * ProseMirror surface font_family mark and by the page-mode typography
+ * layer. Hosts can override individual properties to supply their own
+ * licensed fonts.
+ *
+ * Strategy:
+ *   1. Use metric-compatible open substitutes where available
+ *      (e.g. Liberation Serif for Times New Roman, Carlito for Calibri).
+ *   2. Fall back through system-installed metric-compatible fonts
+ *      (e.g. Cambria → system serif, Calibri → system sans).
+ *   3. Final fallback to the editor's legal-serif or legal-sans role font.
+ *
+ * This pipeline does NOT ship proprietary Microsoft fonts. It uses only
+ * redistributable or system-installed families.
+ */
+:root {
+  /* Serif substitutions */
+  --wre-font-times-new-roman: "Liberation Serif", "Times New Roman", "Source Serif 4", "Georgia", serif;
+  --wre-font-cambria: "Caladea", "Cambria", "Source Serif 4", "Georgia", serif;
+  --wre-font-garamond: "EB Garamond", "Garamond", "Source Serif 4", serif;
+  --wre-font-book-antiqua: "Palatino Linotype", "Book Antiqua", "Source Serif 4", serif;
+  --wre-font-georgia: "Georgia", "Source Serif 4", serif;
+
+  /* Sans-serif substitutions */
+  --wre-font-calibri: "Carlito", "Calibri", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --wre-font-arial: "Liberation Sans", "Arial", "Inter", sans-serif;
+  --wre-font-helvetica: "Liberation Sans", "Helvetica Neue", "Helvetica", "Inter", sans-serif;
+  --wre-font-verdana: "Verdana", "Inter", sans-serif;
+  --wre-font-tahoma: "Tahoma", "Inter", sans-serif;
+  --wre-font-segoe-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --wre-font-century-gothic: "URW Gothic", "Century Gothic", "Inter", sans-serif;
+
+  /* Monospace substitutions */
+  --wre-font-courier-new: "Liberation Mono", "Courier New", "JetBrains Mono", monospace;
+  --wre-font-consolas: "JetBrains Mono", "Consolas", "SF Mono", monospace;
+}
+
+/* ─── Page-mode typography ─── */
+.wre-page-surface {
+  font-family: var(--font-legal-serif);
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+  font-variant-ligatures: common-ligatures;
+}
+
+.wre-page-surface p {
+  margin: 0 0 0.5em 0;
+  orphans: 2;
+  widows: 2;
+}
+
+/* Page chrome — shadow, border, and background for the page-mode document panel */
+.wre-page-chrome {
+  background: var(--color-page-bg);
+  border: 1px solid var(--color-page-border);
+  border-radius: 2px;
+  box-shadow: 0 1px 4px var(--color-page-shadow);
+}
+
+/* Canvas-mode typography — lighter, review-first baseline */
+.wre-canvas-surface {
+  font-family: var(--font-legal-serif);
+  font-size: 15px;
+  line-height: 1.6;
+  color: var(--color-primary);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+
+/* Wide-table readability in page mode */
+.wre-page-surface table {
+  font-size: 14px;
+  line-height: 1.45;
 }
 
 /* ─── Base resets ─── */
@@ -188,3 +283,31 @@
 .prosemirror-surface .ProseMirror ::selection {
   background: var(--color-accent-soft);
 }
+
+.prosemirror-surface .ProseMirror .ProseMirror-selectednode {
+  outline: none;
+  background-color: var(--color-accent-soft);
+  border-radius: 4px;
+}
+
+/*
+ * ─── Preservation noise suppression ───
+ *
+ * Quiet-marker opaque inlines (w:proofErr, w:lastRenderedPageBreak, w:permStart,
+ * w:permEnd) are preserved in the canonical document for export safety but
+ * contribute zero visual weight to the reading/editing surface. They remain in
+ * the DOM as zero-dimension spans so round-trip export is unaffected.
+ */
+.prosemirror-surface .ProseMirror [data-inline-presentation="quiet-marker"] {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  vertical-align: baseline;
+  pointer-events: none;
+}
+
+/* ─── Page workspace zoom scaling ─── */
+.wre-page-chrome[style*="scale"] {
+  will-change: transform;
+}

package/src/ui-tailwind/toolbar/tw-toolbar-icon-button.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
 
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
 export interface TwToolbarIconButtonProps {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
@@ -19,7 +21,9 @@ export function TwToolbarIconButton(props: TwToolbarIconButtonProps) {
       <Tooltip.Trigger asChild>
         <button
           type="button"
+          aria-label={props.label}
           disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
           onClick={props.onClick}
           className={[
             "inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors outline-none",

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -1,50 +1,94 @@
 import React from "react";
 
 import * as Popover from "@radix-ui/react-popover";
+import * as Select from "@radix-ui/react-select";
 import * as Toggle from "@radix-ui/react-toggle";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import {
+  Bold,
+  ChevronDown,
   Download,
   Eye,
   EyeOff,
   FileText,
+  Indent,
+  Italic,
   MessageSquare,
+  Minus,
   Monitor,
+  Outdent,
+  Plus,
   Redo2,
   ShieldAlert,
   ShieldCheck,
+  Underline,
   Undo2,
 } from "lucide-react";
 
-import type { CompatibilityPanelSnapshot, EditorWarning } from "../../api/public-types";
+import type {
+  CompatibilityPanelSnapshot,
+  EditorStoryTarget,
+  EditorWarning,
+  FormattingStateSnapshot,
+  StyleCatalogSnapshot,
+  WorkspaceMode,
+  ZoomLevel,
+} from "../../api/public-types";
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwHealthPanel } from "../review/tw-health-panel";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
-export type ViewMode = "canvas" | "document";
-
 export interface TwToolbarProps {
   sourceLabel?: string;
   capabilities?: SessionCapabilities;
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
-  viewMode: ViewMode;
+  workspaceMode: WorkspaceMode;
+  zoomLevel?: ZoomLevel;
+  formattingState?: FormattingStateSnapshot;
+  styleCatalog?: StyleCatalogSnapshot;
   /** Display toggle for tracked change decorations (not a runtime mutation toggle). */
   showTrackedChanges: boolean;
+  /** Active story target — shows a breadcrumb when editing a secondary story. */
+  activeStory?: EditorStoryTarget;
+  /** Called when the user clicks the story breadcrumb to return to main body. */
+  onCloseStory?: () => void;
   onUndo: () => void;
   onRedo: () => void;
+  onSetParagraphStyle?: (styleId: string) => void;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onOutdent?: () => void;
+  onIndent?: () => void;
   onAddComment: () => void;
   onExport: () => void;
-  onViewModeChange: (value: ViewMode) => void;
+  onWorkspaceModeChange: (value: WorkspaceMode) => void;
+  onZoomChange?: (level: ZoomLevel) => void;
   onShowTrackedChangesChange: (show: boolean) => void;
 }
 
+export function getSupportedZoomPresets(): ReadonlyArray<number> {
+  return [75, 100, 125, 150];
+}
+
 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 TwToolbar(props: TwToolbarProps) {
   const caps = props.capabilities;
+  const workspaceMode = props.workspaceMode;
+  const isPageMode = workspaceMode === "page";
+  const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
+  const zoomLevel = props.zoomLevel ?? 100;
+  const zoomLabel =
+    typeof zoomLevel === "number"
+      ? `${zoomLevel}%`
+      : zoomLevel === "pageWidth"
+        ? "Fit width"
+        : "Fit page";
 
   return (
     <header className="flex h-10 shrink-0 items-center gap-1 border-b border-border px-2">
@@ -64,7 +108,68 @@ export function TwToolbar(props: TwToolbarProps) {
         />
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {/* Paragraph style selector and B/I/U removed — not yet supported */}
+        <ToolbarParagraphStyleSelect
+          disabled={!caps?.canEdit || paragraphStyles.length === 0 || !props.onSetParagraphStyle}
+          styles={paragraphStyles}
+          value={props.formattingState?.paragraphStyleId}
+          onValueChange={props.onSetParagraphStyle}
+        />
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        <TwToolbarIconButton
+          icon={Bold}
+          label="Bold"
+          active={props.formattingState?.bold ?? false}
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onToggleBold}
+        />
+        <TwToolbarIconButton
+          icon={Italic}
+          label="Italic"
+          active={props.formattingState?.italic ?? false}
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onToggleItalic}
+        />
+        <TwToolbarIconButton
+          icon={Underline}
+          label="Underline"
+          active={props.formattingState?.underline ?? false}
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onToggleUnderline}
+        />
+
+        <div className="mx-1 h-4 w-px bg-border" />
+
+        <TwToolbarIconButton
+          icon={Outdent}
+          label="Outdent"
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onOutdent}
+        />
+        <TwToolbarIconButton
+          icon={Indent}
+          label="Indent"
+          disabled={caps ? !caps.canEdit : true}
+          onClick={props.onIndent}
+        />
+
+        {/* Story focus breadcrumb — visible when editing a secondary story */}
+        {props.activeStory && props.activeStory.kind !== "main" ? (
+          <>
+            <div className="mx-1 h-4 w-px bg-border" />
+            <button
+              type="button"
+              onClick={props.onCloseStory}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              className={`inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium text-accent hover:bg-accent-soft transition-colors outline-none ${focusRingClass}`}
+              aria-label={`Editing ${storyLabel(props.activeStory)} — click to return to main body`}
+            >
+              <span className="text-secondary">&larr;</span>
+              {storyLabel(props.activeStory)}
+            </button>
+          </>
+        ) : null}
       </div>
 
       {/* Center: document title */}
@@ -90,6 +195,7 @@ export function TwToolbar(props: TwToolbarProps) {
               pressed={props.showTrackedChanges}
               onPressedChange={props.onShowTrackedChangesChange}
               disabled={caps ? !caps.trackChangesSupported : false}
+              onMouseDown={preserveEditorSelectionMouseDown}
               className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none disabled:opacity-40 ${focusRingClass}`}
             >
               {props.showTrackedChanges ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
@@ -107,12 +213,12 @@ export function TwToolbar(props: TwToolbarProps) {
 
         <div className="mx-1 h-4 w-px bg-border" />
 
-        {/* View mode toggle group: Canvas (clean, flowing) / Document (paged, markup) */}
+        {/* View mode toggle group: Canvas (clean, flowing) / Page (layout-sensitive) */}
         <ToggleGroup.Root
           type="single"
-          value={props.viewMode}
+          value={workspaceMode}
           onValueChange={(v: string) => {
-            if (v) props.onViewModeChange(v as ViewMode);
+            if (v) props.onWorkspaceModeChange(v as WorkspaceMode);
           }}
           className="flex items-center gap-0.5"
         >
@@ -120,6 +226,8 @@ export function TwToolbar(props: TwToolbarProps) {
             <Tooltip.Trigger asChild>
               <ToggleGroup.Item
                 value="canvas"
+                aria-label="Canvas workspace"
+                onMouseDown={preserveEditorSelectionMouseDown}
                 className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
               >
                 <Monitor className="h-3.5 w-3.5" />
@@ -134,7 +242,9 @@ export function TwToolbar(props: TwToolbarProps) {
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <ToggleGroup.Item
-                value="document"
+                value="page"
+                aria-label="Page workspace"
+                onMouseDown={preserveEditorSelectionMouseDown}
                 className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-accent-soft data-[state=on]:text-accent outline-none ${focusRingClass}`}
               >
                 <FileText className="h-3.5 w-3.5" />
@@ -142,12 +252,113 @@ export function TwToolbar(props: TwToolbarProps) {
             </Tooltip.Trigger>
             <Tooltip.Portal>
               <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
-                Document — paged with markup
+                Page — layout-sensitive view
               </Tooltip.Content>
             </Tooltip.Portal>
           </Tooltip.Root>
         </ToggleGroup.Root>
 
+        {/* Zoom controls — visible in page mode */}
+        {isPageMode && props.onZoomChange ? (
+          <>
+            <div className="mx-1 h-4 w-px bg-border" />
+            <div className="flex items-center gap-0.5">
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Zoom out"
+                    className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                    disabled={typeof zoomLevel === "number" && zoomLevel <= 50}
+                    onMouseDown={preserveEditorSelectionMouseDown}
+                    onClick={() => {
+                      const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                      props.onZoomChange!(Math.max(50, current - 10));
+                    }}
+                  >
+                    <Minus className="h-3 w-3" />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+                    Zoom out
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+
+              <Popover.Root>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Popover.Trigger asChild>
+                      <button
+                        type="button"
+                        aria-label={`Zoom: ${zoomLabel}`}
+                        onMouseDown={preserveEditorSelectionMouseDown}
+                        className={`inline-flex h-7 items-center justify-center rounded-md px-1.5 text-[11px] font-medium text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                      >
+                        {zoomLabel}
+                      </button>
+                    </Popover.Trigger>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+                      Zoom level
+                    </Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+                <Popover.Portal>
+                  <Popover.Content
+                    className="w-[140px] rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1 z-50"
+                    sideOffset={8}
+                    align="center"
+                  >
+                    {getSupportedZoomPresets().map((preset) => {
+                      const label = `${preset}%`;
+                      return (
+                        <Popover.Close key={preset} asChild>
+                          <button
+                            type="button"
+                            onMouseDown={preserveEditorSelectionMouseDown}
+                            className={`w-full rounded-md px-3 py-1.5 text-left text-xs transition-colors hover:bg-surface ${
+                              zoomLevel === preset ? "font-semibold text-accent" : "text-primary"
+                            }`}
+                            onClick={() => props.onZoomChange!(preset)}
+                          >
+                            {label}
+                          </button>
+                        </Popover.Close>
+                      );
+                    })}
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover.Root>
+
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Zoom in"
+                    className={`inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface outline-none ${focusRingClass}`}
+                    disabled={typeof zoomLevel === "number" && zoomLevel >= 200}
+                    onMouseDown={preserveEditorSelectionMouseDown}
+                    onClick={() => {
+                      const current = typeof zoomLevel === "number" ? zoomLevel : 100;
+                      props.onZoomChange!(Math.min(200, current + 10));
+                    }}
+                  >
+                    <Plus className="h-3 w-3" />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+                    Zoom in
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </div>
+          </>
+        ) : null}
+
         {/* Health indicator */}
         {props.compatibility && props.warnings ? (
           <Popover.Root>
@@ -156,6 +367,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 <Popover.Trigger asChild>
                   <button
                     type="button"
+                    onMouseDown={preserveEditorSelectionMouseDown}
                     className={`relative inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-surface hover:text-primary outline-none ${focusRingClass} ${
                       (caps?.healthIssueCount ?? 0) > 0 ? "text-secondary" : "text-secondary"
                     }`}
@@ -204,6 +416,7 @@ export function TwToolbar(props: TwToolbarProps) {
             <button
               type="button"
               disabled={caps ? !caps.canExport : true}
+              onMouseDown={preserveEditorSelectionMouseDown}
               className={[
                 "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-semibold transition-colors outline-none",
                 focusRingClass,
@@ -214,7 +427,7 @@ export function TwToolbar(props: TwToolbarProps) {
               onClick={props.onExport}
             >
               <Download className="h-3.5 w-3.5" />
-              Export
+              Export .docx
             </button>
           </Tooltip.Trigger>
           <Tooltip.Portal>
@@ -229,3 +442,69 @@ export function TwToolbar(props: TwToolbarProps) {
     </header>
   );
 }
+
+function ToolbarParagraphStyleSelect(props: {
+  styles: StyleCatalogSnapshot["paragraphs"];
+  value?: string;
+  disabled: boolean;
+  onValueChange?: (styleId: string) => void;
+}) {
+  const resolvedValue =
+    props.value && props.styles.some((style) => style.styleId === props.value)
+      ? props.value
+      : undefined;
+
+  return (
+    <Select.Root
+      disabled={props.disabled}
+      onValueChange={(value) => props.onValueChange?.(value)}
+      value={resolvedValue}
+    >
+      <Select.Trigger
+        aria-label="Paragraph style"
+        onMouseDown={preserveEditorSelectionMouseDown}
+        className={`inline-flex h-7 min-w-[8.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2.5 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+      >
+        <Select.Value placeholder="Style" />
+        <Select.Icon>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </Select.Icon>
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content
+          align="start"
+          className="z-50 overflow-hidden rounded-lg bg-canvas shadow-lg ring-1 ring-border"
+          position="popper"
+          sideOffset={8}
+        >
+          <Select.Viewport className="p-1">
+            {props.styles.map((style) => (
+              <Select.Item
+                className={`flex cursor-pointer items-center rounded-md px-2.5 py-1.5 text-xs text-primary outline-none data-[highlighted]:bg-surface data-[state=checked]:bg-accent-soft data-[state=checked]:text-accent ${focusRingClass}`}
+                key={style.styleId}
+                value={style.styleId}
+              >
+                <Select.ItemText>{style.displayName}</Select.ItemText>
+              </Select.Item>
+            ))}
+          </Select.Viewport>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
+
+function storyLabel(target: EditorStoryTarget): string {
+  switch (target.kind) {
+    case "header":
+      return `Header (${target.variant})`;
+    case "footer":
+      return `Footer (${target.variant})`;
+    case "footnote":
+      return "Footnote";
+    case "endnote":
+      return "Endnote";
+    default:
+      return "Document";
+  }
+}