@portone/docx-editor 0.2.1 → 0.4.0

package/dist/schema/guards.d.ts

@@ -12,14 +12,16 @@
  * `./editGuard` so that a module writing a guard need not read this one, and is handed on from
  * here so that a caller has one door to the whole seam.
  *
- * `editShut` is not yet what every command asks. Only `editor/commands/breakCommands`,
- * `editor/commands/tabCommands` and `editor/insertImage` ask it today; the rest still compose
- * `editsShut` with a lock predicate of their own (`./locks`), and each decides for itself whether
- * a stretch a guard shuts is trimmed out of the edit or refuses the whole of it. Until they move
- * over, a guard added to the list below reaches those commands through `transactionAllowed` alone,
- * which refuses the transaction they built rather than telling them not to build it.
+ * A command decides nothing of its own about any of this. It takes one of the two shapes an edit
+ * comes in - `guardedCommand`, which builds the whole edit and is refused whole, and
+ * `openStretches`, which leaves the shut stretches out and applies to the rest - and both ask the
+ * list below. A guard registered here therefore reaches every command by being registered, rather
+ * than by each command being taught about it.
+ *
+ * `editsShut` (`./protectionState`) stays what it was, the view-level question of whether the body
+ * is open at all, which is a question about the editor rather than about an edit.
  */
-import type { EditorState, Selection, Transaction } from "prosemirror-state";
+import type { Command, EditorState, Selection, Transaction } from "prosemirror-state";
 import { type EditGuard, type EditIntent } from "./editGuard";
 import { type ProtectionState } from "./protection";
 export type { EditGuard, EditGuardName, EditIntent } from "./editGuard";
@@ -47,9 +49,10 @@ export declare const EDIT_GUARDS: readonly EditGuard[];
  * decision stands apart from it and every caller building an edit asks this rather than handing
  * the transaction to a state.
  *
- * The whole-change judgements come first and take no pass, since a pass lifts one guard's reading
- * of a step rather than another guard's reading of the change. What is left is judged step by
- * step, each step over the document it was built against.
+ * A re-derivation of display values is no edit and is let through before any guard is asked. The
+ * whole-change judgements then come first and take no pass, since a pass lifts one guard's
+ * reading of a step rather than another guard's reading of the change. What is left is judged
+ * step by step, each step over the document it was built against.
  */
 export declare function transactionAllowed(tr: Transaction, state: EditorState): boolean;
 /**
@@ -59,10 +62,30 @@ export declare function transactionAllowed(tr: Transaction, state: EditorState):
  * being refused by the guard draws a live control that swallows the click.
  */
 export declare function editShut(state: EditorState, intent: EditIntent): boolean;
+/** What a command doing this to whatever is selected means to do, one intent per selected stretch */
+export declare function selectionIntents(selection: Selection, kind: "mark" | "replace"): EditIntent[];
 /**
- * What a command doing this to whatever is selected means to do, one intent per selected stretch.
+ * Build, guard, dispatch: the one shape of a command that is refused whole.
  *
- * A stretch of no length holds nothing to mark or to put away, so whatever the command would do to
- * a stretch it is an insertion there.
+ * A structural edit has no smaller piece to fall back on - half a row cannot be deleted, and half a
+ * block of cells cannot be merged into one - so the whole transaction is built, handed to the whole
+ * guard list, and dispatched only if it comes back allowed. A character or a paragraph edit does
+ * the opposite and leaves the shut stretches out (`openStretches`).
+ *
+ * The answer is the same whether or not `dispatch` was passed. The transaction is built before
+ * either way, so asking the guard costs nothing more, and a command reporting one thing to a button
+ * and doing another would be worse than the button being wrong.
  */
-export declare function selectionIntents(selection: Selection, kind: "mark" | "replace"): EditIntent[];
+export declare function guardedCommand(build: (state: EditorState) => Transaction | null): Command;
+/**
+ * The stretches the guards leave open, which is the one shape of a command that is trimmed.
+ *
+ * A shut stretch is left out rather than the whole edit refused: a guard turns down the whole
+ * transaction, so asking for the shut stretch as well would leave the rest of the selection
+ * unedited too. A selection the guards leave nothing of edits nothing, and the command reports that
+ * of its own accord, which is the disabled state of the control that runs it.
+ */
+export declare function openStretches<S extends {
+    from: number;
+    to: number;
+}>(state: EditorState, stretches: readonly S[], kind: "mark" | "replace"): S[];

package/dist/schema/guards.js

@@ -1,9 +1,10 @@
 // src/schema/guards.ts
+import { changesOnlyDisplayAttrs, displayOnly } from "./displayDerivation.js";
 import {
   transactionReaches
 } from "./editGuard.js";
 import { lockGuard } from "./locks.js";
-import { bookmarkGuard, noteGuard } from "./preservedGuards.js";
+import { bookmarkGuard, noteGuard, sectionGuard } from "./preservedGuards.js";
 import {
   isCommentNode,
   protectionAllows
@@ -36,7 +37,8 @@ var EDIT_GUARDS = [
   protectionGuard,
   lockGuard,
   bookmarkGuard,
-  noteGuard
+  noteGuard,
+  sectionGuard
 ];
 function judgesSteps(guard) {
   return guard.step !== void 0;
@@ -44,8 +46,14 @@ function judgesSteps(guard) {
 function lifted(guard, tr) {
   return guard.liftedBy?.some((pass) => tr.getMeta(pass) === true) === true;
 }
+function displayOnlyTransaction(tr, state) {
+  return tr.getMeta(displayOnly) === true && tr.steps.every(
+    (step, index) => changesOnlyDisplayAttrs(step, tr.docs[index] ?? state.doc)
+  );
+}
 function transactionAllowed(tr, state) {
   if (!tr.docChanged) return true;
+  if (displayOnlyTransaction(tr, state)) return true;
   if (EDIT_GUARDS.some((guard) => guard.change?.(tr, state) === false)) {
     return false;
   }
@@ -66,14 +74,32 @@ function transactionAllowed(tr, state) {
 function editShut(state, intent) {
   return EDIT_GUARDS.some((guard) => guard.shuts(intent, state));
 }
+function intentOver(from, to, kind) {
+  return from === to ? { kind: "insert", at: from } : { kind, from, to };
+}
 function selectionIntents(selection, kind) {
   return selection.ranges.map(
-    (range) => range.$from.pos === range.$to.pos ? { kind: "insert", at: range.$from.pos } : { kind, from: range.$from.pos, to: range.$to.pos }
+    (range) => intentOver(range.$from.pos, range.$to.pos, kind)
+  );
+}
+function guardedCommand(build) {
+  return (state, dispatch) => {
+    const tr = build(state);
+    if (tr === null || !transactionAllowed(tr, state)) return false;
+    dispatch?.(tr);
+    return true;
+  };
+}
+function openStretches(state, stretches, kind) {
+  return stretches.filter(
+    (stretch) => !editShut(state, intentOver(stretch.from, stretch.to, kind))
   );
 }
 export {
   EDIT_GUARDS,
   editShut,
+  guardedCommand,
+  openStretches,
   protectionAllowsTransaction,
   selectionIntents,
   stepReaches,

package/dist/schema/index.d.ts

@@ -1,2 +1,4 @@
+export type { AttrClass } from "./attrRoles";
+export { attrsOfClass } from "./attrRoles";
 export { docxSchema, isPageBreak } from "./docxSchema";
 export { imageNodeSpec, runMarkSpec } from "./rendering";

package/dist/schema/index.js

@@ -1,7 +1,9 @@
 // src/schema/index.ts
+import { attrsOfClass } from "./attrRoles.js";
 import { docxSchema, isPageBreak } from "./docxSchema.js";
 import { imageNodeSpec, runMarkSpec } from "./rendering.js";
 export {
+  attrsOfClass,
   docxSchema,
   imageNodeSpec,
   isPageBreak,

package/dist/schema/locks.d.ts

@@ -1,9 +1,10 @@
 /**
- * Evaluates OOXML content and deletion locks for inline controls and whole table cells. Commands
- * query these predicates before editing; `editor/plugins/lockedContent` enforces them at runtime.
+ * Evaluates OOXML content and deletion locks for inline controls and whole table cells.
  *
- * `lockGuard` is what `./guards` registers all of this as, so that a caller asking the one guard
- * list asks the locks along with every other rule an edit is judged by.
+ * `lockGuard` is what `./guards` registers all of this as, and it is the only way in: a caller
+ * asking about a lock asks the one guard list, which asks the locks along with every other rule an
+ * edit is judged by. What a lock says about a whole document or a whole selection - a question
+ * about the document rather than about an edit - is exported beside it.
  */
 import type { Mark, Node as PMNode } from "prosemirror-model";
 import { PluginKey, type Selection } from "prosemirror-state";
@@ -58,51 +59,17 @@ export interface ControlSpan extends StepRange {
  */
 export declare function controlSpans(block: Textblock): ControlSpan[];
 /**
- * Whether what stands at this position sits inside a cell a control shuts.
+ * Whether a lock shuts editing where this selection stands, which is what a menu that would lift a
+ * lock is built on (`editor/commands/lockCommands`).
  *
- * This is the question a paragraph edit leaves its locked paragraphs out by
- * (`editor/paragraphEdits`), and it is deliberately not `rangeTouchesLocked` over the paragraph:
- * a paragraph merely holding a locked control keeps its own alignment and indent.
- */
-export declare function insideLockedCell(doc: PMNode, pos: number): boolean;
-/**
- * Whether this stretch reaches contents a lock shuts: text inside a control that shuts its
- * contents, or what a locked cell holds, the cell itself included.
- *
- * This is the question about editing what stands there rather than about taking it away, so every
- * control the stretch meets answers with its contents clause. The lock commands and the formatting
- * commands ask it of the stretch they are about to mark, so it is exported.
- */
-export declare function rangeTouchesLocked(doc: PMNode, from: number, to: number): boolean;
-/**
- * Whether something inserted at this spot would land inside a locked control or a locked cell.
- *
- * Only a spot with the very same control on both sides is inside one. At either edge the other
- * side belongs to a different control or to none, and since the mark is not inclusive what goes
- * in there falls outside the control.
- */
-export declare function insertionInsideLocked(doc: PMNode, pos: number): boolean;
-/**
- * Whether the guard shuts editing where this selection stands.
- *
- * This is the question a command that rewrites whatever is selected has to ask before it reports
- * that it applies (`editor/insertImage`), and the one a menu offering to lift a lock is built on
- * (`editor/commands/lockCommands`). A caret is shut by standing inside a control rather than
- * against its edge, which is the same rule an insertion follows.
+ * This is a reading of the selection rather than of an edit - the lock guard answers an edit
+ * (`./guards`) - and it names the locks alone, which is what the menu says. A caret is shut by
+ * standing inside a control rather than against its edge, which is the same rule an insertion
+ * follows.
  * A control locked against deletion alone shuts nothing here: its contents stand open, so editing
  * where it stands goes through, and only taking the control away is refused.
  */
 export declare function selectionShut(selection: Selection, doc: PMNode): boolean;
-/**
- * Whether the guard would refuse putting something in place of what this selection covers, which
- * is what an image insertion does (`editor/insertImage`).
- *
- * A different question from `selectionShut`: what the selection covers whole goes away rather than
- * being edited, so the deletion clause answers for it. A control that may be taken away whole may
- * therefore be replaced, and one locked against deletion alone may not, even though editing inside
- * it would have gone through.
- */
-export declare function replacementShut(selection: Selection, doc: PMNode): boolean;
 /**
  * The locks the document carries, as `./guards` registers them.
  *

package/dist/schema/locks.js

@@ -127,11 +127,6 @@ function selectionShut(selection, doc) {
     (range) => markShut(doc, range.$from.pos, range.$to.pos)
   );
 }
-function replacementShut(selection, doc) {
-  return selection.ranges.some(
-    (range) => replaceShut(doc, range.$from.pos, range.$to.pos)
-  );
-}
 function editedRanges(step) {
   if (step instanceof ReplaceAroundStep) {
     return [
@@ -215,13 +210,9 @@ export {
   carriesLock,
   controlSpans,
   historyReplay,
-  insertionInsideLocked,
-  insideLockedCell,
   isLockedCell,
   lockGuard,
   lockedMarkOf,
-  rangeTouchesLocked,
-  replacementShut,
   selectionShut,
   unlockAllowed
 };

package/dist/schema/preservedGuards.d.ts

@@ -1,11 +1,13 @@
 /**
- * The guards over the nodes a document is opened with and the editor only preserves: the two ends
- * of a bookmark range, and the reference standing where a footnote or an endnote is called.
+ * The guards over what a document is opened with and the editor only preserves: the two ends of a
+ * bookmark range, the reference standing where a footnote or an endnote is called, and the
+ * paragraph that ends a section.
  *
- * Neither is content the editor writes, so nothing in it can put such a node 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 each guard holds is therefore the whole list of the nodes it
- * answers for, in the order the document carries them.
+ * 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.
  */
 import type { Node as PMNode } from "prosemirror-model";
 import { type ChangeGuard, type EditGuardName } from "./editGuard";
@@ -27,4 +29,22 @@ type Signature = (node: PMNode) => string;
 export declare function preservedNodeGuard(name: EditGuardName, holds: (node: PMNode) => boolean, signature: Signature): ChangeGuard;
 export declare const bookmarkGuard: 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.
+ *
+ * A paragraph-level `w:sectPr` is not content: it is where one section of the document ends, and
+ * the section carries the page size, the margins and the headers everything up to it is laid out
+ * under. Joining that paragraph into the one above it - a Backspace at its start, a selection run
+ * across its boundary - would take the whole section away with it, and nothing the editor writes
+ * puts a section back.
+ *
+ * It counts rather than compares, so splitting such a paragraph is still allowed: Enter leaves the
+ * break on the half that ends up last (`docx/cloning`), and one break stands where one stood. An
+ * edit that adds a break is no business of this guard's either.
+ *
+ * The count walks the whole document, so it is reached for only once a step has touched a
+ * paragraph that lays a break down.
+ */
+export declare const sectionGuard: ChangeGuard;
 export {};

package/dist/schema/preservedGuards.js

@@ -1,4 +1,5 @@
 // src/schema/preservedGuards.ts
+import { parseProps, propsChild } from "../ooxml/props.js";
 import {
   rangeHolds,
   transactionReaches
@@ -43,8 +44,37 @@ var noteGuard = preservedNodeGuard(
   isNoteReference,
   (node) => JSON.stringify(node.attrs)
 );
+function endsASection(node) {
+  if (node.type.name !== "paragraph") return false;
+  const pPr = node.attrs.pPr;
+  if (typeof pPr !== "string") return false;
+  const props = parseProps(pPr);
+  return props !== null && propsChild(props.children, "sectPr") !== void 0;
+}
+function sectionBreaks(doc) {
+  let seen = 0;
+  doc.descendants((node) => {
+    if (endsASection(node)) seen += 1;
+    return true;
+  });
+  return seen;
+}
+var sectionGuard = {
+  name: "section",
+  change: (tr) => !transactionReaches(tr, endsASection) || sectionBreaks(tr.doc) >= sectionBreaks(tr.before),
+  shuts: (intent, state) => {
+    if (intent.kind !== "replace") return false;
+    const $from = state.doc.resolve(intent.from);
+    const $to = state.doc.resolve(intent.to);
+    if ($from.parent.type.name === "paragraph" && $from.sameParent($to)) {
+      return false;
+    }
+    return rangeHolds(state.doc, intent.from, intent.to, endsASection);
+  }
+};
 export {
   bookmarkGuard,
   noteGuard,
-  preservedNodeGuard
+  preservedNodeGuard,
+  sectionGuard
 };

package/dist/schema/protection.d.ts

@@ -38,7 +38,13 @@ export declare function isCommentNode(node: PMNode): boolean;
  * reads the same as it did before the comment, and the two compare equal.
  */
 export declare function withoutComments(node: PMNode): PMNode;
-/** Whether the two documents differ in nothing but their comments */
+/**
+ * Whether the two documents differ in nothing but their comments.
+ *
+ * The comparison is by source (`./sourceEquality`): a display value worked out again beside a
+ * comment is no content change, so it neither turns a comment edit into a body edit nor takes the
+ * ownership question off it.
+ */
 export declare function changesOnlyComments(before: PMNode, after: PMNode): boolean;
 /**
  * Whether a comment written under this identity may be edited or deleted.

package/dist/schema/protection.js

@@ -1,5 +1,6 @@
 // src/schema/protection.ts
 import { Fragment } from "prosemirror-model";
+import { sameSource } from "./sourceEquality.js";
 var COMMENT_NODES = /* @__PURE__ */ new Set([
   "commentStart",
   "commentEnd",
@@ -17,7 +18,7 @@ function withoutComments(node) {
   return node.copy(Fragment.fromArray(kept));
 }
 function changesOnlyComments(before, after) {
-  return withoutComments(before).eq(withoutComments(after));
+  return sameSource(withoutComments(before), withoutComments(after));
 }
 function stringOrNull(value) {
   return typeof value === "string" ? value : null;

package/dist/schema/sourceEquality.d.ts

@@ -11,17 +11,9 @@
  * type, the text, the marks and the source and session attrs all have to agree, and the recursion
  * runs the same way, so a node that says the same thing in a different shape is still a change.
  */
-import { type Node as PMNode } from "prosemirror-model";
+import type { Node as PMNode } from "prosemirror-model";
 /**
  * Whether the two would write the same XML: the same type, text, marks and source attrs, all the
  * way down. What the editor works out for the screen is not compared.
  */
 export declare function sameSource(a: PMNode, b: PMNode): boolean;
-/**
- * The node with every worked-out attr back at the value the schema starts it on, on itself and on
- * everything inside it.
- *
- * `sameSource` needs no such copy, and takes none. This is for a caller that has to hand a whole
- * document to something comparing the ordinary way.
- */
-export declare function withoutDisplayAttrs(node: PMNode): PMNode;

package/dist/schema/sourceEquality.js

@@ -1,7 +1,4 @@
 // src/schema/sourceEquality.ts
-import {
-  Fragment
-} from "prosemirror-model";
 import { displayAttrsOf } from "./attrRoles.js";
 function sameValue(a, b) {
   if (a === b) return true;
@@ -37,29 +34,6 @@ function sameSource(a, b) {
   }
   return true;
 }
-function withoutDisplay(type, attrs) {
-  return Object.fromEntries(
-    Object.entries(attrs).map(
-      ([name, value]) => displayAttrsOf(type).includes(name) ? [name, type.spec.attrs?.[name]?.default ?? null] : [name, value]
-    )
-  );
-}
-function withoutDisplayMarkAttrs(mark) {
-  return displayAttrsOf(mark.type).length === 0 ? mark : mark.type.create(withoutDisplay(mark.type, mark.attrs));
-}
-var childrenOf = (node) => Array.from({ length: node.childCount }, (_, at) => node.child(at));
-function withoutDisplayAttrs(node) {
-  const marks = node.marks.map(withoutDisplayMarkAttrs);
-  if (node.isText) return node.mark(marks);
-  return node.type.create(
-    withoutDisplay(node.type, node.attrs),
-    Fragment.fromArray(
-      childrenOf(node).map((child) => withoutDisplayAttrs(child))
-    ),
-    marks
-  );
-}
 export {
-  sameSource,
-  withoutDisplayAttrs
+  sameSource
 };

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/inlineStyle.js

@@ -59,20 +59,29 @@ function lineHeightValue(spacing) {
   return `max(${pt(spacing.pt)},${SINGLE_LINE_RATIO}em)`;
 }
 function textDecoration(format) {
+  const underline = format.underline !== void 0 && format.underline !== "none" ? format.underline : void 0;
   const lines = [];
-  if (format.underline) lines.push("underline");
+  if (underline) lines.push("underline");
   if (format.strike) lines.push("line-through");
-  if (lines.length === 0) return [];
+  if (lines.length === 0) {
+    return format.underline === "none" || format.strike === false ? ["text-decoration-line:none"] : [];
+  }
   const css = [`text-decoration-line:${lines.join(" ")}`];
-  const style = format.underline ? UNDERLINE_STYLES[format.underline] : void 0;
+  const style = underline ? UNDERLINE_STYLES[underline] : void 0;
   if (style) css.push(`text-decoration-style:${style}`);
   return css;
 }
 function inheritedRunCss(format, fontFallbacks) {
   const css = [];
-  if (format.bold) css.push("font-weight:bold");
-  if (format.italic) css.push("font-style:italic");
-  if (format.smallCaps) css.push("font-variant:small-caps");
+  if (format.bold !== void 0) {
+    css.push(`font-weight:${format.bold ? "bold" : "normal"}`);
+  }
+  if (format.italic !== void 0) {
+    css.push(`font-style:${format.italic ? "italic" : "normal"}`);
+  }
+  if (format.smallCaps !== void 0) {
+    css.push(`font-variant:${format.smallCaps ? "small-caps" : "normal"}`);
+  }
   css.push(...textDecoration(format));
   if (format.fontSizePt !== void 0)
     css.push(`font-size:${pt(format.fontSizePt)}`);

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.d.ts

@@ -41,7 +41,14 @@ export declare function setCellBorders(preset: CellBorderPreset): TableCommand;
 export declare function setCellBorderColor(hex: string | null): TableCommand;
 /** Fills the selected cells with `#RRGGBB`. Null takes the fill away */
 export declare function setCellBackground(hex: string | null): TableCommand;
-/** Whether direct cell formatting can act on the whole current cell selection. */
+/**
+ * Whether direct cell formatting can act on the whole current cell selection.
+ *
+ * What a cell records about itself is rewritten around its content, which is the block intent the
+ * guards answer (`schema/guards`): a cell a control shuts is refused, and so is every cell while a
+ * protection shuts the body. The spot asked about stands inside the cell, since that is where the
+ * control wrapping it is an ancestor.
+ */
 export declare function canSetCellFormatting(state: EditorState): boolean;
 /** The fill shared by the selected cells. Null when they differ or none is filled */
 export declare function activeCellBackground(state: EditorState): string | null;