@portone/docx-editor 0.3.0 → 0.5.0

package/dist/editor/clipboard/htmlReader.js

@@ -0,0 +1,302 @@
+// src/editor/clipboard/htmlReader.ts
+import { Fragment, Slice } from "prosemirror-model";
+import {
+  paragraphAttrsFor,
+  styleIdOf
+} from "../../docx/formatting.js";
+import {
+  withListNumbering,
+  withParagraphStyle
+} from "../../docx/paraProps.js";
+import {
+  listsWorn,
+  NEW_LISTS_ATTR,
+  newListsValue
+} from "../../numbering/listRegistry.js";
+import {
+  allocateList,
+  MAX_ILVL,
+  templateList
+} from "../../numbering/listTemplate.js";
+import { docxSchema } from "../../schema/index.js";
+import { editorClassNames } from "../../styles/classNames.js";
+import { numIdsIn } from "../commands/listCommands.js";
+import { PASTED_IMAGE_ATTRIBUTE } from "./images.js";
+import {
+  appendInline,
+  contextFor,
+  marksFor,
+  withInlineStyle
+} from "./inlineFormatting.js";
+var BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "DIV",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "LI",
+  "P",
+  "PRE",
+  "SECTION"
+]);
+var HEADING_LEVELS = {
+  H1: 1,
+  H2: 2,
+  H3: 3,
+  H4: 4,
+  H5: 5,
+  H6: 6
+};
+var HEADING_FALLBACKS = {
+  1: { bold: true, fontSizePt: 24 },
+  2: { bold: true, fontSizePt: 18 },
+  3: { bold: true, fontSizePt: 14 },
+  4: { bold: true, fontSizePt: 12 },
+  5: { bold: true, fontSizePt: 10 },
+  6: { bold: true, fontSizePt: 8 }
+};
+var COPIED_STYLE_ATTRIBUTE = "data-style";
+function normalizedStyleName(value) {
+  return value.toLowerCase().replace(/[\s_-]+/g, "");
+}
+function copiedStyleId(element) {
+  if (!element.classList.contains(editorClassNames.paragraph)) return null;
+  return element.getAttribute(COPIED_STYLE_ATTRIBUTE) ?? styleIdOf(element.getAttribute("data-ppr"));
+}
+function headingLevel(element, sourceStyleId) {
+  const direct = HEADING_LEVELS[element.tagName];
+  if (direct !== void 0) return direct;
+  const match = /^heading([1-6])$/.exec(
+    normalizedStyleName(sourceStyleId ?? "")
+  );
+  return match ? Number.parseInt(match[1] ?? "", 10) : null;
+}
+function destinationStyleId(styles, sourceStyleId, level) {
+  if (sourceStyleId && styles.some((style) => style.id === sourceStyleId)) {
+    return sourceStyleId;
+  }
+  if (level === null) return null;
+  const wanted = `heading${level}`;
+  return styles.find(
+    (style) => normalizedStyleName(style.id) === wanted || normalizedStyleName(style.name) === wanted
+  )?.id ?? null;
+}
+function blockContext(context, parent, element, preserveParagraphStyle) {
+  const editorParagraph = element.classList.contains(
+    editorClassNames.paragraph
+  );
+  const sourceStyleId = copiedStyleId(element);
+  const level = headingLevel(element, sourceStyleId);
+  if (!preserveParagraphStyle && editorParagraph) {
+    return {
+      inline: contextFor(parent, element),
+      paragraph: null
+    };
+  }
+  const styleId = destinationStyleId(
+    context.paragraphStyles,
+    sourceStyleId,
+    level
+  );
+  const paragraph = styleId === null ? null : withParagraphStyle(null, styleId);
+  const usesDestinationStyle = editorParagraph && (sourceStyleId === null || paragraph !== null);
+  let inline = parent;
+  if (paragraph === null && level !== null) {
+    inline = withInlineStyle(inline, HEADING_FALLBACKS[level] ?? {});
+  }
+  return {
+    inline: contextFor(inline, element, !usesDestinationStyle),
+    paragraph
+  };
+}
+function listParagraphProps(list) {
+  if (!list || list.numId === null) return null;
+  return withListNumbering(null, {
+    numbering: { numId: list.numId, ilvl: Math.min(MAX_ILVL, list.level) },
+    indent: { kind: "keep" }
+  });
+}
+function paragraphAttrs(formatting, list, paragraph) {
+  const props = listParagraphProps(list) ?? paragraph;
+  return props ? { pPr: props.pPr, ...paragraphAttrsFor(props.pPr, formatting) } : null;
+}
+var HtmlReader = class {
+  constructor(context, preserveParagraphStyles) {
+    this.context = context;
+    this.preserveParagraphStyles = preserveParagraphStyles;
+    this.formatting = context.formatting;
+    this.used = new Set(context.numbering.used);
+    this.canCreateLists = context.numbering.canCreate;
+  }
+  context;
+  preserveParagraphStyles;
+  blocks = [];
+  used;
+  canCreateLists;
+  /**
+   * What the pasted paragraphs are resolved against: the document's context, holding the
+   * definition of each pasted list as it is read, so that an item is drawn against the list it
+   * is joining rather than against a list nothing yet defines.
+   */
+  formatting;
+  /** The definitions of every list started while editing, the pasted ones among them */
+  get newLists() {
+    return this.formatting.numbering.added;
+  }
+  read(root) {
+    this.readFlow(root, { style: {}, href: null, preserveWhitespace: false });
+    return this.blocks;
+  }
+  appendInline(target, node, context) {
+    appendInline(target, node, context, (content, element, inline) => {
+      if (element.tagName !== "IMG") return false;
+      const token = element.getAttribute(PASTED_IMAGE_ATTRIBUTE);
+      const image = token === null ? void 0 : this.context.images.get(token);
+      if (!image) return true;
+      content.push(
+        docxSchema.nodes.image.create(
+          {
+            ...image,
+            // The source drawing may point at a relationship in another package.
+            xml: null
+          },
+          null,
+          marksFor(inline)
+        )
+      );
+      return true;
+    });
+  }
+  addParagraph(content, list = null, paragraph = null) {
+    if (list && list.numId === null) {
+      const marker = list.kind === "bullet" ? "\u2022 " : "1. ";
+      content.unshift(docxSchema.text(marker));
+    }
+    this.blocks.push(
+      docxSchema.nodes.paragraph.create(
+        paragraphAttrs(this.formatting, list, paragraph),
+        content
+      )
+    );
+  }
+  readFlow(parent, context, paragraph = null) {
+    let inline = [];
+    const flush = () => {
+      if (inline.length === 0) return;
+      this.addParagraph(inline, null, paragraph);
+      inline = [];
+    };
+    for (const child of parent.childNodes) {
+      const element = child.nodeType === child.ELEMENT_NODE ? child : null;
+      if (element?.tagName === "UL" || element?.tagName === "OL") {
+        flush();
+        this.readList(element, context, 0, null);
+      } else if (element && BLOCK_TAGS.has(element.tagName)) {
+        flush();
+        const before = this.blocks.length;
+        const block = blockContext(
+          this.context,
+          context,
+          element,
+          this.preserveParagraphStyles
+        );
+        this.readFlow(element, block.inline, block.paragraph);
+        if (this.blocks.length === before) {
+          this.addParagraph([], null, block.paragraph);
+        }
+      } else {
+        this.appendInline(inline, child, context);
+      }
+    }
+    flush();
+  }
+  /**
+   * The number a pasted list takes, registered with the definition that list is drawn and written
+   * with. A pasted list is started here just as the list button starts one.
+   */
+  takeNumId(kind) {
+    if (!this.canCreateLists) return null;
+    const started = allocateList(
+      this.formatting.numbering,
+      this.used,
+      templateList(kind)
+    );
+    this.formatting = { ...this.formatting, numbering: started.numbering };
+    this.used.add(started.numId);
+    return started.numId;
+  }
+  readList(list, context, level, inherited) {
+    const kind = list.tagName === "UL" ? "bullet" : "numbered";
+    const listContext = {
+      kind,
+      numId: inherited?.kind === kind ? inherited.numId : this.takeNumId(kind),
+      level
+    };
+    const items = Array.from(list.children).filter(
+      (child) => child.tagName === "LI"
+    );
+    for (const item of items) {
+      const itemContext = contextFor(context, item);
+      const content = [];
+      for (const child of item.childNodes) {
+        const nested = child.nodeType === child.ELEMENT_NODE ? child : null;
+        if (nested?.tagName === "UL" || nested?.tagName === "OL") continue;
+        this.appendInline(content, child, itemContext);
+      }
+      this.addParagraph(content, listContext);
+      for (const nested of Array.from(item.children)) {
+        if (nested.tagName === "UL" || nested.tagName === "OL") {
+          this.readList(
+            nested,
+            itemContext,
+            level + 1,
+            listContext
+          );
+        }
+      }
+    }
+  }
+};
+function sliceDepth(root) {
+  const marker = root.querySelector("[data-pm-slice]");
+  const openStart = Number.parseInt(
+    marker?.getAttribute("data-pm-slice")?.split(/\s+/, 1)[0] ?? "",
+    10
+  );
+  if (Number.isFinite(openStart)) return openStart === 0 ? 0 : 1;
+  const blocks = [...BLOCK_TAGS, "OL", "UL"].map((tag) => tag.toLowerCase());
+  return root.querySelector(blocks.join(",")) ? 0 : 1;
+}
+function readHtml(root, context) {
+  const open = sliceDepth(root);
+  const reader = new HtmlReader(context, open === 0);
+  const blocks = reader.read(root);
+  return blocks.length === 0 ? null : {
+    slice: new Slice(Fragment.fromArray([...blocks]), open, open),
+    newLists: reader.newLists
+  };
+}
+function readHtmlSlice(context, source) {
+  if (source.trim() === "") return null;
+  const template = context.document.createElement("template");
+  template.innerHTML = source;
+  return readHtml(template.content, context);
+}
+function withPastedContent(tr, content) {
+  return tr.setDocAttribute(
+    NEW_LISTS_ATTR,
+    newListsValue(listsWorn(content.newLists, numIdsIn(tr.doc)))
+  );
+}
+export {
+  COPIED_STYLE_ATTRIBUTE,
+  readHtml,
+  readHtmlSlice,
+  withPastedContent
+};

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

@@ -0,0 +1,57 @@
+/**
+ * The channel a copy made in this editor comes back through.
+ *
+ * What leaves for the clipboard is HTML, and HTML carries only what a reader can make out of it:
+ * a paragraph's own properties, a table's grid, the relationship a link hung off are none of them
+ * writable there without publishing the document's insides. So the slice itself stays here, under
+ * a name the copied HTML carries, and a paste that hands that name back is given what was copied.
+ *
+ * The name is trusted only alongside the session it was copied from: another open document -
+ * a second editor on the same page among them - numbers its lists and relates its images against
+ * its own file, so a slice of it means something else here, and such a paste falls to the reader
+ * that reads the markup instead. A token nothing kept, a token from a copy since replaced, and a
+ * token invented by whoever wrote the markup all miss the same way.
+ *
+ * The slice is kept alongside the kind of each list its paragraphs name, which is the one thing
+ * about the copy that only the editor it was copied from can answer: a number says nothing about
+ * whether it counted or bulleted, and the definition that said so is the source document's. It is
+ * read here because this is where both ends are the same session.
+ */
+import type { Slice } from "prosemirror-model";
+import type { ListKind } from "../../numbering/listTemplate";
+import type { Numbering } from "../../numbering/parseNumbering";
+/** Where the copied HTML carries the name of the slice this editor kept */
+export declare const INTERNAL_TOKEN_ATTRIBUTE = "data-docx-clip";
+/** The kind of list each numbering id of a slice stood for where the slice was copied */
+export type ListKinds = ReadonlyMap<number, ListKind>;
+export declare const NO_LIST_KINDS: ListKinds;
+/**
+ * The two ways a copy leaves the editor.
+ *
+ * A drag is serialized through the very same path a copy takes, so the one the drag wrote would
+ * replace the one the clipboard still holds, and a drag begun and let go would send the next paste
+ * of that clipboard to the reader that reads markup. They are kept apart instead, and each is
+ * replaced only by the next copy made the same way.
+ */
+export type CopyRoute = "clipboard" | "drag";
+/** What one name stands for: the slice that was copied, and what its list numbers meant there */
+export interface RecalledCopy {
+    readonly slice: Slice;
+    readonly listKinds: ListKinds;
+}
+/**
+ * Keeps the copied slice under a fresh name, and answers with the name to write into the markup.
+ * Null for a state built without a document: with no session to bind the name to there is nothing
+ * to tell this editor's copy from another's, and the copy travels as markup alone.
+ */
+export declare function rememberCopied(route: CopyRoute, slice: Slice, sessionId: string | null, numbering: Numbering): string | null;
+/** The copy that name stands for, and only when the session asking is the one that copied it */
+export declare function recallCopied(token: string | null, sessionId: string | null): RecalledCopy | null;
+/**
+ * The name the pasted markup carries, if it carries one.
+ *
+ * The copy writes it on the first element it draws. `prosemirror-view` may wrap that element in
+ * the parents its tag needs (a row in a table) and descends back through them before parsing, so
+ * the element handed here is either the one carrying the name or its parent.
+ */
+export declare function internalTokenOf(dom: Node): string | null;

package/dist/editor/clipboard/internalChannel.js

@@ -0,0 +1,58 @@
+// src/editor/clipboard/internalChannel.ts
+import { docxSchema } from "../../schema/index.js";
+import { listKindOf, listRefOf } from "../commands/listCommands.js";
+var INTERNAL_TOKEN_ATTRIBUTE = "data-docx-clip";
+var NO_LIST_KINDS = /* @__PURE__ */ new Map();
+var copied = /* @__PURE__ */ new Map();
+var copies = 0;
+function nextToken() {
+  copies += 1;
+  return `c${copies}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function rememberCopied(route, slice, sessionId, numbering) {
+  if (sessionId === null) return null;
+  const token = nextToken();
+  copied.set(route, {
+    token,
+    sessionId,
+    slice,
+    listKinds: listKindsIn(slice, numbering)
+  });
+  return token;
+}
+function recallCopied(token, sessionId) {
+  if (token === null || sessionId === null) return null;
+  const found = [...copied.values()].find(
+    (copy) => copy.token === token && copy.sessionId === sessionId
+  );
+  return found === void 0 ? null : { slice: found.slice, listKinds: found.listKinds };
+}
+function listKindsIn(slice, numbering) {
+  const kinds = /* @__PURE__ */ new Map();
+  const read = (node) => {
+    if (node.type === docxSchema.nodes.paragraph) {
+      const ref = listRefOf(node);
+      const kind = ref === null ? null : listKindOf(numbering, ref);
+      if (ref !== null && kind !== null) kinds.set(ref.numId, kind);
+      return;
+    }
+    node.forEach(read);
+  };
+  slice.content.forEach(read);
+  return kinds.size === 0 ? NO_LIST_KINDS : kinds;
+}
+function internalTokenOf(dom) {
+  if (dom instanceof Element) {
+    const own = dom.getAttribute(INTERNAL_TOKEN_ATTRIBUTE);
+    if (own !== null) return own;
+  }
+  const first = dom instanceof Element || dom instanceof DocumentFragment ? dom.firstElementChild : null;
+  return first?.getAttribute(INTERNAL_TOKEN_ATTRIBUTE) ?? null;
+}
+export {
+  INTERNAL_TOKEN_ATTRIBUTE,
+  NO_LIST_KINDS,
+  internalTokenOf,
+  recallCopied,
+  rememberCopied
+};

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

@@ -0,0 +1,99 @@
+/**
+ * What a slice has to obey before it may be put into this document.
+ *
+ * A slice reaching a paste says where its blocks came from, which list its paragraphs belong to,
+ * which comment its markers open, and what everything is drawn with. None of those mean anything
+ * outside the document that wrote them: a block naming a fragment of the file would be written
+ * from that fragment a second time, a list number naming no definition here would be exported
+ * bare, and a comment marker copied along would open a range the comment part never opens. So a
+ * paste is a normalization rather than an insertion, and each rule stands as one normalizer over
+ * the whole slice, in the order they are declared.
+ *
+ * A move drop is the exception the first two rules read: content dragged from one place in this
+ * very document to another is the same content, so it keeps the identity it had and the anchors it
+ * stood in. The source of a move is deleted along with the drop, so nothing is duplicated.
+ */
+import { type Node as PMNode, Slice } from "prosemirror-model";
+import type { EditorState } from "prosemirror-state";
+import { type ListKind } from "../../numbering/listTemplate";
+import type { PastedContent } from "./htmlReader";
+import { type ListKinds } from "./internalChannel";
+/** What one normalizer answers about the document the slice is going into */
+export interface NormalizeContext {
+    readonly state: EditorState;
+    /** A drop that moves what it carries rather than copying it, which keeps its source identity */
+    readonly move: boolean;
+    /**
+     * The list numbers this document answers for: the ones it defines, the ones a list started
+     * while editing was registered under, the ones its paragraphs wear, and the ones this very
+     * paste has started.
+     */
+    readonly knownLists: ReadonlySet<number>;
+    /**
+     * What the numbers the slice names meant where it was copied, for the numbers this document
+     * cannot answer for. Empty for a slice that came in as markup, whose lists were given numbers
+     * of this document as they were read.
+     */
+    readonly listKinds: ListKinds;
+    /**
+     * A number for a list this slice starts, registered with the definition it is started with, as
+     * the list button starts one. Null in a document with nowhere to write a definition.
+     */
+    startList(kind: ListKind): number | null;
+}
+export type SliceNormalizer = (slice: Slice, context: NormalizeContext) => Slice;
+/** The slice with every node rewritten depth first, and the ones mapped to null taken out */
+export declare function mapSliceNodes(slice: Slice, f: (node: PMNode) => PMNode | null): Slice;
+/**
+ * Takes the source identity off what is pasted.
+ *
+ * A block names the fragment of the opened file it came from, and the export writes that fragment
+ * back verbatim rather than building one. Two blocks naming the same fragment would therefore go
+ * out as the same bytes twice, identifiers and all, so a pasted copy names none and is written
+ * from the model instead. A preserved block holding its own XML is that XML wherever it stands and
+ * travels whole; one that only names a fragment has nothing of its own to travel with, so it goes.
+ */
+export declare const dropSourceIdentity: SliceNormalizer;
+/**
+ * Gives a pasted list a number this document defines.
+ *
+ * A number the destination knows nothing about is exported as a list nothing defines, which the
+ * export invariants refuse. The paragraphs that shared such a number still share the one they are
+ * given, so a pasted list stays one list, started the way the list button starts one and drawn and
+ * written from the destination's own definition from here on.
+ *
+ * Which of the two kinds it is started as is the one thing the number alone does not say. A copy
+ * made in this same session was remembered alongside what its numbers meant there
+ * (`./internalChannel`), so a bulleted list comes back bulleted; a number arriving any other way
+ * has no kind to be read off it and counts.
+ */
+export declare const rekeyNumbering: SliceNormalizer;
+/**
+ * Takes the anchors off what is pasted.
+ *
+ * A comment marker, a bookmark and a note reference all point at something written elsewhere in
+ * the package: the comment, the bookmark's other end, the note's body. A copy of the marker alone
+ * points at the same thing a second time, which is a duplicate identifier the file may not hold
+ * and a range the reader cannot close. Nothing here duplicates what they point at, so the anchor
+ * goes and the text it stood in stays, which is what Word does with a note it has no body for.
+ *
+ * A move drop duplicates nothing: the source goes as the drop lands, so the one anchor there was
+ * travels with the text it opened. Taking it off would delete a marker the document has no way to
+ * write back, which is a change the preserved guard refuses whole, and the drag would do nothing.
+ */
+export declare const detachAnchors: SliceNormalizer;
+/**
+ * Works out again what the pasted paragraphs are drawn with.
+ *
+ * The values a paragraph and the runs in it carry were resolved against the styles, the defaults
+ * and the list definitions of wherever the slice came from, this document's own list definitions
+ * after the numbers have just been reissued among them. Resolving them here is what makes the
+ * numbering the paste registers the numbering the document is then found to wear.
+ */
+export declare const rederiveDisplay: SliceNormalizer;
+export declare const DEFAULT_NORMALIZERS: readonly SliceNormalizer[];
+/**
+ * The pasted content as this document may hold it, and the definitions of the lists the paste
+ * starts - the ones a reading started, and the ones a reissued number was taken for.
+ */
+export declare function normalizePasted(content: PastedContent, state: EditorState, move: boolean, normalizers?: readonly SliceNormalizer[]): PastedContent;