@portone/docx-editor 0.1.1 → 0.2.1

package/dist/docx/propsXml.js

@@ -1,5 +1,10 @@
 // src/docx/propsXml.ts
-import { elementChildren, localPart, parseXml, W_NS } from "../ooxml/xml.js";
+import {
+  elementChildren,
+  localPart,
+  namespaceDecls,
+  parseXml
+} from "../ooxml/xml.js";
 var RUN_PR_ORDER = [
   "rStyle",
   "rFonts",
@@ -179,6 +184,12 @@ function attrsOf(source, tag) {
   const attrs = source.slice(tag.nameEnd, tag.end - closeLength).trim();
   return attrs.length > 0 ? attrs : null;
 }
+function innerXml(xml) {
+  const open = readTag(xml, 0);
+  if (!open || xml[0] !== "<" || open.kind !== "open") return "";
+  const close = xml.lastIndexOf("</");
+  return close > open.end ? xml.slice(open.end, close) : "";
+}
 function parseProps(xml) {
   const open = readTag(xml, 0);
   if (!open || xml[0] !== "<") return null;
@@ -192,6 +203,11 @@ function parseProps(xml) {
   let childStart = -1;
   let childName = "";
   let i = open.end;
+  let gapStart = open.end;
+  const gapBefore = (start) => {
+    const gap = xml.slice(gapStart, start);
+    return gap.length > 0 ? { before: gap } : {};
+  };
   while (i < xml.length) {
     const lt = xml.indexOf("<", i);
     if (lt === -1) return null;
@@ -204,15 +220,18 @@ function parseProps(xml) {
     if (depth === 0) {
       if (tag.kind === "close") {
         if (tag.name !== open.name || tag.end !== xml.length) return null;
-        return { tag: open.name, attrs, children };
+        const tail = xml.slice(gapStart, lt);
+        return tail.length > 0 ? { tag: open.name, attrs, children, tail } : { tag: open.name, attrs, children };
       }
       childStart = lt;
       childName = tag.name;
       if (tag.kind === "empty") {
         children.push({
           name: localPart(childName),
-          xml: xml.slice(childStart, tag.end)
+          xml: xml.slice(childStart, tag.end),
+          ...gapBefore(childStart)
         });
+        gapStart = tag.end;
       } else {
         depth = 1;
       }
@@ -223,8 +242,10 @@ function parseProps(xml) {
       if (depth === 0) {
         children.push({
           name: localPart(childName),
-          xml: xml.slice(childStart, tag.end)
+          xml: xml.slice(childStart, tag.end),
+          ...gapBefore(childStart)
         });
+        gapStart = tag.end;
       }
     }
     i = tag.end;
@@ -232,9 +253,11 @@ function parseProps(xml) {
   return null;
 }
 function renderProps(props) {
-  if (props.children.length === 0) return "";
+  const tail = props.tail ?? "";
+  if (props.children.length === 0 && tail.trim().length === 0) return "";
   const open = props.attrs ? `<${props.tag} ${props.attrs}>` : `<${props.tag}>`;
-  return open + props.children.map((child) => child.xml).join("") + `</${props.tag}>`;
+  const inner = props.children.map((child) => (child.before ?? "") + child.xml).join("");
+  return open + inner + tail + `</${props.tag}>`;
 }
 function insertIndex(children, name, order) {
   const target = order.indexOf(name);
@@ -248,37 +271,53 @@ function insertIndex(children, name, order) {
   }
   return children.length;
 }
-function setPropsChild(children, name, xml, order) {
-  const without = children.filter((child2) => child2.name !== name);
-  if (xml === null) return without;
-  const child = { name, xml };
-  const at = children.findIndex((entry) => entry.name === name);
-  if (at === -1) {
-    const index = insertIndex(without, name, order);
-    return [...without.slice(0, index), child, ...without.slice(index)];
+function dropChildren(children, name) {
+  const kept = [];
+  let carried = "";
+  for (const child of children) {
+    const before = carried + (child.before ?? "");
+    if (child.name === name) {
+      carried = before;
+      continue;
+    }
+    carried = "";
+    kept.push(
+      before === "" ? { name: child.name, xml: child.xml } : { ...child, before }
+    );
   }
-  return [
-    ...children.slice(0, at),
-    child,
-    ...children.slice(at + 1).filter((entry) => entry.name !== name)
-  ];
+  return { kept, carried };
 }
-function propsChild(children, name) {
-  return children.find((child) => child.name === name);
+function tailWith(props, carried) {
+  const tail = carried + (props.tail ?? "");
+  return tail === "" ? {} : { tail };
 }
-function namespaceDecls(xml) {
-  const prefixes = /* @__PURE__ */ new Set(["w"]);
-  for (const [, prefix] of xml.matchAll(/<\/?([A-Za-z_][\w.-]*):/g)) {
-    prefixes.add(prefix);
+function setPropsChild(props, name, xml, order) {
+  const at = props.children.findIndex((entry) => entry.name === name);
+  if (at !== -1 && xml !== null) {
+    const rest = dropChildren(props.children.slice(at + 1), name);
+    return {
+      ...props,
+      children: [
+        ...props.children.slice(0, at),
+        { ...props.children[at], xml },
+        ...rest.kept
+      ],
+      ...tailWith(props, rest.carried)
+    };
   }
-  for (const [, prefix] of xml.matchAll(/[\s"']([A-Za-z_][\w.-]*):[\w.-]+=/g)) {
-    prefixes.add(prefix);
+  const { kept, carried } = dropChildren(props.children, name);
+  if (xml === null) {
+    return { ...props, children: kept, ...tailWith(props, carried) };
   }
-  prefixes.delete("xml");
-  prefixes.delete("xmlns");
-  return Array.from(prefixes).map(
-    (prefix) => `xmlns:${prefix}="${prefix === "w" ? W_NS : `urn:docx-editor:${prefix}`}"`
-  ).join(" ");
+  const index = insertIndex(kept, name, order);
+  return {
+    ...props,
+    children: [...kept.slice(0, index), { name, xml }, ...kept.slice(index)],
+    ...tailWith(props, carried)
+  };
+}
+function propsChild(children, name) {
+  return children.find((child) => child.name === name);
 }
 function parsePropsXml(xml) {
   try {
@@ -294,6 +333,7 @@ export {
   TBL_PR_ORDER,
   TC_PR_ORDER,
   TR_PR_ORDER,
+  innerXml,
   parseProps,
   parsePropsXml,
   propsChild,

package/dist/docx/relationships.js

@@ -1,10 +1,10 @@
 // src/docx/relationships.ts
+import { elementXml } from "../ooxml/element.js";
 import { DocxExportError } from "../ooxml/errors.js";
 import {
   decodeUtf8,
   elementChildren,
   encodeUtf8,
-  escapeXml,
   parseXml
 } from "../ooxml/xml.js";
 var RELATIONSHIPS_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
@@ -48,8 +48,13 @@ function takeRelId(taken) {
   }
 }
 function relationshipXml(added) {
-  const mode = added.external ? ' TargetMode="External"' : "";
-  return `<Relationship Id="${added.id}" Type="${added.type}" Target="${escapeXml(added.target)}"${mode}/>`;
+  const mode = added.external ? [["TargetMode", "External"]] : [];
+  return elementXml("Relationship", [
+    ["Id", added.id],
+    ["Type", added.type],
+    ["Target", added.target],
+    ...mode
+  ]);
 }
 function relationshipsPart(original, added) {
   const entries = added.map(relationshipXml).join("");

package/dist/docx/runProps.js

@@ -1,7 +1,13 @@
 // src/docx/runProps.ts
 import { toRunFormat } from "../model/format.js";
+import {
+  attrPairs,
+  attrValue,
+  elementXml
+} from "../ooxml/element.js";
+import { wName } from "../ooxml/names.js";
+import { setAttr } from "../ooxml/precedence.js";
 import { normalizeHex } from "../ooxml/units.js";
-import { escapeXml, localPart } from "../ooxml/xml.js";
 import { isEastAsianFontName } from "../styles/fontStack.js";
 import { fontNamesOf, readRunFormat } from "./formatting.js";
 import {
@@ -12,7 +18,6 @@ import {
   renderProps,
   setPropsChild
 } from "./propsXml.js";
-import { THEME_ATTRS } from "./theme.js";
 var TOGGLE_CHILDREN = {
   bold: ["b", "bCs"],
   italic: ["i", "iCs"],
@@ -32,11 +37,15 @@ var TOGGLE_OFF_VALUE = {
   strike: "0"
 };
 var MAX_FONT_SIZE_PT = 819;
-function elementXml(name, value) {
-  return value === null ? `<w:${name}/>` : `<w:${name} w:val="${value}"/>`;
+function valXml(name, value) {
+  return elementXml(wName(name), value === null ? [] : [[wName("val"), value]]);
 }
 function shadingXml(fill) {
-  return `<w:shd w:val="clear" w:color="auto" w:fill="${fill}"/>`;
+  return elementXml(wName("shd"), [
+    [wName("val"), "clear"],
+    [wName("color"), "auto"],
+    [wName("fill"), fill]
+  ]);
 }
 function halfPoints(pt) {
   if (!Number.isFinite(pt) || pt <= 0 || pt > MAX_FONT_SIZE_PT) return null;
@@ -53,29 +62,19 @@ function fontName(value) {
   const name = value.trim();
   return name.length > 0 && !/["';<>&]/.test(name) ? name : null;
 }
-function rFontsAttrs(xml) {
-  if (xml === null) return [];
-  const el = parsePropsXml(xml);
-  if (!el) return null;
-  return Array.from(el.attributes, (attr) => [
-    attr.name,
-    attr.value
-  ]);
-}
 function rFontsXml(current, name) {
-  const attrs = rFontsAttrs(current);
-  if (!attrs) return null;
-  const slots = fontSlots(
-    name,
-    attrs.some(([attr]) => localPart(attr) === "cs")
+  const el = current === null ? null : parsePropsXml(current);
+  if (current !== null && !el) return null;
+  const attrs = attrPairs(el);
+  const slots = fontSlots(name, attrValue(attrs, "cs") !== null);
+  const kept = slots.reduce(
+    (rest, slot) => setAttr(rest, "rFonts", slot, null),
+    attrs
   );
-  const dropped = slots.flatMap((slot) => [slot, ...THEME_ATTRS[slot] ?? []]);
-  const kept = attrs.filter(([attr]) => !dropped.includes(localPart(attr)));
-  const text = [
-    ...slots.map((slot) => [`w:${slot}`, name]),
+  return elementXml(wName("rFonts"), [
+    ...slots.map((slot) => [wName(slot), name]),
     ...kept
-  ].map(([attr, value]) => `${attr}="${escapeXml(value)}"`).join(" ");
-  return `<w:rFonts ${text}/>`;
+  ]);
 }
 function hasChild(xml, name) {
   if (xml === null) return false;
@@ -87,7 +86,7 @@ function propsOf(rPr) {
   return parseProps(rPr);
 }
 function offEdit(name, value, inherited) {
-  return [name, inherited ? elementXml(name, value) : null];
+  return [name, inherited ? valXml(name, value) : null];
 }
 function childEdits(edit, inherited, rFonts) {
   switch (edit.kind) {
@@ -95,7 +94,7 @@ function childEdits(edit, inherited, rFonts) {
       const names = TOGGLE_CHILDREN[edit.toggle];
       if (edit.on) {
         const value = TOGGLE_ON_VALUE[edit.toggle];
-        return names.map((name) => [name, elementXml(name, value)]);
+        return names.map((name) => [name, valXml(name, value)]);
       }
       const off = TOGGLE_OFF_VALUE[edit.toggle];
       return names.map((name) => offEdit(name, off, inherited));
@@ -110,8 +109,8 @@ function childEdits(edit, inherited, rFonts) {
       const half = halfPoints(edit.pt);
       if (half === null) return null;
       return [
-        ["sz", elementXml("sz", `${half}`)],
-        ["szCs", elementXml("szCs", `${half}`)]
+        ["sz", valXml("sz", `${half}`)],
+        ["szCs", valXml("szCs", `${half}`)]
       ];
     }
     case "fontFamily": {
@@ -124,7 +123,7 @@ function childEdits(edit, inherited, rFonts) {
     case "color": {
       if (edit.hex === null) return [offEdit("color", "auto", inherited)];
       const hex = normalizeHex(edit.hex);
-      return hex === null ? null : [["color", elementXml("color", hex)]];
+      return hex === null ? null : [["color", valXml("color", hex)]];
     }
     case "background": {
       const highlight = offEdit("highlight", "none", inherited);
@@ -162,11 +161,12 @@ function editRunProps(current, pPr, edit) {
   const rFonts = propsChild(props.children, "rFonts")?.xml ?? null;
   const edits = childEdits(edit, inherited, rFonts);
   if (!edits) return null;
-  const children = edits.reduce(
-    (kept, [name, xml]) => setPropsChild(kept, name, xml, RUN_PR_ORDER),
-    props.children
+  const rPr = renderProps(
+    edits.reduce(
+      (kept, [name, xml]) => setPropsChild(kept, name, xml, RUN_PR_ORDER),
+      props
+    )
   );
-  const rPr = renderProps({ ...props, children });
   return nextProps(rPr === "" ? null : rPr, current);
 }
 function isRunToggleOn(format, toggle) {

package/dist/docx/sdt.js

@@ -1,4 +1,6 @@
 // src/docx/sdt.ts
+import { elementXml, emptyTagXml, openTagXml } from "../ooxml/element.js";
+import { wName } from "../ooxml/names.js";
 import { wAttr } from "../ooxml/units.js";
 import { attrString, elementChildren, serializeXml } from "../ooxml/xml.js";
 import {
@@ -31,7 +33,7 @@ function readSdtWrapper(el) {
   const attrs = attrString(el);
   const val = lockValue(sdtPr);
   return {
-    prefix: (attrs ? `<w:sdt ${attrs}>` : "<w:sdt>") + head.map(serializeXml).join(""),
+    prefix: openTagXml(wName("sdt"), attrs) + head.map(serializeXml).join(""),
     content,
     contentsLocked: val !== null && CONTENTS_LOCKED.includes(val),
     deletionLocked: val !== null && DELETION_LOCKED.includes(val)
@@ -53,8 +55,8 @@ function newControlId() {
   return Math.floor(Math.random() * 2147483647);
 }
 function renderPrefix(props) {
-  const open = props.attrs ? `<${props.tag} ${props.attrs}>` : `<${props.tag}>`;
-  return open + props.children.map((child) => child.xml).join("");
+  const inner = props.children.map((child) => (child.before ?? "") + child.xml).join("");
+  return openTagXml(props.tag, props.attrs) + inner + (props.tail ?? "");
 }
 var NAMES_NOTHING = ["id", "lock"];
 function namesNothing(prefix) {
@@ -66,31 +68,31 @@ function namesNothing(prefix) {
   return props.children.every((child) => NAMES_NOTHING.includes(child.name));
 }
 function emptyProps(props) {
-  return props.attrs ? `<${props.tag} ${props.attrs}/>` : `<${props.tag}/>`;
+  return emptyTagXml(props.tag, props.attrs);
 }
 function editSdtPrefix(prefix, edits) {
   const sdt = parseProps(`${prefix}</w:sdt>`);
   const sdtPr = sdt && propsChild(sdt.children, "sdtPr");
   const props = sdtPr ? parseProps(sdtPr.xml) : null;
   if (!sdt || !props) return null;
-  const children = edits.reduce(
-    (kept, [name, xml]) => setPropsChild(kept, name, xml, SDT_PR_ORDER),
-    props.children
+  const rendered = renderProps(
+    edits.reduce(
+      (kept, [name, xml]) => setPropsChild(kept, name, xml, SDT_PR_ORDER),
+      props
+    )
   );
-  const rendered = renderProps({ ...props, children });
-  return renderPrefix({
-    ...sdt,
-    children: setPropsChild(
-      sdt.children,
+  return renderPrefix(
+    setPropsChild(
+      sdt,
       "sdtPr",
       rendered === "" ? emptyProps(props) : rendered,
       SDT_ORDER
     )
-  });
+  );
 }
 function copiedControlPrefix(prefix, id) {
   const copied = editSdtPrefix(prefix, [
-    ["id", `<w:id w:val="${id}"/>`],
+    ["id", elementXml(wName("id"), [[wName("val"), `${id}`]])],
     ["dataBinding", null]
   ]);
   return copied ?? prefix;

package/dist/docx/serializeBlock.js

@@ -18,8 +18,7 @@ function serializeBlock(node, session, refs = NO_EXPORT_REFS) {
   if (node.type.name === "paragraph") return serializeParagraph(node, refs);
   if (node.type.name === "table") return serializeTable(node, refs);
   if (node.type.name === "rawBlock") return preservedXml(node);
-  if (node.type.name === "bookmarkBlock") return serializeRaw(node, session);
-  if (node.type.name === "docxRaw") return serializeRaw(node, session);
+  if (node.type.isInGroup("preserved")) return serializeRaw(node, session);
   throw new DocxExportError(
     "unsupported-content",
     `block we cannot serialize: ${node.type.name}`

package/dist/docx/serializeParagraph.d.ts

@@ -10,6 +10,7 @@
  */
 import type { Node as PMNode } from "prosemirror-model";
 import { type ExportRefs } from "./exportRefs";
-export declare function openTag(name: string, attrs: unknown): string;
+/** The attribute text a node attr holds, which is either what the original wrote or nothing */
+export declare function rawAttrsOf(value: unknown): string | null;
 export declare function preservedXml(node: PMNode): string;
 export declare function serializeParagraph(node: PMNode, refs?: ExportRefs): string;

package/dist/docx/serializeParagraph.js

@@ -1,4 +1,5 @@
 // src/docx/serializeParagraph.ts
+import { elementXml, emptyTagXml, openTagXml } from "../ooxml/element.js";
 import { DocxExportError } from "../ooxml/errors.js";
 import {
   imageDrawingXml,
@@ -6,6 +7,7 @@ import {
   toImageSrc,
   withExtent
 } from "../ooxml/image.js";
+import { wName } from "../ooxml/names.js";
 import { escapeXml } from "../ooxml/xml.js";
 import { NO_EXPORT_REFS } from "./exportRefs.js";
 import { relIdIn, withRelId } from "./hyperlink.js";
@@ -16,11 +18,8 @@ function sameMark(a, b) {
 function markOf(node, name) {
   return node.marks.find((mark) => mark.type.name === name) ?? null;
 }
-function openTag(name, attrs) {
-  return typeof attrs === "string" ? `<${name} ${attrs}>` : `<${name}>`;
-}
-function emptyTag(name, attrs) {
-  return typeof attrs === "string" ? `<${name} ${attrs}/>` : `<${name}/>`;
+function rawAttrsOf(value) {
+  return typeof value === "string" ? value : null;
 }
 function renderImage(node, images) {
   const extent = toImageExtent(node.attrs.extent);
@@ -51,19 +50,28 @@ function renderInline(node, images) {
   if (node.isText) {
     const tab = markOf(node, "tab");
     return (node.text ?? "").split("	").flatMap((text, index, pieces) => {
-      const rendered = text ? [`<w:t xml:space="preserve">${escapeXml(text)}</w:t>`] : [];
-      return index < pieces.length - 1 ? [...rendered, emptyTag("w:tab", tab?.attrs.tabAttrs)] : rendered;
+      const rendered = text ? [
+        elementXml(
+          wName("t"),
+          [["xml:space", "preserve"]],
+          [escapeXml(text)]
+        )
+      ] : [];
+      return index < pieces.length - 1 ? [
+        ...rendered,
+        emptyTagXml(wName("tab"), rawAttrsOf(tab?.attrs.tabAttrs))
+      ] : rendered;
     }).join("");
   }
   if (node.type.name === "hardBreak")
-    return emptyTag("w:br", node.attrs.brAttrs);
+    return emptyTagXml(wName("br"), rawAttrsOf(node.attrs.brAttrs));
   if (node.type.name === "image") return renderImage(node, images);
   if (node.type.name === "commentReference") {
     const original = node.attrs.referenceXml;
     if (typeof original === "string") return original;
     const id = node.attrs.id;
     if (typeof id === "string") {
-      return `<w:commentReference w:id="${escapeXml(id)}"/>`;
+      return elementXml(wName("commentReference"), [[wName("id"), id]]);
     }
     throw new DocxExportError(
       "lost-original",
@@ -76,7 +84,7 @@ function renderInline(node, images) {
     const id = node.attrs.id;
     const name = node.attrs.kind === "endnote" ? "endnoteReference" : "footnoteReference";
     if (typeof id === "string") {
-      return `<w:${name} w:id="${escapeXml(id)}"/>`;
+      return elementXml(wName(name), [[wName("id"), id]]);
     }
     throw new DocxExportError(
       "lost-original",
@@ -117,7 +125,10 @@ function addInline(parts, child, images) {
       );
     }
     const name = child.type.name === "commentStart" ? "commentRangeStart" : "commentRangeEnd";
-    parts.push({ kind: "raw", xml: `<w:${name} w:id="${escapeXml(id)}"/>` });
+    parts.push({
+      kind: "raw",
+      xml: elementXml(wName(name), [[wName("id"), id]])
+    });
     return;
   }
   const piece = renderInline(child, images);
@@ -150,7 +161,7 @@ function splitParagraphGroups(paragraph, refs) {
 }
 function renderParagraphPart(part) {
   if (part.kind === "raw") return part.xml;
-  const open = openTag("w:r", part.mark?.attrs.rAttrs);
+  const open = openTagXml(wName("r"), rawAttrsOf(part.mark?.attrs.rAttrs));
   const rPr = part.mark?.attrs.rPr;
   return open + (typeof rPr === "string" ? rPr : "") + part.pieces.join("") + "</w:r>";
 }
@@ -196,13 +207,13 @@ function renderParagraphGroup(group, refs) {
   return `${prefix}<w:sdtContent>${body}</w:sdtContent></w:sdt>`;
 }
 function serializeParagraph(node, refs = NO_EXPORT_REFS) {
-  const open = openTag("w:p", node.attrs.pAttrs);
+  const open = openTagXml(wName("p"), rawAttrsOf(node.attrs.pAttrs));
   const pPr = node.attrs.pPr;
   const body = splitParagraphGroups(node, refs).map((group) => renderParagraphGroup(group, refs)).join("");
   return open + (typeof pPr === "string" ? pPr : "") + body + "</w:p>";
 }
 export {
-  openTag,
   preservedXml,
+  rawAttrsOf,
   serializeParagraph
 };

package/dist/docx/serializeTable.js

@@ -5,18 +5,22 @@ import {
   toTableWidth,
   widthNumber
 } from "../model/format.js";
+import { elementXml, openTagXml } from "../ooxml/element.js";
 import { DocxExportError } from "../ooxml/errors.js";
+import { wName } from "../ooxml/names.js";
 import { NO_EXPORT_REFS } from "./exportRefs.js";
 import {
+  innerXml,
   parseProps,
+  propsChild,
   renderProps,
   setPropsChild,
   TBL_PR_ORDER,
   TC_PR_ORDER
 } from "./propsXml.js";
 import {
-  openTag,
   preservedXml,
+  rawAttrsOf,
   serializeParagraph
 } from "./serializeParagraph.js";
 function propsOf(xml, tag) {
@@ -27,15 +31,24 @@ function propsOf(xml, tag) {
   }
   return parsed;
 }
-function widthXml(name, width) {
-  return `<w:${name} w:w="${widthNumber(width) ?? 0}" w:type="${width.type}"/>`;
+function modelled(name, attrs, replacing) {
+  const inner = replacing === void 0 ? "" : innerXml(replacing);
+  return elementXml(wName(name), attrs, inner === "" ? [] : [inner]);
+}
+function widthXml(name, width, replacing) {
+  return modelled(
+    name,
+    [
+      [wName("w"), `${widthNumber(width) ?? 0}`],
+      [wName("type"), width.type]
+    ],
+    replacing
+  );
 }
 function withWidth(props, name, width, order) {
   if (!width) return props;
-  return {
-    ...props,
-    children: setPropsChild(props.children, name, widthXml(name, width), order)
-  };
+  const replacing = propsChild(props.children, name)?.xml;
+  return setPropsChild(props, name, widthXml(name, width, replacing), order);
 }
 function tablePropsXml(table) {
   const props = propsOf(table.attrs.tblPr, "w:tblPr");
@@ -45,26 +58,27 @@ function tablePropsXml(table) {
 function tableGridXml(table) {
   const gridCols = toGridCols(table.attrs.gridCols);
   if (gridCols.length === 0) return "";
-  const cols = gridCols.map((w) => `<w:gridCol w:w="${w}"/>`).join("");
-  return `<w:tblGrid>${cols}</w:tblGrid>`;
+  const cols = gridCols.map((w) => elementXml(wName("gridCol"), [[wName("w"), `${w}`]])).join("");
+  return elementXml(wName("tblGrid"), [], [cols]);
 }
 function cellPropsXml(cell, role) {
   const props = propsOf(cell.attrs.tcPr, "w:tcPr");
   const colspan = spanCount(cell.attrs.colspan);
   const rowspan = spanCount(cell.attrs.rowspan);
-  const gridSpan = colspan > 1 ? `<w:gridSpan w:val="${colspan}"/>` : null;
-  const vMerge = role === "continue" ? "<w:vMerge/>" : rowspan > 1 ? '<w:vMerge w:val="restart"/>' : null;
-  let children = setPropsChild(
-    props.children,
+  const gridSpan = colspan > 1 ? modelled(
     "gridSpan",
-    gridSpan,
-    TC_PR_ORDER
-  );
-  children = setPropsChild(children, "vMerge", vMerge, TC_PR_ORDER);
+    [[wName("val"), `${colspan}`]],
+    propsChild(props.children, "gridSpan")?.xml
+  ) : null;
+  const vMerge = role === "continue" ? elementXml(wName("vMerge"), []) : rowspan > 1 ? modelled(
+    "vMerge",
+    [[wName("val"), "restart"]],
+    propsChild(props.children, "vMerge")?.xml
+  ) : null;
+  const spanned = setPropsChild(props, "gridSpan", gridSpan, TC_PR_ORDER);
+  const merged = setPropsChild(spanned, "vMerge", vMerge, TC_PR_ORDER);
   const width = toTableWidth(cell.attrs.tcW);
-  return renderProps(
-    withWidth({ ...props, children }, "tcW", width, TC_PR_ORDER)
-  );
+  return renderProps(withWidth(merged, "tcW", width, TC_PR_ORDER));
 }
 function cellBlockXml(block, refs) {
   if (block.type.name === "paragraph") return serializeParagraph(block, refs);
@@ -81,8 +95,8 @@ function wrapInSdt(xml, cell, role) {
   return `${prefix}<w:sdtContent>${xml}</w:sdtContent></w:sdt>`;
 }
 function cellXml(cell, role, refs) {
-  const body = role === "continue" ? "<w:p/>" : cell.children.map((block) => cellBlockXml(block, refs)).join("");
-  const xml = openTag("w:tc", cell.attrs.tcAttrs) + cellPropsXml(cell, role) + body + "</w:tc>";
+  const body = role === "continue" ? elementXml(wName("p"), []) : cell.children.map((block) => cellBlockXml(block, refs)).join("");
+  const xml = openTagXml(wName("tc"), rawAttrsOf(cell.attrs.tcAttrs)) + cellPropsXml(cell, role) + body + "</w:tc>";
   return wrapInSdt(xml, cell, role);
 }
 function placeRow(row, covering) {
@@ -116,7 +130,7 @@ function rowXml(row, covering, refs) {
   const cells = placeRow(row, covering).map((placed) => cellXml(placed.cell, placed.role, refs)).join("");
   const tblPrEx = row.attrs.tblPrEx;
   const trPr = row.attrs.trPr;
-  return openTag("w:tr", row.attrs.trAttrs) + (typeof tblPrEx === "string" ? tblPrEx : "") + (typeof trPr === "string" ? trPr : "") + cells + "</w:tr>";
+  return openTagXml(wName("tr"), rawAttrsOf(row.attrs.trAttrs)) + (typeof tblPrEx === "string" ? tblPrEx : "") + (typeof trPr === "string" ? trPr : "") + cells + "</w:tr>";
 }
 function serializeTable(table, refs = NO_EXPORT_REFS) {
   const covering = [];
@@ -127,7 +141,7 @@ function serializeTable(table, refs = NO_EXPORT_REFS) {
       "a vertical merge in the table reaches past the last row"
     );
   }
-  return openTag("w:tbl", table.attrs.tblAttrs) + tablePropsXml(table) + tableGridXml(table) + rows + "</w:tbl>";
+  return openTagXml(wName("tbl"), rawAttrsOf(table.attrs.tblAttrs)) + tablePropsXml(table) + tableGridXml(table) + rows + "</w:tbl>";
 }
 export {
   serializeTable