@portone/docx-editor 0.2.1 → 0.4.0

package/dist/page/kinds/paragraphKind.js

@@ -0,0 +1,71 @@
+// src/page/kinds/paragraphKind.ts
+import { Decoration } from "prosemirror-view";
+import { toParagraphFormat } from "../../model/format.js";
+import { docxSchema, isPageBreak } from "../../schema/index.js";
+import { editorAttributes } from "../../styles/classNames.js";
+var PAGE_BREAK_BR = `br[${editorAttributes.breakType}="page"]`;
+var BREAK_SPACE = `[${editorAttributes.pageBreakSpace}]`;
+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;
+}
+var paragraphKind = {
+  name: "paragraph",
+  matches: () => true,
+  measure({ node, pos, dom, sheetY, top, scale }) {
+    const breaks = pageBreaksIn(node, pos);
+    const candidates = [];
+    let appliedHeight = 0;
+    dom.querySelectorAll(BREAK_SPACE).forEach((space, index) => {
+      const box = space.getBoundingClientRect();
+      const found = breaks.at(index);
+      if (found) {
+        candidates.push({
+          at: found.at,
+          offset: sheetY(box.top) - appliedHeight - top,
+          forced: true,
+          repeatHeight: 0
+        });
+      }
+      appliedHeight += box.height / scale;
+    });
+    return {
+      candidates,
+      minFirstPiece: candidates[0]?.offset ?? dom.getBoundingClientRect().height / scale - appliedHeight,
+      // A break with no space of its own sits somewhere the space could not be opened. Those
+      // still start a new page, but only after the whole block
+      breakAfter: dom.querySelectorAll(PAGE_BREAK_BR).length > candidates.length,
+      appliedHeight,
+      keepWithNext: toParagraphFormat(node.attrs.format)?.keepNext === true
+    };
+  },
+  holdsCut: (doc, at) => isPageBreakNode(doc.nodeAt(at)),
+  decorate(pos, node, cuts, into) {
+    const heights = new Map(cuts.map((cut) => [cut.at, cut.height]));
+    for (const { at, size } of pageBreaksIn(node, pos)) {
+      const height = heights.get(at) ?? 0;
+      into.push(
+        Decoration.inline(at, at + size, {
+          nodeName: "span",
+          style: spaceStyle(height),
+          [editorAttributes.pageBreakSpace]: `${height}`
+        })
+      );
+    }
+  }
+};
+export {
+  paragraphKind
+};

package/dist/page/kinds/tableKind.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The kind of a table: it is parted between rows, and a continued page opens a spacer row and
+ * repeats the headers the table opens with.
+ *
+ * Both sides read the table as it stands on screen without treating the rows this very engine
+ * drew as content: the measurement takes their heights back off, and the projection is derived
+ * again from the document, so an edit to a header row redraws it with nothing measured anew.
+ */
+import type { BlockKind } from "../blockKinds";
+export declare const tableKind: BlockKind;

package/dist/page/kinds/tableKind.js

@@ -0,0 +1,178 @@
+// src/page/kinds/tableKind.ts
+import { Decoration } from "prosemirror-view";
+import { toRowFormat } from "../../model/format.js";
+import { editorAttributes } from "../../styles/classNames.js";
+var PAGE_BREAK_BR = `br[${editorAttributes.breakType}="page"]`;
+function span(value) {
+  return typeof value === "number" && Number.isInteger(value) && value > 0 ? value : 1;
+}
+function paginationRows(table) {
+  return Array.from(
+    table.querySelectorAll(
+      `[${editorAttributes.tablePageSpace}],[${editorAttributes.tableRepeatedHeader}]`
+    )
+  );
+}
+function before(candidate, row) {
+  return Boolean(
+    candidate.compareDocumentPosition(row) & Node.DOCUMENT_POSITION_FOLLOWING
+  );
+}
+function rowEntries(view, tableNode, tablePos, tableDom, appliedRows, scale) {
+  const entries = [];
+  const tableTop = tableDom.getBoundingClientRect().top;
+  tableNode.forEach((row, offset) => {
+    const pos = tablePos + 1 + offset;
+    const dom = view.nodeDOM(pos);
+    if (!(dom instanceof HTMLElement)) return;
+    const rect = dom.getBoundingClientRect();
+    const appliedBefore = appliedRows.reduce(
+      (total, candidate) => total + (before(candidate, dom) ? candidate.getBoundingClientRect().height / scale : 0),
+      0
+    );
+    entries.push({
+      node: row,
+      pos,
+      top: (rect.top - tableTop) / scale - appliedBefore,
+      height: rect.height / scale
+    });
+  });
+  return entries;
+}
+function unsafeBoundaries(rows) {
+  const unsafe = /* @__PURE__ */ new Set();
+  rows.forEach((row, rowIndex) => {
+    row.node.forEach((cell) => {
+      const bottom = Math.min(rows.length, rowIndex + span(cell.attrs.rowspan));
+      for (let boundary = rowIndex + 1; boundary < bottom; boundary += 1) {
+        unsafe.add(boundary);
+      }
+    });
+  });
+  return unsafe;
+}
+function repeatsHeader(row) {
+  return toRowFormat(row?.attrs.format)?.repeatHeader === true;
+}
+function headerCount(rows) {
+  let count = 0;
+  while (count < rows.length && repeatsHeader(rows[count]?.node)) {
+    count += 1;
+  }
+  return count;
+}
+function headerRowsOf(tableNode, tablePos) {
+  const found = [];
+  let offset = 0;
+  for (let index = 0; index < tableNode.childCount; index += 1) {
+    const row = tableNode.child(index);
+    if (!repeatsHeader(row)) break;
+    found.push(tablePos + 1 + offset);
+    offset += row.nodeSize;
+  }
+  return found;
+}
+function columnCount(tableNode) {
+  const grid = tableNode.attrs.gridCols;
+  if (Array.isArray(grid) && grid.length > 0) return grid.length;
+  const first = tableNode.firstChild;
+  if (!first) return 1;
+  let columns = 0;
+  first.forEach((cell) => {
+    columns += span(cell.attrs.colspan);
+  });
+  return Math.max(1, columns);
+}
+function tableSpace(height, columns) {
+  const row = document.createElement("tr");
+  row.setAttribute(editorAttributes.tablePageSpace, `${height}`);
+  row.setAttribute("aria-hidden", "true");
+  row.setAttribute("contenteditable", "false");
+  row.style.height = `${height}px`;
+  const cell = document.createElement("td");
+  cell.colSpan = columns;
+  cell.style.height = `${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;
+}
+var tableKind = {
+  name: "table",
+  matches: (node) => node.type.spec.tableRole === "table",
+  measure({ view, node, pos, dom, scale }) {
+    const appliedRows = paginationRows(dom);
+    const rows = rowEntries(view, node, pos, dom, appliedRows, scale);
+    const headers = headerCount(rows);
+    const unsafe = unsafeBoundaries(rows);
+    const headerRows = rows.slice(0, headers);
+    const repeatHeaderHeight = headerRows.reduce(
+      (total, row) => total + row.height,
+      0
+    );
+    const candidates = [];
+    for (let rowIndex = Math.max(1, headers); rowIndex < rows.length; rowIndex += 1) {
+      const row = rows[rowIndex];
+      if (row && !unsafe.has(rowIndex)) {
+        candidates.push({
+          at: row.pos,
+          offset: row.top,
+          forced: false,
+          repeatHeight: repeatHeaderHeight
+        });
+      }
+    }
+    const firstBodyBoundary = candidates.find(
+      (candidate) => candidate.offset > repeatHeaderHeight + 0.5
+    );
+    const appliedHeight = appliedRows.reduce(
+      (total, row) => total + row.getBoundingClientRect().height / scale,
+      0
+    );
+    return {
+      candidates,
+      // The smallest useful first piece: the headers followed by one body row group
+      minFirstPiece: firstBodyBoundary?.offset ?? dom.getBoundingClientRect().height / scale - appliedHeight,
+      // A space cannot be opened inside a cell, so a break standing in one is answered after the
+      // whole table
+      breakAfter: dom.querySelectorAll(PAGE_BREAK_BR).length > 0,
+      appliedHeight
+    };
+  },
+  holdsCut: (doc, at) => doc.nodeAt(at)?.type.spec.tableRole === "row",
+  decorate(pos, node, cuts, into) {
+    if (cuts.length === 0) return;
+    const headerRows = headerRowsOf(node, pos);
+    const columns = columnCount(node);
+    for (const cut of cuts) {
+      into.push(
+        Decoration.widget(cut.at, () => tableSpace(cut.height, columns), {
+          key: `table-page-space-${cut.at}-${cut.height}-${columns}`,
+          side: -100
+        })
+      );
+      headerRows.forEach((rowPos, headerIndex) => {
+        into.push(
+          // No `key`: a keyed widget is held to be the same one and left alone, and this one is a
+          // copy of a row that the very edit rebuilding these decorations may have just changed
+          Decoration.widget(cut.at, (view) => repeatedHeader(view, rowPos), {
+            side: -90 + headerIndex
+          })
+        );
+      });
+    }
+  }
+};
+export {
+  tableKind
+};

package/dist/page/measureBlocks.d.ts

@@ -2,21 +2,15 @@
  * 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.
  *
- * Every place a block may be parted at is read as a break candidate (`page/blockKinds`), whatever
- * shape of block it is: a page break for a paragraph, a safe row boundary for a table.
+ * Every place a block may be parted at is read as a break candidate (`page/blockKinds`) by the
+ * block's own kind (`page/kinds`), so this pass names no shape of block itself.
  * 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 "./blockKinds";
-/** What a table continuation still needs from the measurement to be drawn */
-export interface TableHeaderProjection {
-    headerRows: readonly number[];
-    headerSignature: string;
-    columns: number;
-}
+import { type MeasuredBlock } from "./blockKinds";
 /**
  * The measurements taken in order to draw the page overlay. Positions are relative to
  * the overlay box
@@ -29,10 +23,5 @@ export interface SheetMeasure {
     contentTop: number;
     contentBottom: number;
     blocks: MeasuredBlock[];
-    /**
-     * The header facts of every table block, by the table's position, for the adapter that turns
-     * cuts back into table continuations (`page/usePageLayout`)
-     */
-    tables: ReadonlyMap<number, TableHeaderProjection>;
 }
 export declare function measureSheet(view: EditorView, layer: HTMLElement): SheetMeasure;

package/dist/page/measureBlocks.js

@@ -1,9 +1,7 @@
 // src/page/measureBlocks.ts
 import { editorAttributes } from "../styles/classNames.js";
-import { pageBreaksIn } from "./pageDecorations.js";
-import { measureTable } from "./tableMeasurements.js";
-var PAGE_BREAK_BR = `br[${editorAttributes.breakType}="page"]`;
-var BREAK_SPACE = `[${editorAttributes.pageBreakSpace}]`;
+import { blockKindFor } from "./blockKinds.js";
+import { blockKindsOf } from "./pageDecorations.js";
 function pixels(value) {
   const parsed = Number.parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
@@ -17,17 +15,14 @@ function appliedPush(element) {
 }
 function drawnBlocks(view) {
   const found = [];
-  view.state.doc.forEach((_node, offset) => {
+  view.state.doc.forEach((node, offset) => {
     const dom = view.nodeDOM(offset);
     if (dom instanceof HTMLElement && dom.getBoundingClientRect().height > 0) {
-      found.push({ pos: offset, dom });
+      found.push({ node, 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();
@@ -37,51 +32,36 @@ function measureSheet(view, layer) {
   const contentTop = pixels(style.paddingTop);
   const contentBottom = pixels(style.paddingBottom);
   const sheetY = (viewportY) => (viewportY - sheetRect.top) / scale;
+  const kinds = blockKindsOf(view.state);
   const blocks = [];
-  const tables = /* @__PURE__ */ new Map();
   let previousBottom = contentTop;
   let applied = 0;
-  for (const { pos, dom } of drawnBlocks(view)) {
-    const node = view.state.doc.nodeAt(pos);
+  for (const { node, pos, dom } of drawnBlocks(view)) {
     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 = node ? pageBreaksIn(node, pos) : [];
-    const spaces = Array.from(dom.querySelectorAll(BREAK_SPACE));
-    const forced = [];
-    spaces.forEach((space, index) => {
-      const box = space.getBoundingClientRect();
-      const found = breaks.at(index);
-      if (found) {
-        forced.push({
-          at: found.at,
-          offset: sheetY(box.top) - applied - top,
-          forced: true,
-          repeatHeight: 0
-        });
-      }
-      applied += box.height / scale;
+    const above = applied;
+    const blockY = (viewportY) => sheetY(viewportY) - above;
+    const top = blockY(rect.top);
+    const measured = blockKindFor(kinds, node).measure({
+      view,
+      node,
+      pos,
+      dom,
+      sheetY: blockY,
+      top,
+      scale
     });
-    applied += measuredTable?.appliedHeight ?? 0;
+    applied += measured.appliedHeight;
     const bottom = sheetY(rect.bottom) - applied;
-    const height = bottom - top;
-    if (measuredTable) {
-      tables.set(pos, {
-        headerRows: measuredTable.headerRows,
-        headerSignature: measuredTable.headerSignature,
-        columns: measuredTable.columns
-      });
-    }
     blocks.push({
       pos,
       gap: top - previousBottom,
-      height,
+      height: bottom - top,
       breakBefore: dom.hasAttribute(editorAttributes.pageBreakBefore),
-      breakAfter: breakWithoutSpace(dom, spaces.length),
-      // A space is never opened inside a table, so at most one of the two lists holds anything
-      candidates: [...forced, ...measuredTable?.candidates ?? []],
-      minFirstPiece: measuredTable?.minFirstPiece ?? forced[0]?.offset ?? height
+      breakAfter: measured.breakAfter,
+      candidates: measured.candidates,
+      minFirstPiece: measured.minFirstPiece,
+      keepWithNext: measured.keepWithNext ?? false
     });
     previousBottom = bottom;
   }
@@ -91,8 +71,7 @@ function measureSheet(view, layer) {
     width: sheetRect.width / scale,
     contentTop,
     contentBottom,
-    blocks,
-    tables
+    blocks
   };
 }
 export {

package/dist/page/pageDecorations.d.ts

@@ -1,52 +1,35 @@
 /**
- * Decorations that move content to the next page: block pushes, page-break spaces, and table
- * continuation rows.
+ * Decorations that move content to the next page: the push above a block, and whatever the block's
+ * own kind draws the cuts inside it as (`page/kinds`).
  *
- * The document model is left untouched, so no trace of them is left in
- * the exported XML or in the edit history.
+ * The kinds the editor was built with are held here, so the measurement and the decorations read
+ * one registry and a block is measured by the same kind that draws it.
+ * The document model is left untouched, so no trace of any of it is left in the exported XML or
+ * in the edit history.
  */
-import type { Node as PMNode } from "prosemirror-model";
-import { Plugin } from "prosemirror-state";
+import { type EditorState, 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 {
+import { type BlockKind, type PageCut } from "./blockKinds";
+import type { BlockPush } from "./pageLayout";
+/** Everything one measurement has to say about the page (`page/pageLayout`) */
+export interface PageMarksInput {
     pushes: readonly BlockPush[];
-    spaces: readonly SpaceMark[];
-    tableContinuations: readonly TableContinuation[];
-    decorations: DecorationSet;
+    /**
+     * Where the layout parted a block, keyed by the position the continued piece starts at.
+     *
+     * The layout counts within the block it measured, and an edit anywhere before a cut shifts that
+     * count, so what is kept here is a position: a position maps through an edit, an ordinal does
+     * not.
+     */
+    cuts: readonly PageCut[];
 }
-/** One page break inside a block, where it stands and how much room the `br` itself takes */
-interface BreakAt {
-    at: number;
-    size: number;
+interface PageMarks extends PageMarksInput {
+    kinds: readonly BlockKind[];
+    decorations: DecorationSet;
 }
-/**
- * Every page break inside this block, in document order.
- * A space is put on the breaks of a top-level paragraph alone: inside a table cell it would grow
- * the cell rather than the page, so a break there is left to the whole-block rule in
- * `page/measureBlocks`, and none is found here.
- *
- * The measurement reads the same list to pair each space element it finds with the break it
- * belongs to (`page/measureBlocks`).
- */
-export declare function pageBreaksIn(block: PMNode, blockPos: number): BreakAt[];
-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 declare function pageDecorations(kinds?: readonly BlockKind[]): Plugin<PageMarks>;
+/** The kinds the editor was built with, which the measurement reads to match them */
+export declare function blockKindsOf(state: EditorState): readonly BlockKind[];
+/** One transaction, or none when the same marks are already applied */
+export declare function setPageMarks(view: EditorView, next: PageMarksInput): void;
 export {};