@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -1,139 +0,0 @@
-import React from "react";
-import type { FocusEventHandler } from "react";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { Check, MessageSquare, Pencil, X } from "lucide-react";
-
-import type { SuggestionCardModel } from "../../ui/headless/selection-toolbar-model";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface TwSuggestionCardProps {
-  model: SuggestionCardModel;
-  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
-  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
-  onAccept?: () => void;
-  onReject?: () => void;
-  onEditSuggestion?: () => 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 TwSuggestionCard(props: TwSuggestionCardProps) {
-  const contextLabel = summarizeSuggestionContext(props.model);
-  const commentDisabled = !props.model.canAddComment;
-  const tooltipLabel = commentDisabled
-    ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
-    : "Comment on suggestion";
-
-  return (
-    <div
-      data-testid="suggestion-card"
-      className="inline-flex max-w-[min(28rem,calc(100vw-2rem))] flex-col gap-2 rounded-2xl border border-border/80 bg-canvas px-3 py-2 shadow-xl ring-1 ring-border/80"
-      onFocusCapture={props.onFocusCapture}
-      onBlurCapture={props.onBlurCapture}
-      role="group"
-      aria-label="Suggestion actions"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-warning">
-            {props.model.kindLabel}
-          </div>
-          <div className="mt-1 max-w-[16rem] truncate text-sm text-primary">
-            {props.model.previewText}
-          </div>
-        </div>
-        {contextLabel ? (
-          <div className="shrink-0 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-accent">
-            {contextLabel}
-          </div>
-        ) : null}
-      </div>
-
-      <div className="flex flex-wrap items-center gap-1.5">
-        <SuggestionActionButton
-          icon={<Check className="h-3.5 w-3.5" />}
-          label="Accept suggestion"
-          disabled={!props.model.canAccept}
-          tone="accept"
-          onClick={props.onAccept}
-        />
-        <SuggestionActionButton
-          icon={<X className="h-3.5 w-3.5" />}
-          label="Reject suggestion"
-          disabled={!props.model.canReject}
-          tone="reject"
-          onClick={props.onReject}
-        />
-        <SuggestionActionButton
-          icon={<Pencil className="h-3.5 w-3.5" />}
-          label="Edit suggestion"
-          disabled={!props.model.canEditSuggestion}
-          tone="neutral"
-          onClick={props.onEditSuggestion}
-        />
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <button
-              type="button"
-              aria-label="Comment on suggestion"
-              disabled={commentDisabled}
-              onMouseDown={preserveEditorSelectionMouseDown}
-              onClick={props.onAddComment}
-              className={`inline-flex h-8 items-center gap-1 rounded-lg border border-border px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
-            >
-              <MessageSquare className="h-3.5 w-3.5" />
-              Comment
-            </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}
-            >
-              {tooltipLabel}
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
-      </div>
-    </div>
-  );
-}
-
-function summarizeSuggestionContext(model: SuggestionCardModel): string | null {
-  const labels = model.badges.map((badge) => badge.label.trim()).filter(Boolean);
-  if (labels.length === 0) {
-    return null;
-  }
-  const summary = labels.slice(0, 2).join(" · ");
-  return summary.length > 36 ? `${summary.slice(0, 33)}...` : summary;
-}
-
-function SuggestionActionButton(props: {
-  icon: React.ReactNode;
-  label: string;
-  disabled: boolean;
-  tone: "accept" | "reject" | "neutral";
-  onClick?: () => void;
-}) {
-  const toneClass = props.tone === "accept"
-    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300"
-    : props.tone === "reject"
-      ? "border-rose-500/30 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-300"
-      : "border-border text-secondary hover:bg-surface";
-
-  return (
-    <button
-      type="button"
-      aria-label={props.label}
-      disabled={props.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={props.onClick}
-      className={`inline-flex h-8 items-center gap-1 rounded-lg border px-2.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
-    >
-      {props.icon}
-      {props.label.replace(" suggestion", "").replace(" on suggestion", "")}
-    </button>
-  );
-}

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

@@ -1,128 +0,0 @@
-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/chrome/tw-unsaved-modal.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { AlertTriangle } from "lucide-react";
-
-export interface TwUnsavedModalProps {
-  open: boolean;
-  message?: string;
-  onDiscard: () => void;
-  onCancel: () => void;
-}
-
-export function TwUnsavedModal(props: TwUnsavedModalProps) {
-  if (!props.open) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/30 backdrop-blur-sm"
-        onClick={props.onCancel}
-      />
-
-      {/* Modal */}
-      <div className="relative mx-4 w-full max-w-md rounded-xl bg-canvas p-6 shadow-lg ring-1 ring-border">
-        <div className="flex items-start gap-3">
-          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-warning-soft">
-            <AlertTriangle className="h-5 w-5 text-warning" />
-          </div>
-          <div className="flex-1">
-            <h3 className="text-base font-semibold text-primary">
-              Unsaved changes
-            </h3>
-            <p className="mt-1.5 text-sm text-secondary leading-relaxed">
-              {props.message ??
-                "You have unsaved changes that will be lost. Your work is being autosaved, but the latest edits may not be saved yet."}
-            </p>
-          </div>
-        </div>
-
-        <div className="mt-5 flex justify-end gap-2">
-          <button
-            type="button"
-            onClick={props.onCancel}
-            className="rounded-lg px-4 py-2 text-sm font-medium text-secondary hover:bg-surface transition-colors"
-          >
-            Keep editing
-          </button>
-          <button
-            type="button"
-            onClick={props.onDiscard}
-            className="rounded-lg bg-danger px-4 py-2 text-sm font-medium text-white hover:bg-danger/90 transition-colors"
-          >
-            Discard changes
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/ui-tailwind/chrome/use-before-unload.ts

@@ -1,20 +0,0 @@
-import { useEffect } from "react";
-
-/**
- * Prompts the browser's native "unsaved changes" dialog when the user
- * tries to close the tab or navigate away while `shouldWarn` is true.
- */
-export function useBeforeUnload(shouldWarn: boolean): void {
-  useEffect(() => {
-    if (!shouldWarn) return;
-
-    function handleBeforeUnload(event: BeforeUnloadEvent) {
-      event.preventDefault();
-      // Modern browsers ignore custom messages and show their own.
-      event.returnValue = "";
-    }
-
-    window.addEventListener("beforeunload", handleBeforeUnload);
-    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-  }, [shouldWarn]);
-}

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

@@ -1,179 +0,0 @@
-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-collab-plugins.ts

@@ -1,40 +0,0 @@
-import { type Plugin } from "prosemirror-state";
-import { keymap } from "prosemirror-keymap";
-import { columnResizing, tableEditing } from "prosemirror-tables";
-import { yCursorPlugin, ySyncPlugin, yUndoPlugin, undo, redo } from "y-prosemirror";
-import type { Awareness } from "y-protocols/awareness";
-import type { Doc as YDoc } from "yjs";
-
-import {
-  createSelectionSyncPlugin,
-  type SelectionSyncCallbacks,
-} from "./pm-command-bridge";
-
-export interface CollabPluginOptions {
-  ydoc: YDoc;
-  awareness?: Awareness;
-  selectionCallbacks: SelectionSyncCallbacks;
-}
-
-export function createCollabPlugins(options: CollabPluginOptions): Plugin[] {
-  const yXmlFragment = options.ydoc.getXmlFragment("prosemirror");
-
-  const plugins: Plugin[] = [
-    ySyncPlugin(yXmlFragment),
-    yUndoPlugin(),
-    keymap({
-      "Mod-z": undo,
-      "Mod-y": redo,
-      "Shift-Mod-z": redo,
-    }),
-    createSelectionSyncPlugin(options.selectionCallbacks),
-    tableEditing(),
-    columnResizing(),
-  ];
-
-  if (options.awareness) {
-    plugins.splice(1, 0, yCursorPlugin(options.awareness));
-  }
-
-  return plugins;
-}