@portone/docx-editor 0.5.0 → 0.5.1

package/dist/editor/commands/lockCommands.js

@@ -14,9 +14,11 @@ import {
   unlockAllowed
 } from "../../schema/locks.js";
 import { editsShut } from "../../schema/protectionState.js";
-function lockedControlMark(id) {
+import { innermostDepth, sharedWrappers } from "../../schema/wrappers.js";
+function lockedControlMark(id, depth) {
   return docxSchema.marks.sdt.create({
     sdtPrefix: lockedControlPrefix(id),
+    depth,
     contentsLocked: true,
     deletionLocked: true
   });
@@ -45,11 +47,26 @@ function overlaps(a, b) {
 function reaches(a, b) {
   return a.from <= b.to && a.to >= b.from;
 }
+function contains(a, b) {
+  return a.from <= b.from && a.to >= b.to;
+}
 function stretchIn(block, reach) {
   const from = Math.max(block.start, reach.from);
   const to = Math.min(block.start + block.node.content.size, reach.to);
   return from < to ? { from, to } : null;
 }
+function wrapperDepthOver(block, stretch, replaced = null) {
+  const covered = [];
+  block.node.forEach((child, offset) => {
+    const from = block.start + offset;
+    if (from < stretch.to && stretch.from < from + child.nodeSize) {
+      covered.push(child);
+    }
+  });
+  const shared = sharedWrappers(covered);
+  const at = replaced === null ? -1 : shared.findIndex((wrapper) => wrapper.eq(replaced));
+  return innermostDepth(at === -1 ? shared : shared.slice(0, at)) + 1;
+}
 function gapsIn(stretch, spans) {
   const gaps = [];
   let at = stretch.from;
@@ -61,38 +78,56 @@ function gapsIn(stretch, spans) {
   if (at < stretch.to) gaps.push({ from: at, to: stretch.to });
   return gaps;
 }
-function takeover(met, stretch, open) {
+function takeover(block, met, stretch, open) {
   const only = met.length === 1 ? met[0] : null;
   const prefix = only && prefixOf(only.mark.attrs);
   if (!only || isLocked(only.mark) || !prefix || !namesNothing(prefix)) {
     return null;
   }
-  const mark = open ? withLock(only.mark, true) : null;
-  return mark ? {
+  const locked = open ? withLock(only.mark, true) : null;
+  if (!locked) return null;
+  const widened = {
     from: Math.min(stretch.from, only.from),
-    to: Math.max(stretch.to, only.to),
-    mark
-  } : null;
+    to: Math.max(stretch.to, only.to)
+  };
+  const depth = wrapperDepthOver(block, widened, only.mark);
+  return {
+    ...widened,
+    mark: depth === locked.attrs.depth ? locked : locked.type.create({ ...locked.attrs, depth }),
+    replaces: only.mark
+  };
+}
+function outermost(spans) {
+  const kept = [];
+  for (const span of spans) {
+    if (!kept.some((other) => overlaps(other, span))) kept.push(span);
+  }
+  return kept;
 }
 function blockLockEdits(state, block, spans, reach) {
   const stretch = stretchIn(block, reach);
   if (!stretch) return [];
   const open = (of) => openStretches(state, of, "mark");
-  const met = spans.filter((span) => overlaps(span, stretch));
-  const taken = takeover(met, stretch, open([stretch]).length > 0);
+  const met = outermost(spans.filter((span) => overlaps(span, stretch)));
+  const taken = takeover(block, met, stretch, open([stretch]).length > 0);
   if (taken) return [taken];
   const shut = open(met.filter((span) => !isLocked(span.mark))).flatMap(
     (span) => {
       const mark = withLock(span.mark, true);
-      return mark ? [{ from: span.from, to: span.to, mark }] : [];
+      return mark ? [{ from: span.from, to: span.to, mark, replaces: span.mark }] : [];
     }
   );
   const fresh = open(gapsIn(stretch, spans)).map((gap) => ({
     ...gap,
-    mark: lockedControlMark(newControlId())
+    mark: lockedControlMark(newControlId(), wrapperDepthOver(block, gap))
   }));
   return [...shut, ...fresh];
 }
+function liftable(locked, reach) {
+  return locked.filter(
+    (span, index) => contains(reach, span) || !locked.slice(index + 1).some((inner) => contains(span, inner))
+  );
+}
 function selectionLockDetail(state) {
   const selection = state.selection;
   const locking = !selection.empty && selection instanceof TextSelection;
@@ -106,9 +141,14 @@ function selectionLockDetail(state) {
       if (!node.isTextblock) return true;
       const block = { node, start: pos + 1 };
       const controls = controlSpans(block);
-      for (const span of controls) {
-        if (isLocked(span.mark) && reaches(span, reach)) spans.push(span);
-      }
+      spans.push(
+        ...liftable(
+          controls.filter(
+            (span) => isLocked(span.mark) && reaches(span, reach)
+          ),
+          reach
+        )
+      );
       if (locking) {
         edits.push(...blockLockEdits(state, block, controls, reach));
       }
@@ -153,7 +193,10 @@ var lockSelection = guardedCommand((state) => {
   const edits = lockEditsOf(selectionLockDetail(state));
   if (edits.length === 0) return null;
   const tr = state.tr;
-  for (const edit of edits) tr.addMark(edit.from, edit.to, edit.mark);
+  for (const edit of edits) {
+    if (edit.replaces) tr.removeMark(edit.from, edit.to, edit.replaces);
+    tr.addMark(edit.from, edit.to, edit.mark);
+  }
   return tr;
 });
 function unlockCell(tr, cell) {
@@ -171,8 +214,8 @@ var unlockSelection = guardedCommand((state) => {
   const tr = state.tr.setMeta(unlockAllowed, true);
   for (const span of spans) {
     const opened = withLock(span.mark, false);
+    tr.removeMark(span.from, span.to, span.mark);
     if (opened) tr.addMark(span.from, span.to, opened);
-    else tr.removeMark(span.from, span.to, span.mark);
   }
   for (const cell of cells) unlockCell(tr, cell);
   return tr;

package/dist/editor/commands/paragraphCommands.js

@@ -2,14 +2,14 @@
 import {
   paragraphAttrsOf,
   resolveParagraph,
-  runMarkUnder,
-  styleIdOf
+  runMarkUnder
 } from "../../docx/formatting.js";
 import {
   withParagraphAlign,
   withParagraphStyle
 } from "../../docx/paraProps.js";
 import { toParagraphFormat } from "../../model/format.js";
+import { styleIdOf } from "../../ooxml/props.js";
 import { docxSchema } from "../../schema/index.js";
 import { lockedMarkOf } from "../../schema/locks.js";
 import { documentFormatting } from "../documentStyles.js";

package/dist/ooxml/props.d.ts

@@ -118,3 +118,5 @@ export declare function editChild(props: Props, path: readonly [string, ...strin
  * null if its shape cannot be made out, in which case the caller leaves the display values alone.
  */
 export declare function parsePropsXml(xml: string): Element | null;
+/** The style name the paragraph formatting XML points at. null if it points at none */
+export declare function styleIdOf(pPr: unknown): string | null;

package/dist/ooxml/props.js

@@ -3,6 +3,7 @@ import { childOrderOf } from "./childOrder.js";
 import { attrsText, emptyTagXml } from "./element.js";
 import { wName } from "./names.js";
 import { parseAttrs, readTag } from "./tagScan.js";
+import { childValue } from "./units.js";
 import { elementChildren, localPart, namespaceDecls, parseXml } from "./xml.js";
 function rawAttrs(source, tag) {
   const closeLength = tag.kind === "empty" ? 2 : 1;
@@ -207,6 +208,18 @@ function parsePropsXml(xml) {
     return null;
   }
 }
+var styleIdsByPPr = /* @__PURE__ */ new Map();
+var STYLE_ID_CACHE_LIMIT = 2e3;
+function styleIdOf(pPr) {
+  if (typeof pPr !== "string" || !pPr.includes("pStyle")) return null;
+  const known = styleIdsByPPr.get(pPr);
+  if (known !== void 0) return known;
+  const el = parsePropsXml(pPr);
+  const id = el ? childValue(el, "pStyle") : null;
+  if (styleIdsByPPr.size >= STYLE_ID_CACHE_LIMIT) styleIdsByPPr.clear();
+  styleIdsByPPr.set(pPr, id);
+  return id;
+}
 export {
   attrsOf,
   childElement,
@@ -220,5 +233,6 @@ export {
   renderProps,
   setChild,
   setChildren,
+  styleIdOf,
   withAttrs
 };

package/dist/schema/attrRoles.js

@@ -124,6 +124,12 @@ var NODE_ATTR_ROLES = {
     guarded: { role: "session", class: "derived" }
   }
 };
+var WRAPPER_ATTR_ROLES = {
+  // Which wrapper of its kind this is, counted through the document as it was opened
+  key: { role: "session", class: "identity" },
+  // How deep inside the other wrappers this one stood in the file
+  depth: { role: "session", class: "identity" }
+};
 var MARK_ATTR_ROLES = {
   run: {
     rPr: { role: "source", class: "preserved" },
@@ -132,15 +138,14 @@ var MARK_ATTR_ROLES = {
   },
   sdt: {
     sdtPrefix: { role: "source", class: "preserved" },
-    // Counted through the document as it was opened, to tell one control from the next
-    sdtKey: { role: "session", class: "identity" },
+    ...WRAPPER_ATTR_ROLES,
     contentsLocked: { role: "source", class: "derived" },
     deletionLocked: { role: "source", class: "derived" }
   },
   link: {
     linkPrefix: { role: "source", class: "preserved" },
     href: { role: "source", class: "model" },
-    linkKey: { role: "session", class: "identity" }
+    ...WRAPPER_ATTR_ROLES
   },
   tab: { tabAttrs: { role: "source", class: "preserved" } }
 };

package/dist/schema/clipboard.d.ts

@@ -0,0 +1,72 @@
+/**
+ * What each node and mark looks like once it has left the editor.
+ *
+ * A node draws itself twice. `toDOM` draws the page, where the editor reads its own attributes
+ * back (an IME composition, a browser edit), so everything the document is written from stands on
+ * the element. A copy lands in Word, in a spreadsheet, in a mail: none of them can read a `w:pPr`,
+ * and none of them should be handed a comment's author or the body of a footnote. So the shape a
+ * copy takes is declared here, beside the schema, rather than worked out afterwards by taking the
+ * page's drawing apart.
+ *
+ * The two cannot drift apart unnoticed: `Readonly<Record<DocxNodeName, ...>>` refuses to compile
+ * until a node added to the schema says what it leaves as, and `clipboard.test.ts` asks the schema
+ * itself the same question at runtime.
+ */
+import { type DOMOutputSpec, DOMSerializer, type Mark, type Node as PMNode, type Schema, type Slice } from "prosemirror-model";
+import { type docxSchema } from "./docxSchema";
+/**
+ * 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";
+/**
+ * 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 interface ClipboardNodeSpec {
+    /**
+     * The HTML a copy carries. `null` in place of a function says this kind of node never leaves the
+     * editor; a function answering null says this one leaves nothing. Either way neither the node
+     * nor anything inside it is written.
+     */
+    toClipboardDOM: ((node: PMNode) => DOMOutputSpec | null) | null;
+    /**
+     * The plain text a copy carries, given what its children said. A null answer leaves the node out
+     * of the text entirely, separator and all, so a block standing for something invisible does not
+     * open a blank line where it stood.
+     */
+    toClipboardText: ((node: PMNode, children: readonly string[]) => string | null) | null;
+}
+export interface ClipboardMarkSpec {
+    /** null writes no wrapper, and the content it covered goes out on its own */
+    toClipboardDOM: ((mark: Mark) => DOMOutputSpec) | null;
+}
+/**
+ * `Schema.nodes` is indexed by `string` as well as by the names it was built from, so `keyof` over
+ * it widens to `string`. The generic argument the schema literal was inferred with keeps them.
+ */
+export type DocxNodeName = typeof docxSchema extends Schema<infer N, string> ? N : never;
+export type DocxMarkName = typeof docxSchema extends Schema<string, infer M> ? M : never;
+export declare const clipboardSpecs: {
+    nodes: Readonly<Record<DocxNodeName, ClipboardNodeSpec>>;
+    marks: Readonly<Record<DocxMarkName, ClipboardMarkSpec>>;
+};
+/**
+ * The serializer a copy is written with.
+ *
+ * `stampCopy` is handed the whole copy once it stands, and only once: `DOMSerializer` draws a
+ * node's children by calling `serializeFragment` again with the element it drew as the target, so
+ * a call carrying one is inside the copy rather than around it.
+ */
+export declare function clipboardSerializer(stampCopy?: (copy: HTMLElement | DocumentFragment) => void): DOMSerializer;
+/**
+ * The plain text a copy leaves beside the HTML.
+ *
+ * ProseMirror's own answer is the text content with a line between blocks, which loses a tab, a
+ * page break, and the difference between the next cell and the next row. Somewhere those are the
+ * whole of what was copied, a table pasted into a spreadsheet above all.
+ */
+export declare function clipboardText(slice: Slice): string;

package/dist/schema/clipboard.js

@@ -0,0 +1,288 @@
+// src/schema/clipboard.ts
+import {
+  DOMSerializer,
+  Fragment
+} from "prosemirror-model";
+import {
+  spanCount,
+  toCellFormat,
+  toGridCols,
+  toParagraphFormat,
+  toRowFormat,
+  toRunFormat,
+  toTableFormat,
+  toTableWidth
+} from "../model/format.js";
+import { styleIdOf } from "../ooxml/props.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { DEFAULT_FONT_FALLBACKS } from "../styles/fontStack.js";
+import {
+  cellStyle,
+  columnWidthPx,
+  paragraphStyle,
+  rowStyle,
+  tableStyle
+} from "../styles/inlineStyle.js";
+import { isPageBreak } from "./docxSchema.js";
+import { imageAttrs, runAttrs } from "./rendering.js";
+var COPIED_STYLE_ATTRIBUTE = "data-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 textAttr(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function noteLabel(node) {
+  return node.attrs.customMarkFollows === true ? "" : textAttr(node.attrs.label) ?? "";
+}
+function oneLine(text) {
+  return text.replace(/[\n\f]+/g, " ");
+}
+function spanAttribute(count) {
+  const span = spanCount(count);
+  return span > 1 ? `${span}` : void 0;
+}
+function preservedText(node) {
+  const display = node.attrs.display;
+  if (display === "break") return "\n";
+  if (display !== "text" && display !== "chip") return null;
+  const drawn = textAttr(node.attrs.text);
+  return drawn === void 0 || drawn === "" ? null : drawn;
+}
+var PRESERVED_SPEC = {
+  toClipboardDOM: (node) => {
+    const said = preservedText(node);
+    if (said === null) return null;
+    return said === "\n" ? ["br"] : ["span", said];
+  },
+  toClipboardText: preservedText
+};
+var WRITES_NOTHING = {
+  toClipboardDOM: null,
+  toClipboardText: null
+};
+var CLIPBOARD_NODES = {
+  // A slice carries blocks, never the document itself, so neither answer is ever asked for
+  doc: WRITES_NOTHING,
+  paragraph: {
+    toClipboardDOM: (node) => [
+      "p",
+      {
+        class: editorClassNames.paragraph,
+        style: paragraphStyle(
+          toParagraphFormat(node.attrs.format),
+          toRunFormat(node.attrs.styleRun)
+        ),
+        [COPIED_STYLE_ATTRIBUTE]: styleIdOf(node.attrs.pPr) ?? void 0
+      },
+      0
+    ],
+    toClipboardText: (_node, children) => children.join("")
+  },
+  table: {
+    toClipboardDOM: (node) => {
+      const attrs = {
+        class: editorClassNames.table,
+        style: tableStyle(
+          toTableFormat(node.attrs.format),
+          toTableWidth(node.attrs.tblW)
+        )
+      };
+      const body = ["tbody", 0];
+      const columns = toGridCols(node.attrs.gridCols).map((dxa) => [
+        "col",
+        { style: `width:${columnWidthPx(dxa)}px` }
+      ]);
+      if (columns.length === 0) return ["table", attrs, body];
+      return ["table", attrs, ["colgroup", ...columns], body];
+    },
+    toClipboardText: (_node, children) => children.join("\n")
+  },
+  tableRow: {
+    toClipboardDOM: (node) => [
+      "tr",
+      {
+        class: editorClassNames.tableRow,
+        style: rowStyle(toRowFormat(node.attrs.format))
+      },
+      0
+    ],
+    toClipboardText: (_node, children) => children.join("	")
+  },
+  tableCell: {
+    toClipboardDOM: (node) => [
+      "td",
+      {
+        class: editorClassNames.tableCell,
+        style: cellStyle(toCellFormat(node.attrs.format)),
+        colspan: spanAttribute(node.attrs.colspan),
+        rowspan: spanAttribute(node.attrs.rowspan)
+      },
+      0
+    ],
+    // A tab stands between two cells and a line between two rows wherever a table is pasted as
+    // text, so nothing inside a cell may write a line: several paragraphs, a line break of their
+    // own and a nested table all say what they hold on the one line this cell stands on
+    toClipboardText: (_node, children) => oneLine(children.join(" "))
+  },
+  rawBlock: WRITES_NOTHING,
+  hardBreak: {
+    toClipboardDOM: () => ["br"],
+    // A page break ends more than a line, and the form feed is what says so in plain text
+    toClipboardText: (node) => isPageBreak(node.attrs.brAttrs) ? "\f" : "\n"
+  },
+  image: {
+    // The measure the document keeps stays behind. The pixels it was drawn at are what another
+    // application reads a size from, and what a paste back into this editor reads one from
+    toClipboardDOM: (node) => ["img", imageAttrs(node.attrs)],
+    // A picture is not text. But a copy may be read where no picture can follow, and there the
+    // words the document gave it for that very case are better than a gap
+    toClipboardText: (node) => textAttr(node.attrs.alt) ?? ""
+  },
+  commentStart: WRITES_NOTHING,
+  commentEnd: WRITES_NOTHING,
+  commentReference: WRITES_NOTHING,
+  noteReference: {
+    // A note whose own mark follows draws no number, and an empty superscript would stand for
+    // nothing wherever the copy lands
+    toClipboardDOM: (node) => {
+      const label = noteLabel(node);
+      if (label === "") return null;
+      const kind = node.attrs.kind === "endnote" ? "Endnote" : "Footnote";
+      return ["sup", { "aria-label": `${kind} ${label}` }, label];
+    },
+    toClipboardText: noteLabel
+  },
+  rawRunContent: PRESERVED_SPEC,
+  rawInline: PRESERVED_SPEC,
+  text: {
+    // `DOMSerializer` writes a text node itself and never asks a spec for one, so there is no
+    // drawing to declare. The characters travel as they stand
+    toClipboardDOM: null,
+    toClipboardText: (node) => node.text ?? ""
+  }
+};
+var CLIPBOARD_MARKS = {
+  // A content control is a wrapper the file keeps and nothing outside this editor reads back, so
+  // the text it held leaves on its own rather than inside a span standing for nothing
+  sdt: { toClipboardDOM: null },
+  link: {
+    // The editor draws the address as data so that a click inside the text places the caret.
+    // Anywhere else an anchor is what a link is: it follows in mail or a document, and it comes
+    // back as a link when it is pasted here again
+    toClipboardDOM: (mark) => {
+      const href = safeHref(textAttr(mark.attrs.href) ?? null);
+      const attrs = { class: editorClassNames.link, href: href ?? void 0 };
+      return href === null ? ["span", attrs, 0] : ["a", attrs, 0];
+    }
+  },
+  run: {
+    // The built-in fallbacks rather than the ones this editor was given: a copy is read where the
+    // host's font list means nothing, and the schema cannot see which editor it is drawing for
+    toClipboardDOM: (mark) => [
+      "span",
+      runAttrs(mark.attrs, DEFAULT_FONT_FALLBACKS),
+      0
+    ]
+  },
+  tab: { toClipboardDOM: () => ["span", { class: editorClassNames.tab }, 0] }
+};
+var clipboardSpecs = { nodes: CLIPBOARD_NODES, marks: CLIPBOARD_MARKS };
+var NODES_BY_NAME = CLIPBOARD_NODES;
+function nodeSpec(node) {
+  return NODES_BY_NAME[node.type.name];
+}
+function clipboardDOMOf(node) {
+  const spec = nodeSpec(node);
+  if (spec === void 0 || spec.toClipboardDOM === null) return null;
+  return spec.toClipboardDOM(node);
+}
+function written(fragment) {
+  const kept = [];
+  fragment.forEach((child) => {
+    if (child.isText || clipboardDOMOf(child) !== null) kept.push(child);
+  });
+  return kept.length === fragment.childCount ? fragment : Fragment.from(kept);
+}
+var ClipboardSerializer = class extends DOMSerializer {
+  constructor(stampCopy) {
+    super(clipboardNodes(), clipboardMarks());
+    this.stampCopy = stampCopy;
+  }
+  stampCopy;
+  serializeFragment(fragment, options, target) {
+    const dom = super.serializeFragment(written(fragment), options, target);
+    if (target !== void 0) return dom;
+    if (dom.firstChild === null && fragment.childCount > 0) {
+      carrier(dom, options?.document);
+    }
+    this.stampCopy?.(dom);
+    return dom;
+  }
+};
+function carrier(copy, document) {
+  const owner = document ?? copy.ownerDocument;
+  if (owner !== null) copy.appendChild(owner.createElement("span"));
+}
+function clipboardNodes() {
+  return Object.fromEntries(
+    Object.entries(CLIPBOARD_NODES).flatMap(([name, spec]) => {
+      const draw = spec.toClipboardDOM;
+      return draw === null ? [] : [
+        [
+          name,
+          (node) => {
+            const drawn = draw(node);
+            if (drawn === null) {
+              throw new Error(
+                `${name} was serialized after drawing nothing`
+              );
+            }
+            return drawn;
+          }
+        ]
+      ];
+    })
+  );
+}
+function clipboardMarks() {
+  return Object.fromEntries(
+    Object.entries(CLIPBOARD_MARKS).flatMap(
+      ([name, spec]) => (
+        // A mark with no drawing of its own is left out, and `DOMSerializer` writes the content it
+        // covered without a wrapper
+        spec.toClipboardDOM === null ? [] : [[name, spec.toClipboardDOM]]
+      )
+    )
+  );
+}
+function clipboardSerializer(stampCopy) {
+  return new ClipboardSerializer(stampCopy);
+}
+function textPieces(fragment) {
+  const pieces = [];
+  fragment.forEach((child) => {
+    const piece = clipboardTextOf(child);
+    if (piece !== null) pieces.push(piece);
+  });
+  return pieces;
+}
+function clipboardTextOf(node) {
+  const spec = nodeSpec(node);
+  if (spec === void 0 || spec.toClipboardText === null) return null;
+  return spec.toClipboardText(node, textPieces(node.content));
+}
+function clipboardText(slice) {
+  const pieces = textPieces(slice.content);
+  return pieces.join(slice.content.firstChild?.isInline === true ? "" : "\n");
+}
+export {
+  COPIED_STYLE_ATTRIBUTE,
+  clipboardSerializer,
+  clipboardSpecs,
+  clipboardText,
+  safeHref
+};