@portone/docx-editor 0.2.0 → 0.2.1

package/dist/docx/theme.d.ts

@@ -21,12 +21,6 @@ export interface ThemeFonts {
 }
 /** What applies to a document with no theme part, or one whose theme names no font */
 export declare const NO_THEME_FONTS: ThemeFonts;
-/**
- * The theme attribute paired with each font slot.
- * A theme reference and a name in the same slot cannot both apply, so the name wins,
- * the way Word reads them.
- */
-export declare const THEME_ATTRS: Record<string, readonly string[]>;
 /** The font one theme reference stands for. null for a reference we cannot resolve */
 export declare function themeFontName(fonts: ThemeFonts, value: string | null): string | null;
 /**

package/dist/docx/theme.js

@@ -9,13 +9,6 @@ var NO_THEME_FONTS = {
   major: NO_FONT_SCHEME,
   minor: NO_FONT_SCHEME
 };
-var THEME_ATTRS = {
-  ascii: ["asciiTheme"],
-  hAnsi: ["hAnsiTheme"],
-  eastAsia: ["eastAsiaTheme"],
-  // This is the slot whose capitalization varies from document to document
-  cs: ["cstheme", "csTheme"]
-};
 var THEME_SLOTS = {
   majorascii: { scheme: "major", script: "latin" },
   majorhansi: { scheme: "major", script: "latin" },
@@ -55,7 +48,6 @@ function readThemeFonts(theme) {
 }
 export {
   NO_THEME_FONTS,
-  THEME_ATTRS,
   readThemeFonts,
   themeFontName
 };

package/dist/editor/clipboard/images.js

@@ -1,6 +1,11 @@
 // src/editor/clipboard/images.ts
 import { MAX_IMAGE_BYTES } from "../../docx/media.js";
-import { isImageMime, toImageExtent, toImageSrc } from "../../ooxml/image.js";
+import {
+  isImageMime,
+  pxToEmu,
+  toImageExtent,
+  toImageSrc
+} from "../../ooxml/image.js";
 import { editorClassNames } from "../../styles/classNames.js";
 import {
   boundedImageSrc,
@@ -9,8 +14,7 @@ import {
   readImageSource
 } from "../imageFiles.js";
 var PASTED_IMAGE_ATTRIBUTE = "data-docx-pasted-image";
-function extentAttribute(element) {
-  if (!element.classList.contains(editorClassNames.image)) return null;
+function declaredExtent(element) {
   try {
     return toImageExtent(
       JSON.parse(element.getAttribute("data-extent") ?? "null")
@@ -19,6 +23,16 @@ function extentAttribute(element) {
     return null;
   }
 }
+function renderedExtent(element) {
+  const width = Number.parseInt(element.getAttribute("width") ?? "", 10);
+  const height = Number.parseInt(element.getAttribute("height") ?? "", 10);
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return null;
+  return toImageExtent({ cx: pxToEmu(width), cy: pxToEmu(height) });
+}
+function extentAttribute(element) {
+  if (!element.classList.contains(editorClassNames.image)) return null;
+  return declaredExtent(element) ?? renderedExtent(element);
+}
 function fetchableUrl(source) {
   try {
     const url = new URL(source);

package/dist/editor/clipboard/inlineFormatting.d.ts

@@ -15,6 +15,13 @@ export interface InlineContext {
     preserveWhitespace: boolean;
 }
 export type InlineElementReader = (target: PMNode[], element: HTMLElement, context: InlineContext) => boolean;
+/**
+ * The address a link may carry, whichever way it travels.
+ *
+ * A copy writes one out and a paste reads one in, and an address this rule turns down is one
+ * neither end should act on, so both ask here.
+ */
+export declare function safeHref(value: string | null): string | null;
 export declare function contextFor(parent: InlineContext, element: HTMLElement, readElementStyle?: boolean): InlineContext;
 export declare function withInlineStyle(context: InlineContext, style: InlineStyle): InlineContext;
 export declare function marksFor(context: InlineContext): Mark[];

package/dist/editor/clipboard/inlineFormatting.js

@@ -228,5 +228,6 @@ export {
   appendInline,
   contextFor,
   marksFor,
+  safeHref,
   withInlineStyle
 };

package/dist/editor/commands/breakCommands.js

@@ -1,10 +1,11 @@
 // src/editor/commands/breakCommands.ts
 import { docxSchema } from "../../schema/index.js";
-import { replacementShut } from "../../schema/locks.js";
-import { editsShut } from "../../schema/protectionState.js";
+import { editShut, selectionIntents } from "../../schema/guards.js";
 function insertBreak(brAttrs) {
   return (state, dispatch) => {
-    if (editsShut(state) || replacementShut(state.selection, state.doc)) {
+    if (selectionIntents(state.selection, "replace").some(
+      (intent) => editShut(state, intent)
+    )) {
       return false;
     }
     if (dispatch) {

package/dist/editor/commands/canRunCommand.d.ts

@@ -1,6 +1,6 @@
 /**
- * Dry-runs external commands and checks every produced transaction against document locks and the
- * editor's protection without dispatching them or triggering the locked-content plugin's side
+ * Dry-runs external commands and checks every produced transaction against every guard
+ * (`schema/guards`) without dispatching them or triggering the locked-content plugin's side
  * effects.
  */
 import type { Command, EditorState } from "prosemirror-state";

package/dist/editor/commands/canRunCommand.js

@@ -1,5 +1,5 @@
 // src/editor/commands/canRunCommand.ts
-import { transactionAllowed } from "../../schema/locks.js";
+import { transactionAllowed } from "../../schema/guards.js";
 function canRunCommand(command, state) {
   const built = [];
   if (!command(state, (tr) => built.push(tr))) return false;

package/dist/editor/commands/comments/editing.js

@@ -4,7 +4,7 @@ import {
 } from "prosemirror-state";
 import { commentParaId } from "../../../docx/comments.js";
 import { docxSchema } from "../../../schema/index.js";
-import { transactionAllowed } from "../../../schema/locks.js";
+import { transactionAllowed } from "../../../schema/guards.js";
 import {
   reservedCommentIds,
   reservedCommentParaIds
@@ -178,11 +178,9 @@ function setCommentResolved(id, resolved) {
     if (node.attrs.resolved === resolved) return null;
     return {
       ...node.attrs,
-      paraId: node.attrs.threadImported === true && node.attrs.extensionXml === null ? nextCommentParaId(state, `comment-${id}`) : node.attrs.paraId,
       resolved,
       extensionXml: null,
-      threadImported: false,
-      imported: node.attrs.commentXml !== null && node.attrs.extensionXml === null ? false : node.attrs.imported
+      threadImported: false
     };
   })(state, dispatch);
 }
@@ -192,7 +190,7 @@ function addCommentReply(id, reply) {
     const replyId = nextCommentId(state);
     const date = reply.date ?? (/* @__PURE__ */ new Date()).toISOString();
     return updateReference(id, (node) => {
-      const parentParaId = node.attrs.threadImported === true && node.attrs.extensionXml === null ? nextCommentParaId(state, `comment-${id}`) : stringAttr(node.attrs.paraId) ?? nextCommentParaId(state, `comment-${id}`);
+      const parentParaId = stringAttr(node.attrs.paraId) ?? nextCommentParaId(state, `comment-${id}`);
       const paraId = nextCommentParaId(state, `comment-${replyId}-${date}`, [
         parentParaId
       ]);
@@ -202,7 +200,6 @@ function addCommentReply(id, reply) {
         resolved: false,
         extensionXml: null,
         threadImported: false,
-        imported: node.attrs.commentXml !== null && node.attrs.extensionXml === null ? false : node.attrs.imported,
         replies: [
           ...repliesAttr(node.attrs.replies),
           {

package/dist/editor/commands/historyCommands.js

@@ -1,6 +1,7 @@
 // src/editor/commands/historyCommands.ts
 import { redo as historyRedo, undo as historyUndo } from "prosemirror-history";
-import { historyReplay, transactionAllowed } from "../../schema/locks.js";
+import { transactionAllowed } from "../../schema/guards.js";
+import { historyReplay } from "../../schema/locks.js";
 function replaying(command) {
   return (state, dispatch, view) => {
     const built = [];

package/dist/editor/commands/lockCommands.js

@@ -4,6 +4,8 @@ import {
 } from "prosemirror-state";
 import { namesNothing, newControlId } from "../../docx/sdt.js";
 import { withContentLock } from "../../docx/sdtProps.js";
+import { elementXml, openTagXml } from "../../ooxml/element.js";
+import { wName } from "../../ooxml/names.js";
 import { docxSchema } from "../../schema/index.js";
 import {
   carriesLock,
@@ -16,7 +18,14 @@ import {
 import { editsShut } from "../../schema/protectionState.js";
 function lockedControlMark(id) {
   return docxSchema.marks.sdt.create({
-    sdtPrefix: `<w:sdt><w:sdtPr><w:id w:val="${id}"/><w:lock w:val="sdtContentLocked"/></w:sdtPr>`,
+    sdtPrefix: openTagXml(wName("sdt"), null) + elementXml(
+      wName("sdtPr"),
+      [],
+      [
+        elementXml(wName("id"), [[wName("val"), `${id}`]]),
+        elementXml(wName("lock"), [[wName("val"), "sdtContentLocked"]])
+      ]
+    ),
     contentsLocked: true,
     deletionLocked: true
   });

package/dist/editor/commands/tabCommands.js

@@ -4,8 +4,7 @@ import {
 } from "prosemirror-state";
 import { toParagraphFormat } from "../../model/format.js";
 import { docxSchema } from "../../schema/index.js";
-import { replacementShut } from "../../schema/locks.js";
-import { editsShut } from "../../schema/protectionState.js";
+import { editShut, selectionIntents } from "../../schema/guards.js";
 function isOrdinaryParagraph(state) {
   const { $from } = state.selection;
   if ($from.parent.type !== docxSchema.nodes.paragraph || toParagraphFormat($from.parent.attrs.format)?.numbering) {
@@ -18,7 +17,9 @@ function isOrdinaryParagraph(state) {
 }
 var insertTab = (state, dispatch) => {
   const { selection } = state;
-  if (!(selection instanceof TextSelection) || !selection.$from.sameParent(selection.$to) || !isOrdinaryParagraph(state) || editsShut(state) || replacementShut(selection, state.doc)) {
+  if (!(selection instanceof TextSelection) || !selection.$from.sameParent(selection.$to) || !isOrdinaryParagraph(state) || selectionIntents(selection, "replace").some(
+    (intent) => editShut(state, intent)
+  )) {
     return false;
   }
   if (dispatch) {

package/dist/editor/createEditor.js

@@ -25,7 +25,6 @@ import { gridBorders, withDerivedGridBorders } from "../table/gridBorders.js";
 import { documentDefaultTabStopPt, documentStyleTable } from "./documentStyles.js";
 import { externalClipboard } from "./externalClipboard.js";
 import { imageFiles } from "./imageFiles.js";
-import { bookmarkProtection } from "./plugins/bookmarkProtection.js";
 import { columnResize } from "./plugins/columnResize.js";
 import { commentDecorations } from "./plugins/commentDecorations.js";
 import { commentReservations } from "./plugins/commentReservations.js";
@@ -35,7 +34,6 @@ import { docxKeymap, historyKeys } from "./plugins/keymap.js";
 import { linkPanel } from "./plugins/linkPanel.js";
 import { listInputRules } from "./plugins/listInputRules.js";
 import { lockedContent } from "./plugins/lockedContent.js";
-import { noteProtection } from "./plugins/noteProtection.js";
 import { numberingMarkers } from "./plugins/numberingDecorations.js";
 import { rowResize } from "./plugins/rowResize.js";
 import { styledParagraphs } from "./plugins/styledParagraphs.js";
@@ -71,15 +69,11 @@ function createEditorState(doc, {
       // first answer for a keypress, a paste, a drop or any other DOM event, so this is the
       // only place from which a consumer handler can win over the built-in one.
       ...consumerPlugins,
-      // Refuses every edit inside a locked content control, whoever asked for it. It is not
-      // optional: a document that locked a part of itself stays locked in every consumer.
-      // The same guard refuses what the protection below shuts.
+      // Refuses every edit no guard in `schema/guards` lets through, whoever asked for it. It is
+      // not optional: a document that locked a part of itself stays locked in every consumer, and
+      // the preserved bookmark markers and note references stay where the file put them.
       lockedContent(),
       documentProtection({ protection, author, editableComments }),
-      // Bookmark ranges are preserved rather than edited, so neither half may disappear.
-      bookmarkProtection(),
-      // Note bodies are display-only, so their imported main-story references stay paired.
-      noteProtection(),
       // An orphan Comments-part entry still owns its id and must not be replaced by a new comment.
       commentReservations(reservedCommentIds, reservedCommentParaIds),
       history(),

package/dist/editor/externalClipboard.js

@@ -1,16 +1,23 @@
 // src/editor/externalClipboard.ts
-import { Fragment, Slice } from "prosemirror-model";
+import {
+  DOMSerializer,
+  Fragment,
+  Slice
+} from "prosemirror-model";
 import { Plugin } from "prosemirror-state";
 import { effectiveParagraphFormat, styleIdOf } from "../docx/formatting.js";
 import { withParagraphStyle } from "../docx/paraProps.js";
 import { MAX_ILVL, nextNumId } from "../numbering/listTemplate.js";
-import { docxSchema } from "../schema/index.js";
+import { elementXml } from "../ooxml/element.js";
+import { wName } from "../ooxml/names.js";
+import { docxSchema, isPageBreak } from "../schema/index.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { PASTED_IMAGE_ATTRIBUTE } from "./clipboard/images.js";
 import {
   appendInline,
   contextFor,
   marksFor,
+  safeHref,
   withInlineStyle
 } from "./clipboard/inlineFormatting.js";
 import { listRefOf } from "./commands/listCommands.js";
@@ -59,11 +66,149 @@ var HEADING_FALLBACKS = {
   5: { bold: true, fontSizePt: 10 },
   6: { bold: true, fontSizePt: 8 }
 };
+var PUBLIC_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "alt",
+  "aria-label",
+  "class",
+  "colspan",
+  "height",
+  "href",
+  "lang",
+  "rowspan",
+  "src",
+  "style",
+  "width"
+]);
+var COPIED_STYLE_ATTRIBUTE = "data-style";
+function isAttributes(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Node);
+}
+function publicAttributes(attrs) {
+  return Object.fromEntries(
+    Object.entries(attrs).filter(([name]) => PUBLIC_ATTRIBUTES.has(name))
+  );
+}
+function isSpecArray(value) {
+  return Array.isArray(value) && typeof value[0] === "string";
+}
+function stripPrivateAttributes(spec) {
+  if (!isSpecArray(spec)) return spec;
+  const [tag, ...rest] = spec;
+  const attrs = isAttributes(rest[0]) ? publicAttributes(rest[0]) : null;
+  const children = (attrs === null ? rest : rest.slice(1)).map(
+    (child) => isSpecArray(child) ? stripPrivateAttributes(child) : child
+  );
+  return attrs === null ? [tag, ...children] : [tag, attrs, ...children];
+}
+function withDomAttribute(spec, name, value) {
+  if (!isSpecArray(spec)) return spec;
+  const [tag, ...rest] = spec;
+  return isAttributes(rest[0]) ? [tag, { ...rest[0], [name]: value }, ...rest.slice(1)] : [tag, { [name]: value }, ...rest];
+}
+function asTag(spec, tag) {
+  return isSpecArray(spec) ? [tag, ...spec.slice(1)] : spec;
+}
+function copiedMarkSpec(mark, spec) {
+  const stripped = stripPrivateAttributes(spec);
+  if (mark.type !== docxSchema.marks.link) return stripped;
+  const href = safeHref(
+    typeof mark.attrs.href === "string" ? mark.attrs.href : null
+  );
+  return href === null ? stripped : asTag(withDomAttribute(stripped, "href", href), "a");
+}
+function copiedNodeSpec(node, spec) {
+  const stripped = stripPrivateAttributes(spec);
+  if (node.type !== docxSchema.nodes.paragraph) return stripped;
+  const styleId = styleIdOf(node.attrs.pPr);
+  return styleId === null ? stripped : withDomAttribute(stripped, COPIED_STYLE_ATTRIBUTE, styleId);
+}
+function clipboardSerializer() {
+  const drawn = DOMSerializer.fromSchema(docxSchema);
+  const nodes = Object.fromEntries(
+    Object.entries(drawn.nodes).map(([name, toDOM]) => [
+      name,
+      (node) => copiedNodeSpec(node, toDOM(node))
+    ])
+  );
+  const marks = Object.fromEntries(
+    Object.entries(drawn.marks).map(([name, toDOM]) => [
+      name,
+      (mark, inline) => copiedMarkSpec(mark, toDOM(mark, inline))
+    ])
+  );
+  return new DOMSerializer(nodes, marks);
+}
+var UNREADABLE_BLOCKS = /* @__PURE__ */ new Set([
+  "bookmarkBlock",
+  "docxRaw",
+  "rawBlock"
+]);
+function stringAttr(value) {
+  return typeof value === "string" ? value : "";
+}
+function inlineText(node) {
+  if (node.isText) return node.text ?? "";
+  if (node.type === docxSchema.nodes.hardBreak) {
+    return isPageBreak(node.attrs.brAttrs) ? "\f" : "\n";
+  }
+  if (node.type === docxSchema.nodes.image) return stringAttr(node.attrs.alt);
+  if (node.type === docxSchema.nodes.noteReference) {
+    return node.attrs.customMarkFollows === true ? "" : stringAttr(node.attrs.label);
+  }
+  return "";
+}
+function rowsText(table) {
+  const rows = [];
+  table.forEach((row) => {
+    const cells = [];
+    row.forEach((cell) => {
+      cells.push(fragmentText(cell.content));
+    });
+    rows.push(cells.join("	"));
+  });
+  return rows.join("\n");
+}
+function blockText(node) {
+  if (node.type === docxSchema.nodes.table) return rowsText(node);
+  if (UNREADABLE_BLOCKS.has(node.type.name)) return "";
+  return fragmentText(node.content);
+}
+function fragmentText(fragment) {
+  const pieces = [];
+  fragment.forEach((child) => {
+    pieces.push(child.isInline ? inlineText(child) : blockText(child));
+  });
+  return pieces.join(fragment.firstChild?.isInline === true ? "" : "\n");
+}
+function bareWrappers(content, openStart, openEnd) {
+  const wrapper = content.firstChild;
+  if (openStart <= 1 || openEnd <= 1 || content.childCount !== 1)
+    return content;
+  if (wrapper === null || wrapper.childCount !== 1) return content;
+  return Fragment.from(
+    wrapper.type.create(
+      null,
+      bareWrappers(wrapper.content, openStart - 1, openEnd - 1),
+      wrapper.marks
+    )
+  );
+}
+function copiedSlice(slice) {
+  return new Slice(
+    bareWrappers(slice.content, slice.openStart, slice.openEnd),
+    slice.openStart,
+    slice.openEnd
+  );
+}
+function clipboardText(slice) {
+  return fragmentText(slice.content);
+}
 function normalizedStyleName(value) {
   return value.toLowerCase().replace(/[\s_-]+/g, "");
 }
 function copiedStyleId(element) {
-  return element.classList.contains(editorClassNames.paragraph) ? styleIdOf(element.getAttribute("data-ppr")) : null;
+  if (!element.classList.contains(editorClassNames.paragraph)) return null;
+  return element.getAttribute(COPIED_STYLE_ATTRIBUTE) ?? styleIdOf(element.getAttribute("data-ppr"));
 }
 function headingLevel(element, sourceStyleId) {
   const direct = HEADING_LEVELS[element.tagName];
@@ -116,7 +261,20 @@ function blockContext(state, parent, element, preserveParagraphStyle) {
 function listParagraphAttrs(state, list) {
   if (!list || list.numId === null) return null;
   const ilvl = Math.min(MAX_ILVL, list.level);
-  const pPr = `<w:pPr><w:numPr><w:ilvl w:val="${ilvl}"/><w:numId w:val="${list.numId}"/></w:numPr></w:pPr>`;
+  const pPr = elementXml(
+    wName("pPr"),
+    [],
+    [
+      elementXml(
+        wName("numPr"),
+        [],
+        [
+          elementXml(wName("ilvl"), [[wName("val"), `${ilvl}`]]),
+          elementXml(wName("numId"), [[wName("val"), `${list.numId}`]])
+        ]
+      )
+    ]
+  );
   return {
     pPr,
     format: effectiveParagraphFormat(pPr, documentParagraphFormatting(state))
@@ -294,8 +452,12 @@ function insertClipboardData(view, data) {
   insertPlainText(view, data.text ?? "");
 }
 function externalClipboard() {
+  const serializer = clipboardSerializer();
   return new Plugin({
     props: {
+      clipboardSerializer: serializer,
+      clipboardTextSerializer: clipboardText,
+      transformCopied: copiedSlice,
       handlePaste(view, event) {
         insertClipboardData(view, {
           html: event.clipboardData?.getData("text/html"),

package/dist/editor/insertImage.js

@@ -2,10 +2,11 @@
 import { insertPoint } from "prosemirror-transform";
 import { toImageExtent, toImageSrc } from "../ooxml/image.js";
 import { docxSchema } from "../schema/index.js";
-import { replacementShut } from "../schema/locks.js";
-import { editsShut } from "../schema/protectionState.js";
+import { editShut, selectionIntents } from "../schema/guards.js";
 function insertPosition(state) {
-  if (editsShut(state) || replacementShut(state.selection, state.doc)) {
+  if (selectionIntents(state.selection, "replace").some(
+    (intent) => editShut(state, intent)
+  )) {
     return null;
   }
   return insertPoint(state.doc, state.selection.from, docxSchema.nodes.image);

package/dist/editor/plugins/documentProtection.d.ts

@@ -1,7 +1,7 @@
 /**
- * Holds the protection the editor runs under (`schema/protection`) in the state, where the guard
- * and the commands read it. The guard itself stands in `lockedContent`, which enforces
- * `transactionAllowed` for locks and protection in one pass.
+ * Holds the protection the editor runs under (`schema/protection`) in the state, where the guards
+ * and the commands read it. The runtime filter stands in `lockedContent`, which enforces every
+ * guard `schema/guards` registers, the protection among them, in one pass.
  */
 import { Plugin, type Transaction } from "prosemirror-state";
 import type { EditableComments, EditingProtection, ProtectionState } from "../../schema/protection";

package/dist/editor/plugins/lockedContent.d.ts

@@ -1,8 +1,8 @@
 /**
- * Rejects transactions disallowed by the guard in `schema/locks`, which answers for the locks the
- * document carries and for the protection the editor runs under (`schema/protection`) alike. A
- * rejected IME edit also ends the browser composition on the next frame so ProseMirror cannot
- * remain stuck in composing state.
+ * Rejects transactions no guard `schema/guards` registers would let through, the locks the document
+ * carries and the protection the editor runs under (`schema/protection`) among them. A rejected IME
+ * edit also ends the browser composition on the next frame so ProseMirror cannot remain stuck in
+ * composing state.
  */
 import { Plugin } from "prosemirror-state";
 export declare function lockedContent(): Plugin;

package/dist/editor/plugins/lockedContent.js

@@ -1,6 +1,6 @@
 // src/editor/plugins/lockedContent.ts
 import { Plugin } from "prosemirror-state";
-import { transactionAllowed } from "../../schema/locks.js";
+import { transactionAllowed } from "../../schema/guards.js";
 function endComposition(view) {
   if (!view.composing) return;
   const marks = view.state.storedMarks ?? view.state.selection.$from.marks();

package/dist/numbering/listTemplate.js

@@ -1,4 +1,6 @@
 // src/numbering/listTemplate.ts
+import { elementXml } from "../ooxml/element.js";
+import { wName } from "../ooxml/names.js";
 var LEVEL_COUNT = 9;
 var MAX_ILVL = LEVEL_COUNT - 1;
 var NUMBER_CYCLE = [
@@ -51,25 +53,45 @@ function nextNumId(used, kind) {
   return listKindOf(from) === kind ? from : from + 1;
 }
 function indXml(indent) {
-  const attrs = [
-    ["w:left", indent?.startTwips],
-    ["w:right", indent?.endTwips],
-    ["w:hanging", indent?.hangingTwips],
-    ["w:firstLine", indent?.firstLineTwips]
-  ].filter((entry) => typeof entry[1] === "number").map(([name, value]) => `${name}="${value}"`).join(" ");
-  return attrs === "" ? "" : `<w:pPr><w:ind ${attrs}/></w:pPr>`;
+  const slots = [
+    ["left", indent?.startTwips ?? null],
+    ["right", indent?.endTwips ?? null],
+    ["hanging", indent?.hangingTwips ?? null],
+    ["firstLine", indent?.firstLineTwips ?? null]
+  ];
+  const attrs = slots.filter((slot) => slot[1] !== null).map(([name, twips]) => [wName(name), `${twips}`]);
+  if (attrs.length === 0) return "";
+  return elementXml(wName("pPr"), [], [elementXml(wName("ind"), attrs)]);
 }
 function levelXml(ilvl, level) {
   const ind = indXml(level.indent);
-  return `<w:lvl w:ilvl="${ilvl}"><w:start w:val="${level.start}"/><w:numFmt w:val="${level.format}"/><w:lvlText w:val="${level.text}"/><w:lvlJc w:val="left"/>${ind}</w:lvl>`;
+  return elementXml(
+    wName("lvl"),
+    [[wName("ilvl"), `${ilvl}`]],
+    [
+      elementXml(wName("start"), [[wName("val"), `${level.start}`]]),
+      elementXml(wName("numFmt"), [[wName("val"), level.format]]),
+      elementXml(wName("lvlText"), [[wName("val"), level.text]]),
+      elementXml(wName("lvlJc"), [[wName("val"), "left"]]),
+      ind
+    ]
+  );
 }
 function abstractNumXml(abstractNumId, kind) {
   const levels = TEMPLATES[kind].levels;
   const body = Array.from(levels.entries()).map(([ilvl, level]) => levelXml(ilvl, level)).join("");
-  return `<w:abstractNum w:abstractNumId="${abstractNumId}">${body}</w:abstractNum>`;
+  return elementXml(
+    wName("abstractNum"),
+    [[wName("abstractNumId"), `${abstractNumId}`]],
+    [body]
+  );
 }
 function numXml(numId, abstractNumId) {
-  return `<w:num w:numId="${numId}"><w:abstractNumId w:val="${abstractNumId}"/></w:num>`;
+  return elementXml(
+    wName("num"),
+    [[wName("numId"), `${numId}`]],
+    [elementXml(wName("abstractNumId"), [[wName("val"), `${abstractNumId}`]])]
+  );
 }
 export {
   LEVEL_COUNT,

package/dist/ooxml/element.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Writing one element out as text, and merging the attributes of one.
+ *
+ * Everything here works on strings, because that is what the writers hold: a fragment the file
+ * arrived with is carried around as its original text, and an edit swaps out one element or one
+ * attribute of it. Rebuilding a parsed element instead would rewrite markup nobody touched.
+ *
+ * An attribute is matched by its local part rather than by its written name, so a document that
+ * bound the WordprocessingML namespace to a prefix of its own is edited in the spelling it chose.
+ */
+import { type KnownPrefix } from "./names";
+/** One attribute as it is written: the whole name, prefix included, and the value before escaping */
+export type XmlAttr = readonly [name: string, value: string];
+/** `a="b" c="d"`. Empty for no attributes, so an opening tag needs no separator of its own */
+export declare function attrsText(attrs: readonly XmlAttr[]): string;
+/**
+ * `<name a="b"/>`, or `<name a="b">children</name>` for an element that holds something.
+ *
+ * Attribute values are escaped here; children are spliced in as they are, being markup already, so
+ * a caller writing text as a child escapes it itself. An element handed no child at all closes on
+ * its own, which means a caller that wants an empty pair of tags passes the empty text as a child.
+ */
+export declare function elementXml(name: string, attrs: readonly XmlAttr[], children?: readonly string[]): string;
+/**
+ * The namespace declaration a fragment carries when the part it is spliced into does not declare
+ * the prefix itself.
+ */
+export declare function xmlnsAttr(prefix: KnownPrefix): XmlAttr;
+/**
+ * The attributes with the one of this local name written as `value`, or removed when it is null.
+ *
+ * One already there keeps the slot it sat in and the name it was written under, so an edited
+ * element reads as the original did. One that is not there yet goes on the end under the `w`
+ * prefix.
+ */
+export declare function withAttr(attrs: readonly XmlAttr[], name: string, value: string | null): XmlAttr[];
+export declare function withoutAttrs(attrs: readonly XmlAttr[], localNames: readonly string[]): XmlAttr[];
+export declare function attrValue(attrs: readonly XmlAttr[], localName: string): string | null;
+/**
+ * An opening tag whose attributes are the ones the original wrote.
+ *
+ * The text is spliced in exactly as it arrived rather than parsed and written again, so the
+ * spelling, the order, and the escaping a producer chose all survive being edited.
+ */
+export declare function openTagXml(name: string, rawAttrs: string | null): string;
+/** The same for an element that closes on its own */
+export declare function emptyTagXml(name: string, rawAttrs: string | null): string;
+/**
+ * The attributes of a parsed element as pairs, for a caller that still holds the element rather
+ * than its text.
+ */
+export declare function attrPairs(el: Element | null): XmlAttr[];