@beyondwork/docx-react-component 1.0.38 → 1.0.39

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

@@ -0,0 +1,559 @@
+import React from "react";
+
+import type {
+  SurfaceBlockSnapshot,
+  SurfaceInlineSegment,
+  SurfaceTextMark,
+} from "../../api/public-types.ts";
+import type { CanonicalRunFormatting } from "../../model/canonical-document.ts";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const HEX_COLOR_RE = /^[0-9A-Fa-f]{3,8}$/;
+const SAFE_FONT_RE = /^[A-Za-z0-9 ,\-'"]+$/;
+const SAFE_ALIGNMENT = new Set(["left", "center", "right", "justify", "start", "end"]);
+
+// ---------------------------------------------------------------------------
+// Helper utilities (mirror pm-schema.ts helpers)
+// ---------------------------------------------------------------------------
+
+function safeHexColor(raw: string | null | undefined): string | null {
+  if (!raw || raw === "auto") return null;
+  return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
+}
+
+/** Resolve heading level from styleId or outlineLevel (outlineLevel 0 = Heading 1). */
+function resolveHeadingLevel(styleId?: string, outlineLevel?: number): number | null {
+  if (styleId) {
+    const normalized = styleId.toLowerCase();
+    const compact = normalized.replace(/[\s_-]+/g, "");
+    const headingMatch = /^heading([1-6])$/.exec(compact);
+    if (headingMatch) {
+      return Number.parseInt(headingMatch[1], 10);
+    }
+    if (compact === "title") return 1;
+    if (compact === "subtitle") return 2;
+    if (compact === "tocheading") return 1;
+    if (/^(appendix|schedule|annex|exhibit|attachment)(heading|title)$/.test(compact)) return 2;
+  }
+  if (
+    typeof outlineLevel === "number" &&
+    Number.isInteger(outlineLevel) &&
+    outlineLevel >= 0 &&
+    outlineLevel <= 5
+  ) {
+    return outlineLevel + 1;
+  }
+  return null;
+}
+
+function resolveMarkerJustificationCss(raw: string | undefined): string {
+  switch (raw) {
+    case "left":
+      return "flex-start";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "flex-end";
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Style builders
+// ---------------------------------------------------------------------------
+
+/** Build CSSProperties for a paragraph block from spacing/indent/alignment. */
+function buildParagraphStyle(
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): React.CSSProperties {
+  const style: React.CSSProperties = {};
+
+  // Alignment — direct takes precedence over resolvedParagraphFormatting
+  const rawAlignment = block.alignment ?? block.resolvedParagraphFormatting?.alignment;
+  const safeAlign = rawAlignment === "both" ? "justify" : rawAlignment;
+  if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) {
+    style.textAlign = safeAlign as React.CSSProperties["textAlign"];
+  }
+
+  // Spacing
+  const spacingBefore =
+    block.spacing?.before ?? block.resolvedParagraphFormatting?.spacing?.before;
+  const spacingAfter =
+    block.spacing?.after ?? block.resolvedParagraphFormatting?.spacing?.after;
+  const lineSpacing =
+    block.spacing?.line ?? block.resolvedParagraphFormatting?.spacing?.line;
+  const lineRule =
+    block.spacing?.lineRule ?? block.resolvedParagraphFormatting?.spacing?.lineRule;
+
+  if (spacingBefore != null) {
+    style.marginTop = `${spacingBefore / 20}px`;
+  }
+  if (spacingAfter != null) {
+    style.marginBottom = `${spacingAfter / 20}px`;
+  }
+  if (lineSpacing && lineRule === "auto") {
+    style.lineHeight = String(lineSpacing / 240);
+  } else if (lineSpacing && lineRule === "exact") {
+    style.lineHeight = `${lineSpacing / 20}px`;
+  } else if (lineSpacing && lineRule === "atLeast") {
+    style.minHeight = `${lineSpacing / 20}px`;
+  }
+
+  // Indentation
+  const indentLeft =
+    block.indentation?.left ?? block.resolvedParagraphFormatting?.indentation?.left;
+  const indentRight =
+    block.indentation?.right ?? block.resolvedParagraphFormatting?.indentation?.right;
+  const indentFirstLine =
+    block.indentation?.firstLine ?? block.resolvedParagraphFormatting?.indentation?.firstLine;
+  const indentHanging =
+    block.indentation?.hanging ?? block.resolvedParagraphFormatting?.indentation?.hanging;
+
+  if (indentLeft) style.paddingLeft = `${indentLeft / 20}px`;
+  if (indentRight) style.paddingRight = `${indentRight / 20}px`;
+  if (indentHanging) style.textIndent = `-${indentHanging / 20}px`;
+  else if (indentFirstLine) style.textIndent = `${indentFirstLine / 20}px`;
+
+  // Shading
+  const shadingFill = block.shading?.fill;
+  const shadingColor = safeHexColor(shadingFill);
+  if (shadingColor) style.backgroundColor = shadingColor;
+
+  // Page break visual indicator
+  if (block.pageBreakBefore) {
+    style.borderTop = "2px dashed rgba(0,0,0,0.1)";
+    style.paddingTop = "8px";
+    style.marginTop = "16px";
+  }
+
+  return style;
+}
+
+/** Build CSSProperties for the numbering marker span. */
+function buildMarkerStyle(
+  prefix: string,
+  suffix: "tab" | "space" | "nothing" | undefined,
+  markerRunProperties: CanonicalRunFormatting | undefined,
+  markerWidth: number | undefined,
+  markerJustification: string | undefined,
+): React.CSSProperties {
+  const style: React.CSSProperties = {
+    fontVariantNumeric: "tabular-nums",
+    justifyContent: resolveMarkerJustificationCss(markerJustification),
+  };
+
+  if (markerRunProperties) {
+    if (markerRunProperties.bold) style.fontWeight = "bold";
+    if (markerRunProperties.italic) style.fontStyle = "italic";
+    if (markerRunProperties.underline && markerRunProperties.underline !== "none") {
+      style.textDecoration = "underline";
+    }
+    if (typeof markerRunProperties.fontSizeHalfPoints === "number") {
+      style.fontSize = `${markerRunProperties.fontSizeHalfPoints / 2}pt`;
+    }
+    const colorHex = markerRunProperties.colorHex;
+    if (colorHex && colorHex !== "auto") {
+      style.color = `#${colorHex.toLowerCase()}`;
+    }
+    const family = markerRunProperties.fontFamilyAscii ?? markerRunProperties.fontFamily;
+    if (family && SAFE_FONT_RE.test(family)) {
+      style.fontFamily = family;
+    }
+  } else {
+    style.color = "var(--color-text-tertiary)";
+    style.fontFamily = "var(--font-legal-sans)";
+  }
+
+  const hasResolvedMarkerWidth = typeof markerWidth === "number" && markerWidth > 0;
+  if (hasResolvedMarkerWidth) {
+    const markerWidthPx = Math.max(1, Math.round(markerWidth! / 20));
+    style.width = `${markerWidthPx}px`;
+    style.minWidth = `${markerWidthPx}px`;
+    style.flexBasis = `${markerWidthPx}px`;
+    style.marginRight = 0;
+    style.overflow = "visible";
+  } else {
+    const fallbackMinWidth = Math.min(Math.max(prefix.length + 1, 4), 14);
+    const fallbackMarginRight =
+      suffix === "nothing" ? "0.25rem" : suffix === "space" ? "0.5rem" : "0.75rem";
+    style.minWidth = `${fallbackMinWidth}ch`;
+    style.marginRight = fallbackMarginRight;
+  }
+
+  return style;
+}
+
+/** Build CSSProperties for a text segment from marks and markAttrs. */
+function buildSegmentStyle(
+  marks: SurfaceTextMark[] | undefined,
+  markAttrs?: {
+    fontSize?: number;
+    textColor?: string;
+    fontFamily?: string;
+    backgroundColor?: string;
+    charSpacing?: number;
+  },
+): React.CSSProperties {
+  const style: React.CSSProperties = {};
+
+  if (marks) {
+    if (marks.includes("bold")) style.fontWeight = "bold";
+    if (marks.includes("italic")) style.fontStyle = "italic";
+    if (marks.includes("underline")) style.textDecoration = "underline";
+    if (marks.includes("strikethrough") || marks.includes("doubleStrikethrough")) {
+      style.textDecoration = marks.includes("underline")
+        ? "underline line-through"
+        : "line-through";
+    }
+    if (marks.includes("superscript")) {
+      style.verticalAlign = "super";
+      style.fontSize = "smaller";
+    }
+    if (marks.includes("subscript")) {
+      style.verticalAlign = "sub";
+      style.fontSize = "smaller";
+    }
+    if (marks.includes("allCaps")) style.textTransform = "uppercase";
+    if (marks.includes("smallCaps")) style.fontVariant = "small-caps";
+    if (marks.includes("vanish")) style.display = "none";
+  }
+
+  if (markAttrs) {
+    if (markAttrs.fontSize) style.fontSize = `${markAttrs.fontSize}pt`;
+    if (markAttrs.textColor) style.color = markAttrs.textColor;
+    if (markAttrs.fontFamily && SAFE_FONT_RE.test(markAttrs.fontFamily)) {
+      style.fontFamily = markAttrs.fontFamily;
+    }
+    if (markAttrs.backgroundColor) style.backgroundColor = markAttrs.backgroundColor;
+    if (markAttrs.charSpacing) style.letterSpacing = `${markAttrs.charSpacing}px`;
+  }
+
+  return style;
+}
+
+function hasStyleEntries(style: React.CSSProperties): boolean {
+  return Object.keys(style).length > 0;
+}
+
+// ---------------------------------------------------------------------------
+// Segment renderer
+// ---------------------------------------------------------------------------
+
+/** Render a single inline segment. */
+function renderSegment(seg: SurfaceInlineSegment): React.ReactNode {
+  switch (seg.kind) {
+    case "text": {
+      const style = buildSegmentStyle(seg.marks, seg.markAttrs);
+      const content = seg.text;
+      if (!hasStyleEntries(style)) {
+        return <React.Fragment key={seg.segmentId}>{content}</React.Fragment>;
+      }
+      return (
+        <span key={seg.segmentId} style={style}>
+          {content}
+        </span>
+      );
+    }
+    case "tab":
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="tab"
+          style={{ display: "inline-block", width: "32px", minWidth: "8px" }}
+        >
+          {"\u00A0"}
+        </span>
+      );
+    case "hard_break":
+      return <br key={seg.segmentId} />;
+    case "image":
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="image"
+          style={{
+            display: "inline-block",
+            width: "48px",
+            height: "32px",
+            backgroundColor: "#e0e0e0",
+            verticalAlign: "middle",
+            margin: "0 4px",
+            borderRadius: "2px",
+          }}
+          title={seg.altText ?? "Image"}
+        />
+      );
+    case "field_ref":
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="field_ref"
+          style={{ opacity: 0.6, fontSize: "0.85em" }}
+        >
+          [field]
+        </span>
+      );
+    case "note_ref":
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="note_ref"
+          style={{ verticalAlign: "super", fontSize: "0.75em" }}
+        >
+          {seg.label}
+        </span>
+      );
+    case "opaque_inline":
+      return (
+        <span
+          key={seg.segmentId}
+          data-node-type="opaque_inline"
+          style={{ opacity: 0.6, fontSize: "0.85em" }}
+        >
+          {seg.displayText ?? seg.label}
+        </span>
+      );
+    default:
+      return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Block renderers
+// ---------------------------------------------------------------------------
+
+/** Render a paragraph block as <p>. */
+function ParagraphBlock({
+  block,
+}: {
+  block: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
+}): React.ReactElement {
+  const headingLevel = resolveHeadingLevel(block.styleId, block.outlineLevel);
+
+  const classes: string[] = ["leading-relaxed"];
+  if (headingLevel) {
+    classes.push(...headingClassList(headingLevel));
+  }
+
+  const pStyle = buildParagraphStyle(block);
+  const attrs: React.HTMLAttributes<HTMLParagraphElement> & {
+    "data-heading-level"?: string;
+    "data-numbered"?: string;
+    "data-contextual-spacing"?: string;
+  } = {
+    className: classes.join(" "),
+    style: Object.keys(pStyle).length > 0 ? pStyle : undefined,
+  };
+
+  if (headingLevel) {
+    attrs["data-heading-level"] = String(headingLevel);
+  }
+  if (block.numbering) {
+    attrs["data-numbered"] = "true";
+  }
+  if (block.contextualSpacing) {
+    attrs["data-contextual-spacing"] = "true";
+  }
+  if (block.bidi) {
+    attrs.dir = "rtl";
+  }
+
+  // Numbering prefix span
+  const numberingPrefix = block.numberingPrefix;
+  const numberingSuffix = block.numberingSuffix;
+  const resolvedNumbering = block.resolvedNumbering;
+  const markerRunProperties = resolvedNumbering?.markerRunProperties;
+  const markerWidth = resolvedNumbering?.geometry?.markerLane?.width;
+  const markerJustification = resolvedNumbering?.geometry?.markerJustification;
+
+  const prefixSpan =
+    numberingPrefix != null ? (
+      <span
+        className={[
+          "inline-flex",
+          "select-none",
+          "items-center",
+          ...(!markerRunProperties ? ["text-tertiary", "font-[family-name:var(--font-legal-sans)]"] : []),
+        ].join(" ")}
+        contentEditable={false}
+        data-numbering-prefix={numberingPrefix}
+        {...(typeof resolvedNumbering?.level === "number"
+          ? { "data-numbering-level": String(resolvedNumbering.level) }
+          : {})}
+        {...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {})}
+        style={buildMarkerStyle(
+          numberingPrefix,
+          numberingSuffix,
+          markerRunProperties,
+          markerWidth,
+          markerJustification,
+        )}
+      >
+        {numberingPrefix}
+      </span>
+    ) : null;
+
+  return (
+    <p {...attrs}>
+      {prefixSpan}
+      <span className="pm-paragraph-content">
+        {block.segments.map((seg) => renderSegment(seg))}
+      </span>
+    </p>
+  );
+}
+
+function headingClassList(level: number): string[] {
+  switch (level) {
+    case 1:
+      return ["text-3xl", "font-semibold", "tracking-tight", "leading-tight"];
+    case 2:
+      return ["text-2xl", "font-semibold", "tracking-tight"];
+    case 3:
+      return ["text-xl", "font-medium"];
+    case 4:
+      return ["text-lg", "font-medium"];
+    case 5:
+      return ["text-base", "font-semibold", "uppercase", "tracking-[0.12em]"];
+    case 6:
+      return ["text-sm", "font-semibold", "uppercase", "tracking-[0.16em]"];
+    default:
+      return [];
+  }
+}
+
+/** Render a table block as <table>. */
+function TableBlock({
+  block,
+}: {
+  block: Extract<SurfaceBlockSnapshot, { kind: "table" }>;
+}): React.ReactElement {
+  const tableStyle: React.CSSProperties = {
+    borderCollapse: "collapse",
+    width: "100%",
+  };
+  if (block.alignment === "center") {
+    tableStyle.marginLeft = "auto";
+    tableStyle.marginRight = "auto";
+  }
+
+  return (
+    <table style={tableStyle} data-node-type="table">
+      <tbody>
+        {block.rows.map((row, rowIdx) => (
+          <tr
+            key={rowIdx}
+            style={
+              row.height != null && row.heightRule === "exact"
+                ? { height: `${row.height / 20}px` }
+                : row.height != null && row.heightRule === "atLeast"
+                  ? { minHeight: `${row.height / 20}px` }
+                  : undefined
+            }
+          >
+            {row.cells.map((cell, cellIdx) => {
+              if (cell.verticalMerge === "continue") {
+                return null;
+              }
+              const cellStyle: React.CSSProperties = {};
+              if (cell.backgroundColor) cellStyle.backgroundColor = `#${cell.backgroundColor}`;
+              if (cell.verticalAlign) cellStyle.verticalAlign = cell.verticalAlign;
+              if (cell.borderTop) cellStyle.borderTop = cell.borderTop;
+              if (cell.borderRight) cellStyle.borderRight = cell.borderRight;
+              if (cell.borderBottom) cellStyle.borderBottom = cell.borderBottom;
+              if (cell.borderLeft) cellStyle.borderLeft = cell.borderLeft;
+
+              return (
+                <td
+                  key={cellIdx}
+                  colSpan={cell.colspan > 1 ? cell.colspan : undefined}
+                  rowSpan={cell.rowspan > 1 ? cell.rowspan : undefined}
+                  style={Object.keys(cellStyle).length > 0 ? cellStyle : undefined}
+                >
+                  {cell.content.map((childBlock) => (
+                    <BlockItem key={childBlock.blockId} block={childBlock} />
+                  ))}
+                </td>
+              );
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** Render any block, dispatching to the appropriate component. */
+function BlockItem({ block }: { block: SurfaceBlockSnapshot }): React.ReactElement | null {
+  switch (block.kind) {
+    case "paragraph":
+      return <ParagraphBlock block={block} />;
+    case "table":
+      return <TableBlock block={block} />;
+    case "sdt_block":
+      return (
+        <section data-node-type="sdt_block" style={{ margin: "8px 0" }}>
+          {block.children.map((child) => (
+            <BlockItem key={child.blockId} block={child} />
+          ))}
+        </section>
+      );
+    case "opaque_block":
+      // Render as an uneditable placeholder
+      return (
+        <div
+          data-node-type="opaque_block"
+          style={{
+            opacity: 0.5,
+            borderLeft: "3px solid #aaa",
+            paddingLeft: "8px",
+            margin: "4px 0",
+            fontSize: "0.85em",
+            color: "#666",
+          }}
+        >
+          {block.label || "[Locked content]"}
+        </div>
+      );
+    default:
+      return null;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Public export
+// ---------------------------------------------------------------------------
+
+/**
+ * TwPageBlockView — read-only React renderer for a slice of SurfaceBlockSnapshot[].
+ *
+ * Used for pages 2+ in the page workspace. Page 1 uses the live PM editor;
+ * pages 2+ use this static view.
+ *
+ * Wraps output in a `.ProseMirror` container so it inherits pm-schema.css styles.
+ * The wrapper is `aria-hidden` because it is a visual-only duplicate of the
+ * live editor surface.
+ */
+export function TwPageBlockView({
+  blocks,
+  className,
+}: {
+  blocks: SurfaceBlockSnapshot[];
+  className?: string;
+}): React.ReactElement {
+  return (
+    <div
+      className={["ProseMirror", className].filter(Boolean).join(" ")}
+      aria-hidden="true"
+    >
+      {blocks.map((block) => (
+        <BlockItem key={block.blockId} block={block} />
+      ))}
+    </div>
+  );
+}