@beyondwork/docx-react-component 1.0.29 → 1.0.30

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

@@ -0,0 +1,927 @@
+import { Schema } from "prosemirror-model";
+import {
+  tableNodeSpec,
+  tableRowNodeSpec,
+  tableCellNodeSpec,
+  tableHeaderCellNodeSpec,
+} from "../../runtime/table-schema.ts";
+
+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"]);
+
+function resolveHeadingLevel(
+  styleId: string | null,
+  outlineLevel: number | null,
+): 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 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 [];
+  }
+}
+
+/** Validate a raw hex color string from OOXML (no leading #). Returns sanitized `#hex` or null. */
+function safeHexColor(raw: string | null | undefined): string | null {
+  if (!raw || raw === "auto") return null;
+  return HEX_COLOR_RE.test(raw) ? `#${raw}` : null;
+}
+
+/** Validate a CSS color value (may already include #). Returns the value or null. */
+function safeCssColor(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  // Allow #hex, named colors (single word), rgb/rgba functions
+  if (/^#[0-9A-Fa-f]{3,8}$/.test(raw)) return raw;
+  if (/^[a-zA-Z]+$/.test(raw)) return raw;
+  return null;
+}
+
+function sanitizeLinkHref(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("#")) {
+    return trimmed;
+  }
+  const lower = trimmed.toLowerCase();
+  if (
+    lower.startsWith("http://") ||
+    lower.startsWith("https://") ||
+    lower.startsWith("mailto:") ||
+    lower.startsWith("tel:")
+  ) {
+    return trimmed;
+  }
+  return null;
+}
+
+function resolveMarkerJustificationCss(raw: string | null): string {
+  switch (raw) {
+    case "left":
+      return "flex-start";
+    case "center":
+      return "center";
+    case "right":
+    case "both":
+    case "distribute":
+    default:
+      return "flex-end";
+  }
+}
+
+/**
+ * ProseMirror schema for the supported live surface slice.
+ *
+ * Maps canonical document node types to PM nodes and marks.
+ * This schema is used for rendering and input capture only —
+ * ProseMirror does not own the canonical document state.
+ */
+export const editorSchema = new Schema({
+  nodes: {
+    doc: {
+      content: "block+",
+    },
+
+    paragraph: {
+      content: "inline*",
+      group: "block",
+      attrs: {
+        styleId: { default: null },
+        numberingInstanceId: { default: null },
+        numberingLevel: { default: null },
+        numberingPrefix: { default: null },
+        numberingSuffix: { default: null },
+        numberingMarkerWidth: { default: null },
+        numberingMarkerJustification: { default: null },
+        alignment: { default: null },
+        spacingBefore: { default: null },
+        spacingAfter: { default: null },
+        lineSpacing: { default: null },
+        lineRule: { default: null },
+        contextualSpacing: { default: null },
+        listContinuation: { default: null },
+        contextualSpacingBefore: { default: null },
+        contextualSpacingAfter: { default: null },
+        indentLeft: { default: null },
+        indentRight: { default: null },
+        indentFirstLine: { default: null },
+        indentHanging: { default: null },
+        shadingFill: { default: null },
+        borderTop: { default: null },
+        borderBottom: { default: null },
+        borderLeft: { default: null },
+        borderRight: { default: null },
+        outlineLevel: { default: null },
+        bidi: { default: null },
+        pageBreakBefore: { default: null },
+        hiddenTextOnly: { default: null },
+      },
+      parseDOM: [{ tag: "p" }],
+      toDOM(node) {
+        const classes: string[] = ["leading-relaxed"];
+        const styleId = node.attrs.styleId as string | null;
+        const outlineLevel = node.attrs.outlineLevel as number | null;
+        const headingLevel = resolveHeadingLevel(styleId, outlineLevel);
+        if (headingLevel) {
+          classes.push(...headingClassList(headingLevel));
+        }
+        const attrs: Record<string, string> = { class: classes.join(" ") };
+        const styles: string[] = [];
+        const alignment = node.attrs.alignment as string | null;
+        const safeAlign = alignment === "both" ? "justify" : alignment;
+        if (safeAlign && SAFE_ALIGNMENT.has(safeAlign)) styles.push(`text-align: ${safeAlign}`);
+        const spacingBefore = node.attrs.spacingBefore as number | null;
+        const contextualSpacingBefore = node.attrs.contextualSpacingBefore as boolean | null;
+        if (contextualSpacingBefore) styles.push("margin-top: 0");
+        else if (spacingBefore) styles.push(`margin-top: ${spacingBefore / 20}px`);
+        const contextualSpacingAfter = node.attrs.contextualSpacingAfter as boolean | null;
+        const spacingAfter = node.attrs.spacingAfter as number | null;
+        if (contextualSpacingAfter) styles.push("margin-bottom: 0");
+        else if (spacingAfter) styles.push(`margin-bottom: ${spacingAfter / 20}px`);
+        const lineSpacing = node.attrs.lineSpacing as number | null;
+        const lineRule = node.attrs.lineRule as string | null;
+        if (lineSpacing && lineRule === "auto") styles.push(`line-height: ${lineSpacing / 240}`);
+        else if (lineSpacing && lineRule === "exact") styles.push(`line-height: ${lineSpacing / 20}px`);
+        else if (lineSpacing && lineRule === "atLeast") styles.push(`min-height: ${lineSpacing / 20}px`);
+        const indentLeft = node.attrs.indentLeft as number | null;
+        if (indentLeft) styles.push(`padding-left: ${indentLeft / 20}px`);
+        const indentRight = node.attrs.indentRight as number | null;
+        if (indentRight) styles.push(`padding-right: ${indentRight / 20}px`);
+        const indentFirstLine = node.attrs.indentFirstLine as number | null;
+        const indentHanging = node.attrs.indentHanging as number | null;
+        if (indentHanging) styles.push(`text-indent: -${indentHanging / 20}px`);
+        else if (indentFirstLine) styles.push(`text-indent: ${indentFirstLine / 20}px`);
+        const shadingColor = safeHexColor(node.attrs.shadingFill as string | null);
+        if (shadingColor) styles.push(`background-color: ${shadingColor}`);
+        for (const [side, attrName] of [["top", "borderTop"], ["bottom", "borderBottom"], ["left", "borderLeft"], ["right", "borderRight"]] as const) {
+          const border = node.attrs[attrName] as { color?: string; sz?: number; val?: string } | null;
+          if (border && border.val && border.val !== "none") {
+            const width = border.sz ? `${border.sz / 8}px` : "1px";
+            const color = safeHexColor(border.color ?? null) ?? "#000000";
+            const bStyle = border.val === "dotted" ? "dotted" : border.val === "dashed" ? "dashed" : "solid";
+            styles.push(`border-${side}: ${width} ${bStyle} ${color}`);
+          }
+        }
+        const pageBreak = node.attrs.pageBreakBefore as boolean | null;
+        if (pageBreak) styles.push("border-top: 2px dashed rgba(0,0,0,0.1); padding-top: 8px; margin-top: 16px");
+        const hiddenTextOnly = node.attrs.hiddenTextOnly as boolean | null;
+        if (hiddenTextOnly) {
+          attrs["data-hidden-paragraph"] = "true";
+          attrs["aria-hidden"] = "true";
+          styles.push("display: none");
+        }
+        const bidi = node.attrs.bidi as boolean | null;
+        if (bidi) attrs.dir = "rtl";
+        if (headingLevel) {
+          attrs["data-heading-level"] = String(headingLevel);
+        }
+        const isNumbered = node.attrs.numberingInstanceId !== null;
+        if (isNumbered) {
+          attrs["data-numbered"] = "true";
+        }
+        const contextualSpacing = node.attrs.contextualSpacing as boolean | null;
+        if (contextualSpacing) {
+          attrs["data-contextual-spacing"] = "true";
+        }
+        const listContinuation = node.attrs.listContinuation as boolean | null;
+        if (listContinuation) {
+          attrs["data-list-continuation"] = "true";
+        }
+        if (contextualSpacingBefore) {
+          attrs["data-contextual-spacing-before"] = "true";
+        }
+        if (contextualSpacingAfter) {
+          attrs["data-contextual-spacing-after"] = "true";
+        }
+        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 numberingMarkerWidth = node.attrs.numberingMarkerWidth as number | null;
+        const numberingMarkerJustification = node.attrs.numberingMarkerJustification as string | null;
+        const children: Array<string | number | readonly unknown[]> = [];
+        if (pageBreak) {
+          children.push([
+            "span",
+            {
+              class:
+                "mb-2 inline-flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.18em] text-tertiary",
+              contenteditable: "false",
+              "data-page-break-before": "true",
+            },
+            "Page break",
+          ]);
+        }
+        if (numberingPrefix) {
+          const hasResolvedMarkerWidth =
+            typeof numberingMarkerWidth === "number" && numberingMarkerWidth > 0;
+          const fallbackMinWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
+          const fallbackMarginRight =
+            numberingSuffix === "nothing"
+              ? "0.25rem"
+              : numberingSuffix === "space"
+                ? "0.5rem"
+                : "0.75rem";
+          const prefixStyles = [
+            `font-variant-numeric: tabular-nums`,
+            `justify-content: ${resolveMarkerJustificationCss(numberingMarkerJustification)}`,
+          ];
+          if (hasResolvedMarkerWidth) {
+            const markerWidthPx = Math.max(1, Math.round(numberingMarkerWidth / 20));
+            prefixStyles.push(
+              `width: ${markerWidthPx}px`,
+              `min-width: ${markerWidthPx}px`,
+              `flex-basis: ${markerWidthPx}px`,
+              `margin-right: 0`,
+              `overflow: visible`,
+            );
+          } else {
+            prefixStyles.push(
+              `min-width: ${fallbackMinWidth}ch`,
+              `margin-right: ${fallbackMarginRight}`,
+            );
+          }
+          children.push([
+            "span",
+            {
+              class:
+                "inline-flex select-none items-center text-tertiary font-[family-name:var(--font-legal-sans)]",
+              contenteditable: "false",
+              "data-numbering-prefix": numberingPrefix,
+              ...(typeof numberingLevel === "number"
+                ? { "data-numbering-level": String(numberingLevel) }
+                : {}),
+              ...(numberingSuffix ? { "data-numbering-suffix": numberingSuffix } : {}),
+              style: prefixStyles.join("; "),
+            },
+            numberingPrefix,
+          ]);
+        }
+        children.push([
+          "span",
+          {
+            class: "pm-paragraph-content",
+          },
+          0,
+        ]);
+        return ["p", attrs, ...children];
+      },
+    },
+
+    text: {
+      group: "inline",
+    },
+
+    hard_break: {
+      inline: true,
+      group: "inline",
+      selectable: false,
+      parseDOM: [{ tag: "br" }],
+      toDOM() {
+        return ["br"];
+      },
+    },
+
+    tab_char: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        tabWidth: { default: null },
+        leader: { default: null },
+        align: { default: null },
+      },
+      toDOM(node) {
+        const width = node.attrs.tabWidth as number | null;
+        const leader = node.attrs.leader as string | null;
+        const align = node.attrs.align as string | null;
+        const styles = [
+          `display: inline-block`,
+          `width: ${width && width > 0 ? width : 32}px`,
+          `min-width: 8px`,
+        ];
+        if (leader === "dot" || leader === "middleDot") {
+          styles.push(
+            `background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px)`,
+            `background-size: 6px 3px`,
+            `background-repeat: repeat-x`,
+            `background-position: left calc(100% - 2px)`,
+            `opacity: 0.55`,
+          );
+        } else if (leader === "hyphen") {
+          styles.push(`border-bottom: 1px dashed rgba(107,107,107,0.65)`);
+        } else if (leader === "underscore") {
+          styles.push(`border-bottom: 1px solid rgba(107,107,107,0.65)`);
+        } else if (leader === "heavy") {
+          styles.push(`border-bottom: 2px solid rgba(107,107,107,0.75)`);
+        }
+        return [
+          "span",
+          {
+            style: styles.join("; "),
+            "data-node-type": "tab",
+            title: align ? `Tab stop · ${align}` : "Tab stop",
+          },
+          "\u00A0",
+        ];
+      },
+    },
+
+    image_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      attrs: {
+        mediaId: { default: "" },
+        altText: { default: null },
+        state: { default: "editable" },
+        display: { default: "inline" },
+        detail: { default: null },
+        src: { default: null },
+        widthEmu: { default: null },
+        heightEmu: { default: null },
+      },
+      toDOM(node) {
+        const isMissing = node.attrs.state === "missing";
+        const isFloating = node.attrs.display === "floating";
+        const src = node.attrs.src as string | null;
+        const widthEmu = node.attrs.widthEmu as number | null;
+        const heightEmu = node.attrs.heightEmu as number | null;
+        if (!isMissing && src) {
+          const widthPx = widthEmu ? Math.max(24, Math.round(widthEmu / 9525)) : undefined;
+          const heightPx = heightEmu ? Math.max(24, Math.round(heightEmu / 9525)) : undefined;
+          const style = [
+            "display:inline-block",
+            "vertical-align:middle",
+            "margin:0 4px",
+            widthPx ? `width:${widthPx}px` : "",
+            heightPx ? `height:${heightPx}px` : "",
+          ].filter(Boolean).join(";");
+          return [
+            "span",
+            {
+              class: "inline-flex items-center rounded",
+              "data-node-type": "image",
+              title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
+            },
+            [
+              "img",
+              {
+                src,
+                alt: (node.attrs.altText as string) ?? "",
+                style,
+              },
+            ],
+          ];
+        }
+        return [
+          "span",
+          {
+            class: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border-none ${
+              isMissing ? "text-danger bg-delete-soft" : "text-secondary bg-surface"
+            }`,
+            "data-node-type": "image",
+            title: (node.attrs.detail as string) ?? (node.attrs.altText as string) ?? "Image",
+          },
+          "\uD83D\uDCF7 " + ((node.attrs.altText as string) ?? (isMissing ? "Missing" : isFloating ? "Floating image" : "Image")),
+        ];
+      },
+    },
+
+    sdt_block: {
+      group: "block",
+      content: "block+",
+      isolating: true,
+      attrs: {
+        sdtType: { default: null },
+        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 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",
+            {
+              class: "mb-2 text-[11px] uppercase tracking-[0.18em] text-tertiary",
+              contenteditable: "false",
+            },
+            meta || "Content control",
+          ],
+          ["div", 0],
+        ];
+      },
+    },
+
+    opaque_inline: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        fragmentId: { default: "" },
+        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),
+        ];
+      },
+    },
+
+    field_ref_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        fieldFamily: { default: "REF" },
+        fieldTarget: { default: null },
+        instruction: { default: "" },
+        refreshStatus: { default: "stale" },
+        label: { default: "Field" },
+      },
+      toDOM(node) {
+        const refreshStatus = node.attrs.refreshStatus as string;
+        const statusClass =
+          refreshStatus === "current"
+            ? "text-blue-700 bg-blue-50 border-blue-200"
+            : refreshStatus === "unresolvable"
+              ? "text-amber-800 bg-amber-50 border-amber-200"
+              : "text-slate-700 bg-slate-50 border-slate-200";
+        return [
+          "span",
+          {
+            class: `inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs border ${statusClass}`,
+            "data-node-type": "field_ref_atom",
+            "data-field-family": node.attrs.fieldFamily as string,
+            title: node.attrs.instruction as string,
+          },
+          (node.attrs.label as string) || "Field",
+        ];
+      },
+    },
+
+    table: tableNodeSpec,
+    table_row: tableRowNodeSpec,
+    table_cell: tableCellNodeSpec,
+    table_header_cell: tableHeaderCellNodeSpec,
+
+    // ---- Complex rendering atoms (read-only previews) ----
+
+    chart_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        previewMediaId: { default: null },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        return [
+          "span",
+          {
+            class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-blue-700 bg-blue-50 border border-blue-200",
+            "data-node-type": "chart_atom",
+            contenteditable: "false",
+            title: (node.attrs.detail as string) ?? "Chart",
+          },
+          "\uD83D\uDCC8 Chart",
+        ];
+      },
+    },
+
+    smartart_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        previewMediaId: { default: null },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        return [
+          "span",
+          {
+            class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-purple-700 bg-purple-50 border border-purple-200",
+            "data-node-type": "smartart_atom",
+            contenteditable: "false",
+            title: (node.attrs.detail as string) ?? "SmartArt",
+          },
+          "\uD83D\uDDFA SmartArt",
+        ];
+      },
+    },
+
+    shape_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: true,
+      attrs: {
+        text: { default: null },
+        geometry: { default: null },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        const text = node.attrs.text as string | null;
+        const label = text ? `Shape: ${text}` : "Shape";
+        return [
+          "span",
+          {
+            class: "inline-flex items-center gap-1 mx-0.5 rounded border border-success/25 bg-success-soft px-1.5 py-0.5 text-xs text-success",
+            "data-node-type": "shape_atom",
+            contenteditable: "false",
+            title: (node.attrs.detail as string) ?? label,
+          },
+          "\u25A1 " + label,
+        ];
+      },
+    },
+
+    wordart_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: false,
+      attrs: {
+        text: { default: "" },
+        geometry: { default: null },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        const text = node.attrs.text as string;
+        return [
+          "span",
+          {
+            class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-orange-700 bg-orange-50 border border-orange-200 font-medium italic",
+            "data-node-type": "wordart_atom",
+            contenteditable: "false",
+            title: (node.attrs.detail as string) ?? `WordArt: ${text}`,
+          },
+          "\u2728 " + (text || "WordArt"),
+        ];
+      },
+    },
+
+    vml_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      selectable: true,
+      attrs: {
+        text: { default: null },
+        shapeType: { default: null },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        const text = node.attrs.text as string | null;
+        const label = text ? `VML: ${text}` : "VML shape";
+        return [
+          "span",
+          {
+            class: "inline-flex items-center gap-1 mx-0.5 px-1.5 py-0.5 rounded text-xs text-gray-600 bg-gray-100 border border-gray-300",
+            "data-node-type": "vml_atom",
+            contenteditable: "false",
+            title: (node.attrs.detail as string) ?? label,
+          },
+          "\u25A6 " + label,
+        ];
+      },
+    },
+
+    opaque_block: {
+      group: "block",
+      atom: true,
+      selectable: false,
+      attrs: {
+        fragmentId: { default: "" },
+        warningId: { default: "" },
+        label: { default: "Locked" },
+        detail: { default: "" },
+      },
+      toDOM(node) {
+        const fragmentId = node.attrs.fragmentId as string;
+        const isPreview = fragmentId.startsWith("preview:");
+        return [
+          "div",
+          {
+            class: isPreview
+              ? "my-3 rounded-xl border border-primary/15 bg-surface-raised/50 px-4 py-3"
+              : "border-l-2 border-dashed border-warning/30 pl-4 py-2 rounded-r bg-warning-soft/20 my-2",
+            contenteditable: "false",
+            "data-node-type": "opaque_block",
+          },
+          [
+            "div",
+            {
+              class: isPreview
+                ? "mb-2 text-[11px] uppercase tracking-[0.18em] text-tertiary"
+                : "flex items-center gap-1.5 text-xs text-tertiary mb-1",
+            },
+            `${isPreview ? "" : "\uD83D\uDD12 "}${node.attrs.label as string}`,
+          ],
+          [
+            "p",
+            {
+              class: isPreview ? "text-sm text-secondary whitespace-pre-wrap leading-relaxed" : "text-sm text-secondary whitespace-pre-wrap",
+            },
+            node.attrs.detail as string,
+          ],
+        ];
+      },
+    },
+  },
+
+  marks: {
+    bold: {
+      parseDOM: [{ tag: "strong" }, { tag: "b" }],
+      toDOM() {
+        return ["strong", 0];
+      },
+    },
+    italic: {
+      parseDOM: [{ tag: "em" }, { tag: "i" }],
+      toDOM() {
+        return ["em", 0];
+      },
+    },
+    underline: {
+      parseDOM: [{ tag: "u" }],
+      toDOM() {
+        return ["u", 0];
+      },
+    },
+    strikethrough: {
+      parseDOM: [{ tag: "s" }, { tag: "del" }],
+      toDOM() {
+        return ["s", 0];
+      },
+    },
+    doubleStrikethrough: {
+      toDOM() {
+        return ["span", { style: "text-decoration: line-through double" }, 0];
+      },
+    },
+    vanish: {
+      toDOM() {
+        return [
+          "span",
+          {
+            style: "display: none",
+            "data-hidden-text": "true",
+            "aria-hidden": "true",
+          },
+          0,
+        ];
+      },
+    },
+    emboss: {
+      toDOM() {
+        return ["span", { style: "text-shadow: 1px -1px 0 rgba(255,255,255,0.6), -1px 1px 0 rgba(0,0,0,0.2)" }, 0];
+      },
+    },
+    imprint: {
+      toDOM() {
+        return ["span", { style: "text-shadow: -1px 1px 0 rgba(255,255,255,0.6), 1px -1px 0 rgba(0,0,0,0.2)" }, 0];
+      },
+    },
+    shadow: {
+      toDOM() {
+        return ["span", { style: "text-shadow: 1px 1px 2px rgba(0,0,0,0.3)" }, 0];
+      },
+    },
+    superscript: {
+      excludes: "subscript",
+      parseDOM: [{ tag: "sup" }],
+      toDOM() {
+        return ["sup", 0];
+      },
+    },
+    subscript: {
+      excludes: "superscript",
+      parseDOM: [{ tag: "sub" }],
+      toDOM() {
+        return ["sub", 0];
+      },
+    },
+    small_caps: {
+      parseDOM: [
+        {
+          style: "font-variant",
+          getAttrs: (value) => (value === "small-caps" ? null : false),
+        },
+      ],
+      toDOM() {
+        return ["span", { style: "font-variant: small-caps" }, 0];
+      },
+    },
+    all_caps: {
+      parseDOM: [
+        {
+          style: "text-transform",
+          getAttrs: (value) => (value === "uppercase" ? null : false),
+        },
+      ],
+      toDOM() {
+        return ["span", { style: "text-transform: uppercase" }, 0];
+      },
+    },
+    char_spacing: {
+      attrs: { value: { default: 0 } },
+      toDOM(mark) {
+        const twips = mark.attrs.value as number;
+        return ["span", { style: `letter-spacing: ${twips / 20}px` }, 0];
+      },
+    },
+    font_kerning: {
+      attrs: { threshold: { default: 0 } },
+      toDOM() {
+        return ["span", { style: "font-kerning: normal" }, 0];
+      },
+    },
+    font_family: {
+      attrs: { family: { default: null } },
+      parseDOM: [
+        {
+          style: "font-family",
+          getAttrs: (value) => ({ family: (value as string).replace(/['"]/g, "") }),
+        },
+      ],
+      toDOM(mark) {
+        const family = mark.attrs.family as string;
+        if (!SAFE_FONT_RE.test(family)) return ["span", 0];
+        return ["span", { style: `font-family: ${family}` }, 0];
+      },
+    },
+    font_size: {
+      attrs: { size: { default: null } },
+      parseDOM: [
+        {
+          style: "font-size",
+          getAttrs: (value) => {
+            const match = (value as string).match(/^(\d+(?:\.\d+)?)/);
+            return match ? { size: Number.parseFloat(match[1]) } : false;
+          },
+        },
+      ],
+      toDOM(mark) {
+        return ["span", { style: `font-size: ${mark.attrs.size as number}pt` }, 0];
+      },
+    },
+    text_color: {
+      attrs: { color: { default: null } },
+      parseDOM: [
+        {
+          style: "color",
+          getAttrs: (value) => ({ color: value }),
+        },
+      ],
+      toDOM(mark) {
+        const color = safeCssColor(mark.attrs.color as string);
+        if (!color) return ["span", 0];
+        return ["span", { style: `color: ${color}` }, 0];
+      },
+    },
+    highlight: {
+      attrs: { color: { default: "yellow" } },
+      parseDOM: [
+        {
+          tag: "mark",
+          getAttrs: (dom) => ({ color: (dom as HTMLElement).style.backgroundColor || "yellow" }),
+        },
+      ],
+      toDOM(mark) {
+        const color = safeCssColor(mark.attrs.color as string);
+        if (!color) return ["mark", 0];
+        return ["mark", { style: `background-color: ${color}` }, 0];
+      },
+    },
+    link: {
+      attrs: { href: { default: "" } },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: "a[href]",
+          getAttrs(dom) {
+            return { href: sanitizeLinkHref((dom as HTMLElement).getAttribute("href")) ?? "" };
+          },
+        },
+      ],
+      toDOM(mark) {
+        const href = sanitizeLinkHref(mark.attrs.href as string);
+        if (!href) {
+          return [
+            "span",
+            {
+              class: "text-accent underline decoration-1 underline-offset-2",
+              "data-invalid-link": "true",
+            },
+            0,
+          ];
+        }
+        return [
+          "a",
+          {
+            href,
+            class: "text-accent underline decoration-1 underline-offset-2",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          0,
+        ];
+      },
+    },
+  },
+});