@portone/docx-editor 0.5.0 → 0.5.1

package/dist/editor/clipboard/htmlReader.js

@@ -1,8 +1,7 @@
 // src/editor/clipboard/htmlReader.ts
 import { Fragment, Slice } from "prosemirror-model";
 import {
-  paragraphAttrsFor,
-  styleIdOf
+  paragraphAttrsFor
 } from "../../docx/formatting.js";
 import {
   withListNumbering,
@@ -18,9 +17,14 @@ import {
   MAX_ILVL,
   templateList
 } from "../../numbering/listTemplate.js";
+import { styleIdOf } from "../../ooxml/props.js";
 import { docxSchema } from "../../schema/index.js";
+import { COPIED_STYLE_ATTRIBUTE } from "../../schema/clipboard.js";
 import { editorClassNames } from "../../styles/classNames.js";
 import { numIdsIn } from "../commands/listCommands.js";
+import {
+  DEFAULT_BLOCK_READERS
+} from "./blockReaders.js";
 import { PASTED_IMAGE_ATTRIBUTE } from "./images.js";
 import {
   appendInline,
@@ -28,6 +32,7 @@ import {
   marksFor,
   withInlineStyle
 } from "./inlineFormatting.js";
+import { detectHtmlSource } from "./source.js";
 var BLOCK_TAGS = /* @__PURE__ */ new Set([
   "ADDRESS",
   "ARTICLE",
@@ -45,6 +50,7 @@ var BLOCK_TAGS = /* @__PURE__ */ new Set([
   "PRE",
   "SECTION"
 ]);
+var BLOCK_SELECTOR = [...BLOCK_TAGS, "OL", "UL", "TABLE"].map((tag) => tag.toLowerCase()).join(",");
 var HEADING_LEVELS = {
   H1: 1,
   H2: 2,
@@ -61,7 +67,6 @@ var HEADING_FALLBACKS = {
   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, "");
 }
@@ -127,18 +132,24 @@ function paragraphAttrs(formatting, list, paragraph) {
   return props ? { pPr: props.pPr, ...paragraphAttrsFor(props.pPr, formatting) } : null;
 }
 var HtmlReader = class {
-  constructor(context, preserveParagraphStyles) {
+  constructor(context, preserveParagraphStyles, blockReaders) {
     this.context = context;
     this.preserveParagraphStyles = preserveParagraphStyles;
+    this.blockReaders = blockReaders;
     this.formatting = context.formatting;
     this.used = new Set(context.numbering.used);
     this.canCreateLists = context.numbering.canCreate;
   }
   context;
   preserveParagraphStyles;
+  blockReaders;
   blocks = [];
   used;
   canCreateLists;
+  /** How deep the reading stands inside the tables it is reading */
+  tableDepth = 0;
+  /** The number each list a block reader named has taken, so its items join one list */
+  listNumbers = /* @__PURE__ */ new Map();
   /**
    * 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
@@ -155,6 +166,9 @@ var HtmlReader = class {
   }
   appendInline(target, node, context) {
     appendInline(target, node, context, (content, element, inline) => {
+      if (this.context.source === "word" && element.tagName === "O:P") {
+        return true;
+      }
       if (element.tagName !== "IMG") return false;
       const token = element.getAttribute(PASTED_IMAGE_ATTRIBUTE);
       const image = token === null ? void 0 : this.context.images.get(token);
@@ -173,17 +187,65 @@ var HtmlReader = class {
       return true;
     });
   }
+  /**
+   * One paragraph of the reading. An item of a list this document may not start keeps its marker
+   * as text, since the list it names is one the document will not be numbering.
+   */
+  paragraphNode(content, list = null, paragraph = null) {
+    const marker = list && list.numId === null ? [docxSchema.text(list.kind === "bullet" ? "\u2022 " : "1. ")] : [];
+    return docxSchema.nodes.paragraph.create(
+      paragraphAttrs(this.formatting, list, paragraph),
+      [...marker, ...content]
+    );
+  }
   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(this.paragraphNode(content, list, paragraph));
+  }
+  /** The blocks a nested reading produces, kept apart from the ones read so far */
+  collect(read) {
+    const outer = this.blocks;
+    this.blocks = [];
+    read();
+    const inner = this.blocks;
+    this.blocks = outer;
+    return inner;
+  }
+  /** What the first reader to answer for this element reads it as, or null where none does */
+  readBlock(element, context, host) {
+    for (const reader of this.blockReaders) {
+      const read = reader.read(element, context, host);
+      if (read !== null) return read;
     }
-    this.blocks.push(
-      docxSchema.nodes.paragraph.create(
-        paragraphAttrs(this.formatting, list, paragraph),
-        content
-      )
-    );
+    return null;
+  }
+  /**
+   * What a block reader may ask of this reading. One is made per level of the reading, since a
+   * reader asks whether it stands inside a table and that answer is the level's own.
+   */
+  hostView() {
+    return {
+      context: this.context,
+      inTable: this.tableDepth > 0,
+      readCell: (cell, inline) => {
+        this.tableDepth += 1;
+        const blocks = this.collect(() => this.readFlow(cell, inline));
+        this.tableDepth -= 1;
+        return blocks;
+      },
+      readInline: (nodes, inline) => {
+        const target = [];
+        for (const node of nodes) this.appendInline(target, node, inline);
+        return target;
+      },
+      paragraph: (content, list) => this.paragraphNode(content, list ?? null),
+      listNumber: (key, kind) => {
+        const known = this.listNumbers.get(key);
+        if (known !== void 0) return known;
+        const numId = this.takeNumId(kind);
+        this.listNumbers.set(key, numId);
+        return numId;
+      }
+    };
   }
   readFlow(parent, context, paragraph = null) {
     let inline = [];
@@ -192,12 +254,17 @@ var HtmlReader = class {
       this.addParagraph(inline, null, paragraph);
       inline = [];
     };
+    const host = this.hostView();
     for (const child of parent.childNodes) {
       const element = child.nodeType === child.ELEMENT_NODE ? child : null;
-      if (element?.tagName === "UL" || element?.tagName === "OL") {
+      const read = element && this.readBlock(element, context, host);
+      if (read) {
+        flush();
+        this.blocks.push(...read);
+      } else if (element?.tagName === "UL" || element?.tagName === "OL") {
         flush();
         this.readList(element, context, 0, null);
-      } else if (element && BLOCK_TAGS.has(element.tagName)) {
+      } else if (element && (BLOCK_TAGS.has(element.tagName) || element.querySelector(BLOCK_SELECTOR) !== null)) {
         flush();
         const before = this.blocks.length;
         const block = blockContext(
@@ -238,18 +305,23 @@ var HtmlReader = class {
       numId: inherited?.kind === kind ? inherited.numId : this.takeNumId(kind),
       level
     };
-    const items = Array.from(list.children).filter(
-      (child) => child.tagName === "LI"
+    const items = [...list.children].flatMap(
+      (child) => child instanceof HTMLElement && child.tagName === "LI" ? [child] : []
     );
+    const host = this.hostView();
     for (const item of items) {
       const itemContext = contextFor(context, item);
       const content = [];
+      const after = [];
       for (const child of item.childNodes) {
-        const nested = child.nodeType === child.ELEMENT_NODE ? child : null;
+        const nested = child instanceof HTMLElement ? child : null;
         if (nested?.tagName === "UL" || nested?.tagName === "OL") continue;
-        this.appendInline(content, child, itemContext);
+        const read = nested && this.readBlock(nested, itemContext, host);
+        if (read) after.push(...read);
+        else this.appendInline(content, child, itemContext);
       }
       this.addParagraph(content, listContext);
+      this.blocks.push(...after);
       for (const nested of Array.from(item.children)) {
         if (nested.tagName === "UL" || nested.tagName === "OL") {
           this.readList(
@@ -270,12 +342,15 @@ function sliceDepth(root) {
     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;
+  return root.querySelector(BLOCK_SELECTOR) ? 0 : 1;
 }
-function readHtml(root, context) {
+function readHtml(root, context, blockReaders = DEFAULT_BLOCK_READERS) {
   const open = sliceDepth(root);
-  const reader = new HtmlReader(context, open === 0);
+  const reader = new HtmlReader(
+    { ...context, source: detectHtmlSource(root) },
+    open === 0,
+    blockReaders
+  );
   const blocks = reader.read(root);
   return blocks.length === 0 ? null : {
     slice: new Slice(Fragment.fromArray([...blocks]), open, open),
@@ -295,7 +370,6 @@ function withPastedContent(tr, content) {
   );
 }
 export {
-  COPIED_STYLE_ATTRIBUTE,
   readHtml,
   readHtmlSlice,
   withPastedContent

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

@@ -15,13 +15,6 @@ export interface InlineContext {
     preserveWhitespace: boolean;
 }
 export type InlineElementReader = (target: PMNode[], element: HTMLElement, context: InlineContext) => boolean;
-/**
- * The address a link may carry, whichever way it travels.
- *
- * A copy writes one out and a paste reads one in, and an address this rule turns down is one
- * neither end should act on, so both ask here.
- */
-export declare function safeHref(value: string | null): string | null;
 export declare function contextFor(parent: InlineContext, element: HTMLElement, readElementStyle?: boolean): InlineContext;
 export declare function withInlineStyle(context: InlineContext, style: InlineStyle): InlineContext;
 export declare function marksFor(context: InlineContext): Mark[];

package/dist/editor/clipboard/inlineFormatting.js

@@ -3,6 +3,7 @@ import { rPrOf } from "../../docx/formatting.js";
 import { readRunProps } from "../../docx/runProps.js";
 import { HALF_POINTS_PER_PT, ST_HpsMeasure } from "../../ooxml/simpleTypes.js";
 import { docxSchema } from "../../schema/index.js";
+import { safeHref } from "../../schema/clipboard.js";
 import { editorClassNames } from "../../styles/classNames.js";
 var IGNORED_TAGS = /* @__PURE__ */ new Set([
   "HEAD",
@@ -135,12 +136,6 @@ function styleOf(parent, element) {
   if (background !== null) style.background = background;
   return style;
 }
-function safeHref(value) {
-  const href = value?.trim() ?? "";
-  if (href === "") return null;
-  if (/^(?:https?|mailto|tel):/i.test(href)) return href;
-  return /^(?:[./]|#)/.test(href) ? href : null;
-}
 function contextFor(parent, element, readElementStyle = true) {
   const copiedEditorLink = element.classList.contains(editorClassNames.link) ? element.getAttribute("data-href") : null;
   return {
@@ -217,6 +212,5 @@ export {
   appendInline,
   contextFor,
   marksFor,
-  safeHref,
   withInlineStyle
 };

package/dist/editor/clipboard/plugin.js

@@ -1,25 +1,18 @@
 // src/editor/clipboard/plugin.ts
-import {
-  DOMSerializer,
-  Fragment,
-  Slice
-} from "prosemirror-model";
+import { Fragment, Slice } from "prosemirror-model";
 import { Plugin } from "prosemirror-state";
-import { styleIdOf } from "../../docx/formatting.js";
 import {
   NEW_LISTS_ATTR,
   NO_NEW_LISTS,
   newListsOf,
   newListsValue
 } from "../../numbering/listRegistry.js";
-import { docxSchema, isPageBreak } from "../../schema/index.js";
+import { clipboardSerializer, clipboardText } from "../../schema/clipboard.js";
 import { numIdsIn } from "../commands/listCommands.js";
 import { documentOf } from "../editorDocument.js";
 import { insertPlainText } from "../plainText.js";
 import { moveCaretToDrop } from "../plugins/dropCaret.js";
 import { documentNumbering } from "../plugins/numberingDecorations.js";
-import { COPIED_STYLE_ATTRIBUTE } from "./htmlReader.js";
-import { safeHref } from "./inlineFormatting.js";
 import {
   INTERNAL_TOKEN_ATTRIBUTE,
   internalTokenOf,
@@ -35,132 +28,6 @@ import {
   DEFAULT_READERS,
   plainTextSlice
 } from "./readers.js";
-var PUBLIC_ATTRIBUTES = /* @__PURE__ */ new Set([
-  "alt",
-  "aria-label",
-  "class",
-  "colspan",
-  "height",
-  "href",
-  "lang",
-  "rowspan",
-  "src",
-  "style",
-  "width"
-]);
-function isAttributes(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Node);
-}
-function publicAttributes(attrs) {
-  return Object.fromEntries(
-    Object.entries(attrs).filter(([name]) => PUBLIC_ATTRIBUTES.has(name))
-  );
-}
-function isSpecArray(value) {
-  return Array.isArray(value) && typeof value[0] === "string";
-}
-function stripPrivateAttributes(spec) {
-  if (!isSpecArray(spec)) return spec;
-  const [tag, ...rest] = spec;
-  const attrs = isAttributes(rest[0]) ? publicAttributes(rest[0]) : null;
-  const children = (attrs === null ? rest : rest.slice(1)).map(
-    (child) => isSpecArray(child) ? stripPrivateAttributes(child) : child
-  );
-  return attrs === null ? [tag, ...children] : [tag, attrs, ...children];
-}
-function withDomAttribute(spec, name, value) {
-  if (!isSpecArray(spec)) return spec;
-  const [tag, ...rest] = spec;
-  return isAttributes(rest[0]) ? [tag, { ...rest[0], [name]: value }, ...rest.slice(1)] : [tag, { [name]: value }, ...rest];
-}
-function asTag(spec, tag) {
-  return isSpecArray(spec) ? [tag, ...spec.slice(1)] : spec;
-}
-function copiedMarkSpec(mark, spec) {
-  const stripped = stripPrivateAttributes(spec);
-  if (mark.type !== docxSchema.marks.link) return stripped;
-  const href = safeHref(
-    typeof mark.attrs.href === "string" ? mark.attrs.href : null
-  );
-  return href === null ? stripped : asTag(withDomAttribute(stripped, "href", href), "a");
-}
-function copiedNodeSpec(node, spec) {
-  const stripped = stripPrivateAttributes(spec);
-  if (node.type !== docxSchema.nodes.paragraph) return stripped;
-  const styleId = styleIdOf(node.attrs.pPr);
-  return styleId === null ? stripped : withDomAttribute(stripped, COPIED_STYLE_ATTRIBUTE, styleId);
-}
-function copiedNodes() {
-  const drawn = DOMSerializer.fromSchema(docxSchema);
-  return Object.fromEntries(
-    Object.entries(drawn.nodes).map(([name, toDOM]) => [
-      name,
-      (node) => copiedNodeSpec(node, toDOM(node))
-    ])
-  );
-}
-function copiedMarks() {
-  const drawn = DOMSerializer.fromSchema(docxSchema);
-  return Object.fromEntries(
-    Object.entries(drawn.marks).map(([name, toDOM]) => [
-      name,
-      (mark, inline) => copiedMarkSpec(mark, toDOM(mark, inline))
-    ])
-  );
-}
-var ClipboardSerializer = class extends DOMSerializer {
-  constructor(tokenOf) {
-    super(copiedNodes(), copiedMarks());
-    this.tokenOf = tokenOf;
-  }
-  tokenOf;
-  serializeFragment(fragment, options, target) {
-    const dom = super.serializeFragment(fragment, options, target);
-    const token = target === void 0 ? this.tokenOf() : null;
-    if (token !== null) {
-      dom.firstElementChild?.setAttribute(INTERNAL_TOKEN_ATTRIBUTE, token);
-    }
-    return dom;
-  }
-};
-var UNREADABLE_BLOCKS = /* @__PURE__ */ new Set(["rawBlock"]);
-function stringAttr(value) {
-  return typeof value === "string" ? value : "";
-}
-function inlineText(node) {
-  if (node.isText) return node.text ?? "";
-  if (node.type === docxSchema.nodes.hardBreak) {
-    return isPageBreak(node.attrs.brAttrs) ? "\f" : "\n";
-  }
-  if (node.type === docxSchema.nodes.image) return stringAttr(node.attrs.alt);
-  if (node.type === docxSchema.nodes.noteReference) {
-    return node.attrs.customMarkFollows === true ? "" : stringAttr(node.attrs.label);
-  }
-  return "";
-}
-function rowsText(table) {
-  const rows = [];
-  table.forEach((row) => {
-    const cells = [];
-    row.forEach((cell) => {
-      cells.push(fragmentText(cell.content));
-    });
-    rows.push(cells.join("	"));
-  });
-  return rows.join("\n");
-}
-function blockText(node) {
-  if (node.type === docxSchema.nodes.table) return rowsText(node);
-  if (UNREADABLE_BLOCKS.has(node.type.name)) return "";
-  return fragmentText(node.content);
-}
-function fragmentText(fragment) {
-  const pieces = [];
-  fragment.forEach((child) => {
-    pieces.push(child.isInline ? inlineText(child) : blockText(child));
-  });
-  return pieces.join(fragment.firstChild?.isInline === true ? "" : "\n");
-}
 function bareWrappers(content, openStart, openEnd) {
   const wrapper = content.firstChild;
   if (openStart <= 1 || openEnd <= 1 || content.childCount !== 1)
@@ -181,9 +48,6 @@ function copiedSlice(slice) {
     slice.openEnd
   );
 }
-function clipboardText(slice) {
-  return fragmentText(slice.content);
-}
 function dragCopyModifier() {
   return /Mac|iP(hone|[oa]d)/.test(navigator.platform) ? "altKey" : "ctrlKey";
 }
@@ -198,7 +62,11 @@ function dropMoves(view, event) {
 function docxClipboard(options = {}) {
   const normalizers = options.normalizers ?? DEFAULT_NORMALIZERS;
   let copyToken = null;
-  const serializer = new ClipboardSerializer(() => copyToken);
+  const serializer = clipboardSerializer((copy) => {
+    if (copyToken !== null) {
+      copy.firstElementChild?.setAttribute(INTERNAL_TOKEN_ATTRIBUTE, copyToken);
+    }
+  });
   let host = null;
   const parser = new DocxClipboardParser(
     options.readers ?? DEFAULT_READERS,

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

@@ -1,6 +1,8 @@
 import type { EditorState } from "prosemirror-state";
 import type { FormattingContext, ParagraphStyleOption } from "../../docx/formatting";
+import type { PageGeometry } from "../../docx/pageGeometry";
 import type { ImageToInsert } from "../insertImage";
+import type { HtmlSource } from "./source";
 /**
  * Everything a piece of HTML is read against.
  *
@@ -13,6 +15,8 @@ export interface HtmlReadContext {
     /** The document the markup is read into an element of */
     document: Document;
     formatting: FormattingContext;
+    /** The paper a block read into the document lands on, which is the width a pasted table takes */
+    geometry: PageGeometry;
     paragraphStyles: readonly ParagraphStyleOption[];
     numbering: {
         used: ReadonlySet<number>;
@@ -20,5 +24,11 @@ export interface HtmlReadContext {
     };
     /** The images already loaded for this read, by the token the markup carries */
     images: ReadonlyMap<string, ImageToInsert>;
+    /**
+     * The application that wrote the markup being read (`./source`). It is a property of the markup
+     * and not of the document, so a context built before any markup is in hand names no application
+     * and `readHtml` fills it in from what it is handed.
+     */
+    source: HtmlSource;
 }
 export declare function readContextOf(state: EditorState, document: Document, images?: ReadonlyMap<string, ImageToInsert>): HtmlReadContext;

package/dist/editor/clipboard/readContext.js

@@ -1,17 +1,23 @@
 // src/editor/clipboard/readContext.ts
 import { numIdsIn } from "../commands/listCommands.js";
-import { documentFormatting, documentParagraphStyles } from "../documentStyles.js";
+import {
+  documentFormatting,
+  documentParagraphStyles,
+  sectionGeometryAt
+} from "../documentStyles.js";
 import { canStartNewList } from "../plugins/numberingDecorations.js";
 function readContextOf(state, document, images = /* @__PURE__ */ new Map()) {
   return {
     document,
     formatting: documentFormatting(state),
+    geometry: sectionGeometryAt(state, state.selection.from),
     paragraphStyles: documentParagraphStyles(state),
     numbering: {
       used: numIdsIn(state.doc),
       canCreate: canStartNewList(state)
     },
-    images
+    images,
+    source: "unknown"
   };
 }
 export {

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

@@ -0,0 +1,12 @@
+/**
+ * Which application wrote the markup on the clipboard.
+ *
+ * Every writer of HTML says so somewhere - in a generator meta element, in a class prefix, in the
+ * id it wraps a copy in - and what it says decides which readings apply: Word's list paragraphs
+ * are lists rather than paragraphs beginning with a bullet character, and its `<o:p>` markers are
+ * nothing at all. A reading recognizing no writer stays with what the markup itself states.
+ */
+/** The writers whose markup is read differently from plain HTML */
+export type HtmlSource = "editor" | "word" | "google-docs" | "libreoffice" | "unknown";
+/** The application the markup under this element was written by */
+export declare function detectHtmlSource(root: ParentNode): HtmlSource;

package/dist/editor/clipboard/source.js

@@ -0,0 +1,21 @@
+// src/editor/clipboard/source.ts
+import { editorClassNames } from "../../styles/classNames.js";
+import { INTERNAL_TOKEN_ATTRIBUTE } from "./internalChannel.js";
+var SIGNATURES = [
+  ["editor", `[${INTERNAL_TOKEN_ATTRIBUTE}], .${editorClassNames.paragraph}`],
+  ["word", 'meta[name="Generator" i][content^="Microsoft Word" i], .MsoNormal'],
+  ["google-docs", '[id^="docs-internal-guid-"]'],
+  [
+    "libreoffice",
+    'meta[name="generator" i][content*="LibreOffice" i], meta[name="generator" i][content*="OpenOffice" i]'
+  ]
+];
+function detectHtmlSource(root) {
+  for (const [source, selector] of SIGNATURES) {
+    if (root.querySelector(selector) !== null) return source;
+  }
+  return "unknown";
+}
+export {
+  detectHtmlSource
+};

package/dist/editor/commands/comments/editing.js

@@ -14,6 +14,7 @@ import {
 } from "../../../docx/story.js";
 import { docxSchema } from "../../../schema/index.js";
 import { guardedCommand } from "../../../schema/guards.js";
+import { isWrapperType } from "../../../schema/wrappers.js";
 import {
   reservedCommentIds,
   reservedCommentParaIds
@@ -93,7 +94,7 @@ function wrapperMarksAt(state, pos, side) {
   const resolved = state.doc.resolve(pos);
   const adjacent = side === "before" ? resolved.nodeBefore : resolved.nodeAfter;
   return (adjacent?.marks ?? resolved.marks()).filter(
-    (mark) => mark.type.name === "sdt" || mark.type.name === "link"
+    (mark) => isWrapperType(mark.type)
   );
 }
 function addCommentTransaction(state, comment, at) {

package/dist/editor/commands/linkCommands.js

@@ -1,6 +1,7 @@
 // src/editor/commands/linkCommands.ts
 import { docxSchema } from "../../schema/index.js";
 import { openStretches } from "../../schema/guards.js";
+import { innermostDepth, wrapperMarks, wrapperOf } from "../../schema/wrappers.js";
 var linkType = docxSchema.marks.link;
 function text(value) {
   return typeof value === "string" ? value : null;
@@ -16,6 +17,15 @@ function settled(address) {
 function linkMarkOf(marks) {
   return marks.find((mark) => mark.type === linkType) ?? null;
 }
+function linkOf(node) {
+  return wrapperOf(node, linkType);
+}
+function sameLink(a, b) {
+  return atDepth(a, 0).eq(atDepth(b, 0));
+}
+function atDepth(mark, depth) {
+  return mark.attrs.depth === depth ? mark : mark.type.create({ ...mark.attrs, depth });
+}
 function linkable(node, parent) {
   if (parent === null || !parent.type.allowsMarkType(linkType)) return false;
   return node.isText || node.type.allowsMarkType(linkType);
@@ -28,7 +38,10 @@ function piecesIn(doc, from, to) {
     const start = Math.max(pos, from);
     const end = Math.min(pos + node.nodeSize, to);
     if (start < end) {
-      pieces.push({ from: start, to: end, link: linkMarkOf(node.marks) });
+      const link = linkOf(node);
+      pieces.push(
+        link === null ? { from: start, to: end, link, wrappers: wrapperMarks(node) } : { from: start, to: end, link }
+      );
     }
     return false;
   });
@@ -37,12 +50,12 @@ function piecesIn(doc, from, to) {
 function linkSpans(parent, start) {
   const spans = [];
   parent.forEach((child, offset) => {
-    const link = linkMarkOf(child.marks);
+    const link = linkOf(child);
     if (!link) return;
     const from = start + offset;
     const to = from + child.nodeSize;
     const last = spans.at(-1);
-    if (last && last.to === from && last.link.eq(link)) last.to = to;
+    if (last && last.to === from && sameLink(last.link, link)) last.to = to;
     else spans.push({ from, to, link });
   });
   return spans;
@@ -52,7 +65,7 @@ function caretSpan(state) {
   const link = linkMarkOf($from.marks());
   if (!link) return null;
   return linkSpans($from.parent, $from.start()).find(
-    (span) => span.link.eq(link) && span.from <= $from.pos && $from.pos <= span.to
+    (span) => sameLink(span.link, link) && span.from <= $from.pos && $from.pos <= span.to
   ) ?? null;
 }
 function selectionSpan(state) {
@@ -93,7 +106,9 @@ function selectionPieces(state) {
   ]);
 }
 function linkMarkFor(piece, href) {
-  return linkType.create({ ...piece.link?.attrs, href });
+  if (piece.link !== null)
+    return linkType.create({ ...piece.link.attrs, href });
+  return linkType.create({ href, depth: innermostDepth(piece.wrappers) + 1 });
 }
 function setLink(url) {
   return (state, dispatch) => {