@portone/docx-editor 0.5.0 → 0.5.1

package/dist/docx/wrappers.d.ts

@@ -0,0 +1,67 @@
+/**
+ * The inline wrappers this editor takes apart and puts back together, one entry each.
+ *
+ * A wrapper is an element holding inline content that goes back out around the same content: a
+ * content control (`w:sdt`, §17.5.2.17), a hyperlink (`w:hyperlink`, §17.16.22). `EG_PContent`
+ * lets them nest in any order and any depth, so import reads the nesting as the file wrote it and
+ * export rebuilds it from the marks (`schema/wrappers` holds the order, `docx/importParagraph`
+ * reads, `docx/serializeParagraph` writes).
+ *
+ * A kind knows three things and nothing about either walk: what a mark reads out of one element,
+ * what opens it again, and what closes it. Tracked changes (`w:ins`, `w:del`) and simple fields
+ * (`w:fldSimple`) are wrappers of the same shape. Registering one is an entry here and a mark spec
+ * in `schema/docxSchema` carrying `WRAPPER_ATTRS`; its attrs also want a row in
+ * `schema/attrRoles`, and two test lists name the kinds outright (`WRAPPERS_READS` in
+ * `schema/attrClasses.test.ts`, the kind list in `schema/wrappers.test.ts`). Neither paragraph walk
+ * and neither policy table has to be touched.
+ *
+ * The opening tag is the verbatim string the file wrote wherever there is one, so a wrapper nobody
+ * edited goes back out byte for byte; only the closing tag is written from scratch.
+ */
+import type { Mark } from "prosemirror-model";
+import type { ExportRefs } from "./exportRefs";
+import type { ImportSources } from "./importParagraph";
+/** A wrapper read off the file: the mark its content wears, and the element that content stands in */
+export interface WrapperReading {
+    mark: Mark;
+    content: Element;
+}
+/** One kind of inline wrapper, as import reads it and export writes it */
+export interface WrapperKind {
+    /** The mark name in the schema */
+    readonly mark: string;
+    /** The local name of the element it comes from */
+    readonly element: string;
+    /**
+     * The mark this element goes on and the content to read on inside it. null for a shape we do
+     * not write back ourselves, which leaves the element preserved whole where it stood.
+     */
+    read(el: Element, depth: number, sources: ImportSources): WrapperReading | null;
+    /** The opening XML this mark goes back out as */
+    open(mark: Mark, refs: ExportRefs): string;
+    /** What closes it again */
+    close(mark: Mark): string;
+    /**
+     * The same wrapper under a name of its own, for a second stretch claiming one name
+     * (`docx/identities`). Absent for a kind that names nothing a document must keep unique.
+     */
+    copy?(mark: Mark): Mark;
+}
+/**
+ * Every wrapper the editor models, in the order the schema declares their marks: what stands
+ * first here stands outside the others where two of them are written at one depth.
+ */
+export declare const WRAPPER_KINDS: readonly WrapperKind[];
+/** The kind this element is one of, undefined for an element no kind reads */
+export declare function wrapperKindFor(el: Element): WrapperKind | undefined;
+/**
+ * Whether a wrapper of this kind may be read inside the wrappers already around it.
+ *
+ * A kind whose mark excludes its own type records one of itself at a time, so the inner of two is
+ * left whole where it stood rather than pushing the outer one off the content it wraps: that is a
+ * `w:hyperlink` inside a `w:hyperlink`, which OOXML admits and Word does not write. A kind that
+ * excludes nothing nests as deeply as the file does (`w:sdt`, §17.5.2.17).
+ */
+export declare function wrapperFits(kind: WrapperKind, wrappers: readonly Mark[]): boolean;
+/** The kind this mark stands for. A wrapper mark nobody registered has no way back out */
+export declare function wrapperKindOf(mark: Mark): WrapperKind;

package/dist/docx/wrappers.js

@@ -0,0 +1,117 @@
+// src/docx/wrappers.ts
+import { DocxExportError } from "../ooxml/errors.js";
+import { docxSchema } from "../schema/index.js";
+import { readHyperlinkWrapper, relIdIn, withRelId } from "./hyperlink.js";
+import { copiedControlPrefix, newControlId, readSdtWrapper } from "./sdt.js";
+var counts = /* @__PURE__ */ new WeakMap();
+function nextKey(kind, el) {
+  const perDocument = counts.get(el.ownerDocument) ?? /* @__PURE__ */ new Map();
+  counts.set(el.ownerDocument, perDocument);
+  const key = perDocument.get(kind.mark) ?? 0;
+  perDocument.set(kind.mark, key + 1);
+  return key;
+}
+var SDT = {
+  mark: "sdt",
+  element: "sdt",
+  read(el, depth) {
+    const wrapper = readSdtWrapper(el);
+    if (!wrapper) return null;
+    return {
+      mark: docxSchema.marks.sdt.create({
+        sdtPrefix: wrapper.prefix,
+        depth,
+        key: nextKey(SDT, el),
+        contentsLocked: wrapper.contentsLocked,
+        deletionLocked: wrapper.deletionLocked
+      }),
+      content: wrapper.content
+    };
+  },
+  open(mark) {
+    const prefix = mark.attrs.sdtPrefix;
+    if (typeof prefix !== "string") {
+      throw new DocxExportError(
+        "lost-original",
+        "a content control has lost the opening XML it goes back out as"
+      );
+    }
+    return `${prefix}<w:sdtContent>`;
+  },
+  close: () => "</w:sdtContent></w:sdt>",
+  copy(mark) {
+    const prefix = mark.attrs.sdtPrefix;
+    if (typeof prefix !== "string") return mark;
+    return mark.type.create({
+      ...mark.attrs,
+      sdtPrefix: copiedControlPrefix(prefix, newControlId())
+    });
+  }
+};
+var LINK = {
+  mark: "link",
+  element: "hyperlink",
+  read(el, depth, sources) {
+    const wrapper = readHyperlinkWrapper(el);
+    if (!wrapper) return null;
+    return {
+      mark: docxSchema.marks.link.create({
+        linkPrefix: wrapper.prefix,
+        href: wrapper.relId === null ? null : sources.links.get(wrapper.relId) ?? null,
+        depth,
+        key: nextKey(LINK, el)
+      }),
+      content: el
+    };
+  },
+  open(mark, refs) {
+    const prefix = mark.attrs.linkPrefix;
+    const original = typeof prefix === "string" ? prefix : null;
+    const href = mark.attrs.href;
+    if (typeof href !== "string") {
+      if (original !== null) return original;
+      throw new DocxExportError(
+        "lost-original",
+        "a hyperlink carries neither an address nor the opening XML it goes back out as"
+      );
+    }
+    const relId = refs.links.relIdOf(
+      href,
+      original === null ? null : relIdIn(original)
+    );
+    if (relId === void 0) {
+      if (original !== null) return original;
+      throw new DocxExportError(
+        "unsupported-content",
+        "an inserted hyperlink has no relationship to point at; export it through exportDocx"
+      );
+    }
+    return withRelId(original ?? "<w:hyperlink>", relId);
+  },
+  close: () => "</w:hyperlink>"
+};
+var WRAPPER_KINDS = [SDT, LINK];
+function wrapperKindFor(el) {
+  return WRAPPER_KINDS.find((kind) => kind.element === el.localName);
+}
+function wrapperFits(kind, wrappers) {
+  const type = docxSchema.marks[kind.mark];
+  if (!type.excludes(type)) return true;
+  return !wrappers.some((mark) => mark.type === type);
+}
+function wrapperKindOf(mark) {
+  const kind = WRAPPER_KINDS.find((entry) => entry.mark === mark.type.name);
+  if (!kind) {
+    throw new DocxExportError(
+      "unsupported-content",
+      `inline wrapper we cannot serialize: ${mark.type.name}`
+    );
+  }
+  return kind;
+}
+export {
+  WRAPPER_KINDS,
+  wrapperFits,
+  wrapperKindFor,
+  wrapperKindOf
+};

package/dist/editor/clipboard/blockReaders.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The elements a reading takes as blocks of their own.
+ *
+ * Everything else in a piece of clipboard HTML is read by the shape of the markup alone: an
+ * element either names a block or it is text in the paragraph around it. A block reader is how an
+ * element that means more than its shape says - a table, a Word paragraph that is really a list
+ * item - is read as what it means, without the reading itself learning about the applications
+ * one by one.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import { type ListKind } from "../../numbering/listTemplate";
+import { type InlineContext } from "./inlineFormatting";
+import type { HtmlReadContext } from "./readContext";
+/** Where one paragraph being read stands in a list */
+export interface ListPlacement {
+    kind: ListKind;
+    /** The number the list wears here, or null where this document may start no list */
+    numId: number | null;
+    /** How deep the item sits, counted from zero */
+    level: number;
+}
+/** What a block reader may ask of the reading it is part of */
+export interface HtmlBlockHost {
+    /** What the markup is being read against, including the application that wrote it */
+    readonly context: HtmlReadContext;
+    /** Whether the reading already stands inside a cell of a table it is reading */
+    readonly inTable: boolean;
+    /** The blocks the content of one cell reads as. None where the cell holds nothing */
+    readCell(cell: ParentNode, inline: InlineContext): readonly PMNode[];
+    /** The inline nodes these nodes read as */
+    readInline(nodes: Iterable<Node>, inline: InlineContext): readonly PMNode[];
+    /** One paragraph of the reading, as an item of the list it belongs to when it is one */
+    paragraph(content: readonly PMNode[], list?: ListPlacement | null): PMNode;
+    /**
+     * The number the pasted list this key names takes here. The same key answers the same number,
+     * so the paragraphs of one list join it rather than each starting a list of their own.
+     */
+    listNumber(key: string, kind: ListKind): number | null;
+}
+/**
+ * One kind of element read as blocks of its own rather than as text where it stands.
+ *
+ * A reader answers null for an element it has nothing to say about, so that deciding whether an
+ * element is its own and reading it are one pass rather than two.
+ */
+export interface HtmlBlockReader {
+    read(element: HTMLElement, inline: InlineContext, host: HtmlBlockHost): readonly PMNode[] | null;
+}
+/**
+ * An HTML table, read as a table of this document.
+ *
+ * The cells hold what their own markup reads as, one paragraph per block they hold, and the table
+ * is as wide as a table inserted here would be: a pasted table is drawn and written out exactly
+ * like one the toolbar put there, since nothing of the width a foreign document measured its own
+ * paper against would mean the same here.
+ *
+ * A table inside a cell is not read as a table, since the model only makes the outer one editable,
+ * and neither is one larger than the model holds. Both are read as their rows instead, so that a
+ * cell of the inner table still stands apart from the next one. A caption stands as the paragraph
+ * above whichever of the two the table is read as.
+ */
+export declare const tableBlockReader: HtmlBlockReader;
+/**
+ * A Word paragraph that is an item of a list, read as an item of a list here.
+ *
+ * Word puts no `<ul>` or `<ol>` on the clipboard: every item is a paragraph saying which list it
+ * belongs to, so the paragraphs of one list are joined by that name rather than by standing inside
+ * one element. Whether the list counts its items is only visible in the marker Word drew, which
+ * is taken out of the paragraph wherever it is: marked as a marker, or standing at the front of
+ * the content as anything else would.
+ */
+export declare const wordListReader: HtmlBlockReader;
+/** The readers every reading consults, in the order they are tried */
+export declare const DEFAULT_BLOCK_READERS: readonly HtmlBlockReader[];

package/dist/editor/clipboard/blockReaders.js

@@ -0,0 +1,193 @@
+// src/editor/clipboard/blockReaders.ts
+import {
+  createTableNodeFrom,
+  isTableSide,
+  MAX_TABLE_SIDE
+} from "../../docx/tableTemplate.js";
+import { MAX_ILVL } from "../../numbering/listTemplate.js";
+import { docxSchema } from "../../schema/index.js";
+import { contextFor } from "./inlineFormatting.js";
+var CELL_TAGS = /* @__PURE__ */ new Set(["TD", "TH"]);
+var ROW_GROUP_TAGS = /* @__PURE__ */ new Set(["THEAD", "TBODY", "TFOOT"]);
+function rowsOf(table) {
+  return [...table.children].flatMap((child) => {
+    if (!(child instanceof HTMLElement)) return [];
+    if (child.tagName === "TR") return [child];
+    if (!ROW_GROUP_TAGS.has(child.tagName)) return [];
+    return [...child.children].flatMap(
+      (row) => row instanceof HTMLElement && row.tagName === "TR" ? [row] : []
+    );
+  });
+}
+function cellsOf(row) {
+  return [...row.children].flatMap(
+    (cell) => cell instanceof HTMLElement && CELL_TAGS.has(cell.tagName) ? [cell] : []
+  );
+}
+function spanOf(element, name, limit) {
+  const value = Number.parseInt(element.getAttribute(name) ?? "", 10);
+  return Number.isFinite(value) && value > 1 ? Math.min(value, limit) : 1;
+}
+function gridOf(table) {
+  const rows = rowsOf(table).filter((row) => cellsOf(row).length > 0);
+  if (!isTableSide(rows.length)) return null;
+  const covered = rows.map(() => /* @__PURE__ */ new Set());
+  const cells = rows.map(() => []);
+  let cols = 0;
+  rows.forEach((row, top) => {
+    let left = 0;
+    for (const element of cellsOf(row)) {
+      while (covered[top]?.has(left)) left += 1;
+      const colspan = spanOf(element, "colspan", MAX_TABLE_SIDE);
+      const rowspan = Math.min(
+        spanOf(element, "rowspan", MAX_TABLE_SIDE),
+        rows.length - top
+      );
+      for (let covering = top; covering < top + rowspan; covering += 1) {
+        for (let column = left; column < left + colspan; column += 1) {
+          covered[covering]?.add(column);
+        }
+      }
+      cells[top]?.push({
+        element,
+        rect: { top, bottom: top + rowspan, left, right: left + colspan }
+      });
+      left += colspan;
+      cols = Math.max(cols, left);
+    }
+  });
+  return isTableSide(cols) ? cells : null;
+}
+function captionOf(table) {
+  for (const child of table.children) {
+    if (child instanceof HTMLElement && child.tagName === "CAPTION") {
+      return child;
+    }
+  }
+  return null;
+}
+function rowParagraphs(table, inline, host) {
+  return rowsOf(table).filter((row) => cellsOf(row).length > 0).map(
+    (row) => host.paragraph(
+      cellsOf(row).flatMap((cell, index) => [
+        ...index === 0 ? [] : [docxSchema.text("	", [docxSchema.marks.tab.create()])],
+        ...host.readInline(cell.childNodes, contextFor(inline, cell))
+      ])
+    )
+  );
+}
+var tableBlockReader = {
+  read: (element, inline, host) => {
+    if (element.tagName !== "TABLE") return null;
+    const inside = contextFor(inline, element);
+    const caption = captionOf(element);
+    const above = caption === null ? [] : [
+      host.paragraph(
+        host.readInline(caption.childNodes, contextFor(inside, caption))
+      )
+    ];
+    const grid = host.inTable ? null : gridOf(element);
+    if (grid === null) {
+      return [...above, ...rowParagraphs(element, inside, host)];
+    }
+    const cells = grid.map(
+      (row) => row.map(({ element: cell, rect }) => ({
+        rect,
+        content: host.readCell(cell, contextFor(inside, cell))
+      }))
+    );
+    return [...above, createTableNodeFrom(cells, host.context.geometry)];
+  }
+};
+var WORD_LIST = /mso-list:\s*l(?<list>\d+)\s+level(?<level>\d+)\s+lfo(?<applied>\d+)/i;
+var IGNORED_MARKER = /mso-list:\s*Ignore/i;
+var MARKER_START = /^\[if\s+!supportLists\]/i;
+var MARKER_END = /^\[endif\]/i;
+var COUNTED_MARKER = /^\s*(?:\d+|[A-Za-z]+)\s*[.)]\s*/;
+function wordListItemOf(element) {
+  const found = WORD_LIST.exec(element.getAttribute("style") ?? "")?.groups;
+  if (found === void 0) return null;
+  const level = Number.parseInt(found.level ?? "", 10);
+  return {
+    key: `${found.list}/${found.applied}`,
+    // Word counts its levels from one, and no document has more levels than the model holds
+    level: Number.isFinite(level) ? Math.min(Math.max(level, 1), MAX_ILVL + 1) - 1 : 0
+  };
+}
+function withoutMarker(element) {
+  const content = [];
+  let marker = "";
+  let inMarker = false;
+  for (const child of element.childNodes) {
+    if (child.nodeType === child.COMMENT_NODE) {
+      const data = child.nodeValue ?? "";
+      if (MARKER_START.test(data)) inMarker = true;
+      else if (MARKER_END.test(data)) inMarker = false;
+      continue;
+    }
+    const ignored = child instanceof HTMLElement && IGNORED_MARKER.test(child.getAttribute("style") ?? "");
+    if (inMarker || ignored) marker += child.textContent ?? "";
+    else content.push(child);
+  }
+  return { marker, content };
+}
+var SYMBOL_FONTS = /symbol|wingdings|webdings/i;
+function leadingNode(element) {
+  for (const child of element.childNodes) {
+    const blank = child.nodeType === child.TEXT_NODE && (child.nodeValue ?? "").trim() === "";
+    if (!blank) return child;
+  }
+  return null;
+}
+function firstText(element) {
+  for (const child of element.childNodes) {
+    if (child.nodeType === child.TEXT_NODE) {
+      if ((child.nodeValue ?? "").trim() !== "") return child;
+    } else if (child instanceof HTMLElement) {
+      const found = firstText(child);
+      if (found !== null) return found;
+    }
+  }
+  return null;
+}
+function leadingMarker(element) {
+  const copy = element.cloneNode(true);
+  if (!(copy instanceof HTMLElement)) return null;
+  const lead = leadingNode(copy);
+  if (lead instanceof HTMLElement && SYMBOL_FONTS.test(lead.getAttribute("style") ?? "")) {
+    const marker = lead.textContent ?? "";
+    lead.remove();
+    return { marker, content: [...copy.childNodes] };
+  }
+  const text = firstText(copy);
+  const counted = COUNTED_MARKER.exec(text?.nodeValue ?? "");
+  if (text === null || counted === null) return null;
+  text.nodeValue = (text.nodeValue ?? "").slice(counted[0].length);
+  return { marker: counted[0], content: [...copy.childNodes] };
+}
+var wordListReader = {
+  read: (element, inline, host) => {
+    if (host.context.source !== "word") return null;
+    const item = wordListItemOf(element);
+    if (item === null) return null;
+    const marked = withoutMarker(element);
+    const { marker, content } = marked.marker === "" ? leadingMarker(element) ?? marked : marked;
+    const kind = COUNTED_MARKER.test(marker) ? "numbered" : "bullet";
+    return [
+      host.paragraph(host.readInline(content, contextFor(inline, element)), {
+        kind,
+        numId: host.listNumber(item.key, kind),
+        level: item.level
+      })
+    ];
+  }
+};
+var DEFAULT_BLOCK_READERS = [
+  tableBlockReader,
+  wordListReader
+];
+export {
+  DEFAULT_BLOCK_READERS,
+  tableBlockReader,
+  wordListReader
+};

package/dist/editor/clipboard/htmlReader.d.ts

@@ -1,13 +1,9 @@
 import { Slice } from "prosemirror-model";
 import type { Transaction } from "prosemirror-state";
 import { type NewLists } from "../../numbering/listRegistry";
+import { type HtmlBlockReader } from "./blockReaders";
 import type { ListKinds } from "./internalChannel";
 import type { HtmlReadContext } from "./readContext";
-/**
- * The paragraph style a copy carries, which is the one thing a paste needs that the drawing does
- * not already say. It is the style's id alone, where the editor draws the whole `w:pPr`.
- */
-export declare const COPIED_STYLE_ATTRIBUTE = "data-style";
 /** What a paste puts in: the content, and the definitions of the lists it started */
 export interface PastedContent {
     slice: Slice;
@@ -20,7 +16,7 @@ export interface PastedContent {
     listKinds?: ListKinds;
 }
 /** The content one piece of already parsed markup reads as, or null when it reads as nothing */
-export declare function readHtml(root: ParentNode, context: HtmlReadContext): PastedContent | null;
+export declare function readHtml(root: ParentNode, context: HtmlReadContext, blockReaders?: readonly HtmlBlockReader[]): PastedContent | null;
 /** The same reading, for a caller holding the markup as a string rather than as elements */
 export declare function readHtmlSlice(context: HtmlReadContext, source: string): PastedContent | null;
 /**