@portone/docx-editor 0.1.0

package/dist/ooxml/xml.d.ts

@@ -0,0 +1,36 @@
+/** The wordprocessing namespace that every element we read lives in */
+export declare const W_NS = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+/**
+ * The relationship namespace. It is both where the `r:embed` attributes live and the base
+ * every relationship type name is built on
+ */
+export declare const R_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+/** The name with its namespace prefix stripped off (`w:ascii` -> `ascii`) */
+export declare function localPart(name: string): string;
+/**
+ * Makes a value safe to drop verbatim into either text content or an attribute value.
+ *
+ * Attribute values are wrapped in double quotes everywhere we write them, so single quotes are left alone.
+ * Control characters that cannot be carried are stripped. Incoming text is already filtered by
+ * `editor/plainText`, but this is the last net that keeps an unopenable file from going out
+ * no matter which path the text came in through.
+ */
+export declare function escapeXml(value: string): string;
+export declare function decodeUtf8(bytes: Uint8Array): {
+    text: string;
+    hadBom: boolean;
+};
+export declare function encodeUtf8(text: string, withBom: boolean): Uint8Array;
+export declare function parseXml(source: string): Document;
+export declare function elementChildren(el: Element): Element[];
+export declare function childByLocalName(el: Element, name: string): Element | null;
+/** Turns an opening tag's attributes into an `a="b" c="d"` string */
+export declare function attrString(el: Element): string | null;
+/**
+ * Turns a single element back into an XML string.
+ *
+ * The browser's XMLSerializer adds fresh declarations such as `xmlns:w` to a fragment it cut out.
+ * That declaration already sits at the very top of the document, so we write the string ourselves
+ * to keep markup that was not in the original from creeping in.
+ */
+export declare function serializeXml(el: Element): string;

package/dist/ooxml/xml.js

@@ -0,0 +1,89 @@
+// src/ooxml/xml.ts
+import { DocxImportError } from "./errors.js";
+var W_NS = "http://schemas.openxmlformats.org/wordprocessingml/2006/main";
+var R_NS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+function localPart(name) {
+  const colon = name.indexOf(":");
+  return colon === -1 ? name : name.slice(colon + 1);
+}
+var FORBIDDEN = /[\u0000-\u0008\u000B\u000C\u000E-\u001F]/;
+var ALL_FORBIDDEN = new RegExp(FORBIDDEN, "g");
+function escapeXml(value) {
+  const escaped = value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+  return FORBIDDEN.test(escaped) ? escaped.replace(ALL_FORBIDDEN, "") : escaped;
+}
+function decodeUtf8(bytes) {
+  const hadBom = bytes.length >= 3 && bytes[0] === 239 && bytes[1] === 187 && bytes[2] === 191;
+  return { text: new TextDecoder("utf-8").decode(bytes), hadBom };
+}
+function encodeUtf8(text, withBom) {
+  return new TextEncoder().encode(withBom ? "\uFEFF" + text : text);
+}
+function declaresDtd(source) {
+  const DOCTYPE = "<!DOCTYPE";
+  let at = 0;
+  for (; ; ) {
+    const opens = source.indexOf("<", at);
+    if (opens === -1) return false;
+    const opening = source.slice(opens, opens + DOCTYPE.length);
+    if (opening.toUpperCase() === DOCTYPE) return true;
+    const closes = opening.startsWith("<!--") ? source.indexOf("-->", opens + 4) : opening.startsWith("<?") ? source.indexOf("?>", opens + 2) : -1;
+    if (closes === -1) return false;
+    at = closes;
+  }
+}
+function parseXml(source) {
+  if (declaresDtd(source)) {
+    throw new DocxImportError("malformed-xml", "the XML declares a DTD");
+  }
+  const doc = new DOMParser().parseFromString(source, "application/xml");
+  if (doc.getElementsByTagName("parsererror").length > 0) {
+    throw new DocxImportError("malformed-xml", "could not parse the XML");
+  }
+  return doc;
+}
+function elementChildren(el) {
+  return Array.from(el.children);
+}
+function childByLocalName(el, name) {
+  return elementChildren(el).find((child) => child.localName === name) ?? null;
+}
+function attrString(el) {
+  if (el.attributes.length === 0) return null;
+  return Array.from(el.attributes).map((attr) => `${attr.name}="${escapeXml(attr.value)}"`).join(" ");
+}
+function isElement(node) {
+  return node.nodeType === Node.ELEMENT_NODE;
+}
+function serializeChildNode(node) {
+  if (isElement(node)) return serializeXml(node);
+  if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.CDATA_SECTION_NODE) {
+    return escapeXml(node.nodeValue ?? "");
+  }
+  if (node.nodeType === Node.COMMENT_NODE) {
+    return `<!--${node.nodeValue ?? ""}-->`;
+  }
+  throw new DocxImportError(
+    "unsupported-content",
+    "the document holds an XML node we cannot write back out"
+  );
+}
+function serializeXml(el) {
+  const attrs = attrString(el);
+  const open = attrs ? `<${el.nodeName} ${attrs}` : `<${el.nodeName}`;
+  const inner = Array.from(el.childNodes).map(serializeChildNode).join("");
+  return inner ? `${open}>${inner}</${el.nodeName}>` : `${open}/>`;
+}
+export {
+  R_NS,
+  W_NS,
+  attrString,
+  childByLocalName,
+  decodeUtf8,
+  elementChildren,
+  encodeUtf8,
+  escapeXml,
+  localPart,
+  parseXml,
+  serializeXml
+};

package/dist/page/PageGuides.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Draws the gaps between pages on the sheet, plus a number for each page.
+ *
+ * Straddling blocks have already been moved to the next page, so there is no text under
+ * these bands.
+ * 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.
+ */
+import type { ReactElement } from "react";
+import { type HeadersFooters } from "../docx/headersFooters";
+import type { PageOverlay } from "./usePageLayout";
+export declare function PageGuides({ overlay, headersFooters, }: {
+    overlay: PageOverlay;
+    headersFooters?: HeadersFooters;
+}): ReactElement;

package/dist/page/PageGuides.js

@@ -0,0 +1,114 @@
+// src/page/PageGuides.tsx
+import {
+  displayPageNumber,
+  headerFooterAlign,
+  headerFooterText
+} from "../docx/headersFooters.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function badgeTitle(badge) {
+  return badge.exactPage ? `Page ${badge.page}` : `Page ${badge.page} (approximate)`;
+}
+function PageGuides({
+  overlay,
+  headersFooters
+}) {
+  const totalPages = overlay.pages.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: editorClassNames.pageGuides,
+      style: {
+        left: `${overlay.left}px`,
+        top: `${overlay.top}px`,
+        width: `${overlay.width}px`,
+        height: `${overlay.sheetHeight}px`
+      },
+      "aria-hidden": "true",
+      children: [
+        overlay.marks.map((mark) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: mark.crossed ? editorClassNames.pageCrossed : editorClassNames.pageSplit,
+            style: {
+              top: `${mark.top}px`,
+              height: mark.height > 0 ? `${mark.height}px` : void 0
+            }
+          },
+          mark.page
+        )),
+        overlay.badges.map((badge) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: editorClassNames.pageBadge,
+            style: { top: `${badge.top}px` },
+            title: badgeTitle(badge),
+            children: badge.page
+          },
+          badge.page
+        )),
+        headersFooters && overlay.pages.flatMap((page) => {
+          if (page.crossed) return [];
+          const number = displayPageNumber(headersFooters, page.page);
+          const header = headerFooterText(
+            headersFooters.headers,
+            headersFooters,
+            page.page,
+            totalPages
+          );
+          const footer = headerFooterText(
+            headersFooters.footers,
+            headersFooters,
+            page.page,
+            totalPages
+          );
+          const headerAlign = headerFooterAlign(
+            headersFooters.headers,
+            headersFooters,
+            page.page
+          );
+          const footerAlign = headerFooterAlign(
+            headersFooters.footers,
+            headersFooters,
+            page.page
+          );
+          return [
+            header === null ? null : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: editorClassNames.pageHeader,
+                style: {
+                  top: `${page.headerTop}px`,
+                  left: `${page.left}px`,
+                  width: `${page.width}px`,
+                  textAlign: headerAlign ?? void 0
+                },
+                title: `Page ${number} header`,
+                children: header
+              },
+              `header-${page.page}`
+            ),
+            footer === null ? null : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: editorClassNames.pageFooter,
+                style: {
+                  top: `${page.footerTop}px`,
+                  left: `${page.left}px`,
+                  width: `${page.width}px`,
+                  textAlign: footerAlign ?? void 0
+                },
+                title: `Page ${number} footer`,
+                children: footer
+              },
+              `footer-${page.page}`
+            )
+          ];
+        })
+      ]
+    }
+  );
+}
+export {
+  PageGuides
+};

package/dist/page/measureBlocks.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Measures the sheet as drawn on screen: the height of each body block, the gap above it, and
+ * where the page breaks inside it stand, with nothing computed line by line.
+ *
+ * The engine's own marks are taken back off as they are read, so a block already pushed and a
+ * break already given its space read as they would with neither applied. A measurement that read
+ * them in would add to what is already there, and the layout would creep on every pass.
+ * Where there is no layout (in tests) everything is 0, so the result is a single page.
+ */
+import type { EditorView } from "prosemirror-view";
+import type { MeasuredBlock } from "./pageLayout";
+/**
+ * The measurements taken in order to draw the page overlay. Positions are relative to
+ * the overlay box
+ */
+export interface SheetMeasure {
+    left: number;
+    top: number;
+    width: number;
+    /** The sheet's top and bottom padding */
+    contentTop: number;
+    contentBottom: number;
+    blocks: MeasuredBlock[];
+}
+export declare function measureSheet(view: EditorView, layer: HTMLElement): SheetMeasure;

package/dist/page/measureBlocks.js

@@ -0,0 +1,80 @@
+// src/page/measureBlocks.ts
+import { editorAttributes } from "../styles/classNames.js";
+import { measureTable } from "./tableMeasurements.js";
+var PAGE_BREAK_BR = `br[${editorAttributes.breakType}="page"]`;
+var BREAK_SPACE = `[${editorAttributes.pageBreakSpace}]`;
+function pixels(value) {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function visualScale(element) {
+  const scale = pixels(getComputedStyle(element).zoom);
+  return scale > 0 ? scale : 1;
+}
+function appliedPush(element) {
+  return pixels(element.getAttribute(editorAttributes.pagePush) ?? "");
+}
+function drawnBlocks(view) {
+  const found = [];
+  view.state.doc.forEach((_node, offset) => {
+    const dom = view.nodeDOM(offset);
+    if (dom instanceof HTMLElement && dom.getBoundingClientRect().height > 0) {
+      found.push({ pos: offset, dom });
+    }
+  });
+  return found;
+}
+function breakWithoutSpace(dom, spaces) {
+  return dom.querySelectorAll(PAGE_BREAK_BR).length > spaces;
+}
+function measureSheet(view, layer) {
+  const sheet = view.dom;
+  const sheetRect = sheet.getBoundingClientRect();
+  const layerRect = layer.getBoundingClientRect();
+  const style = getComputedStyle(sheet);
+  const scale = visualScale(layer);
+  const contentTop = pixels(style.paddingTop);
+  const contentBottom = pixels(style.paddingBottom);
+  const sheetY = (viewportY) => (viewportY - sheetRect.top) / scale;
+  const blocks = [];
+  let previousBottom = contentTop;
+  let applied = 0;
+  let breakAfterPrevious = false;
+  for (const { pos, dom } of drawnBlocks(view)) {
+    const node = view.state.doc.nodeAt(pos);
+    const rect = dom.getBoundingClientRect();
+    applied += appliedPush(dom);
+    const top = sheetY(rect.top) - applied;
+    const measuredTable = node ? measureTable(view, node, pos, dom, scale) : null;
+    const breaks = [];
+    const spaces = Array.from(dom.querySelectorAll(BREAK_SPACE));
+    for (const space of spaces) {
+      const box = space.getBoundingClientRect();
+      breaks.push(sheetY(box.top) - applied - top);
+      applied += box.height / scale;
+    }
+    applied += measuredTable?.appliedHeight ?? 0;
+    const bottom = sheetY(rect.bottom) - applied;
+    blocks.push({
+      pos,
+      gap: top - previousBottom,
+      height: bottom - top,
+      breakBefore: breakAfterPrevious || dom.hasAttribute(editorAttributes.pageBreakBefore),
+      breaks,
+      ...measuredTable ? { table: measuredTable.table } : {}
+    });
+    previousBottom = bottom;
+    breakAfterPrevious = breakWithoutSpace(dom, spaces.length);
+  }
+  return {
+    left: (sheetRect.left - layerRect.left) / scale,
+    top: (sheetRect.top - layerRect.top) / scale,
+    width: sheetRect.width / scale,
+    contentTop,
+    contentBottom,
+    blocks
+  };
+}
+export {
+  measureSheet
+};

package/dist/page/pageDecorations.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Decorations that move content to the next page: block pushes, page-break spaces, and table
+ * continuation rows.
+ *
+ * The document model is left untouched, so no trace of them is left in
+ * the exported XML or in the edit history.
+ */
+import { Plugin } from "prosemirror-state";
+import { DecorationSet, type EditorView } from "prosemirror-view";
+import type { BlockPush, BreakSpace, TableContinuation } from "./pageLayout";
+/**
+ * One break's space while the document changes under it.
+ *
+ * The layout counts breaks inside the block it measured (`page/pageLayout`), and an edit anywhere
+ * before a break shifts that count, so what is kept here is the position of the `br` the space
+ * belongs to: a position maps through an edit, an ordinal does not.
+ */
+interface SpaceMark {
+    /** Where the `br` this space is put on stands */
+    at: number;
+    height: number;
+}
+interface PageMarks {
+    pushes: readonly BlockPush[];
+    spaces: readonly SpaceMark[];
+    tableContinuations: readonly TableContinuation[];
+    decorations: DecorationSet;
+}
+export declare function pageDecorations(): Plugin<PageMarks>;
+/** Does nothing when the same values are already applied */
+export declare function setPagePushes(view: EditorView, pushes: readonly BlockPush[]): void;
+/** Does nothing when the same values are already applied */
+export declare function setPageBreakSpaces(view: EditorView, spaces: readonly BreakSpace[]): void;
+/** Does nothing when the same table continuations are already applied */
+export declare function setTableContinuations(view: EditorView, continuations: readonly TableContinuation[]): void;
+export {};

package/dist/page/pageDecorations.js

@@ -0,0 +1,211 @@
+// src/page/pageDecorations.ts
+import { Plugin, PluginKey } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { docxSchema, isPageBreak } from "../schema/index.js";
+import { editorAttributes } from "../styles/classNames.js";
+var marksKey = new PluginKey("docxPageDecorations");
+function pushStyle(marginTop) {
+  return `margin-block-start:${marginTop}px`;
+}
+function spaceStyle(height) {
+  return `display:block;height:${height}px`;
+}
+function isPageBreakNode(node) {
+  return node?.type === docxSchema.nodes.hardBreak && isPageBreak(node.attrs.brAttrs);
+}
+function pageBreaksIn(block, blockPos) {
+  const found = [];
+  if (block.type !== docxSchema.nodes.paragraph) return found;
+  block.forEach((child, offset) => {
+    if (isPageBreakNode(child)) {
+      found.push({ at: blockPos + 1 + offset, size: child.nodeSize });
+    }
+  });
+  return found;
+}
+function breakSpaces(block, blockPos, heights, into) {
+  for (const { at, size } of pageBreaksIn(block, blockPos)) {
+    const height = heights.get(at) ?? 0;
+    into.push(
+      Decoration.inline(at, at + size, {
+        nodeName: "span",
+        style: spaceStyle(height),
+        [editorAttributes.pageBreakSpace]: `${height}`
+      })
+    );
+  }
+}
+function spaceMarks(doc, spaces) {
+  return spaces.flatMap((space) => {
+    const block = doc.nodeAt(space.pos);
+    const found = block ? pageBreaksIn(block, space.pos)[space.index] : null;
+    return found ? [{ at: found.at, height: space.height }] : [];
+  });
+}
+function tableSpace(continuation) {
+  const row = document.createElement("tr");
+  row.setAttribute(editorAttributes.tablePageSpace, `${continuation.height}`);
+  row.setAttribute("aria-hidden", "true");
+  row.setAttribute("contenteditable", "false");
+  row.style.height = `${continuation.height}px`;
+  const cell = document.createElement("td");
+  cell.colSpan = continuation.columns;
+  cell.style.height = `${continuation.height}px`;
+  row.append(cell);
+  return row;
+}
+function repeatedHeader(view, rowPos) {
+  const source = view.nodeDOM(rowPos);
+  const row = source instanceof HTMLElement && source.tagName === "TR" ? source.cloneNode(true) : document.createElement("tr");
+  row.setAttribute(editorAttributes.tableRepeatedHeader, "");
+  row.setAttribute("aria-hidden", "true");
+  row.setAttribute("contenteditable", "false");
+  row.removeAttribute("id");
+  row.querySelectorAll("[id]").forEach((element) => {
+    element.removeAttribute("id");
+  });
+  return row;
+}
+function tableContinuationDecorations(continuations, into) {
+  continuations.forEach((continuation) => {
+    into.push(
+      Decoration.widget(continuation.pos, () => tableSpace(continuation), {
+        key: `table-page-space-${continuation.pos}-${continuation.height}-${continuation.columns}`,
+        side: -100
+      })
+    );
+    continuation.headerRows.forEach((rowPos, headerIndex) => {
+      into.push(
+        Decoration.widget(
+          continuation.pos,
+          (view) => repeatedHeader(view, rowPos),
+          {
+            key: `table-repeated-header-${continuation.pos}-${headerIndex}-` + continuation.headerSignature,
+            side: -90 + headerIndex
+          }
+        )
+      );
+    });
+  });
+}
+function decorationsFor(doc, pushes, spaces, tableContinuations) {
+  const byPos = new Map(pushes.map((push) => [push.pos, push]));
+  const heights = new Map(spaces.map((space) => [space.at, space.height]));
+  const decorations = [];
+  doc.forEach((node, offset) => {
+    const push = byPos.get(offset);
+    if (push) {
+      decorations.push(
+        Decoration.node(offset, offset + node.nodeSize, {
+          style: pushStyle(push.marginTop),
+          [editorAttributes.pagePush]: `${push.push}`
+        })
+      );
+    }
+    breakSpaces(node, offset, heights, decorations);
+  });
+  tableContinuationDecorations(tableContinuations, decorations);
+  return DecorationSet.create(doc, decorations);
+}
+function marksFor(doc, pushes, spaces, tableContinuations) {
+  return {
+    pushes,
+    spaces,
+    tableContinuations,
+    decorations: decorationsFor(doc, pushes, spaces, tableContinuations)
+  };
+}
+function samePushes(a, b) {
+  return a.length === b.length && a.every((push, index) => {
+    const other = b[index];
+    return other !== void 0 && other.pos === push.pos && other.marginTop === push.marginTop;
+  });
+}
+function sameSpaces(a, b) {
+  return a.length === b.length && a.every((space, index) => {
+    const other = b[index];
+    return other !== void 0 && other.at === space.at && other.height === space.height;
+  });
+}
+function sameTableContinuations(a, b) {
+  return a.length === b.length && a.every((continuation, index) => {
+    const other = b[index];
+    return other !== void 0 && other.pos === continuation.pos && other.height === continuation.height && other.columns === continuation.columns && other.headerSignature === continuation.headerSignature && other.headerRows.length === continuation.headerRows.length && other.headerRows.every(
+      (rowPos, rowIndex) => rowPos === continuation.headerRows[rowIndex]
+    );
+  });
+}
+function pageDecorations() {
+  return new Plugin({
+    key: marksKey,
+    state: {
+      init: (_config, state) => marksFor(state.doc, [], [], []),
+      apply(tr, value) {
+        const next = tr.getMeta(marksKey);
+        if (next) return next;
+        if (!tr.docChanged) return value;
+        return marksFor(
+          tr.doc,
+          value.pushes.map((push) => ({
+            ...push,
+            pos: tr.mapping.map(push.pos)
+          })),
+          value.spaces.flatMap((space) => {
+            const at = tr.mapping.map(space.at);
+            return isPageBreakNode(tr.doc.nodeAt(at)) ? [{ ...space, at }] : [];
+          }),
+          value.tableContinuations.flatMap((continuation) => {
+            const pos = tr.mapping.map(continuation.pos);
+            if (tr.doc.nodeAt(pos)?.type.spec.tableRole !== "row") return [];
+            const headerRows = continuation.headerRows.map((rowPos) => tr.mapping.map(rowPos)).filter(
+              (rowPos) => tr.doc.nodeAt(rowPos)?.type.spec.tableRole === "row"
+            );
+            return [{ ...continuation, pos, headerRows }];
+          })
+        );
+      }
+    },
+    props: {
+      decorations: (state) => marksKey.getState(state)?.decorations
+    }
+  });
+}
+function current(view) {
+  return marksKey.getState(view.state) ?? marksFor(view.state.doc, [], [], []);
+}
+function dispatch(view, next) {
+  view.dispatch(
+    view.state.tr.setMeta(marksKey, next).setMeta("addToHistory", false)
+  );
+}
+function setPagePushes(view, pushes) {
+  const marks = current(view);
+  if (samePushes(marks.pushes, pushes)) return;
+  dispatch(
+    view,
+    marksFor(view.state.doc, pushes, marks.spaces, marks.tableContinuations)
+  );
+}
+function setPageBreakSpaces(view, spaces) {
+  const marks = current(view);
+  const next = spaceMarks(view.state.doc, spaces);
+  if (sameSpaces(marks.spaces, next)) return;
+  dispatch(
+    view,
+    marksFor(view.state.doc, marks.pushes, next, marks.tableContinuations)
+  );
+}
+function setTableContinuations(view, continuations) {
+  const marks = current(view);
+  if (sameTableContinuations(marks.tableContinuations, continuations)) return;
+  dispatch(
+    view,
+    marksFor(view.state.doc, marks.pushes, marks.spaces, continuations)
+  );
+}
+export {
+  pageDecorations,
+  setPageBreakSpaces,
+  setPagePushes,
+  setTableContinuations
+};