@beyondwork/docx-react-component 1.0.19 → 1.0.21

package/src/ui-tailwind/chrome/tw-layout-panel.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+
+import type {
+  PageLayoutSnapshot,
+  SectionPageNumberingPatch,
+  SectionBreakType,
+  SectionLayoutPatch,
+} from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwLayoutPanelProps {
+  pageLayout: PageLayoutSnapshot;
+  readOnly: boolean;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
+  onSetSectionPageNumbering?: (
+    sectionIndex: number,
+    patch: SectionPageNumberingPatch | null,
+  ) => void;
+}
+
+export function TwLayoutPanel(props: TwLayoutPanelProps) {
+  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
+  const titlePageEnabled = props.pageLayout.differentFirstPage;
+
+  return (
+    <div className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm">
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Section
+      </span>
+      <ToolbarButton
+        ariaLabel="Insert next-page section break"
+        disabled={props.readOnly || !props.onInsertSectionBreak}
+        onClick={() => props.onInsertSectionBreak?.("nextPage")}
+      >
+        Next-page break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel={`Switch section to ${nextOrientation}`}
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            pageSize: {
+              orientation: nextOrientation,
+              width: props.pageLayout.pageHeight,
+              height: props.pageLayout.pageWidth,
+            },
+          })}
+      >
+        {nextOrientation === "landscape" ? "Landscape" : "Portrait"}
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Delete current section break"
+        disabled={props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak}
+        onClick={() => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex)}
+      >
+        Delete break
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Restart page numbering at 1"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            start: 1,
+          })}
+      >
+        Restart numbering
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Use roman page numbering"
+        disabled={props.readOnly || !props.onSetSectionPageNumbering}
+        onClick={() =>
+          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
+            ...(props.pageLayout.pageNumbering ?? {}),
+            format: "roman",
+          })}
+      >
+        Roman numerals
+      </ToolbarButton>
+      <ToolbarButton
+        ariaLabel="Toggle different first page"
+        disabled={props.readOnly || !props.onUpdateSectionLayout}
+        onClick={() =>
+          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
+            titlePage: !titlePageEnabled,
+          })}
+      >
+        {titlePageEnabled ? "Same first page" : "Different first page"}
+      </ToolbarButton>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+    >
+      {props.children}
+    </button>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React from "react";
+
+export interface ActiveObjectContext {
+  kind: "textbox" | "shape";
+  display: "inline" | "floating";
+}
+
+export interface TwObjectContextToolbarProps {
+  activeObject: ActiveObjectContext;
+}
+
+export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
+  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
+
+  return (
+    <div
+      data-testid="object-context-toolbar"
+      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Object
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {label}
+      </span>
+      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
+        {props.activeObject.display}
+      </span>
+      <span className="text-xs text-secondary">
+        Object selection is active.
+      </span>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import type { FocusEventHandler } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { Bold, Italic, MessageSquare, Underline } from "lucide-react";
+import { Baseline, Bold, Highlighter, Italic, MessageSquare, Underline } from "lucide-react";
 
 import type { SelectionToolbarModel } from "../../ui/headless/selection-toolbar-model";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
@@ -14,6 +14,8 @@ export interface TwSelectionToolbarProps {
   onToggleBold?: () => void;
   onToggleItalic?: () => void;
   onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
   onAddComment?: () => void;
 }
 
@@ -60,6 +62,20 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         disabled={formattingDisabled}
         onClick={props.onToggleUnderline}
       />
+      <ToolbarActionButton
+        icon={<Baseline className="h-3.5 w-3.5" />}
+        label="Text color blue"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetTextColor?.("#1660a8")}
+      />
+      <ToolbarActionButton
+        icon={<Highlighter className="h-3.5 w-3.5" />}
+        label="Highlight yellow"
+        pressed={false}
+        disabled={formattingDisabled}
+        onClick={() => props.onSetHighlightColor?.("#ffff00")}
+      />
 
       <div className="mx-0.5 h-4 w-px bg-border" />
 
@@ -86,9 +102,18 @@ export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarP
         </Tooltip.Portal>
       </Tooltip.Root>
 
-      {contextLabel ? (
+      {model.previewText ? (
         <>
           <div className="mx-0.5 h-4 w-px bg-border" />
+          <span className="max-w-[8rem] truncate text-[11px] text-secondary">
+            {model.previewText}
+          </span>
+        </>
+      ) : null}
+
+      {contextLabel ? (
+        <>
+          {!model.previewText ? <div className="mx-0.5 h-4 w-px bg-border" /> : null}
           <span
             className={`min-w-0 max-w-[11rem] truncate rounded-full px-2 py-0.5 text-[10px] font-medium tracking-[0.08em] ${
               model.badges.some((badge) => badge.tone === "accent")

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

@@ -0,0 +1,128 @@
+import React from "react";
+
+import type { StyleCatalogSnapshot } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwTableContextToolbarProps {
+  disabled: boolean;
+  tableStyles: StyleCatalogSnapshot["tables"];
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onDeleteTable?: () => void;
+}
+
+const CELL_COLORS = [
+  "#ffffff",
+  "#f0f0ee",
+  "#dbeafe",
+  "#fef3c7",
+  "#dcfce7",
+  "#fce7f3",
+] as const;
+
+export function TwTableContextToolbar(props: TwTableContextToolbarProps) {
+  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"
+    >
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+        Table
+      </span>
+
+      <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}
+        onMouseDown={preserveEditorSelectionMouseDown}
+        onChange={(event) => props.onSetTableStyle?.(event.target.value)}
+        defaultValue=""
+      >
+        <option value="" disabled>Table style</option>
+        {props.tableStyles.map((style) => (
+          <option key={style.styleId} value={style.styleId}>
+            {style.displayName}
+          </option>
+        ))}
+      </select>
+
+      <ToolbarButton ariaLabel="Add row above" disabled={props.disabled} onClick={props.onAddRowBefore}>
+        Row above
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add row below" disabled={props.disabled} onClick={props.onAddRowAfter}>
+        Row below
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Delete row" disabled={props.disabled} onClick={props.onDeleteRow}>
+        Delete row
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add column left" disabled={props.disabled} onClick={props.onAddColumnBefore}>
+        Column left
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Add column right" disabled={props.disabled} onClick={props.onAddColumnAfter}>
+        Column right
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Delete column" disabled={props.disabled} onClick={props.onDeleteColumn}>
+        Delete column
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Merge cells" disabled={props.disabled} onClick={props.onMergeCells}>
+        Merge
+      </ToolbarButton>
+      <ToolbarButton ariaLabel="Split cell" disabled={props.disabled} onClick={props.onSplitCell}>
+        Split
+      </ToolbarButton>
+
+      <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}
+            onMouseDown={preserveEditorSelectionMouseDown}
+            onClick={() => props.onSetCellBackground?.(color)}
+            className="h-6 w-6 rounded border border-border disabled:opacity-40"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+
+      <ToolbarButton ariaLabel="Delete table" danger disabled={props.disabled} onClick={props.onDeleteTable}>
+        Delete table
+      </ToolbarButton>
+    </div>
+  );
+}
+
+function ToolbarButton(props: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  danger?: boolean;
+  disabled: boolean;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={props.ariaLabel}
+      disabled={props.disabled || !props.onClick}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-8 items-center rounded-md px-2 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${
+        props.danger
+          ? "text-danger hover:bg-danger/10"
+          : "text-primary hover:bg-surface"
+      }`}
+    >
+      {props.children}
+    </button>
+  );
+}

package/src/ui-tailwind/editor-surface/perf-probe.ts

@@ -1,4 +1,16 @@
-export type PerfProbeKind = "typing" | "selection";
+export type PerfProbeKind =
+  | "typing"
+  | "selection"
+  | "runtime.create"
+  | "snapshot.surface"
+  | "snapshot.compatibility"
+  | "snapshot.navigation"
+  | "pm.rebuild"
+  | "pm.decorations"
+  | "pm.mount"
+  | "shell.render"
+  | "workspace.chrome"
+  | "selection.sync";
 
 export interface PerfProbeSample {
   token: string;
@@ -18,14 +30,13 @@ interface PerfProbeState {
   pending?: Record<string, PendingProbe>;
   samples?: PerfProbeSample[];
   maxSamples?: number;
+  invalidationCounts?: Record<string, number>;
 }
 
 export interface PerfProbeSummary {
   samples: PerfProbeSample[];
-  latest: {
-    typing: PerfProbeSample | null;
-    selection: PerfProbeSample | null;
-  };
+  latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>>;
+  invalidationCounts: Record<string, number>;
 }
 
 declare global {
@@ -69,16 +80,47 @@ export function finishPerfProbe(token: string | null | undefined): PerfProbeSamp
     recordedAt: Date.now(),
   };
 
-  state.samples ??= [];
-  state.samples.push(sample);
-  const maxSamples = state.maxSamples ?? 20;
-  if (state.samples.length > maxSamples) {
-    state.samples.splice(0, state.samples.length - maxSamples);
+  pushSample(state, sample);
+
+  return sample;
+}
+
+export function recordPerfSample(
+  kind: PerfProbeKind,
+  durationMs = 0,
+): PerfProbeSample | null {
+  const state = getEnabledState();
+  if (!state) {
+    return null;
   }
 
+  const token = `${kind}-${state.nextToken ?? 0}`;
+  state.nextToken = (state.nextToken ?? 0) + 1;
+  const sample: PerfProbeSample = {
+    token,
+    kind,
+    durationMs,
+    recordedAt: Date.now(),
+  };
+  pushSample(state, sample);
   return sample;
 }
 
+export function incrementInvalidationCounter(
+  counter: string,
+  amount = 1,
+): number {
+  const state = getEnabledState();
+  if (!state) {
+    return 0;
+  }
+
+  state.invalidationCounts ??= {};
+  state.invalidationCounts[counter] =
+    (state.invalidationCounts[counter] ?? 0) + amount;
+  return state.invalidationCounts[counter]!;
+}
+
 export function getLatestPerfSummary(): PerfProbeSummary | null {
   const state = getEnabledState();
   const samples = state?.samples ?? [];
@@ -88,13 +130,22 @@ export function getLatestPerfSummary(): PerfProbeSummary | null {
 
   return {
     samples: [...samples],
-    latest: {
-      typing: [...samples].reverse().find((sample) => sample.kind === "typing") ?? null,
-      selection: [...samples].reverse().find((sample) => sample.kind === "selection") ?? null,
-    },
+    latest: buildLatestSampleMap(samples),
+    invalidationCounts: { ...(state.invalidationCounts ?? {}) },
   };
 }
 
+export function resetPerfProbeState(): void {
+  const state = getEnabledState();
+  if (!state) {
+    return;
+  }
+  state.nextToken = 0;
+  state.pending = {};
+  state.samples = [];
+  state.invalidationCounts = {};
+}
+
 function getEnabledState(): PerfProbeState | null {
   if (typeof window === "undefined") {
     return null;
@@ -105,3 +156,24 @@ function getEnabledState(): PerfProbeState | null {
   }
   return state;
 }
+
+function pushSample(state: PerfProbeState, sample: PerfProbeSample): void {
+  state.samples ??= [];
+  state.samples.push(sample);
+  const maxSamples = state.maxSamples ?? 20;
+  if (state.samples.length > maxSamples) {
+    state.samples.splice(0, state.samples.length - maxSamples);
+  }
+}
+
+function buildLatestSampleMap(
+  samples: PerfProbeSample[],
+): Partial<Record<PerfProbeKind, PerfProbeSample | null>> {
+  const latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>> = {};
+  for (const sample of [...samples].reverse()) {
+    if (latest[sample.kind] === undefined) {
+      latest[sample.kind] = sample;
+    }
+  }
+  return latest;
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -72,9 +72,9 @@ export function createCommandBridgePlugins(
               return;
             }
 
-            const { from, to } = view.state.selection;
+            const { anchor, head } = view.state.selection;
             callbacks.onSelectionChange(
-              createSelectionSnapshot(posMap.pmToRuntime(from), posMap.pmToRuntime(to)),
+              createSelectionSnapshot(posMap.pmToRuntime(anchor), posMap.pmToRuntime(head)),
             );
           }
         },