@portone/docx-editor 0.4.0 → 0.5.0

package/dist/editor/commands/index.d.ts

@@ -56,8 +56,8 @@ export { insertLineBreak, insertPageBreak } from "./breakCommands";
  * question takes are not exported anywhere.
  */
 export { canRunCommand } from "./canRunCommand";
-export type { CommentAuthor, DocumentComment, DocumentCommentReply, NewComment, } from "./commentCommands";
-export { addComment, addCommentReply, canAddComment, canEditComment, documentComments, removeComment, removeCommentReply, selectComment, setCommentResolved, updateComment, updateCommentReply, } from "./commentCommands";
+export type { CommentAuthor, CommentRange, DocumentComment, DocumentCommentReply, NewComment, } from "./commentCommands";
+export { addComment, addCommentReply, canAddComment, canEditComment, documentComments, removeComment, removeCommentReply, selectComment, setCommentBody, setCommentResolved, updateComment, updateCommentReply, } from "./commentCommands";
 /**
  * Whether the document as it stands can be written back, and every reason it could not, each
  * with the code `exportDocx` would throw it under. `canExport` is what an export control is

package/dist/editor/commands/index.js

@@ -25,6 +25,7 @@ import {
   removeComment,
   removeCommentReply,
   selectComment,
+  setCommentBody,
   setCommentResolved,
   updateComment,
   updateCommentReply
@@ -158,6 +159,7 @@ export {
   selectComment,
   selectionLock,
   selectionTouchesLocked,
+  setCommentBody,
   setCommentResolved,
   setFontFamily,
   setFontSize,

package/dist/editor/commands/listCommands.d.ts

@@ -33,6 +33,12 @@ export declare function numIdsIn(doc: PMNode): Set<number>;
  * of its own stays, putting it back where it was before it joined the list.
  */
 export declare const removeFromList: Command;
+/**
+ * The kind of this list position, which the number format of its level decides.
+ * Null where nothing defines the list, which is a position whose kind cannot be told and so is
+ * neither of the two buttons.
+ */
+export declare function listKindOf(numbering: Numbering, ref: NumberingRef): ListKind | null;
 /**
  * The kind of list the selected paragraphs belong to. Null when they are not a list, when nothing
  * defines the list they are in, or when the kinds are mixed.

package/dist/editor/commands/listCommands.js

@@ -122,7 +122,7 @@ var removeFromList = (state, dispatch) => changeParagraphs(
   dispatch,
   (node) => listRefOf(node) ? { numbering: null, indent: { kind: "clearHanging" } } : null
 );
-function kindOf(numbering, ref) {
+function listKindOf(numbering, ref) {
   const level = listFor(numbering, ref.numId)?.levels.get(ref.ilvl);
   if (!level) return null;
   return level.format === "bullet" ? "bullet" : "numbered";
@@ -131,7 +131,7 @@ function activeListKind(state) {
   const numbering = documentNumbering(state);
   const kinds = editableParagraphs(state).map(({ node }) => {
     const ref = listRefOf(node);
-    return ref === null ? null : kindOf(numbering, ref);
+    return ref === null ? null : listKindOf(numbering, ref);
   });
   const first = kinds[0] ?? null;
   return kinds.every((kind) => kind === first) ? first : null;
@@ -174,6 +174,7 @@ export {
   increaseListLevel,
   isInList,
   leaveEmptyListItem,
+  listKindOf,
   listLevelChange,
   listRefOf,
   numIdsIn,

package/dist/editor/commands/noteQueries.d.ts

@@ -1,12 +1,29 @@
 /** Document-level readers for imported footnotes and endnotes. */
 import type { EditorState } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
 import type { NoteKind } from "../../docx/notes";
 export interface DocumentNote {
-    kind: NoteKind;
-    id: string;
-    label: string;
-    text: string;
-    referencePos: number;
+    readonly kind: NoteKind;
+    readonly id: string;
+    readonly label: string;
+    readonly text: string;
+    readonly referencePos: number;
 }
+interface NoteProjection {
+    notes: readonly DocumentNote[];
+    /**
+     * The body of each note on the marker pointing at it, which is the tooltip a reader gets without
+     * looking away from the line. It is drawn rather than written on the node, because what a note
+     * says is a story on the document and not an attr of the reference.
+     */
+    tooltips: DecorationSet;
+}
+/**
+ * Which notes the document refers to is the document's to decide, so the list is worked out once
+ * per edit (`editor/plugins/documentProjection`) rather than once per render of the panel under
+ * the page.
+ */
+export declare const noteProjection: import("../plugins/documentProjection").DocumentProjection<NoteProjection>;
 /** The distinct notes referenced by the main document story, in first-reference order. */
 export declare function documentNotes(state: EditorState): readonly DocumentNote[];
+export {};

package/dist/editor/commands/noteQueries.js

@@ -1,15 +1,29 @@
 // src/editor/commands/noteQueries.ts
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { storyKey, storyOf, storyText } from "../../docx/story.js";
+import { documentProjection } from "../plugins/documentProjection.js";
 function stringAttr(value) {
   return typeof value === "string" ? value : null;
 }
-function documentNotes(state) {
+function noteKindOf(node) {
+  return node.attrs.kind === "endnote" ? "endnote" : "footnote";
+}
+function noteText(doc, kind, id) {
+  return storyText(storyOf(doc, storyKey(kind, id)));
+}
+function deriveNotes(doc) {
   const notes = [];
+  const tooltips = [];
   const seen = /* @__PURE__ */ new Set();
-  state.doc.descendants((node, pos) => {
+  doc.descendants((node, pos) => {
     if (node.type.name !== "noteReference") return true;
     const id = stringAttr(node.attrs.id);
     if (id === null) return true;
-    const kind = node.attrs.kind === "endnote" ? "endnote" : "footnote";
+    const kind = noteKindOf(node);
+    const text = noteText(doc, kind, id);
+    if (text !== "") {
+      tooltips.push(Decoration.node(pos, pos + node.nodeSize, { title: text }));
+    }
     const key = `${kind}:${id}`;
     if (seen.has(key)) return true;
     seen.add(key);
@@ -17,13 +31,27 @@ function documentNotes(state) {
       kind,
       id,
       label: stringAttr(node.attrs.label) ?? "?",
-      text: stringAttr(node.attrs.text) ?? "",
+      text,
       referencePos: pos
     });
     return true;
   });
-  return notes;
+  return { notes, tooltips: DecorationSet.create(doc, tooltips) };
+}
+var noteProjection = documentProjection(
+  "docxEditorNotes",
+  deriveNotes,
+  {
+    // The set the last edit derived. Written as a method so that `this` is the plugin holding it
+    decorations(state) {
+      return this.getState(state)?.tooltips;
+    }
+  }
+);
+function documentNotes(state) {
+  return noteProjection.read(state).notes;
 }
 export {
-  documentNotes
+  documentNotes,
+  noteProjection
 };

package/dist/editor/createEditor.js

@@ -14,15 +14,17 @@ import {
   DEFAULT_FONT_FALLBACKS
 } from "../styles/fontStack.js";
 import { documentDefaultsStyle } from "../styles/inlineStyle.js";
+import { docxClipboard } from "./clipboard/plugin.js";
+import { noteProjection } from "./commands/noteQueries.js";
 import {
   documentOf,
   editorDocument,
   editorDocumentOf,
   NO_DOCUMENT
 } from "./editorDocument.js";
-import { externalClipboard } from "./externalClipboard.js";
 import { imageFiles } from "./imageFiles.js";
 import { columnResize } from "./plugins/columnResize.js";
+import { commentComposer } from "./plugins/commentComposer.js";
 import { commentDecorations } from "./plugins/commentDecorations.js";
 import {
   displayDerivation,
@@ -80,17 +82,22 @@ function createEditorState(doc, options = {}) {
       // above, is what takes such a conversion back
       listInputRules(),
       dropCursor(),
-      // Clipboard priority is files, resolvable HTML images, then regular HTML or plain text.
+      // Images get the first reading. The clipboard then handles only empty readings and text
+      // fallbacks; tableEditing owns insertion into a cell selection for every nonempty slice.
       imageFiles(),
       imagePaste(),
-      externalClipboard(),
+      docxClipboard(),
       // A press that grabs a table edge must be intercepted before a cell-selection drag starts.
       // For DOM events the plugin registered first wins, so both resizers precede `tableEditing`.
       columnResize(),
       rowResize(),
       tableEditing(),
       // Comment anchors live in the model; this paints their ranges without changing document XML.
+      // The list beside the page, the lookup the comment commands ask, and these ranges are the
+      // one walk this plugin holds (`plugins/commentDecorations`)
       commentDecorations(),
+      // 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.
       tabDecorations(),
       tabPointer(),
@@ -103,6 +110,9 @@ function createEditorState(doc, options = {}) {
       // or fall together with the menus the editor draws. The text menu stands ahead of the table
       // menu, and hands a click with nothing selected inside a cell back to it
       ...contextMenus ? [textContextMenu(), tableContextMenu()] : [],
+      // Holds the stretch of text the built-in comment composer was opened over. It reads the
+      // protection above it, so it stands after the plugin that holds one
+      commentComposer(),
       numberingMarkers(),
       // Values only go in when page display is turned on
       pageDecorations()

package/dist/editor/documentStyles.d.ts

@@ -19,10 +19,25 @@ export declare function documentDefaults(state: EditorState): DocumentDefaults;
 /** The paragraph styles this document defines. Empty when the editor does not know them */
 export declare function documentParagraphStyles(state: EditorState): ParagraphStyleOption[];
 /**
- * The paper the document is written on. A document the editor knows no paper for is drawn on
- * the same A4 every document was drawn on before the geometry was read
+ * The paper the sheet is drawn on: the first section's, since one sheet is drawn at one paper
+ * (`page/pageLayout`). A document the editor knows no paper for is drawn on the same A4 every
+ * document was drawn on before the geometry was read.
+ *
+ * Anything deciding a value for one spot in the document - the width of a table put there, the
+ * height a pasted image is fitted to - asks `sectionGeometryAt` instead, since a later section may
+ * be written on another paper.
  */
 export declare function documentGeometry(state: EditorState): PageGeometry;
+/**
+ * The paper the block at this position is written on: the paper of the section that block belongs
+ * to (`docx/sections`), which is the width a table inserted or resized there is fitted to.
+ *
+ * The section table is read off the document rather than off the snapshot the state carries: a
+ * section is where the document says it is, and the snapshot holds the first section's paper
+ * alone. Reading it walks every block, so a caller drawing a whole document asks once and looks
+ * its positions up (`page/pageLayout`) rather than calling this per block.
+ */
+export declare function sectionGeometryAt(state: EditorState, pos: number): PageGeometry;
 /** The document-wide interval between automatic tab stops, in points. */
 export declare function documentDefaultTabStopPt(state: EditorState): number;
 /**
@@ -32,5 +47,12 @@ export declare function documentDefaultTabStopPt(state: EditorState): number;
  * itself asks for it rather than taking the A4 width `fittedExtent` falls back to.
  */
 export declare function documentBodyWidthPx(state: EditorState): number;
-/** The height one page of body content occupies, in pixels. */
-export declare function documentBodyHeightPx(state: EditorState): number;
+/**
+ * The height one page of body content occupies at this position, in pixels: the height the paper
+ * of the section that block sits in leaves.
+ *
+ * It is the height an image taller than the page is shrunk to when it is pasted there, so a tall
+ * image dropped into a section on shorter paper is fitted to that section rather than to the
+ * sheet's own.
+ */
+export declare function sectionBodyHeightPx(state: EditorState, pos: number): number;

package/dist/editor/documentStyles.js

@@ -4,6 +4,7 @@ import {
   bodyWidth,
   twipsToPx
 } from "../docx/pageGeometry.js";
+import { sectionAt } from "../docx/sections.js";
 import { documentOf } from "./editorDocument.js";
 function documentFormatting(state) {
   return documentOf(state).formatting;
@@ -17,21 +18,25 @@ function documentParagraphStyles(state) {
 function documentGeometry(state) {
   return documentOf(state).geometry;
 }
+function sectionGeometryAt(state, pos) {
+  return sectionAt(state.doc, pos).props.geometry;
+}
 function documentDefaultTabStopPt(state) {
   return documentOf(state).defaultTabStopPt;
 }
 function documentBodyWidthPx(state) {
   return bodyWidth(documentGeometry(state)).px;
 }
-function documentBodyHeightPx(state) {
-  return twipsToPx(bodyHeightTwips(documentGeometry(state)));
+function sectionBodyHeightPx(state, pos) {
+  return twipsToPx(bodyHeightTwips(sectionGeometryAt(state, pos)));
 }
 export {
-  documentBodyHeightPx,
   documentBodyWidthPx,
   documentDefaultTabStopPt,
   documentDefaults,
   documentFormatting,
   documentGeometry,
-  documentParagraphStyles
+  documentParagraphStyles,
+  sectionBodyHeightPx,
+  sectionGeometryAt
 };

package/dist/editor/imageFiles.d.ts

@@ -65,8 +65,8 @@ export declare function insertImageFiles(view: EditorView, files: readonly File[
 /**
  * The plugin that takes image files pasted or dropped onto the paper.
  *
- * It has to sit ahead of the plain-text plugin, which answers for every paste and drop
- * whether or not it has anything to insert (see the plugin order in `createEditor.ts`).
+ * It runs before clipboard fallback and table insertion (see the order in `createEditor.ts`).
+ * A paste that chose plain text leaves any accompanying image file alone.
  * An event carrying no image file is passed on untouched, so text keeps coming in exactly
  * as it did.
  */

package/dist/editor/imageFiles.js

@@ -10,6 +10,7 @@ import {
   pxToEmu,
   toImageSrc
 } from "../ooxml/image.js";
+import { plainTextPaste } from "./clipboard/parser.js";
 import { documentBodyWidthPx } from "./documentStyles.js";
 import { insertImage } from "./insertImage.js";
 import { moveCaretToDrop } from "./plugins/dropCaret.js";
@@ -140,6 +141,7 @@ function imageFiles() {
   return new Plugin({
     props: {
       handlePaste(view, event) {
+        if (plainTextPaste(view, event)) return false;
         const files = imageFilesIn(event.clipboardData);
         if (files.length === 0) return false;
         void insertImageFiles(view, files);

package/dist/editor/insertTable.d.ts

@@ -13,6 +13,6 @@ export interface TableSize {
 }
 /**
  * Inserts a table of empty cells and moves the caret into the first cell.
- * The table is as wide as one line of body text on the paper the open document names
+ * The table is as wide as one line of body text on the paper of the section it goes into
  */
 export declare function insertTable({ rows, columns }: TableSize): Command;

package/dist/editor/insertTable.js

@@ -5,7 +5,7 @@ import {
 } from "prosemirror-state";
 import { createTableNode, isTableSide } from "../docx/tableTemplate.js";
 import { editShut } from "../schema/guards.js";
-import { documentGeometry } from "./documentStyles.js";
+import { sectionGeometryAt } from "./documentStyles.js";
 function isInTable($pos) {
   for (let depth = $pos.depth; depth > 0; depth -= 1) {
     if ($pos.node(depth).type.spec.tableRole === "table") return true;
@@ -30,7 +30,7 @@ function insertTable({ rows, columns }) {
       const tr = state.tr.insert(
         at,
         Fragment.fromArray([
-          createTableNode(rows, columns, documentGeometry(state)),
+          createTableNode(rows, columns, sectionGeometryAt(state, at)),
           state.schema.nodes.paragraph.create()
         ])
       );

package/dist/editor/plainText.d.ts

@@ -1,3 +1,15 @@
 import type { EditorView } from "prosemirror-view";
+/** A single character that becomes an element, or text that goes in as it is */
+export type Piece = {
+    text: string;
+} | {
+    node: "hardBreak" | "tab";
+};
+/**
+ * Splits the incoming text into the pieces to be put into the document.
+ * Control characters that carry meaning become elements, and the rest are stripped because they
+ * would make the file impossible to open.
+ */
+export declare function toPieces(source: string): Piece[];
 export declare function insertPlainText(view: EditorView, source: string): void;
 export declare function insertPlainTextAt(view: EditorView, source: string, from: number, to: number): void;

package/dist/editor/plainText.js

@@ -46,5 +46,6 @@ function insertPlainTextAt(view, source, from, to) {
 }
 export {
   insertPlainText,
-  insertPlainTextAt
+  insertPlainTextAt,
+  toPieces
 };

package/dist/editor/plugins/columnResize.js

@@ -14,7 +14,7 @@ import {
   shiftedTableWidth,
   tableGridCols
 } from "../../table/widths.js";
-import { documentGeometry } from "../documentStyles.js";
+import { sectionGeometryAt } from "../documentStyles.js";
 import { TableNodeView } from "../views/tableView.js";
 var EDGE_TOLERANCE_PX = 4;
 var FALLBACK_DXA_PER_PX = 15;
@@ -127,7 +127,7 @@ function columnResize() {
         col: current.target.col,
         width: current.width
       },
-      documentGeometry(current.view.state)
+      sectionGeometryAt(current.view.state, current.target.tablePos)
     );
     if (tr) current.view.dispatch(tr);
   }
@@ -144,7 +144,10 @@ function columnResize() {
     drag = {
       view,
       target,
-      maxTotal: maxGridTotal(target.table, documentGeometry(view.state)),
+      maxTotal: maxGridTotal(
+        target.table,
+        sectionGeometryAt(view.state, target.tablePos)
+      ),
       startX: event.clientX,
       dxaPerPx: dxaPerPx(target.gridCols, target.tableDom),
       cols,

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

@@ -0,0 +1,28 @@
+/**
+ * Where the built-in comment composer stands: the stretch of text it was opened over, or nothing
+ * when it is shut.
+ *
+ * The stretch is the point of holding it here rather than in the component that draws the form.
+ * A comment is written about text the reader picked out, and writing it takes as long as it takes:
+ * the caret moves on, the page is scrolled, a word elsewhere is fixed. The stretch is moved along
+ * by every edit that happens meanwhile, so the comment lands on the text it was written for, and
+ * the form goes away by itself once that text is gone or the document stops taking comments.
+ *
+ * The commands here are the editor's own. A consumer opening its own composer from its own toolbar
+ * is a public surface this package has not settled yet, so nothing below is exported from
+ * `./commands`.
+ */
+import type { Command, EditorState, Plugin } from "prosemirror-state";
+import type { CommentRange } from "../commands/comments/model";
+/**
+ * Opens the composer over the selected text. False where a comment could not go there anyway, so
+ * the menu entry that runs it is drawn dead rather than opening a form nothing would come of. It
+ * is the same question that entry is drawn from, asked of the same selection.
+ */
+export declare const openCommentComposer: Command;
+/** Closes it. Called on Cancel, on the comment being written, and on the panel being put away */
+export declare const closeCommentComposer: Command;
+export declare function isCommentComposerOpen(state: EditorState): boolean;
+/** The stretch the open composer is writing about. Null when no composer stands */
+export declare function commentComposerRange(state: EditorState): CommentRange | null;
+export declare function commentComposer(): Plugin<CommentRange | null>;

package/dist/editor/plugins/commentComposer.js

@@ -0,0 +1,46 @@
+// src/editor/plugins/commentComposer.ts
+import { canAddComment } from "../commands/comments/editing.js";
+import { panelPlugin } from "./panelState.js";
+function isCommentRange(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const { from, to } = value;
+  return typeof from === "number" && typeof to === "number";
+}
+var composer = panelPlugin({
+  name: "docxEditorCommentComposer",
+  isAnchor: isCommentRange,
+  // The stretch moves with the text around it. Its two ends are biased inwards, so text typed
+  // against either edge stays outside the comment and an edit that swallows the stretch leaves
+  // the two ends together, which is the form closing
+  onDocChange: (anchor, tr) => {
+    const from = tr.mapping.map(anchor.from, 1);
+    const to = tr.mapping.map(anchor.to, -1);
+    return to > from ? { from, to } : null;
+  },
+  // Asked after every transaction, which is what catches the mode being switched to read-only:
+  // that changes no text, so the mapping above never sees it. It is also what keeps the form from
+  // ever standing over a stretch that takes no comment, whoever opened it
+  closeWhen: (state, anchor) => !canAddComment(state, anchor)
+});
+var openCommentComposer = (state, dispatch) => {
+  if (!canAddComment(state)) return false;
+  const { from, to } = state.selection;
+  return composer.open({ from, to })(state, dispatch);
+};
+var closeCommentComposer = composer.close;
+function isCommentComposerOpen(state) {
+  return composer.anchor(state) !== null;
+}
+function commentComposerRange(state) {
+  return composer.anchor(state);
+}
+function commentComposer() {
+  return composer.plugin;
+}
+export {
+  closeCommentComposer,
+  commentComposer,
+  commentComposerRange,
+  isCommentComposerOpen,
+  openCommentComposer
+};

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

@@ -1,3 +1,30 @@
-/** Draws the text ranges identified by Word comment markers. */
-import { Plugin } from "prosemirror-state";
+/**
+ * What the comments in a document come to, worked out once per edit: the threads in document
+ * order, the lookup a command asking after one of them uses, and the ranges drawn over the text
+ * each was written for.
+ *
+ * All three are read off the same walk. Which comments a document holds is decided by the document
+ * and nothing else, so it is a projection (`./documentProjection`) rather than something worked
+ * out again for every command asked, every decoration drawn and every render of the list beside
+ * the page.
+ */
+import type { Plugin } from "prosemirror-state";
+import { DecorationSet } from "prosemirror-view";
+import { type DocumentComment } from "../commands/comments/model";
+export interface DocumentComments {
+    comments: readonly DocumentComment[];
+    /**
+     * The comments by id. A document can hold the same id twice - a reference copied and pasted
+     * carries the one it was written with - and the first of them wins, which is the one a search
+     * through the list in document order arrived at.
+     */
+    byId: ReadonlyMap<string, DocumentComment>;
+    /** The stretch each comment was written for, drawn as it stood when the edit landed */
+    decorations: DecorationSet;
+}
+export declare const commentProjection: import("./documentProjection").DocumentProjection<DocumentComments>;
+/**
+ * What a state built by `createEditor` registers: the comments it goes on to answer, and the
+ * ranges drawn over the text identified by the Word comment markers holding them.
+ */
 export declare function commentDecorations(): Plugin;

package/dist/editor/plugins/commentDecorations.js

@@ -1,23 +1,97 @@
 // src/editor/plugins/commentDecorations.ts
-import { Plugin } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import { storyKey, storyOf, storyText } from "../../docx/story.js";
 import { editorClassNames } from "../../styles/classNames.js";
-import { documentComments } from "../commands/commentCommands.js";
-function commentDecorations() {
-  return new Plugin({
-    props: {
-      decorations(state) {
-        const decorations = documentComments(state).filter((comment) => comment.from < comment.to).map(
-          (comment) => Decoration.inline(comment.from, comment.to, {
-            class: editorClassNames.commentRange,
-            "data-comment-id": comment.id
-          })
-        );
-        return DecorationSet.create(state.doc, decorations);
-      }
+import {
+  repliesAttr,
+  stringAttr
+} from "../commands/comments/model.js";
+import { documentProjection } from "./documentProjection.js";
+function markerPositions(doc) {
+  const starts = /* @__PURE__ */ new Map();
+  const ends = /* @__PURE__ */ new Map();
+  const references = [];
+  doc.descendants((node, pos) => {
+    const id = stringAttr(node.attrs.id);
+    if (id === null) return true;
+    if (node.type.name === "commentStart" && !starts.has(id)) {
+      starts.set(id, pos);
+    } else if (node.type.name === "commentEnd" && !ends.has(id)) {
+      ends.set(id, pos);
+    } else if (node.type.name === "commentReference") {
+      references.push({ node, pos });
     }
+    return true;
+  });
+  return { starts, ends, references };
+}
+function bodyText(doc, id) {
+  return storyText(storyOf(doc, storyKey("comment", id)));
+}
+function commentsIn(doc) {
+  const markers = markerPositions(doc);
+  return markers.references.map(({ node, pos }) => {
+    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 point = start ?? end ?? pos;
+    return {
+      id,
+      author: stringAttr(node.attrs.author),
+      authorId: stringAttr(node.attrs.authorId),
+      initials: stringAttr(node.attrs.initials),
+      date: stringAttr(node.attrs.date),
+      text: bodyText(doc, id),
+      from: hasRange ? start + 1 : point,
+      to: hasRange ? end : point,
+      referencePos: pos,
+      resolved: node.attrs.resolved === true,
+      replies: repliesAttr(node.attrs.replies).map((reply) => ({
+        id: reply.id,
+        author: reply.author,
+        authorId: reply.authorId,
+        initials: reply.initials,
+        date: reply.date,
+        text: bodyText(doc, reply.id)
+      }))
+    };
   });
 }
+function deriveComments(doc) {
+  const comments = commentsIn(doc);
+  const byId = /* @__PURE__ */ new Map();
+  for (const comment of comments) {
+    if (!byId.has(comment.id)) byId.set(comment.id, comment);
+  }
+  return {
+    comments,
+    byId,
+    decorations: DecorationSet.create(
+      doc,
+      comments.filter((comment) => comment.from < comment.to).map(
+        (comment) => Decoration.inline(comment.from, comment.to, {
+          class: editorClassNames.commentRange,
+          "data-comment-id": comment.id
+        })
+      )
+    )
+  };
+}
+var commentProjection = documentProjection(
+  "docxEditorComments",
+  deriveComments,
+  {
+    // The set the last edit derived. Written as a method so that `this` is the plugin holding it
+    decorations(state) {
+      return this.getState(state)?.decorations;
+    }
+  }
+);
+function commentDecorations() {
+  return commentProjection.plugin;
+}
 export {
-  commentDecorations
+  commentDecorations,
+  commentProjection
 };