@portone/docx-editor 0.5.0 → 0.6.0

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/editor/createEditor.js

@@ -26,6 +26,7 @@ import { imageFiles } from "./imageFiles.js";
 import { columnResize } from "./plugins/columnResize.js";
 import { commentComposer } from "./plugins/commentComposer.js";
 import { commentDecorations } from "./plugins/commentDecorations.js";
+import { commentRestoration } from "./plugins/commentRestoration.js";
 import {
   displayDerivation,
   withDerivedDisplay
@@ -96,6 +97,9 @@ function createEditorState(doc, options = {}) {
       // The list beside the page, the lookup the comment commands ask, and these ranges are the
       // one walk this plugin holds (`plugins/commentDecorations`)
       commentDecorations(),
+      // A comment outlives the text it was written for: an edit that sweeps its reference away has
+      // it put back where the deletion left, detached from the page (`plugins/commentRestoration`)
+      commentRestoration(),
       // What the notes under the page are, worked out from the document the same way
       noteProjection.plugin,
       // Adjacent text tabs still need separate DOM ranges for layout and pointer selection.

package/dist/editor/plugins/commentDecorations.js

@@ -34,7 +34,7 @@ function commentsIn(doc) {
     const id = stringAttr(node.attrs.id) ?? "";
     const start = markers.starts.get(id);
     const end = markers.ends.get(id);
-    const hasRange = start !== void 0 && end !== void 0 && start < end;
+    const anchored = start !== void 0 && end !== void 0 && start < end;
     const point = start ?? end ?? pos;
     return {
       id,
@@ -43,9 +43,10 @@ function commentsIn(doc) {
       initials: stringAttr(node.attrs.initials),
       date: stringAttr(node.attrs.date),
       text: bodyText(doc, id),
-      from: hasRange ? start + 1 : point,
-      to: hasRange ? end : point,
+      from: anchored ? start + 1 : point,
+      to: anchored ? end : point,
       referencePos: pos,
+      anchored,
       resolved: node.attrs.resolved === true,
       replies: repliesAttr(node.attrs.replies).map((reply) => ({
         id: reply.id,
@@ -69,7 +70,7 @@ function deriveComments(doc) {
     byId,
     decorations: DecorationSet.create(
       doc,
-      comments.filter((comment) => comment.from < comment.to).map(
+      comments.filter((comment) => !comment.resolved && comment.from < comment.to).map(
         (comment) => Decoration.inline(comment.from, comment.to, {
           class: editorClassNames.commentRange,
           "data-comment-id": comment.id

package/dist/editor/plugins/commentRestoration.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Keeps a comment when the text it was written for goes away.
+ *
+ * Deleting commented text is an edit of the body, not a decision about the thread, so a body edit
+ * that takes a comment's nodes away has them put back at the spots the edit left: the thread stays
+ * anchored where one range marker survived, detached where both went (`DocumentComment.anchored`).
+ *
+ * The comment's story (`docx/story`) tells such an edit from `removeComment`: a body deletion does
+ * not reach the story, so a comment is put back while its story stands, which only `removeComment`
+ * takes away. The cost is that a reference the comments part held no body for is never put back.
+ *
+ * A restoration is an ordinary transaction the guards judge (`editor/plugins/lockedContent`): the
+ * nodes take the nearest spot left open, and a document leaving none loses the comment. A range
+ * marker with no home takes its surviving counterpart down, so no export carries half a range.
+ *
+ * A restoration needs no deferral around an open IME composition: the nodes go in beside the
+ * composed text rather than rewriting it (`e2e/hangulComposition.spec.ts`).
+ */
+import { Plugin } from "prosemirror-state";
+export declare function commentRestoration(): Plugin;

package/dist/editor/plugins/commentRestoration.js

@@ -0,0 +1,168 @@
+// src/editor/plugins/commentRestoration.ts
+import {
+  Plugin,
+  TextSelection
+} from "prosemirror-state";
+import { storyKey, storyOf } from "../../docx/story.js";
+import { docxSchema } from "../../schema/index.js";
+import { editShut, transactionTouchesComments } from "../../schema/guards.js";
+import { stringAttr } from "../commands/comments/model.js";
+var NODE_FIELD = {
+  commentStart: "start",
+  commentEnd: "end",
+  commentReference: "reference"
+};
+var NODE_FIELDS = ["start", "end", "reference"];
+var MAPPING_SIDE = {
+  start: 1,
+  end: -1,
+  reference: -1
+};
+var NO_NODES = { start: null, end: null, reference: null };
+function commentNodesIn(doc) {
+  const found = /* @__PURE__ */ new Map();
+  doc.descendants((node, pos) => {
+    const field = NODE_FIELD[node.type.name];
+    if (field === void 0) return true;
+    const id = stringAttr(node.attrs.id);
+    if (id === null) return true;
+    const nodes = found.get(id) ?? { ...NO_NODES };
+    found.set(id, nodes);
+    if (nodes[field] === null) nodes[field] = { node, pos };
+    return true;
+  });
+  return found;
+}
+function inlineRanges(doc) {
+  const type = docxSchema.nodes.commentReference;
+  const ranges = [];
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    if (node.type.contentMatch.matchType(type) !== null) {
+      ranges.push({ from: pos + 1, to: pos + 1 + node.content.size });
+    }
+    return false;
+  });
+  return ranges;
+}
+function within(ranges, pos) {
+  return ranges.some((range) => pos >= range.from && pos <= range.to);
+}
+function* homes(ranges, wanted, caret) {
+  if (within(ranges, wanted)) yield wanted;
+  if (caret !== wanted && within(ranges, caret)) yield caret;
+  for (let index = ranges.length - 1; index >= 0; index -= 1) {
+    const range = ranges[index];
+    if (range !== void 0 && range.to < wanted) yield range.to;
+  }
+  for (const range of ranges) {
+    if (range.from > wanted) yield range.from;
+  }
+}
+function allowedHome(state, ranges, wanted, caret) {
+  for (const at of homes(ranges, wanted, caret)) {
+    if (!editShut(state, { kind: "insert", at })) return at;
+  }
+  return null;
+}
+function mappedThrough(transactions, pos, side) {
+  return transactions.reduce((at, tr) => tr.mapping.map(at, side), pos);
+}
+function restorable(node) {
+  return node.type.create(
+    node.attrs,
+    null,
+    node.marks.filter((mark) => mark.type === docxSchema.marks.run)
+  );
+}
+function planRestoration(transactions, oldState, newState) {
+  const before = commentNodesIn(oldState.doc);
+  const after = commentNodesIn(newState.doc);
+  const ranges = inlineRanges(newState.doc);
+  const caret = newState.selection.from;
+  const plan = { insertions: [], removals: [] };
+  for (const [id, was] of before) {
+    if (storyOf(newState.doc, storyKey("comment", id)) === null) continue;
+    const now = after.get(id) ?? NO_NODES;
+    for (const field of NODE_FIELDS) {
+      const lost = was[field];
+      if (lost === null || now[field] !== null) continue;
+      const counterpart = field === "start" ? now.end : field === "end" ? now.start : null;
+      if (field !== "reference" && counterpart === null) continue;
+      const at = allowedHome(
+        newState,
+        ranges,
+        mappedThrough(transactions, lost.pos, MAPPING_SIDE[field]),
+        caret
+      );
+      if (at !== null) {
+        plan.insertions.push({
+          node: restorable(lost.node),
+          at,
+          was: lost.pos
+        });
+      } else if (counterpart !== null && !markerShut(newState, counterpart)) {
+        plan.removals.push(counterpart);
+      }
+    }
+  }
+  return plan;
+}
+function markerShut(state, marker) {
+  return editShut(state, {
+    kind: "replace",
+    from: marker.pos,
+    to: marker.pos + marker.node.nodeSize
+  });
+}
+function pastCommentNodes(doc, pos, direction) {
+  let at = pos;
+  for (; ; ) {
+    const resolved = doc.resolve(at);
+    const next = direction < 0 ? resolved.nodeBefore : resolved.nodeAfter;
+    if (next === null || NODE_FIELD[next.type.name] === void 0) return at;
+    at += direction * next.nodeSize;
+  }
+}
+function withCaretPastMarkers(tr, oldState, newState) {
+  const { selection } = newState;
+  if (!(selection instanceof TextSelection) || !selection.empty) return tr;
+  if (!tr.doc.eq(oldState.doc)) return tr;
+  const direction = selection.from < oldState.selection.from ? -1 : 1;
+  return tr.setSelection(
+    TextSelection.create(
+      tr.doc,
+      pastCommentNodes(tr.doc, tr.selection.from, direction)
+    )
+  );
+}
+function restoration(transactions, oldState, newState) {
+  const plan = planRestoration(transactions, oldState, newState);
+  if (plan.insertions.length === 0 && plan.removals.length === 0) return null;
+  const tr = newState.tr;
+  for (const marker of [...plan.removals].sort(
+    (left, right) => right.pos - left.pos
+  )) {
+    tr.delete(marker.pos, marker.pos + marker.node.nodeSize);
+  }
+  const ordered = [...plan.insertions].sort(
+    (left, right) => left.at - right.at || left.was - right.was
+  );
+  for (const { node, at } of ordered) {
+    tr.insert(tr.mapping.map(at), node);
+  }
+  if (!tr.docChanged) return null;
+  return withCaretPastMarkers(tr, oldState, newState);
+}
+function commentRestoration() {
+  return new Plugin({
+    appendTransaction(transactions, oldState, newState) {
+      if (!transactions.some((tr) => tr.docChanged)) return null;
+      if (!transactions.some(transactionTouchesComments)) return null;
+      return restoration(transactions, oldState, newState);
+    }
+  });
+}
+export {
+  commentRestoration
+};

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;