@portone/docx-editor 0.5.0 → 0.5.1

package/dist/schema/docxSchema.js

@@ -35,6 +35,7 @@ import {
   tableStyle
 } from "../styles/inlineStyle.js";
 import { imageNodeSpec, runMarkSpec } from "./rendering.js";
+import { WRAPPER_ATTRS, WRAPPER_GROUP } from "./wrappers.js";
 import { imageNodeSpec as imageNodeSpec2, runMarkSpec as runMarkSpec2 } from "./rendering.js";
 var NO_STORIES = Object.freeze({});
 function isRecord(value) {
@@ -572,7 +573,7 @@ var docxSchema = new Schema({
     hardBreak: {
       group: "inline",
       inline: true,
-      marks: "run sdt link",
+      marks: "run wrapper",
       attrs: { brAttrs: { default: null } },
       toDOM(node) {
         return [
@@ -605,7 +606,7 @@ var docxSchema = new Schema({
       group: "inline",
       inline: true,
       draggable: true,
-      marks: "run sdt link",
+      marks: "run wrapper",
       attrs: {
         /** The image bytes as a data URL */
         src: { default: null },
@@ -640,7 +641,7 @@ var docxSchema = new Schema({
       inline: true,
       atom: true,
       selectable: false,
-      marks: "sdt link",
+      marks: "wrapper",
       attrs: {
         id: { default: null },
         xml: { default: null }
@@ -672,7 +673,7 @@ var docxSchema = new Schema({
       inline: true,
       atom: true,
       selectable: false,
-      marks: "sdt link",
+      marks: "wrapper",
       attrs: {
         id: { default: null },
         xml: { default: null }
@@ -704,7 +705,7 @@ var docxSchema = new Schema({
       inline: true,
       atom: true,
       selectable: false,
-      marks: "run sdt link",
+      marks: "run wrapper",
       attrs: {
         id: { default: null },
         referenceXml: { default: null },
@@ -780,7 +781,7 @@ var docxSchema = new Schema({
       inline: true,
       atom: true,
       selectable: false,
-      marks: "run sdt link",
+      marks: "run wrapper",
       attrs: {
         kind: { default: "footnote" },
         id: { default: null },
@@ -836,7 +837,7 @@ var docxSchema = new Schema({
       group: "inline",
       inline: true,
       atom: true,
-      marks: "run sdt link",
+      marks: "run wrapper",
       attrs: {
         xml: { default: null },
         /** The local name of the element, for example `fldChar` */
@@ -862,7 +863,7 @@ var docxSchema = new Schema({
       group: "inline",
       inline: true,
       atom: true,
-      marks: "sdt link",
+      marks: "wrapper",
       attrs: {
         xml: { default: null },
         /** The local name of the element; `r` for a run with no content, kept whole */
@@ -889,20 +890,20 @@ var docxSchema = new Schema({
      *
      * It is declared ahead of the run mark on purpose: the mark declared first is drawn
      * outside on screen, so one control can hold the several runs it wrapped in the file.
+     * It is declared ahead of the other wrappers for the same reason, which is what settles
+     * the nesting of two wrappers written at one and the same depth (`./wrappers`).
      */
     sdt: {
+      group: WRAPPER_GROUP,
       // A character typed against either edge of the control belongs outside it
       inclusive: false,
+      // §17.5.2.17 has a control hold a control, so a second one does not replace the first:
+      // which stands inside which is what `depth` says (`./wrappers`)
+      excludes: "",
       attrs: {
         /** The opening XML of the `<w:sdt>`, the same string a wrapped cell carries */
         sdtPrefix: { default: null },
-        /**
-         * Which control this is, counted through the document as it was opened, and never
-         * written back to the file. Two controls whose XML is identical would otherwise wear
-         * the very same mark and their text would run into one. The first control gets 0, so
-         * a control made during editing needs no number of its own.
-         */
-        sdtKey: { default: 0 },
+        ...WRAPPER_ATTRS,
         /**
          * The two clauses of the control's lock: whether its contents may not be edited, and
          * whether the control itself may not be deleted, not even whole. The `w:lock` inside
@@ -921,7 +922,8 @@ var docxSchema = new Schema({
           {
             class: locked ? `${editorClassNames.sdt} ${editorClassNames.sdtLocked}` : editorClassNames.sdt,
             "data-sdt-prefix": text(mark.attrs.sdtPrefix),
-            "data-sdt-key": numberText(mark.attrs.sdtKey),
+            "data-key": numberText(mark.attrs.key),
+            "data-depth": numberText(mark.attrs.depth),
             "data-sdt-contents-locked": locked ? "1" : void 0,
             "data-sdt-deletion-locked": mark.attrs.deletionLocked === true ? "1" : void 0
           },
@@ -936,7 +938,8 @@ var docxSchema = new Schema({
             if (prefix === null || prefix === false) return false;
             return {
               sdtPrefix: prefix,
-              sdtKey: parseInt10(dom.getAttribute("data-sdt-key"), 0),
+              key: parseInt10(dom.getAttribute("data-key"), 0),
+              depth: parseInt10(dom.getAttribute("data-depth"), 0),
               contentsLocked: dom.getAttribute("data-sdt-contents-locked") === "1",
               deletionLocked: dom.getAttribute("data-sdt-deletion-locked") === "1"
             };
@@ -952,10 +955,12 @@ var docxSchema = new Schema({
      * back out inside it (`docx/serializeParagraph`).
      */
     link: {
+      group: WRAPPER_GROUP,
       // A character typed against either edge of a link belongs outside it, and that is also what
       // decides whether a caret counts as standing in one (`editor/commands/linkCommands`)
       inclusive: false,
       attrs: {
+        ...WRAPPER_ATTRS,
         /**
          * The opening XML of the `<w:hyperlink>`, which carries everything about the link we never
          * read: `w:tooltip`, `w:history`, `w:docLocation`, `w:anchor`. null for a link made in the
@@ -967,14 +972,7 @@ var docxSchema = new Schema({
          * a bookmark alone, or one whose relationship leads nowhere we can follow: the wrapper still
          * travels, and no address is offered for it.
          */
-        href: { default: null },
-        /**
-         * Which link this is, counted through the document as it was opened, and never written back
-         * to the file. Two links written exactly alike would otherwise wear the very same mark and
-         * the text they cover would run into one wrapper. The first link gets 0, so a link made
-         * during editing needs no number of its own.
-         */
-        linkKey: { default: 0 }
+        href: { default: null }
       },
       toDOM(mark) {
         return [
@@ -986,7 +984,8 @@ var docxSchema = new Schema({
             // by the link panel instead
             "data-href": text(mark.attrs.href),
             "data-link-prefix": text(mark.attrs.linkPrefix),
-            "data-link-key": numberText(mark.attrs.linkKey)
+            "data-key": numberText(mark.attrs.key),
+            "data-depth": numberText(mark.attrs.depth)
           },
           0
         ];
@@ -1002,7 +1001,8 @@ var docxSchema = new Schema({
             return {
               linkPrefix: prefix,
               href,
-              linkKey: parseInt10(dom.getAttribute("data-link-key"), 0)
+              key: parseInt10(dom.getAttribute("data-key"), 0),
+              depth: parseInt10(dom.getAttribute("data-depth"), 0)
             };
           }
         }

package/dist/schema/locks.d.ts

@@ -56,6 +56,9 @@ export interface ControlSpan extends StepRange {
  * A control that wrapped several runs comes in as several inlines wearing the very same mark, and
  * what a lock answers for is the control rather than the run: a stretch covering one run of a
  * control whole still covers only a part of the control.
+ *
+ * A control standing inside another gives a span of its own, the outer one first, and the two
+ * overlap: each locks on its own terms.
  */
 export declare function controlSpans(block: Textblock): ControlSpan[];
 /**

package/dist/schema/locks.js

@@ -10,11 +10,12 @@ import {
   ReplaceStep
 } from "prosemirror-transform";
 import { docxSchema } from "./index.js";
+import { wrappersOf } from "./wrappers.js";
 var unlockAllowed = new PluginKey("docxEditorUnlockAllowed");
 var historyReplay = new PluginKey("docxEditorHistoryReplay");
 var OPEN = { contents: false, deletion: false };
-function sdtMarkOf(node) {
-  return node?.marks.find((mark) => mark.type === docxSchema.marks.sdt) ?? null;
+function sdtMarksOf(node) {
+  return node ? wrappersOf(node, docxSchema.marks.sdt) : [];
 }
 function markLocks(mark) {
   return {
@@ -23,8 +24,7 @@ function markLocks(mark) {
   };
 }
 function lockedMarkOf(node) {
-  const mark = sdtMarkOf(node);
-  return mark !== null && markLocks(mark).contents ? mark : null;
+  return sdtMarksOf(node).find((mark) => markLocks(mark).contents) ?? null;
 }
 var CELL_CONTENTS_ATTR = "sdtContentsLocked";
 var CELL_DELETION_ATTR = "sdtDeletionLocked";
@@ -42,20 +42,37 @@ function isLockedCell(node) {
   return cellLocks(node).contents;
 }
 function carriesLock(node) {
-  const mark = node.isInline ? sdtMarkOf(node) : null;
-  const locks = mark === null ? cellLocks(node) : markLocks(mark);
-  return locks.contents || locks.deletion;
+  const marks = node.isInline ? sdtMarksOf(node) : [];
+  if (marks.length === 0) {
+    const locks = cellLocks(node);
+    return locks.contents || locks.deletion;
+  }
+  return marks.some((mark) => {
+    const locks = markLocks(mark);
+    return locks.contents || locks.deletion;
+  });
 }
 function controlSpans(block) {
   const spans = [];
+  let reaching = [];
   block.node.forEach((child, offset) => {
-    const mark = sdtMarkOf(child);
-    if (!mark) return;
     const from = block.start + offset;
     const to = from + child.nodeSize;
-    const last = spans.at(-1);
-    if (last && last.to === from && last.mark.eq(mark)) last.to = to;
-    else spans.push({ from, to, mark });
+    const standing = [];
+    for (const mark of sdtMarksOf(child)) {
+      const carried = reaching.find(
+        (span) => span.to === from && span.mark.eq(mark)
+      );
+      if (carried) {
+        carried.to = to;
+        standing.push(carried);
+        continue;
+      }
+      const started = { from, to, mark };
+      spans.push(started);
+      standing.push(started);
+    }
+    reaching = standing;
   });
   return spans;
 }

package/dist/schema/rendering.d.ts

@@ -1,6 +1,20 @@
 import type { Attrs, DOMOutputSpec } from "prosemirror-model";
 import type { FontFallbacks } from "../styles/fontStack";
+/**
+ * What a run says to anyone reading it, the page and a copy of it alike.
+ *
+ * The rest of the drawing is this editor talking to itself - the original XML, the worked-out
+ * formatting it was drawn from - and `schema/clipboard` publishes only what is here.
+ */
+export declare function runAttrs(attrs: Attrs, fontFallbacks: FontFallbacks): Record<string, string | undefined>;
 /** The DOM representation shared by the schema and the editor's custom run mark view. */
 export declare function runMarkSpec(attrs: Attrs, fontFallbacks: FontFallbacks): DOMOutputSpec;
+/**
+ * What an image says to anyone reading it, the page and a copy of it alike.
+ *
+ * The size is given in the pixels it is drawn at rather than as the document's own measure in EMU,
+ * which is what makes it the half another application can read.
+ */
+export declare function imageAttrs(attrs: Attrs): Record<string, string | undefined>;
 /** The image element shared by the schema and the resizable image node view. */
 export declare function imageNodeSpec(attrs: Attrs): DOMOutputSpec;

package/dist/schema/rendering.js

@@ -9,15 +9,21 @@ function text(value) {
 function formatJson(format) {
   return format ? JSON.stringify(format) : void 0;
 }
+function runAttrs(attrs, fontFallbacks) {
+  const format = toRunFormat(attrs.format);
+  return {
+    class: editorClassNames.run,
+    style: runStyle(format, fontFallbacks),
+    // Which shape of a Han character the browser draws is decided by this and nothing else
+    lang: format?.lang
+  };
+}
 function runMarkSpec(attrs, fontFallbacks) {
   const format = toRunFormat(attrs.format);
   return [
     "span",
     {
-      class: editorClassNames.run,
-      style: runStyle(format, fontFallbacks),
-      // Which shape of a Han character the browser draws is decided by this and nothing else
-      lang: format?.lang,
+      ...runAttrs(attrs, fontFallbacks),
       "data-rattrs": text(attrs.rAttrs),
       "data-rpr": text(attrs.rPr),
       "data-fmt": formatJson(format),
@@ -27,22 +33,29 @@ function runMarkSpec(attrs, fontFallbacks) {
     0
   ];
 }
-function imageNodeSpec(attrs) {
+function imageAttrs(attrs) {
   const extent = toImageExtent(attrs.extent);
+  return {
+    class: editorClassNames.image,
+    src: toImageSrc(attrs.src) ?? void 0,
+    alt: text(attrs.alt) ?? "",
+    width: extent ? `${Math.round(emuToPx(extent.cx))}` : void 0,
+    height: extent ? `${Math.round(emuToPx(extent.cy))}` : void 0
+  };
+}
+function imageNodeSpec(attrs) {
   return [
     "img",
     {
-      class: editorClassNames.image,
-      src: toImageSrc(attrs.src) ?? void 0,
-      alt: text(attrs.alt) ?? "",
-      width: extent ? `${Math.round(emuToPx(extent.cx))}` : void 0,
-      height: extent ? `${Math.round(emuToPx(extent.cy))}` : void 0,
-      "data-extent": formatJson(extent),
+      ...imageAttrs(attrs),
+      "data-extent": formatJson(toImageExtent(attrs.extent)),
       "data-xml": text(attrs.xml)
     }
   ];
 }
 export {
+  imageAttrs,
   imageNodeSpec,
+  runAttrs,
   runMarkSpec
 };

package/dist/schema/wrappers.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The inline wrappers a stretch of content stands inside, as the schema records them.
+ *
+ * A wrapper is an element that holds inline content and goes back out around the same content:
+ * a content control (`w:sdt`), a hyperlink (`w:hyperlink`). Each is a mark of its own, so each
+ * keeps the `inclusive` rule and the attrs its kind needs, and all of them share the `wrapper`
+ * group, so a node's `marks:` whitelist names the group rather than every kind in it and a new
+ * kind arrives as one mark spec.
+ *
+ * The nesting is recorded on the marks themselves: `depth` counts from the outermost wrapper the
+ * file wrote inwards. The order of a mark set cannot carry it - `Mark.addToSet` keeps insertion
+ * order only among marks of different types, `parseDOM` rebuilds a set from the page, and two
+ * wrappers of one kind may stand one inside the other - so `depth` is the source of truth and
+ * `wrapperMarks` is the one place that reads the order off it.
+ *
+ * What each kind reads out of the file and writes back into it is `docx/wrappers`.
+ */
+import type { Mark, MarkType, Node as PMNode } from "prosemirror-model";
+/** The mark group every inline wrapper belongs to */
+export declare const WRAPPER_GROUP = "wrapper";
+/** What every wrapper mark spec carries besides the attrs of its own kind */
+export declare const WRAPPER_ATTRS: {
+    /** Outer-to-inner order as read from the file; equal depths fall back to declaration rank */
+    readonly depth: {
+        readonly default: 0;
+    };
+    /** Which occurrence this is in the opened document, so two wrappers written alike stay apart */
+    readonly key: {
+        readonly default: 0;
+    };
+};
+/** Whether marks of this type wrap the content they cover (`WRAPPER_GROUP`) */
+export declare function isWrapperType(type: MarkType): boolean;
+/**
+ * The wrappers this node stands inside, outermost first.
+ *
+ * Two wrappers written at the same depth - a control laid over a link during editing, say - fall
+ * back to the order the schema declares them in, which is the nesting the marks meant before
+ * `depth` existed.
+ */
+export declare function wrapperMarks(node: PMNode): readonly Mark[];
+/** Every wrapper of this kind the node stands inside, outermost first */
+export declare function wrappersOf(node: PMNode, kind: MarkType): readonly Mark[];
+/** The outermost wrapper of this kind the node stands inside. null where it stands in none */
+export declare function wrapperOf(node: PMNode, kind: MarkType): Mark | null;
+/**
+ * The depth of the innermost of these wrappers, and -1 where there is none, so that
+ * `innermostDepth(marks) + 1` is the depth a wrapper laid inside every one of them takes.
+ */
+export declare function innermostDepth(marks: readonly Mark[]): number;
+/**
+ * The wrappers all of these nodes stand inside alike, outermost first: the longest run of
+ * wrappers, from the outside in, that every one of them wears the very same one of.
+ *
+ * A wrapper laid across the whole stretch goes inside these and outside everything else, which is
+ * what keeps it one element in the file rather than one per stretch the nesting differs over.
+ */
+export declare function sharedWrappers(nodes: readonly PMNode[]): readonly Mark[];

package/dist/schema/wrappers.js

@@ -0,0 +1,77 @@
+// src/schema/wrappers.ts
+var WRAPPER_GROUP = "wrapper";
+var WRAPPER_ATTRS = {
+  /** Outer-to-inner order as read from the file; equal depths fall back to declaration rank */
+  depth: { default: 0 },
+  /** Which occurrence this is in the opened document, so two wrappers written alike stay apart */
+  key: { default: 0 }
+};
+var FACTS = /* @__PURE__ */ new WeakMap();
+var NO_WRAPPERS = [];
+function factsOf(type) {
+  const known = FACTS.get(type);
+  if (known) return known;
+  const facts = {
+    wrapper: (type.spec.group ?? "").split(" ").includes(WRAPPER_GROUP),
+    rank: Object.keys(type.schema.marks).indexOf(type.name)
+  };
+  FACTS.set(type, facts);
+  return facts;
+}
+function isWrapperType(type) {
+  return factsOf(type).wrapper;
+}
+function depthOf(mark) {
+  const depth = mark.attrs.depth;
+  return typeof depth === "number" ? depth : 0;
+}
+function wrapperMarks(node) {
+  const marks = node.marks;
+  let found = 0;
+  for (const mark of marks) {
+    if (factsOf(mark.type).wrapper) found += 1;
+  }
+  if (found === 0) return NO_WRAPPERS;
+  const wrappers = found === marks.length ? [...marks] : marks.filter((mark) => factsOf(mark.type).wrapper);
+  if (found < 2) return wrappers;
+  return wrappers.sort(
+    (a, b) => depthOf(a) - depthOf(b) || factsOf(a.type).rank - factsOf(b.type).rank
+  );
+}
+function wrappersOf(node, kind) {
+  return wrapperMarks(node).filter((mark) => mark.type === kind);
+}
+function wrapperOf(node, kind) {
+  return wrapperMarks(node).find((mark) => mark.type === kind) ?? null;
+}
+function innermostDepth(marks) {
+  return marks.reduce(
+    (deepest, mark) => factsOf(mark.type).wrapper ? Math.max(deepest, depthOf(mark)) : deepest,
+    -1
+  );
+}
+function sharedWrappers(nodes) {
+  const first = nodes.at(0);
+  if (first === void 0) return [];
+  let shared = wrapperMarks(first);
+  for (const node of nodes.slice(1)) {
+    const marks = wrapperMarks(node);
+    const differs = shared.findIndex((mark, index) => {
+      const beside = marks[index];
+      return beside === void 0 || !mark.eq(beside);
+    });
+    if (differs !== -1) shared = shared.slice(0, differs);
+    if (shared.length === 0) break;
+  }
+  return shared;
+}
+export {
+  WRAPPER_ATTRS,
+  WRAPPER_GROUP,
+  innermostDepth,
+  isWrapperType,
+  sharedWrappers,
+  wrapperMarks,
+  wrapperOf,
+  wrappersOf
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",
@@ -107,7 +107,7 @@
     "build:demo": "vite build --config demo/vite.config.ts",
     "dev:site": "pnpm --filter @portone/docx-editor-site dev",
     "build:site": "pnpm --filter @portone/docx-editor-site build",
-    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm test:fixtures && pnpm test:site-release && pnpm check:demo-library",
+    "check": "pnpm lint && pnpm typecheck && pnpm test && pnpm test:fixtures && pnpm test:site-release && pnpm test:release && pnpm check:demo-library",
     "typecheck": "tsc --noEmit && tsc --noEmit -p e2e && tsc --noEmit -p demo && pnpm --filter @portone/docx-editor-site typecheck",
     "lint": "pnpm biome check . --diagnostic-level=error",
     "test": "vitest run",
@@ -119,9 +119,10 @@
     "api:update": "pnpm build && node scripts/api-report.mjs --local",
     "spec": "node scripts/index-ooxml-spec.mjs",
     "changeset": "changeset",
-    "changeset:version": "changeset version",
+    "release:pr": "node scripts/release.mjs pr",
     "test:e2e": "playwright test",
-    "test:site-release": "node --test scripts/site-release.test.mjs"
+    "test:site-release": "node --test scripts/site-release.test.mjs",
+    "test:release": "node --test scripts/release.test.mjs"
   },
   "types": "./dist/index.d.ts"
 }