@beyondwork/docx-react-component 1.0.27 → 1.0.29

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

@@ -1,876 +0,0 @@
-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;
-}
-
-/**
- * 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 },
-        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 },
-      },
-      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 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 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 minWidth = Math.min(Math.max(numberingPrefix.length + 1, 4), 14);
-          const marginRight = numberingSuffix === "nothing" ? "0.25rem" : numberingSuffix === "space" ? "0.5rem" : "0.75rem";
-          children.push([
-            "span",
-            {
-              class:
-                "inline-flex select-none items-center justify-end 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: `min-width: ${minWidth}ch; margin-right: ${marginRight}; font-variant-numeric: tabular-nums;`,
-            },
-            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 px-1.5 py-0.5 rounded text-xs text-green-700 bg-green-50 border border-green-200",
-            "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,
-        ];
-      },
-    },
-  },
-});