@portone/docx-editor 0.1.0

package/dist/editor/views/imageResize.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Image node view with aspect-ratio-locked corner resizing. Dragging previews in the DOM and
+ * commits one EMU transaction on release so undo history receives a single step.
+ */
+import { type Node as PMNode } from "prosemirror-model";
+import type { EditorState, Transaction } from "prosemirror-state";
+import type { EditorView, NodeView } from "prosemirror-view";
+/** The corners an image can be grabbed by */
+declare const CORNERS: readonly ["nw", "ne", "sw", "se"];
+export type ImageCorner = (typeof CORNERS)[number];
+/** A size on screen, in pixels */
+export interface ImageSizePx {
+    width: number;
+    height: number;
+}
+/**
+ * The size a corner drag asks for, with the ratio locked.
+ *
+ * The two distances are turned into relative ones and averaged into a single scale. That
+ * way a drag along the image's own diagonal follows the pointer exactly, and a drag along
+ * one axis alone still resizes.
+ */
+export declare function resizedImagePx(start: ImageSizePx, corner: ImageCorner, dx: number, dy: number): ImageSizePx;
+/**
+ * Records a new display size on the image at this position.
+ * Null when there is no image there, or when the size is the one it already holds, so a
+ * drag that moved nothing leaves no step in the history.
+ */
+export declare function buildResizeImageTransaction(state: EditorState, pos: number, size: ImageSizePx): Transaction | null;
+export declare class ImageNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    private readonly view;
+    private readonly getPos;
+    private readonly img;
+    private node;
+    private drag;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined);
+    update(node: PMNode): boolean;
+    /** Only an editable image shows its handles: there is nothing to drag in a read-only document */
+    selectNode(): void;
+    deselectNode(): void;
+    /** A press on a handle is ours alone. It must not move the selection or start a drag of the image */
+    stopEvent(event: Event): boolean;
+    destroy(): void;
+    /** The size the image stands at now: the one the document records, or the drawn size when it records none */
+    private currentSizePx;
+    private readonly onMouseDown;
+    private readonly onMove;
+    private readonly onUp;
+    private readonly onKey;
+    private stopDrag;
+}
+export {};

package/dist/editor/views/imageResize.js

@@ -0,0 +1,167 @@
+// src/editor/views/imageResize.ts
+import { DOMSerializer } from "prosemirror-model";
+import { emuToPx, pxToEmu, toImageExtent } from "../../ooxml/image.js";
+import { docxSchema, imageNodeSpec } from "../../schema/index.js";
+import { editorAttributes, editorClassNames } from "../../styles/classNames.js";
+var CORNERS = ["nw", "ne", "sw", "se"];
+var MIN_IMAGE_PX = 16;
+function resizedImagePx(start, corner, dx, dy) {
+  const sideways = (corner === "ne" || corner === "se" ? dx : -dx) / start.width;
+  const downward = (corner === "sw" || corner === "se" ? dy : -dy) / start.height;
+  const scale = Math.max(
+    1 + (sideways + downward) / 2,
+    MIN_IMAGE_PX / start.width,
+    MIN_IMAGE_PX / start.height
+  );
+  return {
+    width: Math.round(start.width * scale),
+    height: Math.round(start.height * scale)
+  };
+}
+function buildResizeImageTransaction(state, pos, size) {
+  const node = state.doc.nodeAt(pos);
+  if (node?.type !== docxSchema.nodes.image) return null;
+  const extent = { cx: pxToEmu(size.width), cy: pxToEmu(size.height) };
+  const current = toImageExtent(node.attrs.extent);
+  if (current?.cx === extent.cx && current.cy === extent.cy) return null;
+  return state.tr.setNodeMarkup(pos, void 0, { ...node.attrs, extent });
+}
+function renderImage(node) {
+  const { dom } = DOMSerializer.renderSpec(document, imageNodeSpec(node.attrs));
+  if (!(dom instanceof HTMLImageElement)) {
+    throw new Error("the image was not rendered as an img element");
+  }
+  return dom;
+}
+function syncAttributes(img, node) {
+  const next = renderImage(node);
+  for (const name of img.getAttributeNames()) {
+    if (!next.hasAttribute(name)) img.removeAttribute(name);
+  }
+  for (const name of next.getAttributeNames()) {
+    const value = next.getAttribute(name) ?? "";
+    if (img.getAttribute(name) !== value) img.setAttribute(name, value);
+  }
+}
+function handleElement(corner) {
+  const handle = document.createElement("span");
+  handle.className = editorClassNames.imageHandle;
+  handle.setAttribute(editorAttributes.imageCorner, corner);
+  return handle;
+}
+function cornerAt(target) {
+  const element = target instanceof Element ? target : null;
+  const corner = element?.getAttribute(editorAttributes.imageCorner);
+  return CORNERS.find((one) => one === corner) ?? null;
+}
+function showSize(img, size) {
+  img.width = size.width;
+  img.height = size.height;
+}
+var ImageNodeView = class {
+  dom;
+  view;
+  getPos;
+  img;
+  node;
+  drag = null;
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.img = renderImage(node);
+    this.dom = document.createElement("span");
+    this.dom.className = editorClassNames.imageBox;
+    this.dom.append(this.img, ...CORNERS.map(handleElement));
+    this.dom.addEventListener("mousedown", this.onMouseDown);
+  }
+  update(node) {
+    if (node.type !== this.node.type) return false;
+    this.node = node;
+    syncAttributes(this.img, node);
+    return true;
+  }
+  /** Only an editable image shows its handles: there is nothing to drag in a read-only document */
+  selectNode() {
+    if (this.view.editable) {
+      this.dom.classList.add(editorClassNames.imageSelected);
+    }
+  }
+  deselectNode() {
+    this.dom.classList.remove(editorClassNames.imageSelected);
+  }
+  /** A press on a handle is ours alone. It must not move the selection or start a drag of the image */
+  stopEvent(event) {
+    return cornerAt(event.target) !== null;
+  }
+  destroy() {
+    this.stopDrag();
+    this.dom.removeEventListener("mousedown", this.onMouseDown);
+  }
+  /** The size the image stands at now: the one the document records, or the drawn size when it records none */
+  currentSizePx() {
+    const extent = toImageExtent(this.node.attrs.extent);
+    if (extent) {
+      return { width: emuToPx(extent.cx), height: emuToPx(extent.cy) };
+    }
+    const rect = this.img.getBoundingClientRect();
+    if (!(rect.width > 0) || !(rect.height > 0)) return null;
+    return { width: rect.width, height: rect.height };
+  }
+  onMouseDown = (event) => {
+    const corner = cornerAt(event.target);
+    if (corner === null || this.drag || event.button !== 0) return;
+    if (!this.view.editable) return;
+    const start = this.currentSizePx();
+    if (!start) return;
+    event.preventDefault();
+    this.drag = {
+      corner,
+      startX: event.clientX,
+      startY: event.clientY,
+      start,
+      size: start
+    };
+    window.addEventListener("mousemove", this.onMove, true);
+    window.addEventListener("mouseup", this.onUp, true);
+    window.addEventListener("keydown", this.onKey, true);
+  };
+  onMove = (event) => {
+    const drag = this.drag;
+    if (!drag) return;
+    event.preventDefault();
+    drag.size = resizedImagePx(
+      drag.start,
+      drag.corner,
+      event.clientX - drag.startX,
+      event.clientY - drag.startY
+    );
+    showSize(this.img, drag.size);
+  };
+  onUp = () => {
+    const size = this.drag?.size;
+    const pos = this.getPos();
+    this.stopDrag();
+    if (!size || pos === void 0) return;
+    const tr = buildResizeImageTransaction(this.view.state, pos, size);
+    if (tr) this.view.dispatch(tr);
+  };
+  onKey = (event) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    this.stopDrag();
+  };
+  stopDrag() {
+    if (!this.drag) return;
+    window.removeEventListener("mousemove", this.onMove, true);
+    window.removeEventListener("mouseup", this.onUp, true);
+    window.removeEventListener("keydown", this.onKey, true);
+    this.drag = null;
+    syncAttributes(this.img, this.node);
+  }
+};
+export {
+  ImageNodeView,
+  buildResizeImageTransaction,
+  resizedImagePx
+};

package/dist/editor/views/runMarkView.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Draws the run spans inside one editor.
+ *
+ * The fallback fonts belong to the editor, not to the schema: the schema is one
+ * shared value, so its `toDOM` can only ever draw with the default fallbacks.
+ * A mark view is where the view gets to draw a run itself, so the fallbacks handed
+ * to this editor are the ones that apply.
+ *
+ * The span is built from the same spec `toDOM` returns and rendered by the same
+ * renderer, so with the default fallbacks the DOM is exactly what the schema would
+ * have drawn.
+ */
+import type { MarkViewConstructor } from "prosemirror-view";
+import type { FontFallbacks } from "../../styles/fontStack";
+export declare function runMarkView(fontFallbacks: FontFallbacks): MarkViewConstructor;

package/dist/editor/views/runMarkView.js

@@ -0,0 +1,9 @@
+// src/editor/views/runMarkView.ts
+import { DOMSerializer } from "prosemirror-model";
+import { runMarkSpec } from "../../schema/index.js";
+function runMarkView(fontFallbacks) {
+  return (mark) => DOMSerializer.renderSpec(document, runMarkSpec(mark.attrs, fontFallbacks));
+}
+export {
+  runMarkView
+};

package/dist/editor/views/tableView.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Renders a table from the schema's `toDOM`, and keeps ProseMirror from reverting the `colgroup`
+ * we edit ourselves while column widths are being dragged.
+ *
+ * When an attribute changes inside the editor DOM, ProseMirror treats it as "DOM out of sync
+ * with the document" and redraws that spot from the document. That is why the `col` widths
+ * written by the preview get wiped on the next microtask, and dragging moves nothing on screen.
+ * `prosemirror-tables`' `TableView` does the same thing for the same reason (MIT; we borrowed
+ * only the approach).
+ */
+import { type Node as PMNode } from "prosemirror-model";
+import type { NodeView, ViewMutationRecord } from "prosemirror-view";
+export declare class TableNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    readonly contentDOM: HTMLElement | undefined;
+    /** A table whose grid is unknown has no colgroup */
+    private readonly colgroup;
+    constructor(node: PMNode);
+    /**
+     * Attribute changes on the table and its grid are ones we made ourselves, so they are not
+     * re-read from the document. Changes that happen inside cells are seen by ProseMirror as usual.
+     */
+    ignoreMutation(record: ViewMutationRecord): boolean;
+}

package/dist/editor/views/tableView.js

@@ -0,0 +1,32 @@
+// src/editor/views/tableView.ts
+import { DOMSerializer } from "prosemirror-model";
+var TableNodeView = class {
+  dom;
+  contentDOM;
+  /** A table whose grid is unknown has no colgroup */
+  colgroup;
+  constructor(node) {
+    const toDOM = node.type.spec.toDOM;
+    if (!toDOM) {
+      throw new Error("the schema has no way to render a table");
+    }
+    const rendered = DOMSerializer.renderSpec(document, toDOM(node));
+    if (!(rendered.dom instanceof HTMLElement)) {
+      throw new Error("the table was not rendered as an element");
+    }
+    this.dom = rendered.dom;
+    this.contentDOM = rendered.contentDOM;
+    this.colgroup = this.dom.querySelector(":scope > colgroup");
+  }
+  /**
+   * Attribute changes on the table and its grid are ones we made ourselves, so they are not
+   * re-read from the document. Changes that happen inside cells are seen by ProseMirror as usual.
+   */
+  ignoreMutation(record) {
+    if (record.type !== "attributes") return false;
+    return record.target === this.dom || this.colgroup?.contains(record.target) === true;
+  }
+};
+export {
+  TableNodeView
+};

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The React editor surface: the editor component, the download helper, and the
+ * document structure and format values those two hand out.
+ *
+ * The engine underneath is the `./core` entry, which knows nothing about React
+ * or the DOM. The ProseMirror handles re-exported here are the ones from the
+ * copy the editor itself runs on, which is the consumer's own copy: the packages
+ * are peer dependencies.
+ * `docs/architecture.md` has the line between the two entries and why the one
+ * copy matters.
+ */
+export type { Command } from "prosemirror-state";
+export { EditorState, Plugin, PluginKey, TextSelection, } from "prosemirror-state";
+export { EditorView } from "prosemirror-view";
+export type { DocxEditorHandle, DocxEditorMode, DocxEditorProps, } from "./DocxEditor";
+export { DocxEditor } from "./DocxEditor";
+export type { DocxBytes, DocxSource } from "./docx/importDocx";
+export type { DownloadDocxOptions, DownloadDocxResult, } from "./download";
+export { downloadDocx } from "./download";
+export type { CommentAuthor } from "./editor/commands/commentCommands";
+export type { CellFormat, CellVerticalAlign, DocumentDefaults, HighlightName, LineSpacing, NumberingRef, ParagraphAlign, ParagraphFormat, RowFormat, RowHeight, RunFormat, TableFormat, TableWidth, TableWidthType, UnderlineKind, VerticalAlign, } from "./model/format";
+export type { DocxExportErrorCode, DocxImportErrorCode, } from "./ooxml/errors";
+export { DocxExportError, DocxImportError } from "./ooxml/errors";
+export { docxSchema } from "./schema";
+/**
+ * The lists the built-in pickers offer. They are exported so that a toolbar of your own can
+ * offer the same ones without writing them out again; the pickers themselves read these very
+ * lists, so there is only ever one of each.
+ * A list of your own goes back the other way through `presets` on `DocxEditor`, which the
+ * built-in pickers then offer in place of these.
+ */
+export type { ColorRow } from "./styles/colors";
+export { DEFAULT_COLORS } from "./styles/colors";
+export { DEFAULT_FONT_SIZES } from "./styles/fontSizes";
+export type { FontFallbackGroup, FontFallbacks } from "./styles/fontStack";
+export { DEFAULT_FONT_FALLBACKS } from "./styles/fontStack";
+export { DEFAULT_FONTS } from "./styles/fonts";
+export type { LineSpacingOption } from "./styles/lineSpacings";
+export { DEFAULT_LINE_SPACINGS } from "./styles/lineSpacings";
+export type { CellBorderOption } from "./table/cellBorders";
+export { DEFAULT_CELL_BORDERS } from "./table/cellBorders";
+export type { DocxEditorPresets } from "./ui/presets";
+export type { DocxEditorZoom } from "./ui/zoom";
+export { DEFAULT_ZOOM_LEVELS } from "./ui/zoom";

package/dist/index.js

@@ -0,0 +1,38 @@
+// src/index.ts
+import {
+  EditorState,
+  Plugin,
+  PluginKey,
+  TextSelection
+} from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { DocxEditor } from "./DocxEditor.js";
+import { downloadDocx } from "./download.js";
+import { DocxExportError, DocxImportError } from "./ooxml/errors.js";
+import { docxSchema } from "./schema/index.js";
+import { DEFAULT_COLORS } from "./styles/colors.js";
+import { DEFAULT_FONT_SIZES } from "./styles/fontSizes.js";
+import { DEFAULT_FONT_FALLBACKS } from "./styles/fontStack.js";
+import { DEFAULT_FONTS } from "./styles/fonts.js";
+import { DEFAULT_LINE_SPACINGS } from "./styles/lineSpacings.js";
+import { DEFAULT_CELL_BORDERS } from "./table/cellBorders.js";
+import { DEFAULT_ZOOM_LEVELS } from "./ui/zoom.js";
+export {
+  DEFAULT_CELL_BORDERS,
+  DEFAULT_COLORS,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_FALLBACKS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_LINE_SPACINGS,
+  DEFAULT_ZOOM_LEVELS,
+  DocxEditor,
+  DocxExportError,
+  DocxImportError,
+  EditorState,
+  EditorView,
+  Plugin,
+  PluginKey,
+  TextSelection,
+  docxSchema,
+  downloadDocx
+};

package/dist/model/format.d.ts

@@ -0,0 +1,240 @@
+/**
+ * The formatting values to render on screen, and the checks that they have the shape
+ * they should.
+ *
+ * These values are produced by reading the original formatting XML (`w:pPr`, `w:rPr`,
+ * `w:tblPr`, ...) and are only ever used for rendering. What goes back into the document
+ * is always the original XML string.
+ *
+ * A value enters as a node attribute, leaves for the DOM as `data-fmt`, and comes back
+ * in again. So that a value tampered with along that path cannot leak into a CSS
+ * declaration, the checks that let through only the shapes the read functions produce
+ * live here alongside them.
+ */
+import type { TabStop } from "./tabStops";
+declare const ALIGNS: readonly ["left", "center", "right", "justify"];
+export type ParagraphAlign = (typeof ALIGNS)[number];
+declare const VERTICAL_ALIGNS: readonly ["superscript", "subscript"];
+export type VerticalAlign = (typeof VERTICAL_ALIGNS)[number];
+declare const CELL_VERTICAL_ALIGNS: readonly ["top", "center", "bottom"];
+export type CellVerticalAlign = (typeof CELL_VERTICAL_ALIGNS)[number];
+/**
+ * The fill of something whose document says to paint nothing (`w:shd w:fill="auto"`).
+ * A fill nobody mentioned is absent instead, so a style's fill comes back only in that case.
+ * The lines use the same word for the same reason.
+ */
+export declare const NO_FILL = "none";
+/**
+ * The underline kinds OOXML defines (`ST_Underline`). "No underline" (`none`) is not
+ * included
+ */
+declare const UNDERLINES: readonly ["single", "words", "double", "thick", "dotted", "dottedHeavy", "dash", "dashedHeavy", "dashLong", "dashLongHeavy", "dotDash", "dashDotHeavy", "dotDotDash", "dashDotDotHeavy", "wave", "wavyHeavy", "wavyDouble"];
+export type UnderlineKind = (typeof UNDERLINES)[number];
+/**
+ * The highlight names OOXML defines (`ST_HighlightColor`). "No highlight" (`none`) is
+ * not included
+ */
+declare const HIGHLIGHTS: readonly ["black", "blue", "cyan", "darkBlue", "darkCyan", "darkGray", "darkGreen", "darkMagenta", "darkRed", "darkYellow", "green", "lightGray", "magenta", "red", "white", "yellow"];
+export type HighlightName = (typeof HIGHLIGHTS)[number];
+export declare function isUnderlineKind(value: unknown): value is UnderlineKind;
+export declare function isHighlightName(value: unknown): value is HighlightName;
+/**
+ * The width a table or a cell has recorded.
+ * `auto` and `nil` leave the width up to the layout, so they carry no number at all.
+ */
+export type TableWidth = {
+    type: "dxa";
+    twips: number;
+} | {
+    type: "pct";
+    fiftieths: number;
+} | {
+    type: "auto";
+} | {
+    type: "nil";
+};
+export type TableWidthType = TableWidth["type"];
+/** The number a width records, in the unit its type names */
+export declare function widthNumber(width: TableWidth): number | null;
+export declare function withWidthNumber(width: TableWidth, value: number): TableWidth;
+/**
+ * Line spacing.
+ * `auto` states a multiple of one line's height; the others pin the height down in
+ * points.
+ */
+export type LineSpacing = {
+    rule: "auto";
+    lines: number;
+} | {
+    rule: "exact";
+    pt: number;
+} | {
+    rule: "atLeast";
+    pt: number;
+};
+/**
+ * Which list this paragraph belongs to and which of its levels it sits at. The number
+ * itself is computed at render time
+ */
+export interface NumberingRef {
+    numId: number;
+    ilvl: number;
+}
+/** The paragraph formatting to render on screen. Lengths are in points */
+export interface ParagraphFormat {
+    align?: ParagraphAlign;
+    /** The paragraph's logical text direction (`w:bidi`). */
+    direction?: "ltr" | "rtl";
+    indentLeftPt?: number;
+    indentRightPt?: number;
+    /** Logical leading and trailing indents from Strict `w:start` and `w:end`. */
+    indentStartPt?: number;
+    indentEndPt?: number;
+    /** Positive when only the first line is indented further, negative for a hanging indent */
+    textIndentPt?: number;
+    spaceBeforePt?: number;
+    spaceAfterPt?: number;
+    lineSpacing?: LineSpacing;
+    numbering?: NumberingRef;
+    /** Effective custom tab stops after the paragraph-property hierarchy is resolved. */
+    tabStops?: readonly TabStop[];
+    /**
+     * Set when the document records that a new page starts at this paragraph. Read by the
+     * page boundary guides
+     */
+    pageBreakBefore?: true;
+    /** A CSS border in the form `1pt solid #000000` */
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    background?: string;
+}
+/** The character formatting to render on screen */
+export interface RunFormat {
+    bold?: true;
+    italic?: true;
+    /** The underline kind. Absent entirely when there is no underline */
+    underline?: UnderlineKind;
+    strike?: true;
+    smallCaps?: true;
+    fontSizePt?: number;
+    /** A CSS font name list in the form `"맑은 고딕","Malgun Gothic"` */
+    fontFamily?: string;
+    color?: string;
+    highlight?: HighlightName;
+    background?: string;
+    verticalAlign?: VerticalAlign;
+    /**
+     * The language the run records (`w:lang`), drawn as the `lang` attribute of its span.
+     * Han characters are written differently in Japanese, in simplified Chinese and in
+     * traditional Chinese, and this is the only thing that tells the browser which of
+     * those shapes to draw. It is read for display only and never written back.
+     */
+    lang?: string;
+}
+/**
+ * The table formatting to render on screen. The inner lines between cells are folded
+ * into the cell formatting
+ */
+export interface TableFormat {
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    background?: string;
+    align?: ParagraphAlign;
+    indentLeftPt?: number;
+}
+/**
+ * The lines that divide the inside of a table (`insideH`, `insideV`).
+ * They are held by the table but drawn by the cells, so they become the defaults for cell
+ * formatting. A side with nothing written down is null.
+ */
+export interface InsideBorders {
+    horizontal: string | null;
+    vertical: string | null;
+}
+/**
+ * The cell margins a table or its style lays down, in points, one per side.
+ * They are held by the table but drawn by the cells, so they become the padding a cell
+ * that wrote none of its own falls back on. A side with nothing written down is null.
+ */
+export interface CellMargins {
+    topPt: number | null;
+    rightPt: number | null;
+    bottomPt: number | null;
+    leftPt: number | null;
+}
+/**
+ * How high a row stands, in points.
+ * `atLeast` is a floor the row grows past when its text needs the room, and `exact` pins
+ * the height down.
+ */
+export type RowHeight = {
+    rule: "atLeast";
+    pt: number;
+} | {
+    rule: "exact";
+    pt: number;
+};
+/** The formatting of a single table row to render on screen */
+export interface RowFormat {
+    /** What `w:trHeight` writes down */
+    height?: RowHeight;
+    /** Whether this row is repeated at the top of a continued table */
+    repeatHeader?: boolean;
+    /** Whether this row must stay whole when the table continues on another page */
+    cantSplit?: boolean;
+}
+/** The formatting of a single table cell to render on screen */
+export interface CellFormat {
+    borderTop?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderRight?: string;
+    background?: string;
+    verticalAlign?: CellVerticalAlign;
+    paddingTopPt?: number;
+    paddingRightPt?: number;
+    paddingBottomPt?: number;
+    paddingLeftPt?: number;
+}
+/**
+ * The defaults that apply to the whole document. Null when absent; the on-screen
+ * fallback is decided by the presentation layer
+ */
+export interface DocumentDefaults {
+    fontSizePt: number | null;
+    fontFamily: string | null;
+    lineSpacing: LineSpacing | null;
+}
+export declare function toParagraphFormat(value: unknown): ParagraphFormat | null;
+export declare function toRunFormat(value: unknown): RunFormat | null;
+export declare function toTableWidth(value: unknown): TableWidth | null;
+/** The sequence of column widths (dxa) that `w:tblGrid` defines */
+export declare function toGridCols(value: unknown): number[];
+/** The cell widths (px) `prosemirror-tables` uses. Our documents usually leave it empty */
+export declare function toColWidth(value: unknown): number[] | null;
+export declare function toTableFormat(value: unknown): TableFormat | null;
+/**
+ * The inside lines a table style laid down, as they come back in from `data-style-inside`.
+ * A table with no line on either side is the same as the attribute not being there at all,
+ * so it is null.
+ */
+export declare function toInsideBorders(value: unknown): InsideBorders | null;
+/**
+ * The cell margins a table style laid down, as they come back in from `data-style-margins`.
+ * A table with a margin on none of its four sides is the same as the attribute not being
+ * there at all, so it is null.
+ */
+export declare function toCellMargins(value: unknown): CellMargins | null;
+export declare function toRowFormat(value: unknown): RowFormat | null;
+export declare function toCellFormat(value: unknown): CellFormat | null;
+/**
+ * A merge count (colspan, rowspan).
+ * Because it feeds grid arithmetic and loop steps, only positive integers are let
+ * through. The fallback of 1 means "not merged".
+ */
+export declare function spanCount(value: unknown): number;
+export {};