@portone/docx-editor 0.3.0 → 0.4.0

package/dist/page/pageLayout.js

@@ -77,25 +77,18 @@ function pageLayout({
   const pushes = [];
   const cuts = [];
   const splits = [];
-  const firstPage = {
-    page: 1,
-    bodyStart: 0,
-    exactPage: true,
-    crossed: false
-  };
+  const firstPage = { page: 1, bodyStart: 0, crossed: false };
   const pages = [firstPage];
   if (!(pageBodyHeight > 0)) {
     return { pushes, cuts, splits, pages, bodyHeight: 0 };
   }
   let pageStart = 0;
   let cursor = 0;
-  let exactPage = true;
   const split = (y, crossed, forced) => {
-    if (!forced) exactPage = false;
     const page = splits.length + 2;
-    splits.push({ y: round(y), page, forced, exactPage, crossed });
+    splits.push({ y: round(y), page, forced, crossed });
     pageStart = crossed ? y : y + pageStep;
-    pages.push({ page, bodyStart: round(pageStart), exactPage, crossed });
+    pages.push({ page, bodyStart: round(pageStart), crossed });
   };
   const crossTo = (y) => {
     while (y > pageStart + pageBodyHeight + TOLERANCE_PX) {

package/dist/page/usePageLayout.d.ts

@@ -19,12 +19,6 @@ export interface PageMark {
     height: number;
     crossed: boolean;
 }
-/** The number laid on the corner of a page */
-export interface PageBadge {
-    page: number;
-    top: number;
-    exactPage: boolean;
-}
 /** The paper area of one visual page, used to place its header and footer stories. */
 export interface PageFace {
     page: number;
@@ -41,7 +35,6 @@ export interface PageOverlay {
     /** The sheet height with the last page filled out in full */
     sheetHeight: number;
     marks: PageMark[];
-    badges: PageBadge[];
     pages: PageFace[];
 }
 interface PageLayoutOptions {

package/dist/page/usePageLayout.js

@@ -15,7 +15,6 @@ import {
   pageLayout,
   pagePixels
 } from "./pageLayout.js";
-var BADGE_INSET_PX = 8;
 function useFrameThrottle(run, hold) {
   const latest = useRef({ run, hold });
   const frame = useRef(0);
@@ -46,7 +45,7 @@ function useFrameThrottle(run, hold) {
   }, []);
 }
 function sameOverlay(a, b) {
-  return a !== null && a.left === b.left && a.top === b.top && a.width === b.width && a.sheetHeight === b.sheetHeight && JSON.stringify(a.marks) === JSON.stringify(b.marks) && JSON.stringify(a.badges) === JSON.stringify(b.badges) && JSON.stringify(a.pages) === JSON.stringify(b.pages);
+  return a !== null && a.left === b.left && a.top === b.top && a.width === b.width && a.sheetHeight === b.sheetHeight && JSON.stringify(a.marks) === JSON.stringify(b.marks) && JSON.stringify(a.pages) === JSON.stringify(b.pages);
 }
 function usePageLayout({
   view,
@@ -84,13 +83,7 @@ function usePageLayout({
           height: split.crossed ? 0 : PAGE_SPLIT_PX,
           crossed: split.crossed
         })),
-        // The number is laid on the page's top corner. A page crossed into has no margin,
-        // so the place it was split at is its corner
-        badges: layout.pages.map((start) => ({
-          page: start.page,
-          top: measured.contentTop + start.bodyStart - (start.crossed ? 0 : page.marginTop) + BADGE_INSET_PX,
-          exactPage: start.exactPage
-        })),
+        // A page crossed into has no margin, so the place it was split at is its top corner
         pages: layout.pages.map((start) => {
           const paperTop = measured.contentTop + start.bodyStart - (start.crossed ? 0 : page.marginTop);
           return {

package/dist/schema/attrRoles.js

@@ -1,6 +1,11 @@
 // src/schema/attrRoles.ts
 import { NodeType } from "prosemirror-model";
 var NODE_ATTR_ROLES = {
+  doc: {
+    // The definitions of the lists started while editing. The export writes numbering.xml from
+    // them and nothing derives them again, so they are a source value the document node holds
+    newLists: { role: "source", class: "model" }
+  },
   paragraph: {
     srcId: { role: "session", class: "identity" },
     pAttrs: { role: "source", class: "preserved" },
@@ -18,7 +23,9 @@ var NODE_ATTR_ROLES = {
     gridChange: { role: "source", class: "preserved" },
     format: { role: "display", class: "derived" },
     styleInside: { role: "display", class: "derived" },
-    styleCellMargins: { role: "display", class: "derived" }
+    styleCellMargins: { role: "display", class: "derived" },
+    styleConditions: { role: "display", class: "derived" },
+    styleBands: { role: "display", class: "derived" }
   },
   tableRow: {
     trAttrs: { role: "source", class: "preserved" },

package/dist/schema/docxSchema.js

@@ -2,6 +2,7 @@
 import { Schema } from "prosemirror-model";
 import {
   spanCount,
+  toBandSizes,
   toCellFormat,
   toCellMargins,
   toColWidth,
@@ -11,6 +12,7 @@ import {
   toRowFormat,
   toRunFormat,
   toTableFormat,
+  toTableStyleConditions,
   toTableWidth
 } from "../model/format.js";
 import {
@@ -112,7 +114,16 @@ var DOCX_RAW_SELECTOR = [
 ].map((className) => `div[data-src].${className}`).join(", ");
 var docxSchema = new Schema({
   nodes: {
-    doc: { content: "block+" },
+    doc: {
+      content: "block+",
+      attrs: {
+        /**
+         * The definitions of the lists started while editing, which the export writes into
+         * numbering.xml. Read back through `numbering/listRegistry`.
+         */
+        newLists: { default: null }
+      }
+    },
     paragraph: {
       group: "block modelled",
       content: "inline*",
@@ -202,7 +213,15 @@ var docxSchema = new Schema({
         /** The lines between cells the table style laid down, so an edit can derive them again */
         styleInside: { default: null },
         /** The cell margins the table style laid down, carried along for the same reason */
-        styleCellMargins: { default: null }
+        styleCellMargins: { default: null },
+        /**
+         * What the table style dresses each part of a table with (`w:tblStylePr`), by the part it
+         * covers. Which of them a cell takes is worked out from where it sits and the table's own
+         * `w:tblLook`, so an edit that moves the grid derives them again
+         */
+        styleConditions: { default: null },
+        /** How many rows and columns one band of the table style is made of */
+        styleBands: { default: null }
       },
       toDOM(node) {
         const format = toTableFormat(node.attrs.format);
@@ -223,7 +242,11 @@ var docxSchema = new Schema({
           ),
           "data-style-margins": formatJson(
             toCellMargins(node.attrs.styleCellMargins)
-          )
+          ),
+          "data-style-conditions": formatJson(
+            toTableStyleConditions(node.attrs.styleConditions)
+          ),
+          "data-style-bands": formatJson(toBandSizes(node.attrs.styleBands))
         };
         const body = ["tbody", 0];
         if (gridCols.length === 0) return ["table", attrs, body];
@@ -262,6 +285,12 @@ var docxSchema = new Schema({
               ),
               styleCellMargins: toCellMargins(
                 parseJson(dom.getAttribute("data-style-margins"))
+              ),
+              styleConditions: toTableStyleConditions(
+                parseJson(dom.getAttribute("data-style-conditions"))
+              ),
+              styleBands: toBandSizes(
+                parseJson(dom.getAttribute("data-style-bands"))
               )
             };
           }

package/dist/styles/classNames.d.ts

@@ -61,8 +61,6 @@ export declare const editorClassNames: {
     readonly pageSplit: "docx-editor-page-split";
     /** The line drawn where a block that cannot be pushed down crosses a page */
     readonly pageCrossed: "docx-editor-page-crossed";
-    /** The page number laid on the top corner of a page */
-    readonly pageBadge: "docx-editor-page-badge";
     /** A first-section header story projected into a visual page margin */
     readonly pageHeader: "docx-editor-page-header";
     /** A first-section footer story projected into a visual page margin */
@@ -165,6 +163,19 @@ export declare const editorCssVariables: {
     readonly lineHeight: "--docx-editor-line-height";
     /** The hanging indent width the list marker sits in */
     readonly markerWidth: "--docx-editor-marker-width";
+    /** The room kept after the list marker, which a level asking for no tab closes up (`w:suff`) */
+    readonly markerGap: "--docx-editor-marker-gap";
+    /** Where the marker sits inside the width kept for it (`w:lvlJc`) */
+    readonly markerAlign: "--docx-editor-marker-align";
+    /**
+     * The formatting the numbering level puts on its marker (`lvl/rPr`). It dresses the marker
+     * alone, so it reaches the pseudo-element that draws it and nothing the paragraph holds
+     */
+    readonly markerFontWeight: "--docx-editor-marker-font-weight";
+    readonly markerFontStyle: "--docx-editor-marker-font-style";
+    readonly markerColor: "--docx-editor-marker-color";
+    readonly markerFontSize: "--docx-editor-marker-font-size";
+    readonly markerFontFamily: "--docx-editor-marker-font-family";
     /** The width calculated for a tab using custom paragraph stops. */
     readonly tabWidth: "--docx-editor-tab-width";
     /** The paper height, grown to match the page count */

package/dist/styles/classNames.js

@@ -56,8 +56,6 @@ var editorClassNames = {
   pageSplit: `${PREFIX}-page-split`,
   /** The line drawn where a block that cannot be pushed down crosses a page */
   pageCrossed: `${PREFIX}-page-crossed`,
-  /** The page number laid on the top corner of a page */
-  pageBadge: `${PREFIX}-page-badge`,
   /** A first-section header story projected into a visual page margin */
   pageHeader: `${PREFIX}-page-header`,
   /** A first-section footer story projected into a visual page margin */
@@ -161,6 +159,19 @@ var editorCssVariables = {
   lineHeight: `--${PREFIX}-line-height`,
   /** The hanging indent width the list marker sits in */
   markerWidth: `--${PREFIX}-marker-width`,
+  /** The room kept after the list marker, which a level asking for no tab closes up (`w:suff`) */
+  markerGap: `--${PREFIX}-marker-gap`,
+  /** Where the marker sits inside the width kept for it (`w:lvlJc`) */
+  markerAlign: `--${PREFIX}-marker-align`,
+  /**
+   * The formatting the numbering level puts on its marker (`lvl/rPr`). It dresses the marker
+   * alone, so it reaches the pseudo-element that draws it and nothing the paragraph holds
+   */
+  markerFontWeight: `--${PREFIX}-marker-font-weight`,
+  markerFontStyle: `--${PREFIX}-marker-font-style`,
+  markerColor: `--${PREFIX}-marker-color`,
+  markerFontSize: `--${PREFIX}-marker-font-size`,
+  markerFontFamily: `--${PREFIX}-marker-font-family`,
   /** The width calculated for a tab using custom paragraph stops. */
   tabWidth: `--${PREFIX}-tab-width`,
   /** The paper height, grown to match the page count */

package/dist/styles.css

@@ -677,22 +677,6 @@ button.docx-editor-comment-body {
   border-top: 1px dotted rgb(26 79 208 / 40%);
 }
 
-/* The page number. Laid on the top right corner of every page */
-.docx-editor-page-badge {
-  position: absolute;
-  right: 10px;
-  min-width: 18px;
-  padding: 0 6px;
-  border-radius: 9px;
-  background: rgb(0 0 0 / 6%);
-  color: #808080;
-  font-family: system-ui, sans-serif;
-  font-size: 10px;
-  line-height: 18px;
-  text-align: center;
-  letter-spacing: 0.02em;
-}
-
 /* Display-only projections of the first section's header and footer stories. */
 .docx-editor-page-header,
 .docx-editor-page-footer {
@@ -720,14 +704,28 @@ button.docx-editor-comment-body {
  * the space.
  * Because box-sizing is border-box, as long as the number fits inside the space it
  * does not push where the body starts.
+ *
+ * A level that asks for a space or for nothing after its number (w:suff) keeps no
+ * space at all, so both variables are set to zero and the body starts right after
+ * the number. Where the number sits inside the space is the level's w:lvlJc.
+ *
+ * The level dresses its number and nothing else (lvl/rPr), so its character
+ * formatting arrives as variables read here rather than as anything the paragraph
+ * wears. Where the level writes none, the number is drawn like the text it stands
+ * in front of.
  */
 .docx-editor-p[data-marker]::before {
   content: attr(data-marker);
   display: inline-block;
   box-sizing: border-box;
   min-width: var(--docx-editor-marker-width, 18pt);
-  padding-right: 4pt;
-  text-align: left;
+  padding-right: var(--docx-editor-marker-gap, 4pt);
+  text-align: var(--docx-editor-marker-align, left);
+  font-weight: var(--docx-editor-marker-font-weight, inherit);
+  font-style: var(--docx-editor-marker-font-style, inherit);
+  font-size: var(--docx-editor-marker-font-size, inherit);
+  font-family: var(--docx-editor-marker-font-family, inherit);
+  color: var(--docx-editor-marker-color, inherit);
   /* Keeps the paragraph's hanging indent (text-indent) from being inherited and shifting the number again inside its own box */
   text-indent: 0;
   user-select: none;

package/dist/table/cellFormatting.js

@@ -38,8 +38,7 @@ function planChanges(rect, edit) {
     const next = editCellProps(
       text(cell.attrs.tcPr),
       edit(rect, pos),
-      cellDefaultsAt(rect.map, pos, sources),
-      sources.margins
+      cellDefaultsAt(rect.map, pos, sources)
     );
     if (!next) continue;
     changes.push({

package/dist/table/gridBorders.d.ts

@@ -1,11 +1,12 @@
 /**
- * The lines a cell draws because of where it sits in the grid.
+ * The lines and the fill a cell draws because of where it sits in the grid.
  *
  * Every line of a table is drawn by its cells (see `docx/tableFormatting`), so which line a side
- * falls back on depends on where in the grid the cell sits. A new cell inherits its neighbour's
- * formatting, which is what a background has to do but not a line: the row appended under the last
- * one would draw the table's outer line against the row above it, and deleting the last row would
- * leave the table with no line along its bottom.
+ * falls back on depends on where in the grid the cell sits, and so does which parts of the table
+ * style dress it. A new cell inherits its neighbour's formatting, which is what a background has to
+ * do but not a line: the row appended under the last one would draw the table's outer line against
+ * the row above it, and deleting the last row would leave the table with no line along its bottom.
+ * A row added under the header row is likewise no header row.
  *
  * So the cells of a table whose grid moved derive their display values again, along the same path
  * the import takes. What a cell wrote down itself lives in its `w:tcPr` and is read straight back
@@ -14,21 +15,16 @@
  * deriver that runs them after an edit is `editor/plugins/tableDisplay`.
  */
 import type { Node as PMNode } from "prosemirror-model";
-import { type CellBorderDefaults } from "../docx/tableFormatting";
-import { type CellMargins, type InsideBorders, type TableFormat } from "../model/format";
+import { type CellDefaults, type TableCellSources } from "../docx/tableFormatting";
 import type { NodeAttrs, TableGridMap } from "./format";
 /**
- * What a table lays down for its cells to draw.
+ * What this table lays down for its cells to draw.
  * The values a table style laid down are not in the `tblPr`, so the table carries them separately.
+ * A node never changes once it is built, so what is read out of one is read once.
  */
-export interface TableCellSources {
-    outer: TableFormat | null;
-    inside: InsideBorders;
-    margins: CellMargins;
-}
 export declare function tableCellSources(table: PMNode): TableCellSources;
-/** The lines the cell at this position falls back on for the sides it draws no border of its own on */
-export declare function cellDefaultsAt(map: TableGridMap, pos: number, sources: TableCellSources): CellBorderDefaults;
+/** What the cell at this position falls back on for everything it did not write down itself */
+export declare function cellDefaultsAt(map: TableGridMap, pos: number, sources: TableCellSources): CellDefaults;
 export interface CellFix {
     /** The position of the cell within the table's content */
     pos: number;

package/dist/table/gridBorders.js

@@ -1,30 +1,39 @@
 // src/table/gridBorders.ts
 import { TableMap } from "prosemirror-tables";
 import {
-  cellBorderDefaults,
+  cellDefaultsFor,
   cellMarginsOf,
-  gridEdgesOf,
   insideBordersOf,
   layerCellMargins,
   layerInsideBorders,
-  NO_BORDER_DEFAULTS,
+  NO_BAND_SIZES,
+  NO_CELL_DEFAULTS,
   NO_CELL_MARGINS,
   NO_INSIDE_BORDERS,
-  readCellProps
+  NO_TABLE_STYLE_CONDITIONS,
+  readCellProps,
+  readTableLook,
+  tblStyleIdOf
 } from "../docx/tableFormatting.js";
 import {
   spanCount,
+  toBandSizes,
   toCellFormat,
   toCellMargins,
   toInsideBorders,
-  toTableFormat
+  toTableFormat,
+  toTableStyleConditions
 } from "../model/format.js";
+import { parsePropsXml } from "../ooxml/props.js";
 function text(value) {
   return typeof value === "string" ? value : null;
 }
 function tableCellSources(table) {
+  const known = sourcesByTable.get(table);
+  if (known) return known;
   const tblPr = text(table.attrs.tblPr);
-  return {
+  const props = tblPr === null ? null : parsePropsXml(tblPr);
+  const sources = {
     outer: toTableFormat(table.attrs.format),
     inside: layerInsideBorders(
       toInsideBorders(table.attrs.styleInside) ?? NO_INSIDE_BORDERS,
@@ -33,14 +42,23 @@ function tableCellSources(table) {
     margins: layerCellMargins(
       toCellMargins(table.attrs.styleCellMargins) ?? NO_CELL_MARGINS,
       cellMarginsOf(tblPr)
-    )
+    ),
+    look: readTableLook(props),
+    bands: toBandSizes(table.attrs.styleBands) ?? NO_BAND_SIZES,
+    conditions: toTableStyleConditions(table.attrs.styleConditions) ?? NO_TABLE_STYLE_CONDITIONS,
+    // The style the paragraphs inside resolve against; what it lays down for the cells is already
+    // in `styleConditions`
+    styleId: tblStyleIdOf(props)
   };
+  sourcesByTable.set(table, sources);
+  return sources;
 }
+var sourcesByTable = /* @__PURE__ */ new WeakMap();
 function cellDefaultsAt(map, pos, sources) {
-  return cellBorderDefaults(
-    gridEdgesOf(map.findCell(pos), { rows: map.height, cols: map.width }),
-    sources.outer,
-    sources.inside
+  return cellDefaultsFor(
+    map.findCell(pos),
+    { rows: map.height, cols: map.width },
+    sources
   );
 }
 var CELL_FORMAT_KEYS = [
@@ -106,16 +124,12 @@ function cellFixes(table) {
     const cell = table.nodeAt(pos);
     if (!cell) continue;
     const tcPr = text(cell.attrs.tcPr);
-    const format = readCellProps(
-      tcPr,
-      cellDefaultsAt(map, pos, sources),
-      sources.margins
-    );
+    const format = readCellProps(tcPr, cellDefaultsAt(map, pos, sources));
     cells.set(pos, {
       pos,
       attrs: cell.attrs,
       format: { ...format },
-      direct: readCellProps(tcPr, NO_BORDER_DEFAULTS)
+      direct: readCellProps(tcPr, NO_CELL_DEFAULTS)
     });
   }
   reconcileSharedBorders(map, cells);
@@ -144,7 +158,7 @@ function sameCellFormattingInputs(a, b) {
   );
 }
 function sameFormattingInputs(a, b) {
-  return sameGrid(a, b) && a.attrs.tblPr === b.attrs.tblPr && a.attrs.format === b.attrs.format && a.attrs.styleInside === b.attrs.styleInside && a.attrs.styleCellMargins === b.attrs.styleCellMargins && sameCellFormattingInputs(a, b);
+  return sameGrid(a, b) && a.attrs.tblPr === b.attrs.tblPr && a.attrs.format === b.attrs.format && a.attrs.styleInside === b.attrs.styleInside && a.attrs.styleCellMargins === b.attrs.styleCellMargins && a.attrs.styleConditions === b.attrs.styleConditions && a.attrs.styleBands === b.attrs.styleBands && sameCellFormattingInputs(a, b);
 }
 export {
   cellDefaultsAt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",