@beyondwork/docx-react-component 1.0.18 → 1.0.20

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

@@ -1,33 +1,93 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import type { FocusEventHandler } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { MessageSquare } 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";
 
 export interface TwSelectionToolbarProps {
-  selectionPreview: string;
-  readOnly: boolean;
-  canAddComment?: boolean;
+  model: SelectionToolbarModel;
   disabledReason?: string;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
   onAddComment?: () => void;
 }
 
 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 TwSelectionToolbar(props: TwSelectionToolbarProps) {
-  const addCommentDisabled = props.readOnly || props.canAddComment === false;
+export const TwSelectionToolbar = forwardRef<HTMLDivElement, TwSelectionToolbarProps>(function TwSelectionToolbar(props, ref) {
+  const { model } = props;
+  const addCommentDisabled = !model.canAddComment;
+  const formattingDisabled = !model.canToggleFormatting;
+  const contextLabel = summarizeSelectionContext(model);
   const tooltipLabel = addCommentDisabled
     ? props.disabledReason ?? "Select text within one paragraph to add a DOCX comment"
     : "Add comment";
+
   return (
-    <div className="mb-6 inline-flex items-center gap-1 rounded-lg bg-canvas shadow-lg ring-1 ring-border p-1">
+    <div
+      ref={ref}
+      data-testid="selection-toolbar"
+      className="inline-flex max-w-[min(24rem,calc(100vw-2rem))] items-center gap-1.5 rounded-xl border border-border/80 bg-canvas px-1.5 py-1.5 shadow-lg ring-1 ring-border/80"
+      role="toolbar"
+      aria-label="Selection actions"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+    >
+      <ToolbarActionButton
+        icon={<Bold className="h-3.5 w-3.5" />}
+        label="Bold selection"
+        pressed={model.boldActive}
+        disabled={formattingDisabled}
+        onClick={props.onToggleBold}
+      />
+      <ToolbarActionButton
+        icon={<Italic className="h-3.5 w-3.5" />}
+        label="Italic selection"
+        pressed={model.italicActive}
+        disabled={formattingDisabled}
+        onClick={props.onToggleItalic}
+      />
+      <ToolbarActionButton
+        icon={<Underline className="h-3.5 w-3.5" />}
+        label="Underline selection"
+        pressed={model.underlineActive}
+        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" />
+
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <button
             type="button"
-            aria-label="Comment"
+            aria-label="Add comment from selection"
             disabled={addCommentDisabled}
+            onMouseDown={preserveEditorSelectionMouseDown}
             onClick={props.onAddComment}
-            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:opacity-30 disabled:cursor-not-allowed ${focusRingClass}`}
+            className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors text-accent hover:bg-accent-soft disabled:cursor-not-allowed disabled:opacity-30 ${focusRingClass}`}
           >
             <MessageSquare className="h-3.5 w-3.5" />
           </button>
@@ -41,10 +101,86 @@ export function TwSelectionToolbar(props: TwSelectionToolbarProps) {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-      <div className="h-4 w-px bg-border mx-0.5" />
-      <span className="text-xs text-tertiary px-2 max-w-[200px] truncate">
-        {props.selectionPreview}
-      </span>
+
+      {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")
+                ? "bg-accent-soft text-accent"
+                : "bg-surface text-tertiary"
+            }`}
+          >
+            {contextLabel}
+          </span>
+        </>
+      ) : null}
     </div>
   );
+});
+
+function summarizeSelectionContext(model: SelectionToolbarModel): string | null {
+  if (model.badges.length === 0) {
+    return null;
+  }
+
+  const accentBadges = model.badges.filter((badge) => badge.tone === "accent");
+  const source = accentBadges.length > 0 ? accentBadges : model.badges;
+  const labels = source.slice(0, 2).map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+
+  const summary = labels.join(" · ");
+  return summary.length > 30 ? `${summary.slice(0, 27)}...` : summary;
+}
+
+interface ToolbarActionButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  pressed: boolean;
+  disabled: boolean;
+  onClick?: () => void;
+}
+
+function ToolbarActionButton(props: ToolbarActionButtonProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          type="button"
+          aria-label={props.label}
+          aria-pressed={props.pressed}
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          onClick={props.onClick}
+          className={`inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:cursor-not-allowed disabled:opacity-30 ${
+            props.pressed
+              ? "bg-accent-soft text-accent"
+              : "text-secondary hover:bg-surface"
+          } ${focusRingClass}`}
+        >
+          {props.icon}
+        </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}
+        >
+          {props.label}
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
 }

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

@@ -0,0 +1,179 @@
+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;
+  kind: PerfProbeKind;
+  durationMs: number;
+  recordedAt: number;
+}
+
+interface PendingProbe {
+  kind: PerfProbeKind;
+  startedAt: number;
+}
+
+interface PerfProbeState {
+  enabled?: boolean;
+  nextToken?: number;
+  pending?: Record<string, PendingProbe>;
+  samples?: PerfProbeSample[];
+  maxSamples?: number;
+  invalidationCounts?: Record<string, number>;
+}
+
+export interface PerfProbeSummary {
+  samples: PerfProbeSample[];
+  latest: Partial<Record<PerfProbeKind, PerfProbeSample | null>>;
+  invalidationCounts: Record<string, number>;
+}
+
+declare global {
+  interface Window {
+    __DOCX_REACT_PERF_PROBE__?: PerfProbeState;
+  }
+}
+
+export function startPerfProbe(kind: PerfProbeKind): string | null {
+  const state = getEnabledState();
+  if (!state) {
+    return null;
+  }
+
+  const token = `${kind}-${state.nextToken ?? 0}`;
+  state.nextToken = (state.nextToken ?? 0) + 1;
+  state.pending ??= {};
+  state.pending[token] = {
+    kind,
+    startedAt: performance.now(),
+  };
+  return token;
+}
+
+export function finishPerfProbe(token: string | null | undefined): PerfProbeSample | null {
+  if (!token) {
+    return null;
+  }
+  const state = getEnabledState();
+  if (!state?.pending?.[token]) {
+    return null;
+  }
+
+  const pending = state.pending[token];
+  delete state.pending[token];
+
+  const sample: PerfProbeSample = {
+    token,
+    kind: pending.kind,
+    durationMs: performance.now() - pending.startedAt,
+    recordedAt: Date.now(),
+  };
+
+  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 ?? [];
+  if (!state || samples.length === 0) {
+    return null;
+  }
+
+  return {
+    samples: [...samples],
+    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;
+  }
+  const state = window.__DOCX_REACT_PERF_PROBE__;
+  if (!state?.enabled) {
+    return 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

@@ -1,9 +1,12 @@
-import { Plugin, PluginKey } from "prosemirror-state";
+import { NodeSelection, Plugin, PluginKey } from "prosemirror-state";
 import { keymap } from "prosemirror-keymap";
 import { columnResizing, goToNextCell, isInTable, tableEditing } from "prosemirror-tables";
 
 import type { SelectionSnapshot } from "../../api/public-types";
-import { createSelectionSnapshot } from "../../ui/headless/selection-helpers";
+import {
+  createNodeSelectionSnapshot,
+  createSelectionSnapshot,
+} from "../../ui/headless/selection-helpers";
 import type { PositionMap } from "./pm-position-map";
 
 export interface CommandBridgeCallbacks {
@@ -13,10 +16,12 @@ export interface CommandBridgeCallbacks {
   onSplitParagraph: () => void;
   onInsertHardBreak: () => void;
   onInsertTab: () => void;
+  onOutdentTab?: () => void;
   onUndo: () => void;
   onRedo: () => void;
   onSelectionChange: (selection: SelectionSnapshot) => void;
   getPositionMap: () => PositionMap | null;
+  isSelectionSyncSuppressed?: () => boolean;
 }
 
 const bridgeKey = new PluginKey("command-bridge");
@@ -31,6 +36,8 @@ const bridgeKey = new PluginKey("command-bridge");
 export function createCommandBridgePlugins(
   callbacks: CommandBridgeCallbacks,
 ): Plugin[] {
+  let isComposing = false;
+
   // Transaction filter: block ALL doc-changing transactions.
   // The runtime is the sole authority for document mutations.
   const filterPlugin = new Plugin({
@@ -48,15 +55,26 @@ export function createCommandBridgePlugins(
     view() {
       return {
         update(view, prevState) {
+          if (callbacks.isSelectionSyncSuppressed?.()) {
+            return;
+          }
+          if (isComposing) {
+            return;
+          }
           if (!view.state.selection.eq(prevState.selection)) {
             const posMap = callbacks.getPositionMap();
             if (!posMap) return;
 
-            const { from, to } = view.state.selection;
-            const runtimeAnchor = posMap.pmToRuntime(from);
-            const runtimeHead = posMap.pmToRuntime(to);
+            if (view.state.selection instanceof NodeSelection) {
+              callbacks.onSelectionChange(
+                createNodeSelectionSnapshot(posMap.pmToRuntime(view.state.selection.from), 1),
+              );
+              return;
+            }
+
+            const { anchor, head } = view.state.selection;
             callbacks.onSelectionChange(
-              createSelectionSnapshot(runtimeAnchor, runtimeHead),
+              createSelectionSnapshot(posMap.pmToRuntime(anchor), posMap.pmToRuntime(head)),
             );
           }
         },
@@ -67,6 +85,20 @@ export function createCommandBridgePlugins(
   // Text input hook: intercept typed characters.
   const inputPlugin = new Plugin({
     props: {
+      handleDOMEvents: {
+        blur() {
+          isComposing = false;
+          return false;
+        },
+        compositionstart() {
+          isComposing = true;
+          return false;
+        },
+        compositionend() {
+          isComposing = false;
+          return false;
+        },
+      },
       handleTextInput(_view, _from, _to, text) {
         callbacks.onInsertText(text);
         return true; // Block PM from processing
@@ -87,22 +119,27 @@ export function createCommandBridgePlugins(
   // Keymap: intercept editing keys and dispatch runtime commands.
   const keymapPlugin = keymap({
     Backspace: () => {
+      if (isComposing) return false;
       callbacks.onDeleteBackward();
       return true;
     },
     Delete: () => {
+      if (isComposing) return false;
       callbacks.onDeleteForward();
       return true;
     },
     Enter: () => {
+      if (isComposing) return false;
       callbacks.onSplitParagraph();
       return true;
     },
     "Shift-Enter": () => {
+      if (isComposing) return false;
       callbacks.onInsertHardBreak();
       return true;
     },
     Tab: (state, dispatch, view) => {
+      if (isComposing) return false;
       if (isInTable(state)) {
         return goToNextCell(1)(state, dispatch, view);
       }
@@ -110,10 +147,12 @@ export function createCommandBridgePlugins(
       return true;
     },
     "Shift-Tab": (state, dispatch, view) => {
+      if (isComposing) return false;
       if (isInTable(state)) {
         return goToNextCell(-1)(state, dispatch, view);
       }
-      return false;
+      callbacks.onOutdentTab?.();
+      return true;
     },
     "Mod-z": () => {
       callbacks.onUndo();

package/src/ui-tailwind/editor-surface/pm-contextual-ui.ts

@@ -0,0 +1,31 @@
+import { Plugin } from "prosemirror-state";
+
+export interface ContextualInteractionCallbacks {
+  onCommentActivated?: (commentId: string) => void;
+  onRevisionActivated?: (revisionId: string) => void;
+}
+
+export function createContextualInteractionPlugin(
+  callbacks: ContextualInteractionCallbacks,
+): Plugin {
+  return new Plugin({
+    props: {
+      handleClick(_view, _pos, event) {
+        const target = event.target as HTMLElement | null;
+        const commentId = target?.closest?.("[data-comment-id]")?.getAttribute("data-comment-id");
+        if (commentId) {
+          callbacks.onCommentActivated?.(commentId);
+          return true;
+        }
+
+        const revisionId = target?.closest?.("[data-revision-id]")?.getAttribute("data-revision-id");
+        if (revisionId) {
+          callbacks.onRevisionActivated?.(revisionId);
+          return true;
+        }
+
+        return false;
+      },
+    },
+  });
+}