@beyondwork/docx-react-component 1.0.27 → 1.0.29

package/src/ui-tailwind/editor-surface/tw-segment-view.tsx

@@ -1,111 +0,0 @@
-import React from "react";
-
-import type { SelectionSnapshot, SurfaceInlineSegment } from "../../api/public-types";
-import type { CommentDecorationModel } from "../../ui/headless/comment-decoration-model";
-import { getCommentHighlightClass, getCommentRangeState, type MarkupDisplay } from "../../ui/headless/comment-decoration-model";
-import type { RevisionDecorationModel } from "../../ui/headless/revision-decoration-model";
-import { getRevisionHighlightClass, shouldHideInCleanMode } from "../../ui/headless/revision-decoration-model";
-import { createSelectionSnapshot, selectionTouchesRange } from "../../ui/headless/selection-helpers";
-import { TwInlineToken } from "./tw-inline-token";
-
-export interface TwSegmentViewProps {
-  segment: SurfaceInlineSegment;
-  selection: SelectionSnapshot;
-  markupDisplay: MarkupDisplay;
-  commentDecorations?: CommentDecorationModel;
-  revisionDecorations?: RevisionDecorationModel;
-  onSelectionChange?: (selection: SelectionSnapshot) => void;
-  onCommentActivated?: (commentId: string) => void;
-  onRevisionActivated?: (revisionId: string) => void;
-}
-
-export function TwSegmentView(props: TwSegmentViewProps) {
-  const { segment, selection, markupDisplay } = props;
-
-  // Non-text segments delegate to TwInlineToken
-  if (segment.kind === "tab" || segment.kind === "hard_break" || segment.kind === "image" || segment.kind === "opaque_inline") {
-    return (
-      <TwInlineToken
-        segment={segment}
-        selection={selection}
-        markupDisplay={markupDisplay}
-        commentDecorations={props.commentDecorations}
-        onSelectionChange={props.onSelectionChange}
-      />
-    );
-  }
-
-  if (segment.kind !== "text") {
-    return null;
-  }
-
-  // Text segment: render character-by-character for click-to-position editing
-  const characters = Array.from(segment.text);
-
-  return (
-    <>
-      {characters.map((character, index) => {
-        const from = segment.from + index;
-        const to = from + 1;
-        const isSelected = selectionTouchesRange(selection, from, to);
-
-        // Hide deletions in clean mode
-        if (shouldHideInCleanMode(props.revisionDecorations, from, to) && markupDisplay === "clean") {
-          return null;
-        }
-
-        const commentClass = getCommentHighlightClass(props.commentDecorations, from, to, markupDisplay);
-        const revisionClass = getRevisionHighlightClass(props.revisionDecorations, from, to, markupDisplay);
-
-        // Check if clicking this char should activate a comment or revision
-        const commentState = getCommentRangeState(props.commentDecorations, from, to);
-        const overlappingComment = commentState.overlapping[0];
-
-        // Build mark classes
-        let markClasses = "";
-        if (segment.marks) {
-          if (segment.marks.includes("bold")) markClasses += "font-bold ";
-          if (segment.marks.includes("italic")) markClasses += "italic ";
-          if (segment.marks.includes("underline")) markClasses += "underline ";
-          if (segment.marks.includes("strikethrough")) markClasses += "line-through ";
-        }
-
-        const hyperlinkClass = segment.hyperlinkHref
-          ? "text-accent underline decoration-1 underline-offset-2 "
-          : "";
-
-        return (
-          <button
-            key={`${segment.segmentId}-${from}`}
-            type="button"
-            tabIndex={-1}
-            onMouseDown={(event) => {
-              event.preventDefault();
-              props.onSelectionChange?.(createSelectionSnapshot(to));
-
-              // Activate comment/revision on click if decorated
-              if (overlappingComment) {
-                props.onCommentActivated?.(overlappingComment.commentId);
-              }
-            }}
-            data-comment-id={overlappingComment?.commentId}
-            className={[
-              "relative inline border-none bg-transparent cursor-text whitespace-pre p-0 m-0",
-              "text-[15px] text-primary leading-normal",
-              commentClass,
-              revisionClass,
-              markClasses,
-              hyperlinkClass,
-              isSelected ? "bg-surface-hover rounded-[3px]" : "",
-            ].filter(Boolean).join(" ")}
-          >
-            {character}
-            {selection.isCollapsed && selection.anchor === from ? (
-              <span aria-hidden="true" className="absolute left-0 top-[0.1em] w-0.5 h-[1em] bg-accent rounded-full animate-wre-blink pointer-events-none" />
-            ) : null}
-          </button>
-        );
-      })}
-    </>
-  );
-}

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -1,436 +0,0 @@
-/**
- * ProseMirror NodeView implementations for table nodes.
- *
- * These NodeViews render table structure as proper HTML tables with
- * colspan/rowspan support for merged cells. Horizontal merges come
- * directly from `colspan`/`gridSpan`. Vertical merges can be rendered
- * from either explicit `rowspan` attrs or OOXML `verticalMerge`
- * chains when upstream projection has not yet materialized row spans.
- */
-
-import type { Node as PMNode } from "prosemirror-model";
-import type { NodeViewConstructor, ViewMutationRecord } from "prosemirror-view";
-
-const TABLE_LAYOUT_SYNC_EVENT = "pm-table-layout-sync";
-
-interface TableCellLayout {
-  cellIndex: number;
-  colSpan: number;
-  hidden: boolean;
-  rowSpan: number;
-}
-
-interface OpenVerticalMerge {
-  col: number;
-  colSpan: number;
-  continuedThisRow: boolean;
-  layout: TableCellLayout;
-}
-
-interface OpenExplicitRowSpan {
-  col: number;
-  colSpan: number;
-  remainingRows: number;
-}
-
-function readRowPadding(node: PMNode, side: "gridBefore" | "gridAfter"): number {
-  const value = node.attrs[side];
-  return typeof value === "number" && value > 0 ? value : 0;
-}
-
-function sumGridColumns(
-  gridColumns: readonly number[],
-  start: number,
-  count: number,
-): number {
-  let total = 0;
-  for (let index = start; index < start + count; index += 1) {
-    total += gridColumns[index] ?? 0;
-  }
-  return total;
-}
-
-function removePaddingCells(rowElement: HTMLTableRowElement): void {
-  for (const cell of Array.from(rowElement.cells)) {
-    if (cell.hasAttribute("data-row-padding")) {
-      cell.remove();
-    }
-  }
-}
-
-function createPaddingCell(colSpan: number, widthTwips: number): HTMLTableCellElement {
-  const cell = document.createElement("td");
-  cell.setAttribute("data-row-padding", "true");
-  cell.setAttribute("aria-hidden", "true");
-  cell.colSpan = Math.max(1, colSpan);
-  cell.style.border = "none";
-  cell.style.padding = "0";
-  cell.style.background = "transparent";
-  if (widthTwips > 0) {
-    cell.style.width = `${widthTwips / 20}pt`;
-  }
-  return cell;
-}
-
-function nodesAreOnlyRowPadding(nodes: ArrayLike<Node> & { item?(index: number): Node | null }): boolean {
-  for (let index = 0; index < nodes.length; index += 1) {
-    const node = nodes.item ? nodes.item(index) : nodes[index];
-    if (!node) {
-      continue;
-    }
-    if (!(node instanceof HTMLElement) || !node.hasAttribute("data-row-padding")) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function resolveRenderedColspan(node: PMNode): number {
-  const colspan = node.attrs.colspan as number | undefined;
-  if (typeof colspan === "number" && colspan > 1) {
-    return colspan;
-  }
-
-  const gridSpan = node.attrs.gridSpan as number | undefined;
-  if (typeof gridSpan === "number" && gridSpan > 1) {
-    return gridSpan;
-  }
-
-  return 1;
-}
-
-function resolveRenderedRowspan(node: PMNode): number {
-  const rowspan = node.attrs.rowspan as number | undefined;
-  return typeof rowspan === "number" && rowspan > 1 ? rowspan : 1;
-}
-
-function readVerticalMerge(node: PMNode): "restart" | "continue" | null {
-  const value = node.attrs.verticalMerge;
-  return value === "restart" || value === "continue" ? value : null;
-}
-
-function isColumnCoveredBySpan(spans: readonly OpenExplicitRowSpan[], column: number): boolean {
-  return spans.some(
-    (span) => column >= span.col && column < span.col + span.colSpan,
-  );
-}
-
-function findVerticalMergeOwner(
-  openVerticalMerges: readonly OpenVerticalMerge[],
-  column: number,
-  colSpan: number,
-): OpenVerticalMerge | null {
-  const matchingByWidth = openVerticalMerges.find(
-    (merge) => merge.col >= column && merge.colSpan === colSpan,
-  );
-  if (matchingByWidth) {
-    return matchingByWidth;
-  }
-
-  return openVerticalMerges.find((merge) => merge.col >= column) ?? null;
-}
-
-function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
-  const rowLayouts: TableCellLayout[][] = [];
-  const openVerticalMerges: OpenVerticalMerge[] = [];
-  const openExplicitRowSpans: OpenExplicitRowSpan[] = [];
-
-  for (let rowIndex = 0; rowIndex < tableNode.childCount; rowIndex += 1) {
-    for (const merge of openVerticalMerges) {
-      merge.continuedThisRow = false;
-    }
-
-    const rowNode = tableNode.child(rowIndex);
-    const layoutRow: TableCellLayout[] = [];
-    let column = 0;
-
-    for (let cellIndex = 0; cellIndex < rowNode.childCount; cellIndex += 1) {
-      const cellNode = rowNode.child(cellIndex);
-      const colSpan = resolveRenderedColspan(cellNode);
-      const explicitRowSpan = resolveRenderedRowspan(cellNode);
-      const verticalMerge = readVerticalMerge(cellNode);
-
-      if (verticalMerge === "continue") {
-        const owner = findVerticalMergeOwner(openVerticalMerges, column, colSpan);
-        if (owner) {
-          owner.layout.rowSpan += 1;
-          owner.continuedThisRow = true;
-          layoutRow.push({
-            cellIndex,
-            colSpan,
-            hidden: true,
-            rowSpan: 1,
-          });
-          column = owner.col + owner.colSpan;
-          continue;
-        }
-      }
-
-      while (isColumnCoveredBySpan(openExplicitRowSpans, column)) {
-        column += 1;
-      }
-
-      const layout: TableCellLayout = {
-        cellIndex,
-        colSpan,
-        hidden: false,
-        rowSpan: explicitRowSpan,
-      };
-      layoutRow.push(layout);
-
-      if (verticalMerge === "restart") {
-        openVerticalMerges.push({
-          col: column,
-          colSpan,
-          continuedThisRow: true,
-          layout,
-        });
-      }
-
-      if (explicitRowSpan > 1) {
-        openExplicitRowSpans.push({
-          col: column,
-          colSpan,
-          remainingRows: explicitRowSpan - 1,
-        });
-      }
-
-      column += colSpan;
-    }
-
-    for (let index = openVerticalMerges.length - 1; index >= 0; index -= 1) {
-      if (!openVerticalMerges[index]?.continuedThisRow) {
-        openVerticalMerges.splice(index, 1);
-      }
-    }
-
-    for (let index = openExplicitRowSpans.length - 1; index >= 0; index -= 1) {
-      const span = openExplicitRowSpans[index];
-      if (!span) {
-        continue;
-      }
-      span.remainingRows -= 1;
-      if (span.remainingRows <= 0) {
-        openExplicitRowSpans.splice(index, 1);
-      }
-    }
-
-    rowLayouts.push(layoutRow);
-  }
-
-  return rowLayouts;
-}
-
-function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode: PMNode): void {
-  const rowLayouts = computeTableLayout(tableNode);
-  const rowElements = Array.from(tableBody.rows);
-  const gridColumns = Array.isArray(tableNode.attrs.gridColumns) ? tableNode.attrs.gridColumns as number[] : [];
-
-  for (let rowIndex = 0; rowIndex < rowLayouts.length; rowIndex += 1) {
-    const rowLayout = rowLayouts[rowIndex];
-    const rowElement = rowElements[rowIndex];
-    if (!rowLayout || !rowElement) {
-      continue;
-    }
-
-    removePaddingCells(rowElement);
-    const cellElements = Array.from(rowElement.cells);
-    for (const cellLayout of rowLayout) {
-      const element = cellElements[cellLayout.cellIndex];
-      if (!element) {
-        continue;
-      }
-
-      element.colSpan = cellLayout.colSpan > 1 ? cellLayout.colSpan : 1;
-      element.rowSpan = cellLayout.hidden ? 1 : cellLayout.rowSpan > 1 ? cellLayout.rowSpan : 1;
-      element.style.display = cellLayout.hidden ? "none" : "";
-
-      if (cellLayout.hidden) {
-        element.setAttribute("aria-hidden", "true");
-        element.setAttribute("data-vertical-merge-hidden", "true");
-      } else {
-        element.removeAttribute("aria-hidden");
-        element.removeAttribute("data-vertical-merge-hidden");
-      }
-    }
-
-    const rowNode = tableNode.child(rowIndex);
-    const gridBefore = readRowPadding(rowNode, "gridBefore");
-    const gridAfter = readRowPadding(rowNode, "gridAfter");
-    if (gridBefore > 0) {
-      rowElement.insertBefore(
-        createPaddingCell(gridBefore, sumGridColumns(gridColumns, 0, gridBefore)),
-        rowElement.firstChild,
-      );
-    }
-    if (gridAfter > 0) {
-      const start = Math.max(0, gridColumns.length - gridAfter);
-      rowElement.appendChild(
-        createPaddingCell(gridAfter, sumGridColumns(gridColumns, start, gridAfter)),
-      );
-    }
-  }
-}
-
-function requestTableLayoutSync(start: HTMLElement): void {
-  const table = start.closest("[data-pm-table-root='true']");
-  table?.dispatchEvent(new Event(TABLE_LAYOUT_SYNC_EVENT));
-}
-
-/**
- * NodeView for the table node.
- * Renders as <table><tbody>...</tbody></table>.
- * ProseMirror places row content into the tbody via contentDOM.
- */
-export class TableNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLTableSectionElement;
-  private node: PMNode;
-  private syncQueued = false;
-  private readonly onSyncRequest: EventListener;
-
-  constructor(node: PMNode) {
-    this.node = node;
-
-    const table = document.createElement("table");
-    table.className = "border-collapse w-full my-2 text-sm";
-    table.setAttribute("data-pm-table-root", "true");
-
-    const tbody = document.createElement("tbody");
-    table.appendChild(tbody);
-
-    this.dom = table;
-    this.contentDOM = tbody;
-    this.onSyncRequest = () => {
-      this.scheduleLayoutSync();
-    };
-    this.dom.addEventListener(TABLE_LAYOUT_SYNC_EVENT, this.onSyncRequest);
-    this.scheduleLayoutSync();
-  }
-
-  update(node: PMNode): boolean {
-    if (node.type !== this.node.type) {
-      return false;
-    }
-
-    this.node = node;
-    this.scheduleLayoutSync();
-    return true;
-  }
-
-  destroy(): void {
-    this.dom.removeEventListener(TABLE_LAYOUT_SYNC_EVENT, this.onSyncRequest);
-  }
-
-  ignoreMutation(record: ViewMutationRecord): boolean {
-    if (record.type === "attributes") {
-      return record.target === this.dom
-        || (record.target instanceof HTMLElement && record.target.hasAttribute("data-row-padding"));
-    }
-    if (record.type === "childList" && this.dom.contains(record.target)) {
-      const addedNodes = record.addedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
-      const removedNodes = record.removedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
-      const addedOkay = (addedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(addedNodes);
-      const removedOkay = (removedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(removedNodes);
-      return addedOkay && removedOkay;
-    }
-    return false;
-  }
-
-  private scheduleLayoutSync(): void {
-    if (this.syncQueued) {
-      return;
-    }
-    this.syncQueued = true;
-    queueMicrotask(() => {
-      this.syncQueued = false;
-      syncRenderedTableLayout(this.contentDOM, this.node);
-    });
-  }
-}
-
-/**
- * NodeView for table_row nodes.
- * Renders as <tr>...</tr>.
- */
-export class TableRowNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(_node: PMNode) {
-    const tr = document.createElement("tr");
-    this.dom = tr;
-    this.contentDOM = tr;
-  }
-}
-
-/**
- * NodeView for table_cell and table_header_cell nodes.
- *
- * Applies colspan immediately and defers final rowspan/vertical-merge
- * layout to the owning table node view.
- */
-export class TableCellNodeView {
-  dom: HTMLElement;
-  contentDOM: HTMLElement;
-
-  constructor(node: PMNode) {
-    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
-    const cell = document.createElement(isHeader ? "th" : "td");
-
-    cell.className = isHeader
-      ? "border border-primary/20 p-2 align-top font-semibold bg-surface-raised"
-      : "border border-primary/20 p-2 align-top";
-
-    const colspan = resolveRenderedColspan(node);
-    const rowspan = resolveRenderedRowspan(node);
-    if (colspan > 1) {
-      (cell as HTMLTableCellElement).colSpan = colspan;
-    }
-    if (rowspan > 1) {
-      (cell as HTMLTableCellElement).rowSpan = rowspan;
-    }
-
-    this.dom = cell;
-    this.contentDOM = cell;
-  }
-
-  /**
-   * Update the DOM when the node's attrs change (e.g., after a merge/split operation).
-   * Return false to let ProseMirror rebuild the node view from scratch.
-   */
-  update(node: PMNode): boolean {
-    const isHeader = (node.type.spec as { tableRole?: string }).tableRole === "header_cell";
-    const expectedTag = isHeader ? "TH" : "TD";
-    if (this.dom.tagName !== expectedTag) {
-      return false;
-    }
-
-    const colspan = resolveRenderedColspan(node);
-    const rowspan = resolveRenderedRowspan(node);
-    const cell = this.dom as HTMLTableCellElement;
-    cell.colSpan = colspan > 1 ? colspan : 1;
-    cell.rowSpan = rowspan > 1 ? rowspan : 1;
-    cell.style.display = "";
-    cell.removeAttribute("aria-hidden");
-    cell.removeAttribute("data-vertical-merge-hidden");
-    requestTableLayoutSync(this.dom);
-    return true;
-  }
-
-  ignoreMutation(record: ViewMutationRecord): boolean {
-    return record.type === "attributes" && record.target === this.dom;
-  }
-}
-
-/**
- * NodeView factory map for use with EditorView.nodeViews.
- *
- * Pass this object directly to the EditorView constructor options:
- *   new EditorView(mount, { nodeViews: tableNodeViews, ... })
- */
-export const tableNodeViews: { [node: string]: NodeViewConstructor } = {
-  table: (node: PMNode) => new TableNodeView(node),
-  table_cell: (node: PMNode) => new TableCellNodeView(node),
-  table_header_cell: (node: PMNode) => new TableCellNodeView(node),
-};

package/src/ui-tailwind/index.ts

@@ -1,62 +0,0 @@
-// Workspace shell
-export { TwReviewWorkspace, type TwReviewWorkspaceProps } from "./tw-review-workspace";
-
-// Editor surface
-export { TwEditorSurface, type TwEditorSurfaceProps } from "./editor-surface/tw-editor-surface";
-export { TwParagraphBlock } from "./editor-surface/tw-paragraph-block";
-export { TwOpaqueBlock } from "./editor-surface/tw-opaque-block";
-export { TwSegmentView } from "./editor-surface/tw-segment-view";
-export { TwInlineToken } from "./editor-surface/tw-inline-token";
-export { renderTwCaret } from "./editor-surface/tw-caret";
-
-// Review rail
-export { TwReviewRail, type TwReviewRailProps, type ReviewRailTab } from "./review/tw-review-rail";
-export { TwCommentSidebar } from "./review/tw-comment-sidebar";
-export { TwRevisionSidebar } from "./review/tw-revision-sidebar";
-export { TwHealthPanel } from "./review/tw-health-panel";
-
-// Toolbar
-export { TwToolbar, type TwToolbarProps } from "./toolbar/tw-toolbar";
-export { TwToolbarIconButton } from "./toolbar/tw-toolbar-icon-button";
-export type { WorkspaceMode, ZoomLevel } from "../api/public-types";
-
-// Status
-export { TwStatusBar } from "./status/tw-status-bar";
-
-// Chrome
-export { TwAlertBanner } from "./chrome/tw-alert-banner";
-export { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
-
-// Session capabilities
-export {
-  deriveCapabilities,
-  type SessionCapabilities,
-} from "../runtime/session-capabilities";
-
-// Headless (re-export for convenience)
-export {
-  createCommentDecorationModel,
-  getCommentHighlightClass,
-  getCommentRangeState,
-  type CommentDecorationModel,
-  type MarkupDisplay,
-} from "../ui/headless/comment-decoration-model";
-
-export {
-  createRevisionDecorationModel,
-  getRevisionHighlightClass,
-  getRevisionRangeState,
-  shouldHideInCleanMode,
-  type RevisionDecorationModel,
-} from "../ui/headless/revision-decoration-model";
-
-export {
-  createEditorKeyboardHandler,
-  type EditorKeyboardCallbacks,
-  type EditorKeyboardContext,
-} from "../ui/headless/use-editor-keyboard";
-
-export {
-  createSelectionSnapshot,
-  selectionTouchesRange,
-} from "../ui/headless/selection-helpers";

package/src/ui-tailwind/page-chrome-model.ts

@@ -1,27 +0,0 @@
-import type {
-  DocumentNavigationSnapshot,
-  PageLayoutSnapshot,
-  SurfaceBlockSnapshot,
-} from "../api/public-types.ts";
-
-export interface LineMarker {
-  id: string;
-  label: string;
-  topPx: number;
-}
-
-export function computeLineMarkersIfEnabled(input: {
-  pageLayout: PageLayoutSnapshot | undefined;
-  surfaceBlocks: readonly SurfaceBlockSnapshot[];
-  pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>;
-  buildLineNumberMarkers: (
-    blocks: readonly SurfaceBlockSnapshot[],
-    pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
-  ) => LineMarker[];
-}): LineMarker[] {
-  if (!input.pageLayout?.lineNumbering) {
-    return [];
-  }
-
-  return input.buildLineNumberMarkers(input.surfaceBlocks, input.pages);
-}