@beyondwork/docx-react-component 1.0.1 → 1.0.2

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

@@ -0,0 +1,452 @@
+import { Schema } from "prosemirror-model";
+import {
+  tableNodeSpec,
+  tableRowNodeSpec,
+  tableCellNodeSpec,
+  tableHeaderCellNodeSpec,
+} from "../../runtime/table-schema.ts";
+
+/**
+ * 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 },
+        alignment: { default: null },
+      },
+      parseDOM: [{ tag: "p" }],
+      toDOM(node) {
+        const classes: string[] = ["leading-relaxed"];
+        const styleId = node.attrs.styleId as string | null;
+        if (styleId) {
+          const lower = styleId.toLowerCase();
+          if (lower === "heading1") classes.push("text-2xl font-medium");
+          else if (lower === "heading2") classes.push("text-xl font-medium");
+          else if (lower === "heading3") classes.push("text-lg font-medium");
+        }
+        const attrs: Record<string, string> = { class: classes.join(" ") };
+        const alignment = node.attrs.alignment as string | null;
+        if (alignment) attrs.style = `text-align: ${alignment}`;
+        return ["p", attrs, 0];
+      },
+    },
+
+    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,
+      toDOM() {
+        return ["span", { class: "inline-block w-8", "data-node-type": "tab" }, "\u00A0"];
+      },
+    },
+
+    image_atom: {
+      inline: true,
+      group: "inline",
+      atom: true,
+      attrs: {
+        mediaId: { default: "" },
+        altText: { default: null },
+        state: { default: "editable" },
+        display: { default: "inline" },
+        detail: { default: null },
+      },
+      toDOM(node) {
+        const isMissing = node.attrs.state === "missing";
+        const isFloating = node.attrs.display === "floating";
+        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 },
+      },
+      toDOM(node) {
+        const meta = [node.attrs.alias, node.attrs.tag, node.attrs.sdtType].filter(Boolean).join(" · ");
+        return [
+          "section",
+          {
+            class: "my-2 rounded-xl border border-primary/15 bg-surface-raised/60 px-3 py-2",
+            "data-node-type": "sdt_block",
+          },
+          [
+            "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: "" },
+      },
+      toDOM(node) {
+        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",
+            title: node.attrs.detail as string,
+          },
+          "\uD83D\uDD12 " + (node.attrs.label as string),
+        ];
+      },
+    },
+
+    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: false,
+      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: false,
+      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) {
+        return [
+          "div",
+          {
+            class: "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: "flex items-center gap-1.5 text-xs text-tertiary mb-1" },
+            "\uD83D\uDD12 " + (node.attrs.label as string),
+          ],
+          ["p", { class: "text-sm text-secondary" }, 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];
+      },
+    },
+    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];
+      },
+    },
+    font_family: {
+      attrs: { family: { default: null } },
+      parseDOM: [
+        {
+          style: "font-family",
+          getAttrs: (value) => ({ family: (value as string).replace(/['"]/g, "") }),
+        },
+      ],
+      toDOM(mark) {
+        return ["span", { style: `font-family: ${mark.attrs.family as string}` }, 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 = mark.attrs.color as string;
+        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) {
+        return ["mark", { style: `background-color: ${mark.attrs.color as string}` }, 0];
+      },
+    },
+    link: {
+      attrs: { href: { default: "" } },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: "a[href]",
+          getAttrs(dom) {
+            return { href: (dom as HTMLElement).getAttribute("href") };
+          },
+        },
+      ],
+      toDOM(mark) {
+        return [
+          "a",
+          {
+            href: mark.attrs.href as string,
+            class: "text-accent underline decoration-1 underline-offset-2",
+            target: "_blank",
+            rel: "noopener noreferrer",
+          },
+          0,
+        ];
+      },
+    },
+  },
+});