@beyondwork/docx-react-component 1.0.17 → 1.0.19

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

@@ -0,0 +1,107 @@
+export type PerfProbeKind = "typing" | "selection";
+
+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;
+}
+
+export interface PerfProbeSummary {
+  samples: PerfProbeSample[];
+  latest: {
+    typing: PerfProbeSample | null;
+    selection: PerfProbeSample | null;
+  };
+}
+
+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(),
+  };
+
+  state.samples ??= [];
+  state.samples.push(sample);
+  const maxSamples = state.maxSamples ?? 20;
+  if (state.samples.length > maxSamples) {
+    state.samples.splice(0, state.samples.length - maxSamples);
+  }
+
+  return sample;
+}
+
+export function getLatestPerfSummary(): PerfProbeSummary | null {
+  const state = getEnabledState();
+  const samples = state?.samples ?? [];
+  if (!state || samples.length === 0) {
+    return null;
+  }
+
+  return {
+    samples: [...samples],
+    latest: {
+      typing: [...samples].reverse().find((sample) => sample.kind === "typing") ?? null,
+      selection: [...samples].reverse().find((sample) => sample.kind === "selection") ?? null,
+    },
+  };
+}
+
+function getEnabledState(): PerfProbeState | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const state = window.__DOCX_REACT_PERF_PROBE__;
+  if (!state?.enabled) {
+    return null;
+  }
+  return state;
+}

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;
 
+            if (view.state.selection instanceof NodeSelection) {
+              callbacks.onSelectionChange(
+                createNodeSelectionSnapshot(posMap.pmToRuntime(view.state.selection.from), 1),
+              );
+              return;
+            }
+
             const { from, to } = view.state.selection;
-            const runtimeAnchor = posMap.pmToRuntime(from);
-            const runtimeHead = posMap.pmToRuntime(to);
             callbacks.onSelectionChange(
-              createSelectionSnapshot(runtimeAnchor, runtimeHead),
+              createSelectionSnapshot(posMap.pmToRuntime(from), posMap.pmToRuntime(to)),
             );
           }
         },
@@ -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;
+      },
+    },
+  });
+}

package/src/ui-tailwind/editor-surface/pm-position-map.ts

@@ -25,7 +25,7 @@ export function buildPositionMap(surface: EditorSurfaceSnapshot): PositionMap {
         return entries[0]?.pmStart ?? 1;
       }
       if (runtimePos >= runtimeStorySize) {
-        return pmDocSize - 1;
+        return entries[entries.length - 1]?.pmEnd ?? pmDocSize - 1;
       }
 
       for (const entry of entries) {
@@ -75,7 +75,7 @@ function walkBlocks(
   for (const block of blocks) {
     switch (block.kind) {
       case "paragraph": {
-        const pmContentStart = nextPmCursor + 1;
+        const pmContentStart = nextPmCursor;
         const runtimeLength = block.to - block.from;
         entries.push({
           runtimeStart: block.from,

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

@@ -95,6 +95,7 @@ export const editorSchema = new Schema({
         numberingInstanceId: { default: null },
         numberingLevel: { default: null },
         numberingPrefix: { default: null },
+        numberingSuffix: { default: null },
         alignment: { default: null },
         spacingBefore: { default: null },
         spacingAfter: { default: null },
@@ -162,6 +163,7 @@ export const editorSchema = new Schema({
         if (styles.length > 0) attrs.style = styles.join("; ");
         const numberingPrefix = node.attrs.numberingPrefix as string | null;
         const numberingLevel = node.attrs.numberingLevel as number | null;
+        const numberingSuffix = node.attrs.numberingSuffix as "tab" | "space" | "nothing" | null;
         const children: Array<string | number | readonly unknown[]> = [];
         if (pageBreak) {
           children.push([
@@ -177,6 +179,7 @@ export const editorSchema = new Schema({
         }
         if (numberingPrefix) {
           const minWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          const marginRight = numberingSuffix === "nothing" ? "0.25rem" : numberingSuffix === "space" ? "0.5rem" : "0.75rem";
           children.push([
             "span",
             {
@@ -187,7 +190,8 @@ export const editorSchema = new Schema({
               ...(typeof numberingLevel === "number"
                 ? { "data-numbering-level": String(numberingLevel) }
                 : {}),
-              style: `min-width: ${minWidth}ch; margin-right: 0.75rem; font-variant-numeric: tabular-nums;`,
+              ...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {}),
+              style: `min-width: ${minWidth}ch; margin-right: ${marginRight}; font-variant-numeric: tabular-nums;`,
             },
             numberingPrefix,
           ]);
@@ -300,14 +304,28 @@ export const editorSchema = new Schema({
         alias: { default: null },
         tag: { default: null },
         lock: { default: null },
+        checkboxChecked: { default: null },
+        dateValue: { default: null },
+        dropdownItems: { default: null },
+        comboBoxItems: { default: null },
+        showingPlcHdr: { default: false },
       },
       toDOM(node) {
-        const meta = [node.attrs.alias, node.attrs.tag, node.attrs.sdtType].filter(Boolean).join(" · ");
+        const sdtType = node.attrs.sdtType as string | null;
+        const typeLabel = sdtType === "checkbox" ? "\u2611 Checkbox"
+          : sdtType === "date" ? "\uD83D\uDCC5 Date"
+          : sdtType === "dropDownList" ? "\u25BE Dropdown"
+          : sdtType === "comboBox" ? "\u25BE Combo box"
+          : sdtType === "plainText" ? "\u270E Plain text"
+          : sdtType === "richText" ? "\u270E Rich text"
+          : sdtType ?? undefined;
+        const meta = [node.attrs.alias, node.attrs.tag, typeLabel].filter(Boolean).join(" \u00B7 ");
         return [
           "section",
           {
             class: "my-2 rounded-xl border border-primary/15 bg-surface-raised/60 px-3 py-2",
             "data-node-type": "sdt_block",
+            ...(sdtType ? { "data-sdt-type": sdtType } : {}),
           },
           [
             "div",
@@ -332,13 +350,29 @@ export const editorSchema = new Schema({
         warningId: { default: "" },
         label: { default: "Locked" },
         detail: { default: "" },
+        presentation: { default: "inline-chip" },
       },
       toDOM(node) {
+        const presentation = node.attrs.presentation as string;
+        if (presentation === "quiet-marker") {
+          return [
+            "span",
+            {
+              class: "inline-block h-0 w-0 overflow-hidden align-baseline",
+              "data-node-type": "opaque_inline",
+              "data-inline-presentation": "quiet-marker",
+              contenteditable: "false",
+              title: node.attrs.detail as string,
+              "aria-label": node.attrs.label as string,
+            },
+          ];
+        }
         return [
           "span",
           {
             class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-comment bg-warning-soft",
             "data-node-type": "opaque_inline",
+            "data-inline-presentation": "inline-chip",
             title: node.attrs.detail as string,
           },
           "\uD83D\uDD12 " + (node.attrs.label as string),
@@ -403,7 +437,7 @@ export const editorSchema = new Schema({
       inline: true,
       group: "inline",
       atom: true,
-      selectable: false,
+      selectable: true,
       attrs: {
         text: { default: null },
         geometry: { default: null },
@@ -454,7 +488,7 @@ export const editorSchema = new Schema({
       inline: true,
       group: "inline",
       atom: true,
-      selectable: false,
+      selectable: true,
       attrs: {
         text: { default: null },
         shapeType: { default: null },
@@ -551,7 +585,15 @@ export const editorSchema = new Schema({
     },
     vanish: {
       toDOM() {
-        return ["span", { style: "opacity: 0.3; text-decoration: underline dotted; text-decoration-color: rgba(0,0,0,0.3)" }, 0];
+        return [
+          "span",
+          {
+            style: "display: none",
+            "data-hidden-text": "true",
+            "aria-hidden": "true",
+          },
+          0,
+        ];
       },
     },
     emboss: {

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

@@ -1,5 +1,5 @@
 import { Fragment, type Node as PMNode } from "prosemirror-model";
-import { EditorState, type Plugin, Selection, TextSelection } from "prosemirror-state";
+import { EditorState, NodeSelection, type Plugin, Selection, TextSelection } from "prosemirror-state";
 
 import type {
   EditorSurfaceSnapshot,
@@ -30,35 +30,72 @@ export function createPMStateFromSnapshot(
 ): PMStateResult {
   const doc = buildPMDoc(surface);
   const positionMap = buildPositionMap(surface);
+  const pmSelection = createPMSelectionFromSnapshot(doc, positionMap, selection);
 
-  // Convert runtime selection to PM selection
-  const pmAnchor = clamp(
-    positionMap.runtimeToPm(selection.anchor),
-    1,
-    positionMap.pmDocSize - 1,
-  );
-  const pmHead = clamp(
-    positionMap.runtimeToPm(selection.head),
-    1,
-    positionMap.pmDocSize - 1,
-  );
+  const state = EditorState.create({
+    doc,
+    selection: pmSelection,
+    plugins,
+  });
+
+  return { state, positionMap };
+}
 
-  let pmSelection: Selection;
+export function createPMSelectionFromSnapshot(
+  doc: PMNode,
+  positionMap: PositionMap,
+  selection: SelectionSnapshot,
+): Selection {
+  const pmAnchor = clamp(positionMap.runtimeToPm(selection.anchor), 1, positionMap.pmDocSize - 1);
+  const pmHead = clamp(positionMap.runtimeToPm(selection.head), 1, positionMap.pmDocSize - 1);
   try {
-    pmSelection = TextSelection.between(doc.resolve(pmAnchor), doc.resolve(pmHead));
+    if (selection.activeRange.kind === "node") {
+      return NodeSelection.create(doc, pmAnchor);
+    }
+
+    const forward = selection.head >= selection.anchor;
+    const resolvedAnchor = resolveInlineBoundary(doc, pmAnchor, forward ? 1 : -1);
+    const resolvedHead = resolveInlineBoundary(doc, pmHead, forward ? -1 : 1);
+    if (resolvedAnchor !== null && resolvedHead !== null) {
+      return TextSelection.create(doc, resolvedAnchor, resolvedHead);
+    }
+
+    const $anchor = doc.resolve(pmAnchor);
+    const $head = doc.resolve(pmHead);
+    return (
+      Selection.findFrom($anchor, 1, true) ??
+      Selection.findFrom($anchor, -1, true) ??
+      Selection.findFrom($head, 1, true) ??
+      Selection.findFrom($head, -1, true) ??
+      Selection.near($anchor, 1)
+    );
   } catch {
     // If the mapped runtime selection is invalid or lands in a non-text block,
     // let ProseMirror choose the nearest valid starting selection.
-    pmSelection = Selection.atStart(doc);
+    return Selection.atStart(doc);
   }
+}
 
-  const state = EditorState.create({
-    doc,
-    selection: pmSelection,
-    plugins,
-  });
+function resolveInlineBoundary(
+  doc: PMNode,
+  pos: number,
+  bias: -1 | 1,
+): number | null {
+  const $pos = doc.resolve(pos);
+  if ($pos.parent.inlineContent) {
+    return pos;
+  }
 
-  return { state, positionMap };
+  const candidate =
+    Selection.findFrom($pos, bias, true) ??
+    Selection.findFrom($pos, -bias, true) ??
+    Selection.near($pos, bias);
+
+  if (candidate.$from.parent.inlineContent || candidate.$to.parent.inlineContent) {
+    return bias < 0 ? candidate.to : candidate.from;
+  }
+
+  return null;
 }
 
 function buildPMDoc(surface: EditorSurfaceSnapshot): PMNode {
@@ -124,6 +161,9 @@ function buildParagraph(
       numberingPrefix:
         (block as typeof block & { numberingPrefix?: string }).numberingPrefix ??
         null,
+      numberingSuffix:
+        (block as typeof block & { numberingSuffix?: string }).numberingSuffix ??
+        null,
       alignment: block.alignment ?? null,
       spacingBefore: block.spacing?.before ?? null,
       spacingAfter: block.spacing?.after ?? null,
@@ -226,6 +266,14 @@ function buildInlineContent(segment: SurfaceInlineSegment): PMNode[] {
     case "opaque_inline":
       return [buildOpaqueInlineOrComplexAtom(segment)];
 
+    case "note_ref": {
+      const text = editorSchema.text(
+        segment.label,
+        [editorSchema.marks.superscript.create()],
+      );
+      return [text];
+    }
+
     default:
       return [];
   }
@@ -262,17 +310,36 @@ function buildTable(
             gridSpan: cell.gridSpan,
             verticalMerge: cell.verticalMerge,
             backgroundColor: cell.backgroundColor ?? null,
+            verticalAlign: cell.verticalAlign ?? null,
+            borderTop: cell.borderTop ?? null,
+            borderRight: cell.borderRight ?? null,
+            borderBottom: cell.borderBottom ?? null,
+            borderLeft: cell.borderLeft ?? null,
           },
           Fragment.from(cellContent),
         ),
       );
     }
-    rows.push(editorSchema.nodes.table_row.create(null, Fragment.from(cells)));
+    rows.push(editorSchema.nodes.table_row.create(
+      {
+        height: row.height ?? null,
+        heightRule: row.heightRule ?? null,
+        isHeader: row.isHeader ?? false,
+      },
+      Fragment.from(cells),
+    ));
   }
   return editorSchema.nodes.table.create(
     {
       styleId: block.styleId ?? null,
       gridColumns: block.gridColumns,
+      alignment: block.alignment ?? null,
+      tblLookFirstRow: block.tblLook?.firstRow ?? false,
+      tblLookLastRow: block.tblLook?.lastRow ?? false,
+      tblLookFirstColumn: block.tblLook?.firstColumn ?? false,
+      tblLookLastColumn: block.tblLook?.lastColumn ?? false,
+      tblLookNoHBand: block.tblLook?.noHBand ?? false,
+      tblLookNoVBand: block.tblLook?.noVBand ?? false,
     },
     Fragment.from(rows),
   );
@@ -304,6 +371,11 @@ function buildSdtBlock(
       alias: block.alias ?? null,
       tag: block.tag ?? null,
       lock: block.lock ?? null,
+      checkboxChecked: block.checkboxChecked ?? null,
+      dateValue: block.dateValue ?? null,
+      dropdownItems: block.dropdownItems ?? null,
+      comboBoxItems: block.comboBoxItems ?? null,
+      showingPlcHdr: block.showingPlcHdr ?? false,
     },
     Fragment.from(children),
   );
@@ -360,6 +432,7 @@ function buildOpaqueInlineOrComplexAtom(
     warningId: segment.warningId,
     label,
     detail,
+    presentation: segment.presentation ?? "inline-chip",
   });
 }