@portone/docx-editor 0.5.1 → 0.6.1

package/dist/page/usePageLayout.d.ts

@@ -10,7 +10,8 @@
  */
 import type { EditorView } from "prosemirror-view";
 import { type RefObject } from "react";
-import { type SectionPixels } from "./pageLayout";
+import type { DemandBand } from "./demands";
+import { type SectionPixels, type TrailingRows } from "./pageLayout";
 /** One place where a page parts from the next. The position is measured on the sheet */
 export interface PageMark {
     page: number;
@@ -19,6 +20,33 @@ export interface PageMark {
     height: number;
     crossed: boolean;
 }
+/** The room one page keeps at the foot of its body for one band, measured on the sheet */
+export interface ReservedRoom {
+    band: string;
+    /** What the page keeps there, in the order it took them (`page/pageLayout`) */
+    ids: readonly string[];
+    top: number;
+    /**
+     * The height the page gives the band, down to the end of its body. Less than the band asks for
+     * where it holds more than the page could give it
+     */
+    height: number;
+    /** Whether the band asks for more than that height */
+    clipped: boolean;
+}
+/** The rows laid after the last block that one page holds, measured on the sheet */
+export interface TrailingRoom {
+    /** What the page holds, in the order they are laid (`page/pageLayout`) */
+    ids: readonly string[];
+    top: number;
+    /**
+     * The height the page gives the rows, down to the end of its body. Less than they ask for where
+     * one of them is taller than the room the page had left
+     */
+    height: number;
+    /** Whether the rows ask for more than that height */
+    clipped: boolean;
+}
 /** The paper area of one visual page, used to place its header and footer stories. */
 export interface PageFace {
     page: number;
@@ -34,6 +62,13 @@ export interface PageFace {
     left: number;
     width: number;
     crossed: boolean;
+    /** What the page keeps at the foot of its body, one entry per band, top to bottom */
+    reserved: readonly ReservedRoom[];
+    /**
+     * The rows laid after the last block that landed on this page, measured on the sheet, and null
+     * for a page holding none (`page/pageLayout`)
+     */
+    trailing: TrailingRoom | null;
 }
 export interface PageOverlay {
     left: number;
@@ -55,6 +90,26 @@ interface PageLayoutOptions {
      * change by the caller. A4 where a document names none, and where none is open
      */
     sections?: readonly SectionPixels[];
+    /**
+     * The bands the demands of the text are kept in (`page/demands`), by name. Left out, the pages
+     * are the ones the blocks alone come to, which is also what a document asking for no room
+     * should be laid out through. A new value lays the pages out again
+     */
+    bands?: ReadonlyMap<string, DemandBand>;
+    /**
+     * The rows laid after the last block of the document, which open pages of their own where the
+     * last page has no room left for them. A new value lays the pages out again
+     */
+    trailing?: TrailingRows;
+    /**
+     * Whether anything drawn over the sheet besides the body is composing, such as the view over a
+     * note being edited.
+     *
+     * A measurement moves the room a band is kept in, and what is drawn in that room is drawn again
+     * wherever it lands, which would take an open composition down with it. So the frame is taken
+     * again until that composition is over, the way it is for the body's own.
+     */
+    composing?: () => boolean;
 }
-export declare function usePageLayout({ view, layer, enabled, revision, sections, }: PageLayoutOptions): PageOverlay | null;
+export declare function usePageLayout({ view, layer, enabled, revision, sections, bands, trailing, composing, }: PageLayoutOptions): PageOverlay | null;
 export {};

package/dist/page/usePageLayout.js

@@ -14,6 +14,18 @@ import {
   pageLayout,
   sectionPaperAt
 } from "./pageLayout.js";
+var NO_ROOM = [];
+function trailingOn(placement, contentTop, bodyBottom) {
+  if (placement === void 0) return null;
+  const top = contentTop + placement.top;
+  const height = Math.max(0, bodyBottom - top);
+  return {
+    ids: placement.ids,
+    top,
+    height: Math.min(placement.height, height),
+    clipped: placement.height > height
+  };
+}
 function useFrameThrottle(run, hold) {
   const latest = useRef({ run, hold });
   const frame = useRef(0);
@@ -51,7 +63,10 @@ function usePageLayout({
   layer,
   enabled,
   revision,
-  sections
+  sections,
+  bands,
+  trailing,
+  composing
 }) {
   const [overlay, setOverlay] = useState(null);
   const papers = sections === void 0 || sections.length === 0 ? A4_SECTION_PIXELS : sections;
@@ -60,7 +75,19 @@ function usePageLayout({
       const box = layer.current;
       if (!view || !box || !enabled) return;
       const measured = measureSheet(view, box);
-      const layout = pageLayout({ blocks: measured.blocks, sections: papers });
+      const layout = pageLayout({
+        blocks: measured.blocks,
+        sections: papers,
+        bands,
+        trailing
+      });
+      const roomOn = /* @__PURE__ */ new Map();
+      for (const room of layout.reserved) {
+        roomOn.set(room.page, [...roomOn.get(room.page) ?? [], room]);
+      }
+      const laidOn = new Map(
+        layout.trailing.map((placement) => [placement.page, placement])
+      );
       const paperOf = (pos) => sectionPaperAt(papers, pos);
       const sheet = paperOf(0);
       setPageMarks(view, { pushes: layout.pushes, cuts: layout.cuts });
@@ -83,6 +110,7 @@ function usePageLayout({
         pages: layout.pages.map((start) => {
           const paper = paperOf(start.pos);
           const paperTop = measured.contentTop + start.bodyStart - (start.crossed ? 0 : paper.marginTop);
+          const bodyBottom = measured.contentTop + start.bodyStart + paper.bodyHeight;
           return {
             page: start.page,
             pos: start.pos,
@@ -91,19 +119,36 @@ function usePageLayout({
             footerTop: paperTop + paper.pageHeight - paper.marginBottom / 2,
             left: sheet.marginLeft,
             width: sheet.bodyWidth,
-            crossed: start.crossed
+            crossed: start.crossed,
+            trailing: trailingOn(
+              laidOn.get(start.page),
+              measured.contentTop,
+              bodyBottom
+            ),
+            reserved: roomOn.get(start.page)?.map((room) => {
+              const top = measured.contentTop + room.top;
+              const height = Math.max(0, bodyBottom - top);
+              return {
+                band: room.band,
+                ids: room.ids,
+                top,
+                height: Math.min(room.height, height),
+                clipped: room.height > height
+              };
+            }) ?? NO_ROOM
           };
         })
       };
       setOverlay((previous) => sameOverlay(previous, next) ? previous : next);
     },
-    () => view?.composing === true
+    () => view?.composing === true || composing?.() === true
   );
   useEffect(() => {
     if (enabled) remeasure();
-  }, [remeasure, revision, enabled]);
+  }, [remeasure, revision, enabled, bands, trailing]);
   useEffect(() => {
     if (enabled) return;
+    setOverlay(null);
     layer.current?.style.removeProperty(editorCssVariables.sheetHeight);
     if (!view) return;
     setPageMarks(view, { pushes: [], cuts: [] });

package/dist/schema/attrRoles.js

@@ -103,8 +103,9 @@ var NODE_ATTR_ROLES = {
     id: { role: "source", class: "identity" },
     customMarkFollows: { role: "source", class: "model" },
     referenceXml: { role: "source", class: "preserved" },
-    // 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
+    // Worked out again from the reference order and the numbering properties after every edit that
+    // moves them (`docx/notes/numbering`), 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" }
   },
   rawRunContent: {

package/dist/schema/docxSchema.js

@@ -35,6 +35,7 @@ import {
   tableStyle
 } from "../styles/inlineStyle.js";
 import { imageNodeSpec, runMarkSpec } from "./rendering.js";
+import { noteName } from "./stories.js";
 import { WRAPPER_ATTRS, WRAPPER_GROUP } from "./wrappers.js";
 import { imageNodeSpec as imageNodeSpec2, runMarkSpec as runMarkSpec2 } from "./rendering.js";
 var NO_STORIES = Object.freeze({});
@@ -790,7 +791,6 @@ var docxSchema = new Schema({
         referenceXml: { default: null }
       },
       toDOM(node) {
-        const kind = node.attrs.kind === "endnote" ? "Endnote" : "Footnote";
         const label = text(node.attrs.label) ?? "?";
         return [
           "sup",
@@ -801,7 +801,10 @@ var docxSchema = new Schema({
             "data-note-label": label,
             "data-custom-mark-follows": node.attrs.customMarkFollows === true ? "1" : void 0,
             "data-reference-xml": text(node.attrs.referenceXml),
-            "aria-label": `${kind} ${label}`
+            "aria-label": noteName(
+              node.attrs.kind === "endnote" ? "endnote" : "footnote",
+              label
+            )
           },
           node.attrs.customMarkFollows === true ? "" : label
         ];

package/dist/schema/editGuard.d.ts

@@ -46,7 +46,7 @@ export type EditIntent =
  * against the places it puts that guard to the test, and a place naming a guard that no longer
  * stands has to be a mistake the compiler catches rather than an annotation answering for nothing.
  */
-export type EditGuardName = "protection" | "lock" | "preserved" | "note" | "section";
+export type EditGuardName = "protection" | "lock" | "preserved" | "section";
 /** What every guard answers, whichever of the two judgements it is written as */
 interface GuardCommon {
     readonly name: EditGuardName;

package/dist/schema/guards.js

@@ -4,7 +4,7 @@ import {
   transactionReaches
 } from "./editGuard.js";
 import { lockGuard } from "./locks.js";
-import { noteGuard, preservedGuard, sectionGuard } from "./preservedGuards.js";
+import { preservedGuard, sectionGuard } from "./preservedGuards.js";
 import {
   isCommentNode,
   protectionAllows
@@ -37,7 +37,6 @@ var EDIT_GUARDS = [
   protectionGuard,
   lockGuard,
   preservedGuard,
-  noteGuard,
   sectionGuard
 ];
 function judgesSteps(guard) {

package/dist/schema/preservedGuards.d.ts

@@ -1,15 +1,14 @@
 /**
  * The guards over what a document is opened with and the editor only preserves: the fragments a
- * file falls apart without, the reference standing where a footnote or an endnote is called, and
- * the paragraph that ends a section.
+ * file falls apart without, and the paragraph that ends a section.
  *
  * The first of those is the two ends of a bookmark range, the two ends of a permission or move
  * range, and the pieces of a field, which say what they say only in the order they stand in. None
  * of it is content the editor writes, so nothing in it can put such a thing back once it is gone,
  * and a document that lost one of a bookmark's two ends cannot be written back as a file at all
- * (`docx/exportDocx` refuses it). What the first two guards hold is therefore the whole list of
- * the nodes they answer for, in the order the document carries them; a section break, which an
- * edit may legitimately move from one paragraph to another, is held by its number instead.
+ * (`docx/exportDocx` refuses it). What that guard holds is therefore the whole list of the nodes
+ * it answers for, in the order the document carries them; a section break, which an edit may
+ * legitimately move from one paragraph to another, is held by its number instead.
  */
 import type { Node as PMNode } from "prosemirror-model";
 import { type ChangeGuard, type EditGuardName } from "./editGuard";
@@ -30,7 +29,6 @@ type Signature = (node: PMNode) => string;
  */
 export declare function preservedNodeGuard(name: EditGuardName, holds: (node: PMNode) => boolean, signature: Signature): ChangeGuard;
 export declare const preservedGuard: ChangeGuard;
-export declare const noteGuard: ChangeGuard;
 /**
  * A guard that lets a change through only while it leaves at least as many section breaks standing
  * as it found.

package/dist/schema/preservedGuards.js

@@ -137,14 +137,6 @@ var preservedGuard = {
     return shut;
   }
 };
-function isNoteReference(node) {
-  return node.type.name === "noteReference";
-}
-var noteGuard = preservedNodeGuard(
-  "note",
-  isNoteReference,
-  (node) => JSON.stringify(node.attrs)
-);
 function endsASection(node) {
   if (node.type.name !== "paragraph") return false;
   const pPr = node.attrs.pPr;
@@ -174,7 +166,6 @@ var sectionGuard = {
   }
 };
 export {
-  noteGuard,
   preservedGuard,
   preservedNodeGuard,
   sectionGuard

package/dist/schema/stories.d.ts

@@ -7,9 +7,23 @@
  * the key, the value on the node, and the two comparisons the protection rules are written over.
  */
 import type { Node as PMNode } from "prosemirror-model";
-export type StoryKind = "comment" | "footnote" | "endnote" | "header" | "footer";
+/** Which of the two notes parts a note stands in */
+export declare const NOTE_KINDS: readonly ["footnote", "endnote"];
+export type NoteKind = (typeof NOTE_KINDS)[number];
+/** The two kinds of story a header or footer part holds, one story to a part */
+export declare const HEADER_FOOTER_KINDS: readonly ["header", "footer"];
+export type HeaderFooterKind = (typeof HEADER_FOOTER_KINDS)[number];
+export declare const STORY_KINDS: readonly ["comment", "footnote", "endnote", "header", "footer"];
+export type StoryKind = (typeof STORY_KINDS)[number];
 /** `comment:4`, `footnote:2`, `header:word/header1.xml` */
 export type StoryKey = `${StoryKind}:${string}`;
+/**
+ * What a reader listening to the page is told a note reference is.
+ *
+ * A reference whose own mark follows it in the document draws no label of the editor's
+ * (§17.11.14), so it is named by its kind alone rather than by a number that is not there.
+ */
+export declare function noteName(kind: NoteKind, label: string): string;
 /** One story as the document node holds it, which is `Node.toJSON` of a document of this schema */
 export interface StoryJson {
     readonly type: string;
@@ -18,7 +32,25 @@ export interface StoryJson {
 }
 /** The attr the stories stand on, named here so the schema and the readers cannot spell it apart */
 export declare const STORIES_ATTR = "stories";
-export declare function storyKey(kind: StoryKind, id: string): StoryKey;
+export declare function storyKey<K extends StoryKind>(kind: K, id: string): `${K}:${string}`;
+/** The key of a story that is a note: `footnote:2`, `endnote:3` */
+export type NoteKey = `${NoteKind}:${string}`;
+/**
+ * The note this key names, and null for a key naming a story of another kind.
+ *
+ * A note's id never carries a colon - a note is identified by a whole number (§17.11.2, §17.11.8)
+ * - so the kind is everything up to the first one.
+ */
+export declare function noteKeyOf(key: StoryKey): {
+    readonly kind: NoteKind;
+    readonly id: string;
+} | null;
+/**
+ * The kinds of note an edit may add, delete, copy and rewrite, which is both of them: each part is
+ * written back one entry per note (`docx/notes/writing`). The lifecycle, the clipboard and the
+ * navigation all read this one list, so a kind of note added to the format joins it once.
+ */
+export declare const EDITABLE_NOTE_KINDS: readonly NoteKind[];
 /**
  * The key this text spells, or null for one that names no kind of story.
  *

package/dist/schema/stories.js

@@ -1,16 +1,27 @@
 // src/schema/stories.ts
 import { sameSource } from "./sourceEquality.js";
-var STORIES_ATTR = "stories";
+var NOTE_KINDS = ["footnote", "endnote"];
+var HEADER_FOOTER_KINDS = ["header", "footer"];
 var STORY_KINDS = [
   "comment",
-  "footnote",
-  "endnote",
-  "header",
-  "footer"
+  ...NOTE_KINDS,
+  ...HEADER_FOOTER_KINDS
 ];
+function noteName(kind, label) {
+  const named = kind === "endnote" ? "Endnote" : "Footnote";
+  return label === "" ? named : `${named} ${label}`;
+}
+var STORIES_ATTR = "stories";
 function storyKey(kind, id) {
   return `${kind}:${id}`;
 }
+function noteKeyOf(key) {
+  const at = key.indexOf(":");
+  const named = key.slice(0, at);
+  const kind = NOTE_KINDS.find((candidate) => candidate === named);
+  return kind === void 0 ? null : { kind, id: key.slice(at + 1) };
+}
+var EDITABLE_NOTE_KINDS = NOTE_KINDS;
 function asStoryKey(text) {
   const at = text.indexOf(":");
   if (at < 1) return null;
@@ -68,8 +79,14 @@ function withoutCommentStories(doc) {
   );
 }
 export {
+  EDITABLE_NOTE_KINDS,
+  HEADER_FOOTER_KINDS,
+  NOTE_KINDS,
   STORIES_ATTR,
+  STORY_KINDS,
   asStoryKey,
+  noteKeyOf,
+  noteName,
   sameStory,
   storiesOf,
   storyKey,

package/dist/styles/classNames.d.ts

@@ -51,7 +51,9 @@ export declare const editorClassNames: {
     readonly rawRunContent: "docx-editor-raw-run";
     /** A preserved block, drawn by the `display` its policy gave it */
     readonly rawBlock: "docx-editor-raw-block";
-    /** The box holding both the paper and the marks overlaid on it */
+    /** The room the scaled page layer takes up in the scroll box */
+    readonly pageBox: "docx-editor-page-box";
+    /** The box holding both the paper and the marks overlaid on it, scaled to the reader's zoom */
     readonly pageLayer: "docx-editor-page-layer";
     /** All of the page marks drawn over the paper */
     readonly pageGuides: "docx-editor-page-guides";
@@ -140,17 +142,32 @@ export declare const editorClassNames: {
     readonly commentMeta: "docx-editor-comment-meta";
     readonly commentAuthor: "docx-editor-comment-author";
     readonly commentDate: "docx-editor-comment-date";
+    /** The note on a card whose comment lost the text it was written for */
+    readonly commentDetached: "docx-editor-comment-detached";
     readonly commentBody: "docx-editor-comment-body";
     readonly commentActions: "docx-editor-comment-actions";
     readonly commentPrimaryAction: "docx-editor-comment-primary-action";
     readonly commentIconActions: "docx-editor-comment-icon-actions";
     readonly commentComposer: "docx-editor-comment-composer";
     readonly commentInput: "docx-editor-comment-input";
-    readonly notesPanel: "docx-editor-notes";
-    readonly notesHeading: "docx-editor-notes-heading";
-    readonly notesList: "docx-editor-notes-list";
-    readonly noteLabel: "docx-editor-note-label";
-    readonly noteBody: "docx-editor-note-body";
+    /** Everything drawn over the paper in the room the pages keep for notes, which only its areas take the mouse in */
+    readonly noteAreas: "docx-editor-note-areas";
+    /** The footnotes at the foot of one page: a short rule, then each footnote */
+    readonly footnoteArea: "docx-editor-footnote-area";
+    /** The endnotes drawn after the last paragraph, one box per page they run onto */
+    readonly endnoteArea: "docx-editor-endnote-area";
+    /** The short rule that sets notes apart from the text above them */
+    readonly noteSeparator: "docx-editor-note-separator";
+    /** One note, drawn from its story */
+    readonly noteRow: "docx-editor-note-row";
+    /** Attached alongside it while the caret is in that note and an editing view stands over it */
+    readonly noteRowOpen: "docx-editor-note-row-open";
+    /** The editing view one side story is edited in (`editor/stories`) */
+    readonly storyBody: "docx-editor-story-body";
+    /** A note's own reference mark, drawn as the label its reference carries */
+    readonly noteMark: "docx-editor-note-mark";
+    /** The notes listed after the last page */
+    readonly noteList: "docx-editor-note-list";
     /** The panel drawn in place of the editor when a document was refused and the consumer wrote no panel of its own */
     readonly rejection: "docx-editor-rejection";
     readonly rejectionTitle: "docx-editor-rejection-title";

package/dist/styles/classNames.js

@@ -46,7 +46,9 @@ var editorClassNames = {
   rawRunContent: `${PREFIX}-raw-run`,
   /** A preserved block, drawn by the `display` its policy gave it */
   rawBlock: `${PREFIX}-raw-block`,
-  /** The box holding both the paper and the marks overlaid on it */
+  /** The room the scaled page layer takes up in the scroll box */
+  pageBox: `${PREFIX}-page-box`,
+  /** The box holding both the paper and the marks overlaid on it, scaled to the reader's zoom */
   pageLayer: `${PREFIX}-page-layer`,
   /** All of the page marks drawn over the paper */
   pageGuides: `${PREFIX}-page-guides`,
@@ -136,17 +138,32 @@ var editorClassNames = {
   commentMeta: `${PREFIX}-comment-meta`,
   commentAuthor: `${PREFIX}-comment-author`,
   commentDate: `${PREFIX}-comment-date`,
+  /** The note on a card whose comment lost the text it was written for */
+  commentDetached: `${PREFIX}-comment-detached`,
   commentBody: `${PREFIX}-comment-body`,
   commentActions: `${PREFIX}-comment-actions`,
   commentPrimaryAction: `${PREFIX}-comment-primary-action`,
   commentIconActions: `${PREFIX}-comment-icon-actions`,
   commentComposer: `${PREFIX}-comment-composer`,
   commentInput: `${PREFIX}-comment-input`,
-  notesPanel: `${PREFIX}-notes`,
-  notesHeading: `${PREFIX}-notes-heading`,
-  notesList: `${PREFIX}-notes-list`,
-  noteLabel: `${PREFIX}-note-label`,
-  noteBody: `${PREFIX}-note-body`,
+  /** Everything drawn over the paper in the room the pages keep for notes, which only its areas take the mouse in */
+  noteAreas: `${PREFIX}-note-areas`,
+  /** The footnotes at the foot of one page: a short rule, then each footnote */
+  footnoteArea: `${PREFIX}-footnote-area`,
+  /** The endnotes drawn after the last paragraph, one box per page they run onto */
+  endnoteArea: `${PREFIX}-endnote-area`,
+  /** The short rule that sets notes apart from the text above them */
+  noteSeparator: `${PREFIX}-note-separator`,
+  /** One note, drawn from its story */
+  noteRow: `${PREFIX}-note-row`,
+  /** Attached alongside it while the caret is in that note and an editing view stands over it */
+  noteRowOpen: `${PREFIX}-note-row-open`,
+  /** The editing view one side story is edited in (`editor/stories`) */
+  storyBody: `${PREFIX}-story-body`,
+  /** A note's own reference mark, drawn as the label its reference carries */
+  noteMark: `${PREFIX}-note-mark`,
+  /** The notes listed after the last page */
+  noteList: `${PREFIX}-note-list`,
   /** The panel drawn in place of the editor when a document was refused and the consumer wrote no panel of its own */
   rejection: `${PREFIX}-rejection`,
   rejectionTitle: `${PREFIX}-rejection-title`

package/dist/styles/inlineStyle.d.ts

@@ -1,4 +1,5 @@
 import { type CellFormat, type DocumentDefaults, type HighlightName, type LineSpacing, type ParagraphFormat, type RowFormat, type RunFormat, type TableFormat, type TableWidth } from "../model/format";
+import { editorCssVariables } from "./classNames";
 import { type FontFallbacks } from "./fontStack";
 /**
  * The value used on screen only, when nowhere in the document declares a default
@@ -65,3 +66,9 @@ export declare function cellStyle(format: CellFormat | null): string | undefined
  * not drawn in a different font in every environment.
  */
 export declare function documentDefaultsStyle(defaults: DocumentDefaults, fontFallbacks?: FontFallbacks): string;
+export type DocumentDefaultsVariables = Readonly<Record<typeof editorCssVariables.fontSize | typeof editorCssVariables.lineHeight | typeof editorCssVariables.fontFamily, string>>;
+/**
+ * The same values as the variables they are written into, for a box drawn outside the sheet that
+ * is to set its text the way the sheet does: a note drawn at the foot of a page, or after the last
+ */
+export declare function documentDefaultsVariables(defaults: DocumentDefaults, fontFallbacks?: FontFallbacks): DocumentDefaultsVariables;

package/dist/styles/inlineStyle.js

@@ -199,12 +199,17 @@ function cellStyle(format) {
   return declarations(css);
 }
 function documentDefaultsStyle(defaults, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
+  return Object.entries(documentDefaultsVariables(defaults, fontFallbacks)).map(([name, value]) => `${name}:${value}`).join(";");
+}
+function documentDefaultsVariables(defaults, fontFallbacks = DEFAULT_FONT_FALLBACKS) {
   const fontFamily = defaults.fontFamily ? withFontFallback(defaults.fontFamily, fontFallbacks) : fontFallbacks.defaultStack;
-  return [
-    `${editorCssVariables.fontSize}:${pt(defaults.fontSizePt ?? FALLBACK_FONT_SIZE_PT)}`,
-    `${editorCssVariables.lineHeight}:${lineHeightValue(defaults.lineSpacing)}`,
-    `${editorCssVariables.fontFamily}:${fontFamily}`
-  ].join(";");
+  return {
+    [editorCssVariables.fontSize]: pt(
+      defaults.fontSizePt ?? FALLBACK_FONT_SIZE_PT
+    ),
+    [editorCssVariables.lineHeight]: lineHeightValue(defaults.lineSpacing),
+    [editorCssVariables.fontFamily]: fontFamily
+  };
 }
 export {
   FALLBACK_FONT_SIZE_PT,
@@ -213,6 +218,7 @@ export {
   cellStyle,
   columnWidthPx,
   documentDefaultsStyle,
+  documentDefaultsVariables,
   lineHeightValue,
   paragraphStyle,
   rowStyle,

package/dist/styles/visualScale.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The scale an element is drawn at, read back off the transforms standing over it.
+ *
+ * The page layer is scaled with a transform rather than the `zoom` property (`./editor.css`), so
+ * the scale has to be read out of whatever the transform resolves to: a browser hands back the used
+ * matrix, while a document implementation that does not compute one hands the function back as it
+ * was written. Everything that turns a rectangle read off the screen into a measurement on the
+ * paper divides by this number, so a transform an application puts above the editor - a dialog
+ * opening on a scale, a container fitting itself to a small screen - counts as much as the layer's
+ * own: a rectangle read inside one of those is drawn at their product.
+ *
+ * The drawn width over `offsetWidth` would answer without parsing anything, but `offsetWidth` is
+ * rounded to whole pixels, and a scale a ten-thousandth out is a measurement half a pixel out by
+ * the foot of a long document, which is the drift this scaling exists to avoid.
+ */
+/** The horizontal scale of an element's own transform and of every transform above it */
+export declare function visualScaleOf(element: Element | null | undefined): number;
+/** The scale the paper a node is drawn on is being read at */
+export declare function pageScaleAround(node: Element): number;

package/dist/styles/visualScale.js

@@ -0,0 +1,26 @@
+// src/styles/visualScale.ts
+import { editorClassNames } from "./classNames.js";
+var HORIZONTAL_SCALE = /^(?:matrix3d|matrix|scale3d|scaleX|scale)\(\s*(-?\d*\.?\d+(?:e[+-]?\d+)?)/i;
+function styleOf(element) {
+  const view = element.ownerDocument.defaultView;
+  return view ? view.getComputedStyle(element) : null;
+}
+function ownScale(element) {
+  const matched = HORIZONTAL_SCALE.exec(styleOf(element)?.transform ?? "");
+  const scale = Number.parseFloat(matched?.[1] ?? "");
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+function visualScaleOf(element) {
+  let scale = 1;
+  for (let at = element ?? null; at !== null; at = at.parentElement) {
+    scale *= ownScale(at);
+  }
+  return scale;
+}
+function pageScaleAround(node) {
+  return visualScaleOf(node.closest(`.${editorClassNames.pageLayer}`));
+}
+export {
+  pageScaleAround,
+  visualScaleOf
+};