@portone/docx-editor 0.1.1 → 0.2.1

package/dist/schema/sourceEquality.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Whether two nodes would be written back as the same XML.
+ *
+ * `Node.eq` answers a different question: whether they are the same node, display values and all.
+ * That is the right question inside an editing session, where both sides came from one import and
+ * a difference can only be an edit. It is the wrong one across a re-derivation, because the values
+ * worked out from the surroundings (`./attrRoles`) move without the document moving, and a block
+ * judged changed is a block rewritten, which costs it the markup the writer does not model.
+ *
+ * So the comparison is `Node.eq` with the display attrs left out, and nothing else left out: the
+ * type, the text, the marks and the source and session attrs all have to agree, and the recursion
+ * runs the same way, so a node that says the same thing in a different shape is still a change.
+ */
+import { type Node as PMNode } from "prosemirror-model";
+/**
+ * Whether the two would write the same XML: the same type, text, marks and source attrs, all the
+ * way down. What the editor works out for the screen is not compared.
+ */
+export declare function sameSource(a: PMNode, b: PMNode): boolean;
+/**
+ * The node with every worked-out attr back at the value the schema starts it on, on itself and on
+ * everything inside it.
+ *
+ * `sameSource` needs no such copy, and takes none. This is for a caller that has to hand a whole
+ * document to something comparing the ordinary way.
+ */
+export declare function withoutDisplayAttrs(node: PMNode): PMNode;

package/dist/schema/sourceEquality.js

@@ -0,0 +1,65 @@
+// src/schema/sourceEquality.ts
+import {
+  Fragment
+} from "prosemirror-model";
+import { displayAttrsOf } from "./attrRoles.js";
+function sameValue(a, b) {
+  if (a === b) return true;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((item, at) => sameValue(item, b[at]));
+  }
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+    return false;
+  }
+  const left = Object.entries(a);
+  return left.length === Object.keys(b).length && left.every(
+    ([key, value]) => key in b && sameValue(value, b[key])
+  );
+}
+function sameAttrs(display, a, b) {
+  return Object.keys(a).filter((name) => !display.includes(name)).every((name) => sameValue(a[name], b[name]));
+}
+function sameMarks(a, b) {
+  return a.length === b.length && a.every((mark, at) => {
+    const other = b[at];
+    return other !== void 0 && mark.type === other.type && sameAttrs(displayAttrsOf(mark.type), mark.attrs, other.attrs);
+  });
+}
+function sameSource(a, b) {
+  if (a === b) return true;
+  if (a.type !== b.type || !sameMarks(a.marks, b.marks) || !sameAttrs(displayAttrsOf(a.type), a.attrs, b.attrs)) {
+    return false;
+  }
+  if (a.isText) return a.text === b.text;
+  if (a.childCount !== b.childCount) return false;
+  for (let at = 0; at < a.childCount; at += 1) {
+    if (!sameSource(a.child(at), b.child(at))) return false;
+  }
+  return true;
+}
+function withoutDisplay(type, attrs) {
+  return Object.fromEntries(
+    Object.entries(attrs).map(
+      ([name, value]) => displayAttrsOf(type).includes(name) ? [name, type.spec.attrs?.[name]?.default ?? null] : [name, value]
+    )
+  );
+}
+function withoutDisplayMarkAttrs(mark) {
+  return displayAttrsOf(mark.type).length === 0 ? mark : mark.type.create(withoutDisplay(mark.type, mark.attrs));
+}
+var childrenOf = (node) => Array.from({ length: node.childCount }, (_, at) => node.child(at));
+function withoutDisplayAttrs(node) {
+  const marks = node.marks.map(withoutDisplayMarkAttrs);
+  if (node.isText) return node.mark(marks);
+  return node.type.create(
+    withoutDisplay(node.type, node.attrs),
+    Fragment.fromArray(
+      childrenOf(node).map((child) => withoutDisplayAttrs(child))
+    ),
+    marks
+  );
+}
+export {
+  sameSource,
+  withoutDisplayAttrs
+};

package/dist/table/cellFormatting.js

@@ -8,7 +8,9 @@ import {
   NO_FILL,
   toCellFormat
 } from "../model/format.js";
-import { isLockedCell, transactionAllowed } from "../schema/locks.js";
+import { transactionAllowed } from "../schema/guards.js";
+import { isLockedCell } from "../schema/locks.js";
+import { editsShut } from "../schema/protectionState.js";
 import { cellDefaultsAt, tableCellSources } from "./gridBorders.js";
 function text(value) {
   return typeof value === "string" ? value : null;
@@ -59,7 +61,7 @@ function cellFormatCommand(edit) {
     const changes = planChanges(rect, edit);
     if (changes.length === 0) return false;
     const transaction = applyChanges(state.tr, rect.tableStart, changes);
-    if (!transactionAllowed(transaction, state.doc)) return false;
+    if (!transactionAllowed(transaction, state)) return false;
     dispatch?.(transaction);
     return true;
   };
@@ -118,6 +120,7 @@ function cellFormats(state) {
   return selectedCells(state).map((cell) => toCellFormat(cell.attrs.format));
 }
 function canSetCellFormatting(state) {
+  if (editsShut(state)) return false;
   const cells = selectedCells(state);
   return cells.length > 0 && cells.every((cell) => !isLockedCell(cell));
 }

package/dist/table/commands.d.ts

@@ -1,8 +1,8 @@
 /**
  * Building a transaction and running it are kept apart.
  * Following the ProseMirror convention, calling a command without `dispatch` only
- * reports whether it can run right now, and that answer takes in the lock guard
- * (`schema/locks`), so no caller has to ask about locks separately.
+ * reports whether it can run right now, and that answer takes in every guard an edit
+ * is judged by (`schema/guards`), so no caller has to ask about them separately.
  */
 import type { EditorState, Transaction } from "prosemirror-state";
 export type TableCommand = (state: EditorState, dispatch?: (tr: Transaction) => void) => boolean;

package/dist/table/commands.js

@@ -3,7 +3,7 @@ import {
   deleteTable as pmDeleteTable,
   isInTable as pmIsInTable
 } from "prosemirror-tables";
-import { transactionAllowed } from "../schema/locks.js";
+import { transactionAllowed } from "../schema/guards.js";
 import {
   buildAddColumnAfterTransaction,
   buildAddColumnBeforeTransaction,
@@ -21,7 +21,7 @@ function isInTable(state) {
 function toCommand(build) {
   return (state, dispatch) => {
     const tr = build(state);
-    if (!tr || !transactionAllowed(tr, state.doc)) return false;
+    if (!tr || !transactionAllowed(tr, state)) return false;
     dispatch?.(tr);
     return true;
   };

package/dist/table/index.d.ts

@@ -3,8 +3,8 @@
  *
  * Only what the toolbar needs is exported. Following the ProseMirror convention,
  * calling a command without `dispatch` only reports whether it can run right now, and that answer
- * takes in the lock: a structural edit that would carry a locked cell off reports that it does not
- * apply, rather than being refused after the click (`schema/locks`).
+ * takes in every guard an edit is judged by (`schema/guards`): a structural edit that would carry a
+ * locked cell off reports that it does not apply, rather than being refused after the click.
  *
  * Everything here works on a table already in the document; putting a new one into the body is
  * `insertTable` in `./commands`, which reads the page geometry the editor holds.

package/dist/table/merge.d.ts

@@ -6,7 +6,7 @@ import type { EditorState, Transaction } from "prosemirror-state";
 /**
  * Whether several cells can be merged into one.
  * The selection has to be a rectangle spanning more than one cell, no merged cell may stick out
- * past that rectangle, and the lock guard has to let the merge through: a locked cell may not be
+ * past that rectangle, and the guards have to let the merge through: a locked cell may not be
  * swallowed by another (`schema/locks`).
  *
  * The two queries are defined from the very transaction the commands run, so they cannot drift
@@ -16,7 +16,7 @@ import type { EditorState, Transaction } from "prosemirror-state";
 export declare function canMergeCells(state: EditorState): boolean;
 /**
  * Whether a split is possible. The cursor has to sit inside a cell that is merged horizontally or
- * vertically, and the lock guard has to let the split through: the cells a split makes would each
+ * vertically, and the guards have to let the split through: the cells a split makes would each
  * carry the original's lock, which is a lock planted in places it was never put (`schema/locks`).
  */
 export declare function canSplitCell(state: EditorState): boolean;

package/dist/table/merge.js

@@ -11,7 +11,7 @@ import {
   widthNumber,
   withWidthNumber
 } from "../model/format.js";
-import { transactionAllowed } from "../schema/locks.js";
+import { transactionAllowed } from "../schema/guards.js";
 import { inheritCellAttrs } from "./format.js";
 import { cellWidthForGridCol, gridSpanWidth, tableGridCols } from "./widths.js";
 function tableAfter(tr, tableStart) {
@@ -26,11 +26,11 @@ function cellAt(rect, row, col) {
 }
 function canMergeCells(state) {
   const tr = buildMergeCellsTransaction(state);
-  return tr !== null && transactionAllowed(tr, state.doc);
+  return tr !== null && transactionAllowed(tr, state);
 }
 function canSplitCell(state) {
   const tr = buildSplitCellTransaction(state);
-  return tr !== null && transactionAllowed(tr, state.doc);
+  return tr !== null && transactionAllowed(tr, state);
 }
 function coveredWidthSum(rect, type) {
   let sum = 0;

package/dist/ui/CommentsPanel.d.ts

@@ -5,11 +5,11 @@ import { type CommentAuthor } from "../editor/commands/commentCommands";
 export interface CommentsPanelProps {
     view: EditorView;
     state: EditorState;
-    readOnly: boolean;
     composerOpen: boolean;
-    author: CommentAuthor;
+    /** Whose comments the composers write. Null for a reader, who is offered none */
+    author: CommentAuthor | null;
     closeComposer: () => void;
     scrollContainer: HTMLElement | null;
     allCommentsOpen: boolean;
 }
-export declare function CommentsPanel({ view, state, readOnly, composerOpen, author, closeComposer, scrollContainer, allCommentsOpen, }: CommentsPanelProps): ReactElement;
+export declare function CommentsPanel({ view, state, composerOpen, author, closeComposer, scrollContainer, allCommentsOpen, }: CommentsPanelProps): ReactElement;

package/dist/ui/CommentsPanel.js

@@ -12,6 +12,8 @@ import {
   updateComment,
   updateCommentReply
 } from "../editor/commands/commentCommands.js";
+import { commentOwned } from "../schema/protection.js";
+import { protectionOf } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { CommentComposer, FocusedTextarea } from "./comments/CommentComposer.js";
 import {
@@ -41,7 +43,6 @@ function sameTarget(left, right) {
 function CommentsPanel({
   view,
   state,
-  readOnly,
   composerOpen,
   author,
   closeComposer,
@@ -49,6 +50,9 @@ function CommentsPanel({
   allCommentsOpen
 }) {
   const comments = useMemo(() => documentComments(state), [state.doc]);
+  const rules = protectionOf(state);
+  const writer = author != null && rules.protection !== "readOnly" ? author : null;
+  const owned = (authorId) => writer !== null && commentOwned(rules, authorId);
   const panel = useRef(null);
   const [editing, setEditing] = useState(null);
   const [draft, setDraft] = useState("");
@@ -108,7 +112,7 @@ function CommentsPanel({
             className: editorClassNames.commentsCanvas,
             style: { height: allCommentsOpen ? void 0 : `${canvasHeight}px` },
             children: [
-              composerOpen && !readOnly && /* @__PURE__ */ jsx(
+              composerOpen && writer !== null && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: editorClassNames.commentPosition,
@@ -119,7 +123,7 @@ function CommentsPanel({
                   children: /* @__PURE__ */ jsx(
                     CommentComposer,
                     {
-                      author,
+                      author: writer,
                       label: "Comment text",
                       submitLabel: "Comment",
                       onClose: closeComposer,
@@ -127,8 +131,9 @@ function CommentsPanel({
                         view,
                         addComment({
                           text,
-                          author: author.name,
-                          initials: author.initials
+                          author: writer.name,
+                          authorId: writer.id,
+                          initials: writer.initials
                         })
                       )
                     }
@@ -137,7 +142,8 @@ function CommentsPanel({
               ),
               visible.map((comment) => {
                 const rootTarget = { commentId: comment.id, replyId: null };
-                const rootEditing = !readOnly && sameTarget(editing, rootTarget);
+                const rootOwned = owned(comment.authorId);
+                const rootEditing = rootOwned && sameTarget(editing, rootTarget);
                 return /* @__PURE__ */ jsx(
                   "article",
                   {
@@ -160,8 +166,8 @@ function CommentsPanel({
                             ]
                           }
                         ),
-                        !readOnly && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
-                          !comment.resolved && /* @__PURE__ */ jsx(
+                        writer !== null && !rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentIconActions, children: [
+                          rootOwned && !comment.resolved && /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
@@ -190,7 +196,7 @@ function CommentsPanel({
                               children: comment.resolved ? /* @__PURE__ */ jsx(RotateCcw, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
                             }
                           ),
-                          !comment.resolved && /* @__PURE__ */ jsx(
+                          rootOwned && !comment.resolved && /* @__PURE__ */ jsx(
                             "button",
                             {
                               type: "button",
@@ -209,7 +215,7 @@ function CommentsPanel({
                           value: draft,
                           onChange: setDraft
                         }
-                      ) : readOnly || comment.resolved ? /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: comment.text }) : /* @__PURE__ */ jsx(
+                      ) : writer === null || comment.resolved ? /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: comment.text }) : /* @__PURE__ */ jsx(
                         "button",
                         {
                           type: "button",
@@ -222,7 +228,7 @@ function CommentsPanel({
                           children: comment.text
                         }
                       ),
-                      !readOnly && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: rootEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      rootEditing && /* @__PURE__ */ jsxs("div", { className: editorClassNames.commentActions, children: [
                         /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setEditing(null), children: "Cancel" }),
                         /* @__PURE__ */ jsx(
                           "button",
@@ -234,13 +240,14 @@ function CommentsPanel({
                             children: "Save"
                           }
                         )
-                      ] }) : null }),
+                      ] }),
                       comment.replies.map((reply) => {
                         const target = {
                           commentId: comment.id,
                           replyId: reply.id
                         };
-                        const isEditing = !readOnly && sameTarget(editing, target);
+                        const replyOwned = owned(reply.authorId);
+                        const isEditing = replyOwned && sameTarget(editing, target);
                         return /* @__PURE__ */ jsxs(
                           "div",
                           {
@@ -258,7 +265,7 @@ function CommentsPanel({
                                   onChange: setDraft
                                 }
                               ) : /* @__PURE__ */ jsx("p", { className: editorClassNames.commentBody, children: reply.text }),
-                              !readOnly && !comment.resolved && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                              replyOwned && !comment.resolved && /* @__PURE__ */ jsx("div", { className: editorClassNames.commentActions, children: isEditing ? /* @__PURE__ */ jsxs(Fragment, { children: [
                                 /* @__PURE__ */ jsx(
                                   "button",
                                   {
@@ -313,10 +320,10 @@ function CommentsPanel({
                           reply.id
                         );
                       }),
-                      replying === comment.id && !readOnly && !comment.resolved && /* @__PURE__ */ jsx(
+                      replying === comment.id && writer !== null && !comment.resolved && /* @__PURE__ */ jsx(
                         CommentComposer,
                         {
-                          author,
+                          author: writer,
                           label: "Reply text",
                           submitLabel: "Reply",
                           onClose: () => setReplying(null),
@@ -324,8 +331,9 @@ function CommentsPanel({
                             view,
                             addCommentReply(comment.id, {
                               text,
-                              author: author.name,
-                              initials: author.initials
+                              author: writer.name,
+                              authorId: writer.id,
+                              initials: writer.initials
                             })
                           )
                         }

package/dist/ui/LinkCard.d.ts

@@ -7,6 +7,5 @@ export interface LinkCardProps {
     view: EditorView;
     state: EditorState;
     link: ActiveLinkSpan;
-    readOnly?: boolean;
 }
-export declare function LinkCard({ view, state, link, readOnly, }: LinkCardProps): ReactElement | null;
+export declare function LinkCard({ view, state, link, }: LinkCardProps): ReactElement | null;

package/dist/ui/LinkCard.js

@@ -49,8 +49,7 @@ function useEscape(onEscape) {
 function LinkCard({
   view,
   state,
-  link,
-  readOnly = false
+  link
 }) {
   const box = useRef(null);
   const [hidden, setHidden] = useState(false);
@@ -94,7 +93,7 @@ function LinkCard({
             children: /* @__PURE__ */ jsx(ExternalLink, { size: ICON_SIZE, "aria-hidden": "true" })
           }
         ),
-        !readOnly && openLinkPanel(state) && /* @__PURE__ */ jsx(
+        openLinkPanel(state) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -106,7 +105,7 @@ function LinkCard({
             children: /* @__PURE__ */ jsx(Pencil, { size: ICON_SIZE, "aria-hidden": "true" })
           }
         ),
-        !readOnly && removeLink(state) && /* @__PURE__ */ jsx(
+        removeLink(state) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",

package/dist/ui/TextMenu.js

@@ -21,6 +21,7 @@ import { insertClipboardData } from "../editor/externalClipboard.js";
 import {
   closeTextMenu
 } from "../editor/plugins/textContextMenu.js";
+import { editsShut } from "../schema/protectionState.js";
 import { editorClassNames } from "../styles/classNames.js";
 import { usePanelAtPoint } from "./panelPlacement.js";
 import { commandRunner } from "./runCommand.js";
@@ -103,8 +104,16 @@ function TextMenu({
   const keys = useMenuKeyboard({ menu: box, onClose: close });
   const selected = !state.selection.empty;
   const shut = selectionTouchesLocked(state);
+  const bodyOpen = !editsShut(state);
+  const copy = {
+    label: "Copy",
+    icon: Copy,
+    hint: `${MOD}C`,
+    enabled: selected,
+    run: () => clipboardCommand(view, "copy")
+  };
   const groups = [
-    [
+    bodyOpen ? [
       {
         label: "Cut",
         icon: Scissors,
@@ -112,13 +121,7 @@ function TextMenu({
         enabled: selected && !shut,
         run: () => clipboardCommand(view, "cut")
       },
-      {
-        label: "Copy",
-        icon: Copy,
-        hint: `${MOD}C`,
-        enabled: selected,
-        run: () => clipboardCommand(view, "copy")
-      },
+      copy,
       {
         label: "Paste",
         icon: ClipboardPaste,
@@ -134,7 +137,7 @@ function TextMenu({
         enabled: selected && !shut,
         run: () => run(deleteSelection)
       }
-    ]
+    ] : [copy]
   ];
   groups.push([
     {
@@ -144,7 +147,9 @@ function TextMenu({
       run: () => onAddComment?.()
     }
   ]);
-  if (allowLocking) groups.push([lockItem(selectionLock(state), run)]);
+  if (allowLocking && bodyOpen) {
+    groups.push([lockItem(selectionLock(state), run)]);
+  }
   const choose = (item) => {
     if (!item.enabled) return;
     item.run();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portone/docx-editor",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "A simple DOCX editor for React, built directly on OOXML.",
   "license": "Apache-2.0",
   "type": "module",
@@ -76,10 +76,12 @@
     "@biomejs/biome": "2.5.10",
     "@changesets/changelog-github": "^1.0.0",
     "@changesets/cli": "^3.0.1",
+    "@microsoft/api-extractor": "7.59.0",
     "@playwright/test": "^1.62.1",
+    "@types/jsdom": "^30.0.0",
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "@vitejs/plugin-react": "^6.0.5",
     "esbuild": "^0.28.1",
     "jsdom": "^30.0.1",
@@ -111,6 +113,7 @@
     "test": "vitest run",
     "test:package": "vitest run --dir packaging --no-file-parallelism",
     "verify:package": "node scripts/verify-package.mjs",
+    "api:update": "pnpm build && node scripts/api-report.mjs --local",
     "spec": "node scripts/index-ooxml-spec.mjs",
     "changeset": "changeset",
     "changeset:version": "changeset version",

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

@@ -1,3 +0,0 @@
-/** Prevents ordinary editor transactions from dropping imported bookmark range markers. */
-import { Plugin } from "prosemirror-state";
-export declare function bookmarkProtection(): Plugin;

package/dist/editor/plugins/bookmarkProtection.js

@@ -1,28 +0,0 @@
-// src/editor/plugins/bookmarkProtection.ts
-import { Plugin } from "prosemirror-state";
-var BOOKMARK_XML = /<(?:[\w.-]+:)?bookmark(?:Start|End)\b/;
-function signatures(doc) {
-  const found = [];
-  doc.descendants((node) => {
-    if (node.type.name === "bookmarkBlock") {
-      found.push(`block:${node.attrs.srcId}:${node.attrs.name}`);
-    } else if (node.type.name === "rawInline" && typeof node.attrs.xml === "string" && BOOKMARK_XML.test(node.attrs.xml)) {
-      found.push(`inline:${node.attrs.xml}`);
-    }
-    return true;
-  });
-  return found;
-}
-function same(a, b) {
-  return a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function bookmarkProtection() {
-  return new Plugin({
-    filterTransaction(transaction, state) {
-      return !transaction.docChanged || same(signatures(state.doc), signatures(transaction.doc));
-    }
-  });
-}
-export {
-  bookmarkProtection
-};

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

@@ -1,3 +0,0 @@
-/** Keeps imported footnote and endnote references intact while their bodies are display-only. */
-import { Plugin } from "prosemirror-state";
-export declare function noteProtection(): Plugin;

package/dist/editor/plugins/noteProtection.js

@@ -1,25 +0,0 @@
-// src/editor/plugins/noteProtection.ts
-import { Plugin } from "prosemirror-state";
-function signatures(doc) {
-  const found = [];
-  doc.descendants((node) => {
-    if (node.type.name === "noteReference") {
-      found.push(JSON.stringify(node.attrs));
-    }
-    return true;
-  });
-  return found;
-}
-function same(a, b) {
-  return a.length === b.length && a.every((value, index) => value === b[index]);
-}
-function noteProtection() {
-  return new Plugin({
-    filterTransaction(transaction, state) {
-      return !transaction.docChanged || same(signatures(state.doc), signatures(transaction.doc));
-    }
-  });
-}
-export {
-  noteProtection
-};