@portone/docx-editor 0.4.0 → 0.5.1

package/dist/editor/plugins/tableContextMenu.js

@@ -1,29 +1,14 @@
 // src/editor/plugins/tableContextMenu.ts
 import {
-  Plugin,
-  PluginKey,
   TextSelection
 } from "prosemirror-state";
 import { editsShut } from "../../schema/protectionState.js";
-var CLOSE = "close";
-var menuKey = new PluginKey("docxEditorTableMenu");
-function isRecord(value) {
-  return typeof value === "object" && value !== null;
-}
-function toAnchor(value) {
-  if (!isRecord(value)) return null;
+import { panelPlugin } from "./panelState.js";
+function isTableMenuAnchor(value) {
+  if (typeof value !== "object" || value === null) return false;
   const { clientX, clientY } = value;
-  if (typeof clientX !== "number" || typeof clientY !== "number") return null;
-  return { clientX, clientY };
-}
-function tableMenuAnchor(state) {
-  return menuKey.getState(state) ?? null;
+  return typeof clientX === "number" && typeof clientY === "number";
 }
-var closeTableMenu = (state, dispatch) => {
-  if (tableMenuAnchor(state) === null) return false;
-  if (dispatch) dispatch(state.tr.setMeta(menuKey, CLOSE));
-  return true;
-};
 function cellStart($pos) {
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
     if ($pos.node(depth).type.spec.tableRole === "cell") {
@@ -46,41 +31,39 @@ function selectionCovers(state, cellPos) {
 }
 function openMenu(view, cellPos, anchor) {
   const state = view.state;
-  const tr = state.tr.setMeta(menuKey, anchor);
+  const tr = menu.opening(state.tr, anchor);
   if (!selectionCovers(state, cellPos)) {
     tr.setSelection(TextSelection.near(tr.doc.resolve(cellPos + 1)));
   }
   view.dispatch(tr);
 }
-function tableContextMenu() {
-  return new Plugin({
-    key: menuKey,
-    state: {
-      init: () => null,
-      apply: (tr, current) => {
-        const meta = tr.getMeta(menuKey);
-        if (meta === CLOSE) return null;
-        const anchor = toAnchor(meta);
-        if (anchor) return anchor;
-        return tr.docChanged ? null : current;
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        contextmenu(view, event) {
-          if (editsShut(view.state)) return false;
-          const cellPos = cellAtEvent(view, event.target);
-          if (cellPos === null) return false;
-          event.preventDefault();
-          openMenu(view, cellPos, {
-            clientX: event.clientX,
-            clientY: event.clientY
-          });
-          return true;
-        }
+var menu = panelPlugin({
+  name: "docxEditorTableMenu",
+  isAnchor: isTableMenuAnchor,
+  // Once the document changes, the cell the menu pointed at may no longer be there
+  onDocChange: "close",
+  props: {
+    handleDOMEvents: {
+      contextmenu(view, event) {
+        if (editsShut(view.state)) return false;
+        const cellPos = cellAtEvent(view, event.target);
+        if (cellPos === null) return false;
+        event.preventDefault();
+        openMenu(view, cellPos, {
+          clientX: event.clientX,
+          clientY: event.clientY
+        });
+        return true;
       }
     }
-  });
+  }
+});
+function tableMenuAnchor(state) {
+  return menu.anchor(state);
+}
+var closeTableMenu = menu.close;
+function tableContextMenu() {
+  return menu.plugin;
 }
 export {
   closeTableMenu,

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

@@ -2,7 +2,7 @@
  * Replaces the native text context menu and moves the selection to the clicked position. Unselected
  * table cells are left to the table context-menu plugin.
  */
-import { type Command, type EditorState, Plugin } from "prosemirror-state";
+import { type Command, type EditorState, type Plugin } from "prosemirror-state";
 /** Where the menu should stand (viewport coordinates) */
 export interface TextMenuAnchor {
     clientX: number;

package/dist/editor/plugins/textContextMenu.js

@@ -1,30 +1,15 @@
 // src/editor/plugins/textContextMenu.ts
 import {
-  Plugin,
-  PluginKey,
   TextSelection
 } from "prosemirror-state";
 import { CellSelection } from "prosemirror-tables";
 import { editingProtection, editsShut } from "../../schema/protectionState.js";
-var CLOSE = "close";
-var menuKey = new PluginKey("docxEditorTextMenu");
-function isRecord(value) {
-  return typeof value === "object" && value !== null;
-}
-function toAnchor(value) {
-  if (!isRecord(value)) return null;
+import { panelPlugin } from "./panelState.js";
+function isTextMenuAnchor(value) {
+  if (typeof value !== "object" || value === null) return false;
   const { clientX, clientY } = value;
-  if (typeof clientX !== "number" || typeof clientY !== "number") return null;
-  return { clientX, clientY };
-}
-function textMenuAnchor(state) {
-  return menuKey.getState(state) ?? null;
+  return typeof clientX === "number" && typeof clientY === "number";
 }
-var closeTextMenu = (state, dispatch) => {
-  if (textMenuAnchor(state) === null) return false;
-  if (dispatch) dispatch(state.tr.setMeta(menuKey, CLOSE));
-  return true;
-};
 function isInEditor(view, target) {
   return target instanceof Node && view.dom.contains(target);
 }
@@ -50,43 +35,41 @@ function forTableMenu(view, target, spot) {
   return aboutCells && isInTableCell(view, target);
 }
 function openMenu(state, event, spot) {
-  const tr = state.tr.setMeta(menuKey, {
+  const tr = menu.opening(state.tr, {
     clientX: event.clientX,
     clientY: event.clientY
   });
   if (isInSelection(state, spot)) return tr;
   return tr.setSelection(TextSelection.near(tr.doc.resolve(spot)));
 }
-function textContextMenu() {
-  return new Plugin({
-    key: menuKey,
-    state: {
-      init: () => null,
-      apply: (tr, current) => {
-        const meta = tr.getMeta(menuKey);
-        if (meta === CLOSE) return null;
-        const anchor = toAnchor(meta);
-        if (anchor) return anchor;
-        return tr.docChanged ? null : current;
-      }
-    },
-    props: {
-      handleDOMEvents: {
-        contextmenu(view, event) {
-          if (editingProtection(view.state) === "readOnly") return false;
-          if (!isInEditor(view, event.target)) return false;
-          const spot = clickedSpot(view, event);
-          if (editsShut(view.state) && !isInSelection(view.state, spot)) {
-            return false;
-          }
-          if (forTableMenu(view, event.target, spot)) return false;
-          event.preventDefault();
-          view.dispatch(openMenu(view.state, event, spot));
-          return true;
+var menu = panelPlugin({
+  name: "docxEditorTextMenu",
+  isAnchor: isTextMenuAnchor,
+  // Once the document changes, what the menu was aimed at may no longer be there
+  onDocChange: "close",
+  props: {
+    handleDOMEvents: {
+      contextmenu(view, event) {
+        if (editingProtection(view.state) === "readOnly") return false;
+        if (!isInEditor(view, event.target)) return false;
+        const spot = clickedSpot(view, event);
+        if (editsShut(view.state) && !isInSelection(view.state, spot)) {
+          return false;
         }
+        if (forTableMenu(view, event.target, spot)) return false;
+        event.preventDefault();
+        view.dispatch(openMenu(view.state, event, spot));
+        return true;
       }
     }
-  });
+  }
+});
+function textMenuAnchor(state) {
+  return menu.anchor(state);
+}
+var closeTextMenu = menu.close;
+function textContextMenu() {
+  return menu.plugin;
 }
 export {
   closeTextMenu,

package/dist/ooxml/fragment.d.ts

@@ -16,6 +16,7 @@
  * What a raw XML string has to look like to be let into the attr that carries it.
  *
  * `element` is a whole element: a properties fragment, a drawing, an annotation reference.
+ * `elements` is a run of them standing side by side, as a table carries between its rows.
  * `attributes` is what stood inside an opening tag, as `attrString` writes it.
  * `openTag` is an opening tag with everything it wrapped cut away, which the writer puts back by
  * appending the closing text `closedBy` names. `head` is what may still stand between the two:
@@ -24,6 +25,8 @@
 export type RawXmlShape = {
     kind: "element";
     names: readonly string[] | "any";
+} | {
+    kind: "elements";
 } | {
     kind: "attributes";
 } | {
@@ -42,6 +45,14 @@ export declare function ELEMENT(...names: string[]): RawXmlShape;
  * turn a document the editor reads today into a demoted one.
  */
 export declare const ANY_ELEMENT: RawXmlShape;
+/**
+ * A run of one or more elements standing side by side, of any name, in any namespace.
+ *
+ * A table carries the markers that stood between its rows, and a row those between its cells
+ * (`docx/importTable`), and there may be several of them in a row: the end of one bookmark and the
+ * start of the next stand together with nothing between them.
+ */
+export declare const ANY_ELEMENTS: RawXmlShape;
 /** The attributes of an opening tag, with neither the tag nor anything it held */
 export declare const ATTRIBUTES: RawXmlShape;
 /**

package/dist/ooxml/fragment.js

@@ -10,17 +10,22 @@ function ELEMENT(...names) {
   return { kind: "element", names };
 }
 var ANY_ELEMENT = { kind: "element", names: "any" };
+var ANY_ELEMENTS = { kind: "elements" };
 var ATTRIBUTES = { kind: "attributes" };
-function loneElement(xml) {
+function wrappedElements(xml) {
   let root;
   try {
     root = parseXml(`<x ${namespaceDecls(xml)}>${xml}</x>`).documentElement;
   } catch {
     return null;
   }
-  if (root.childNodes.length !== 1) return null;
-  const el = elementChildren(root)[0];
-  return el === void 0 || rebindsReservedPrefix(el) ? null : el;
+  const elements = elementChildren(root);
+  if (root.childNodes.length !== elements.length) return null;
+  return elements.some(rebindsReservedPrefix) ? null : elements;
+}
+function loneElement(xml) {
+  const elements = wrappedElements(xml);
+  return elements?.length === 1 ? elements[0] : null;
 }
 function isNamed(el, names) {
   if (!names.includes(el.localName)) return false;
@@ -54,6 +59,10 @@ function holdsShape(shape, value) {
       if (el === null) return false;
       return shape.names === "any" || isNamed(el, shape.names);
     }
+    case "elements": {
+      const elements = wrappedElements(value);
+      return elements !== null && elements.length > 0;
+    }
     case "attributes": {
       const el = loneElement(`<y ${value}></y>`);
       return el !== null && el.childNodes.length === 0;
@@ -70,6 +79,7 @@ function acceptRawXml(shape, value) {
 }
 export {
   ANY_ELEMENT,
+  ANY_ELEMENTS,
   ATTRIBUTES,
   ELEMENT,
   acceptRawXml

package/dist/ooxml/image.d.ts

@@ -67,11 +67,10 @@ export interface DrawingPicture {
  */
 export declare function readDrawingPicture(drawing: Element): DrawingPicture | null;
 /**
- * The same drawing XML with both extents set to this size.
+ * The same drawing XML with its inline extent and its picture transform's extent set to this size.
  *
- * Only those two elements are touched; every other byte of the original stays where it
- * was. Handed the size it was imported with, this gives back the original string
- * unchanged, so nothing has to keep track of whether a resize happened.
+ * Only those two elements' size attributes are touched; every other byte stays where it was.
+ * Values already equal to the requested size keep their original spelling as well.
  */
 export declare function withExtent(xml: string, extent: ImageExtent): string;
 /** A picture that was inserted during editing and has no original XML to go back to */

package/dist/ooxml/image.js

@@ -1,6 +1,7 @@
 // src/ooxml/image.ts
 import { NAMESPACES } from "./names.js";
-import { childByLocalName, escapeXml, R_NS } from "./xml.js";
+import { parseAttrs, readTag } from "./tagScan.js";
+import { childByLocalName, escapeXml, localPart, R_NS } from "./xml.js";
 var EMU_PER_PX = 9525;
 function emuToPx(emu) {
   return emu / EMU_PER_PX;
@@ -76,11 +77,55 @@ function readDrawingPicture(drawing) {
   const descr = childOf(inline, "docPr")?.getAttribute("descr") ?? null;
   return { relId, extent, alt: descr === "" ? null : descr };
 }
-var EXTENT_TAG = /<([\w.-]+:)?extent\b[^>]*\/>/g;
-var EXT_TAG = /<([\w.-]+:)?ext\b[^>]*\/>/g;
+function isPictureSize(path) {
+  const names = path.join("/");
+  return names === "drawing/inline/extent" || names === "drawing/inline/graphic/graphicData/pic/spPr/xfrm/ext";
+}
+function resizeTag(open, extent) {
+  const tag = readTag(open, 0);
+  if (!tag) return open;
+  const attrs = new Map(
+    parseAttrs(
+      open.slice(tag.nameEnd, tag.end - (tag.kind === "empty" ? 2 : 1))
+    ) ?? []
+  );
+  return open.replace(
+    /(\s+)([^\s=/>]+)(\s*=\s*)(["'])([\s\S]*?)\4/g,
+    (whole, gap, name, equals, quote) => {
+      if (name !== "cx" && name !== "cy") return whole;
+      const size = extent[name];
+      if (Number(attrs.get(name)) === size) return whole;
+      return `${gap}${name}${equals}${quote}${size}${quote}`;
+    }
+  );
+}
 function withExtent(xml, extent) {
-  const size = `cx="${extent.cx}" cy="${extent.cy}"`;
-  return xml.replace(EXTENT_TAG, (_match, prefix) => `<${prefix ?? ""}extent ${size}/>`).replace(EXT_TAG, (_match, prefix) => `<${prefix ?? ""}ext ${size}/>`);
+  const path = [];
+  const parts = [];
+  let at = 0;
+  let kept = 0;
+  for (; ; ) {
+    const lt = xml.indexOf("<", at);
+    if (lt === -1) break;
+    const tag = readTag(xml, lt);
+    if (!tag) return xml;
+    if (tag.kind === "close") {
+      path.pop();
+    } else if (tag.kind !== "other") {
+      path.push(localPart(tag.name));
+      if (isPictureSize(path)) {
+        parts.push(
+          xml.slice(kept, lt),
+          resizeTag(xml.slice(lt, tag.end), extent)
+        );
+        kept = tag.end;
+      }
+      if (tag.kind === "empty") path.pop();
+    }
+    at = tag.end;
+  }
+  parts.push(xml.slice(kept));
+  return parts.join("");
 }
 function imageDrawingXml(image) {
   const size = `cx="${image.extent.cx}" cy="${image.extent.cy}"`;

package/dist/ooxml/names.d.ts

@@ -13,6 +13,12 @@ export declare const W_NS = "http://schemas.openxmlformats.org/wordprocessingml/
  * every relationship type name is built on
  */
 export declare const R_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+/**
+ * The math namespace. Nothing here is written under a prefix of ours - a `m:oMath` travels as the
+ * XML it arrived as - so it names the namespace alone and stays out of `NAMESPACES`, which is the
+ * list of prefixes the writer spells out.
+ */
+export declare const M_NS = "http://schemas.openxmlformats.org/officeDocument/2006/math";
 /** The prefix every WordprocessingML element and attribute this package writes carries */
 export declare const W_PREFIX = "w";
 export declare const NAMESPACES: {

package/dist/ooxml/names.js

@@ -1,6 +1,7 @@
 // src/ooxml/names.ts
 var W_NS = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
 var R_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+var M_NS = "http://schemas.openxmlformats.org/officeDocument/2006/math";
 var W_PREFIX = "w";
 var NAMESPACES = {
   w: W_NS,
@@ -25,6 +26,7 @@ function xmlnsDecl(prefix) {
   return `xmlns:${prefix}="${NAMESPACES[prefix]}"`;
 }
 export {
+  M_NS,
   NAMESPACES,
   R_NS,
   W_NS,

package/dist/ooxml/props.d.ts

@@ -52,6 +52,14 @@ export declare function renderProps(props: Props): string;
  * carries children in a different order under a different parent (`pPr/rPr`).
  */
 export declare function setChild(props: Props, name: string, xml: string | null, parent?: string): Props;
+/**
+ * Replaces every child of one name with this list of them, in the order given.
+ *
+ * `CT_SectPr` lets a section name a header and a footer once per variant, so a name standing more
+ * than once is a list rather than a single child, and writing one of them is writing the list. An
+ * empty list takes them all away.
+ */
+export declare function setChildren(props: Props, name: string, xmls: readonly string[], parent?: string): Props;
 export declare function propsChild(children: readonly PropsChild[], name: string): PropsChild | undefined;
 /**
  * The opening tag's attributes as pairs, and null when their shape cannot be made out.
@@ -110,3 +118,5 @@ export declare function editChild(props: Props, path: readonly [string, ...strin
  * null if its shape cannot be made out, in which case the caller leaves the display values alone.
  */
 export declare function parsePropsXml(xml: string): Element | null;
+/** The style name the paragraph formatting XML points at. null if it points at none */
+export declare function styleIdOf(pPr: unknown): string | null;

package/dist/ooxml/props.js

@@ -3,6 +3,7 @@ import { childOrderOf } from "./childOrder.js";
 import { attrsText, emptyTagXml } from "./element.js";
 import { wName } from "./names.js";
 import { parseAttrs, readTag } from "./tagScan.js";
+import { childValue } from "./units.js";
 import { elementChildren, localPart, namespaceDecls, parseXml } from "./xml.js";
 function rawAttrs(source, tag) {
   const closeLength = tag.kind === "empty" ? 2 : 1;
@@ -115,28 +116,37 @@ function tailWith(props, carried) {
   return tail === "" ? {} : { tail };
 }
 function setChild(props, name, xml, parent) {
+  return setChildren(props, name, xml === null ? [] : [xml], parent);
+}
+function setChildren(props, name, xmls, parent) {
   const order = childOrderOf(localPart(props.tag), parent);
   const at = props.children.findIndex((entry) => entry.name === name);
-  if (at !== -1 && xml !== null) {
+  if (at !== -1 && xmls.length > 0) {
     const rest = dropChildren(props.children.slice(at + 1), name);
     return {
       ...props,
       children: [
         ...props.children.slice(0, at),
-        { ...props.children[at], xml },
+        ...xmls.map(
+          (xml, index2) => index2 === 0 ? { ...props.children[at], xml } : { name, xml }
+        ),
         ...rest.kept
       ],
       ...tailWith(props, rest.carried)
     };
   }
   const { kept, carried } = dropChildren(props.children, name);
-  if (xml === null) {
+  if (xmls.length === 0) {
     return { ...props, children: kept, ...tailWith(props, carried) };
   }
   const index = insertIndex(kept, name, order, props.tag);
   return {
     ...props,
-    children: [...kept.slice(0, index), { name, xml }, ...kept.slice(index)],
+    children: [
+      ...kept.slice(0, index),
+      ...xmls.map((xml) => ({ name, xml })),
+      ...kept.slice(index)
+    ],
     ...tailWith(props, carried)
   };
 }
@@ -198,6 +208,18 @@ function parsePropsXml(xml) {
     return null;
   }
 }
+var styleIdsByPPr = /* @__PURE__ */ new Map();
+var STYLE_ID_CACHE_LIMIT = 2e3;
+function styleIdOf(pPr) {
+  if (typeof pPr !== "string" || !pPr.includes("pStyle")) return null;
+  const known = styleIdsByPPr.get(pPr);
+  if (known !== void 0) return known;
+  const el = parsePropsXml(pPr);
+  const id = el ? childValue(el, "pStyle") : null;
+  if (styleIdsByPPr.size >= STYLE_ID_CACHE_LIMIT) styleIdsByPPr.clear();
+  styleIdsByPPr.set(pPr, id);
+  return id;
+}
 export {
   attrsOf,
   childElement,
@@ -210,5 +232,7 @@ export {
   renderElement,
   renderProps,
   setChild,
+  setChildren,
+  styleIdOf,
   withAttrs
 };

package/dist/ooxml/rangeMarkers.d.ts

@@ -0,0 +1,5 @@
+/** `EG_RangeMarkupElements` less the comment markers modelled inside paragraphs and wrappers */
+export declare const RANGE_MARKERS: string[];
+/** The markers of `EG_RunLevelElts` that stand outside `EG_RangeMarkupElements` */
+export declare const PERMISSION_MARKERS: string[];
+export declare const COMMENT_RANGE_MARKERS: string[];

package/dist/ooxml/rangeMarkers.js

@@ -0,0 +1,24 @@
+// src/ooxml/rangeMarkers.ts
+var RANGE_MARKERS = [
+  "bookmarkStart",
+  "bookmarkEnd",
+  "moveFromRangeStart",
+  "moveFromRangeEnd",
+  "moveToRangeStart",
+  "moveToRangeEnd",
+  "customXmlInsRangeStart",
+  "customXmlInsRangeEnd",
+  "customXmlDelRangeStart",
+  "customXmlDelRangeEnd",
+  "customXmlMoveFromRangeStart",
+  "customXmlMoveFromRangeEnd",
+  "customXmlMoveToRangeStart",
+  "customXmlMoveToRangeEnd"
+];
+var PERMISSION_MARKERS = ["permStart", "permEnd"];
+var COMMENT_RANGE_MARKERS = ["commentRangeStart", "commentRangeEnd"];
+export {
+  COMMENT_RANGE_MARKERS,
+  PERMISSION_MARKERS,
+  RANGE_MARKERS
+};

package/dist/page/PageGuides.d.ts

@@ -6,11 +6,15 @@
  * Only the places crossed by a block taller than one page are marked over the text, with
  * a faint dotted line.
  * The box only paints, so the mouse still reaches the text beneath it.
+ *
+ * Each page draws the header and footer of the section it opens with, since a document names its
+ * headers section by section (`docx/headersFooters`).
  */
 import type { ReactElement } from "react";
 import { type HeadersFooters } from "../docx/headersFooters";
-import type { PageOverlay } from "./usePageLayout";
-export declare function PageGuides({ overlay, headersFooters, }: {
+import type { PageFace, PageOverlay } from "./usePageLayout";
+export declare function PageGuides({ overlay, headersFootersFor, }: {
     overlay: PageOverlay;
-    headersFooters?: HeadersFooters;
+    /** The stories the section this page belongs to shows. Left out while no document is open */
+    headersFootersFor?: (page: PageFace) => HeadersFooters | null;
 }): ReactElement;

package/dist/page/PageGuides.js

@@ -1,14 +1,14 @@
 // src/page/PageGuides.tsx
 import {
   displayPageNumber,
-  headerFooterAlign,
+  headerFooterOn,
   headerFooterText
 } from "../docx/headersFooters.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PageGuides({
   overlay,
-  headersFooters
+  headersFootersFor
 }) {
   const totalPages = overlay.pages.length;
   return /* @__PURE__ */ jsxs(
@@ -34,30 +34,19 @@ function PageGuides({
           },
           mark.page
         )),
-        headersFooters && overlay.pages.flatMap((page) => {
-          if (page.crossed) return [];
+        headersFootersFor && overlay.pages.flatMap((page) => {
+          const headersFooters = page.crossed ? null : headersFootersFor(page);
+          if (headersFooters === null) return [];
           const number = displayPageNumber(headersFooters, page.page);
-          const header = headerFooterText(
+          const header = headerFooterOn(
             headersFooters.headers,
             headersFooters,
-            page.page,
-            totalPages
+            page.pageInSection
           );
-          const footer = headerFooterText(
+          const footer = headerFooterOn(
             headersFooters.footers,
             headersFooters,
-            page.page,
-            totalPages
-          );
-          const headerAlign = headerFooterAlign(
-            headersFooters.headers,
-            headersFooters,
-            page.page
-          );
-          const footerAlign = headerFooterAlign(
-            headersFooters.footers,
-            headersFooters,
-            page.page
+            page.pageInSection
           );
           return [
             header === null ? null : /* @__PURE__ */ jsx(
@@ -68,10 +57,10 @@ function PageGuides({
                   top: `${page.headerTop}px`,
                   left: `${page.left}px`,
                   width: `${page.width}px`,
-                  textAlign: headerAlign ?? void 0
+                  textAlign: header.align ?? void 0
                 },
                 title: `Page ${number} header`,
-                children: header
+                children: headerFooterText(header.story, number, totalPages)
               },
               `header-${page.page}`
             ),
@@ -83,10 +72,10 @@ function PageGuides({
                   top: `${page.footerTop}px`,
                   left: `${page.left}px`,
                   width: `${page.width}px`,
-                  textAlign: footerAlign ?? void 0
+                  textAlign: footer.align ?? void 0
                 },
                 title: `Page ${number} footer`,
-                children: footer
+                children: headerFooterText(footer.story, number, totalPages)
               },
               `footer-${page.page}`
             )