@portone/docx-editor 0.3.0 → 0.5.0

package/dist/page/usePageLayout.d.ts

@@ -10,7 +10,7 @@
  */
 import type { EditorView } from "prosemirror-view";
 import { type RefObject } from "react";
-import type { PageGeometry } from "../docx/pageGeometry";
+import { type SectionPixels } from "./pageLayout";
 /** One place where a page parts from the next. The position is measured on the sheet */
 export interface PageMark {
     page: number;
@@ -19,15 +19,16 @@ 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;
+    /** The position of the block this page opens with, which says which section it belongs to */
+    pos: number;
+    /**
+     * The place this page takes within that section, counted from 1 again at every section, which is
+     * what its header and footer variant is chosen by (`docx/headersFooters`)
+     */
+    pageInSection: number;
     headerTop: number;
     footerTop: number;
     left: number;
@@ -41,7 +42,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 {
@@ -50,8 +50,11 @@ interface PageLayoutOptions {
     enabled: boolean;
     /** A value that differs every time the text changes */
     revision: unknown;
-    /** The paper the open document names. A4 where a document names none */
-    geometry?: PageGeometry;
+    /**
+     * The paper of each section of the open document (`page/pageLayout`), read once per document
+     * change by the caller. A4 where a document names none, and where none is open
+     */
+    sections?: readonly SectionPixels[];
 }
-export declare function usePageLayout({ view, layer, enabled, revision, geometry, }: PageLayoutOptions): PageOverlay | null;
+export declare function usePageLayout({ view, layer, enabled, revision, sections, }: PageLayoutOptions): PageOverlay | null;
 export {};

package/dist/page/usePageLayout.js

@@ -2,7 +2,6 @@
 import {
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState
 } from "react";
@@ -10,12 +9,11 @@ import { editorCssVariables } from "../styles/classNames.js";
 import { measureSheet } from "./measureBlocks.js";
 import { setPageMarks } from "./pageDecorations.js";
 import {
-  A4_PAGE_PIXELS,
+  A4_SECTION_PIXELS,
   PAGE_SPLIT_PX,
   pageLayout,
-  pagePixels
+  sectionPaperAt
 } from "./pageLayout.js";
-var BADGE_INSET_PX = 8;
 function useFrameThrottle(run, hold) {
   const latest = useRef({ run, hold });
   const frame = useRef(0);
@@ -46,59 +44,53 @@ 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,
   layer,
   enabled,
   revision,
-  geometry
+  sections
 }) {
   const [overlay, setOverlay] = useState(null);
-  const page = useMemo(
-    () => geometry ? pagePixels(geometry) : A4_PAGE_PIXELS,
-    [geometry]
-  );
+  const papers = sections === void 0 || sections.length === 0 ? A4_SECTION_PIXELS : sections;
   const remeasure = useFrameThrottle(
     () => {
       const box = layer.current;
       if (!view || !box || !enabled) return;
       const measured = measureSheet(view, box);
-      const layout = pageLayout({
-        blocks: measured.blocks,
-        pageBodyHeight: page.bodyHeight,
-        pageStep: page.pageStep
-      });
+      const layout = pageLayout({ blocks: measured.blocks, sections: papers });
+      const paperOf = (pos) => sectionPaperAt(papers, pos);
+      const sheet = paperOf(0);
       setPageMarks(view, { pushes: layout.pushes, cuts: layout.cuts });
-      const sheetHeight = measured.contentTop + layout.bodyHeight + measured.contentBottom;
+      const sheetHeight = measured.contentTop + layout.bodyHeight + Math.max(measured.contentBottom, layout.marginBottom);
       box.style.setProperty(editorCssVariables.sheetHeight, `${sheetHeight}px`);
       const next = {
         left: measured.left,
         top: measured.top,
         width: measured.width,
         sheetHeight,
+        // A gap opens below the page that ends at this place, so it is that page's own margin
+        // the band is drawn under
         marks: layout.splits.map((split) => ({
           page: split.page,
-          top: measured.contentTop + split.y + (split.crossed ? 0 : page.marginBottom),
+          top: measured.contentTop + split.y + (split.crossed ? 0 : paperOf(layout.pages[split.page - 2]?.pos ?? 0).marginBottom),
           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);
+          const paper = paperOf(start.pos);
+          const paperTop = measured.contentTop + start.bodyStart - (start.crossed ? 0 : paper.marginTop);
           return {
             page: start.page,
-            headerTop: paperTop + page.marginTop / 2,
-            footerTop: paperTop + page.pageHeight - page.marginBottom / 2,
-            left: page.marginLeft,
-            width: page.bodyWidth,
+            pos: start.pos,
+            pageInSection: start.pageInSection,
+            headerTop: paperTop + paper.marginTop / 2,
+            footerTop: paperTop + paper.pageHeight - paper.marginBottom / 2,
+            left: sheet.marginLeft,
+            width: sheet.bodyWidth,
             crossed: start.crossed
           };
         })

package/dist/schema/attrRoles.js

@@ -1,6 +1,17 @@
 // 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" },
+    // The section that closes the body, as the document wrote it. The export writes it back out
+    // between the blocks and the tail, so a change to it is a change to the document
+    sectPr: { role: "source", class: "preserved" },
+    // What each side story currently says. The comment writer puts a comment's back into the
+    // Comments part, so a change to one is a change to the document
+    stories: { role: "source", class: "model" }
+  },
   paragraph: {
     srcId: { role: "session", class: "identity" },
     pAttrs: { role: "source", class: "preserved" },
@@ -18,13 +29,20 @@ 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" },
+    // The markers a table and a row carry are content the writer puts back exactly where it
+    // stood, so a change to one is a change to the table rather than a display refresh
+    leadingXml: { role: "source", class: "preserved" }
   },
   tableRow: {
     trAttrs: { role: "source", class: "preserved" },
     tblPrEx: { role: "source", class: "preserved" },
     trPr: { role: "source", class: "preserved" },
-    format: { role: "display", class: "derived" }
+    format: { role: "display", class: "derived" },
+    leadingXml: { role: "source", class: "preserved" },
+    trailingXml: { role: "source", class: "preserved" }
   },
   tableCell: {
     colspan: { role: "source", class: "model" },
@@ -40,19 +58,15 @@ var NODE_ATTR_ROLES = {
     // it out of the comparison would let a step that unlocks a cell pass as a re-derivation
     sdtPrefix: { role: "source", class: "preserved" },
     sdtContentsLocked: { role: "source", class: "derived" },
-    sdtDeletionLocked: { role: "source", class: "derived" }
+    sdtDeletionLocked: { role: "source", class: "derived" },
+    trailingXml: { role: "source", class: "preserved" }
   },
   rawBlock: {
     xml: { role: "source", class: "preserved" },
-    name: { role: "source", class: "identity" }
-  },
-  docxRaw: {
     srcId: { role: "session", class: "identity" },
-    name: { role: "session", class: "identity" }
-  },
-  bookmarkBlock: {
-    srcId: { role: "session", class: "identity" },
-    name: { role: "session", class: "identity" }
+    name: { role: "session", class: "identity" },
+    display: { role: "session", class: "derived" },
+    guarded: { role: "session", class: "derived" }
   },
   hardBreak: { brAttrs: { role: "source", class: "preserved" } },
   image: {
@@ -77,14 +91,11 @@ var NODE_ATTR_ROLES = {
     authorId: { role: "source", class: "model" },
     initials: { role: "source", class: "model" },
     date: { role: "source", class: "model" },
-    text: { role: "source", class: "model" },
-    commentXml: { role: "source", class: "preserved" },
     paraId: { role: "source", class: "identity" },
     resolved: { role: "source", class: "model" },
     extensionXml: { role: "source", class: "preserved" },
     replies: { role: "source", class: "model" },
-    // Read to decide whether the comment parts are rewritten at all; neither is written
-    imported: { role: "session", class: "derived" },
+    // Read to decide whether the extended comment part is rewritten at all; it is never written
     threadImported: { role: "session", class: "derived" }
   },
   noteReference: {
@@ -92,12 +103,26 @@ var NODE_ATTR_ROLES = {
     id: { role: "source", class: "identity" },
     customMarkFollows: { role: "source", class: "model" },
     referenceXml: { role: "source", class: "preserved" },
-    // Both come from the notes part as the document was opened, and the writer puts back the
+    // Worked out from the notes part as the document was opened, and the writer puts back the
     // reference alone: a note renumbered around an edit is the same reference it was
-    label: { role: "display", class: "derived" },
-    text: { role: "display", class: "derived" }
+    label: { role: "display", class: "derived" }
+  },
+  rawRunContent: {
+    xml: { role: "source", class: "preserved" },
+    // What the fragment is and how it is drawn are read off the preservation table when the
+    // document is opened and never worked out again, so they travel with the fragment itself
+    element: { role: "session", class: "identity" },
+    display: { role: "session", class: "derived" },
+    text: { role: "session", class: "derived" },
+    guarded: { role: "session", class: "derived" }
   },
-  rawInline: { xml: { role: "source", class: "preserved" } }
+  rawInline: {
+    xml: { role: "source", class: "preserved" },
+    element: { role: "session", class: "identity" },
+    display: { role: "session", class: "derived" },
+    text: { role: "session", class: "derived" },
+    guarded: { role: "session", class: "derived" }
+  }
 };
 var MARK_ATTR_ROLES = {
   run: {

package/dist/schema/docxSchema.d.ts

@@ -15,4 +15,12 @@ import { Schema } from "prosemirror-model";
 export { imageNodeSpec, runMarkSpec } from "./rendering";
 /** Whether this is a page-splitting break (`<w:br w:type="page"/>`). Read straight from the original attribute text */
 export declare function isPageBreak(brAttrs: unknown): boolean;
-export declare const docxSchema: Schema<"bookmarkBlock" | "commentEnd" | "commentReference" | "commentStart" | "doc" | "docxRaw" | "hardBreak" | "image" | "noteReference" | "paragraph" | "rawBlock" | "rawInline" | "table" | "tableCell" | "tableRow" | "text", "link" | "run" | "sdt" | "tab">;
+/**
+ * How a preserved fragment is drawn, baked into the node's attrs when the document is opened
+ * (`docx/importPolicy`) so that this layer reads a value rather than a vocabulary.
+ *
+ * `hidden` puts nothing on screen, `text` draws the character the fragment stands for, `break`
+ * ends the line where it stood, and `chip` draws a small box naming the element.
+ */
+export type PreservedDisplay = "hidden" | "text" | "break" | "chip";
+export declare const docxSchema: Schema<"commentEnd" | "commentReference" | "commentStart" | "doc" | "hardBreak" | "image" | "noteReference" | "paragraph" | "rawBlock" | "rawInline" | "rawRunContent" | "table" | "tableCell" | "tableRow" | "text", "link" | "run" | "sdt" | "tab">;