@beyondwork/docx-react-component 1.0.29 → 1.0.31

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

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,503 @@
+/**
+ * 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));
+}
+
+function applyTableAttrs(table: HTMLTableElement, node: PMNode): void {
+  table.className = "border-collapse w-full my-2 text-sm";
+  table.setAttribute("data-pm-table-root", "true");
+  table.style.marginLeft = "";
+  table.style.marginRight = "";
+  const alignment = node.attrs.alignment as string | null | undefined;
+  if (alignment === "center") {
+    table.style.marginLeft = "auto";
+    table.style.marginRight = "auto";
+  } else if (alignment === "right") {
+    table.style.marginLeft = "auto";
+  }
+}
+
+function applyRowAttrs(row: HTMLTableRowElement, node: PMNode): void {
+  row.style.height = "";
+  row.style.minHeight = "";
+  const height = node.attrs.height as number | null | undefined;
+  const heightRule = node.attrs.heightRule as string | null | undefined;
+  if (typeof height !== "number" || height <= 0) {
+    return;
+  }
+  const points = `${height / 20}pt`;
+  if (heightRule === "exact") {
+    row.style.height = points;
+  } else if (heightRule === "atLeast") {
+    row.style.minHeight = points;
+  }
+}
+
+function applyCellAttrs(cell: HTMLTableCellElement, node: PMNode, isHeader: boolean): void {
+  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 backgroundColor = node.attrs.backgroundColor as string | null | undefined;
+  const verticalAlign = node.attrs.verticalAlign as "top" | "center" | "bottom" | null | undefined;
+  const borderTop = node.attrs.borderTop as string | null | undefined;
+  const borderRight = node.attrs.borderRight as string | null | undefined;
+  const borderBottom = node.attrs.borderBottom as string | null | undefined;
+  const borderLeft = node.attrs.borderLeft as string | null | undefined;
+
+  if (backgroundColor) cell.setAttribute("data-cell-background", backgroundColor);
+  else cell.removeAttribute("data-cell-background");
+  if (verticalAlign && verticalAlign !== "top") cell.setAttribute("data-vertical-align", verticalAlign);
+  else cell.removeAttribute("data-vertical-align");
+  if (borderTop) cell.setAttribute("data-border-top", borderTop);
+  else cell.removeAttribute("data-border-top");
+  if (borderRight) cell.setAttribute("data-border-right", borderRight);
+  else cell.removeAttribute("data-border-right");
+  if (borderBottom) cell.setAttribute("data-border-bottom", borderBottom);
+  else cell.removeAttribute("data-border-bottom");
+  if (borderLeft) cell.setAttribute("data-border-left", borderLeft);
+  else cell.removeAttribute("data-border-left");
+
+  cell.style.backgroundColor = backgroundColor ?? "";
+  cell.style.verticalAlign = verticalAlign === "center" ? "middle" : (verticalAlign ?? "");
+  cell.style.borderTop = borderTop ?? "";
+  cell.style.borderRight = borderRight ?? "";
+  cell.style.borderBottom = borderBottom ?? "";
+  cell.style.borderLeft = borderLeft ?? "";
+}
+
+/**
+ * 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");
+    applyTableAttrs(table, node);
+
+    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;
+    applyTableAttrs(this.dom as HTMLTableElement, 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");
+    applyRowAttrs(tr, node);
+    this.dom = tr;
+    this.contentDOM = tr;
+  }
+
+  update(node: PMNode): boolean {
+    applyRowAttrs(this.dom as HTMLTableRowElement, node);
+    return true;
+  }
+}
+
+/**
+ * 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");
+    applyCellAttrs(cell, node, isHeader);
+
+    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;
+    applyCellAttrs(cell, node, isHeader);
+    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

@@ -0,0 +1,62 @@
+// 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

@@ -0,0 +1,27 @@
+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);
+}