@pixerate/editor 0.235.0 → 0.237.0

package/dist/{chunk-PI2UYMZY.js → chunk-FSLKBQU7.js}

@@ -17,21 +17,267 @@ import {
   plainTextToSlice
 } from "./chunk-2INPJDNY.js";
 import {
+  CommentStore,
   TRACK_CHANGES_SKIP_META,
+  createReviewId,
   isTrackChangesEnabled,
   safeMergeAttributes
 } from "./chunk-6IN474P4.js";
 
+// src/extensions/comments.ts
+import { Mark } from "@tiptap/core";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var commentsPluginKey = new PluginKey("comments");
+var COMMENT_MARK_NAME = "comment";
+function findCommentRanges(doc) {
+  const result = /* @__PURE__ */ new Map();
+  doc.descendants((node, pos) => {
+    if (!node.isInline) return;
+    node.marks.forEach((mark) => {
+      if (mark.type.name !== COMMENT_MARK_NAME) return;
+      const id = mark.attrs.commentId;
+      if (!id) return;
+      const ranges = result.get(id) ?? [];
+      const last = ranges[ranges.length - 1];
+      const end = pos + node.nodeSize;
+      if (last && last.to === pos) {
+        last.to = end;
+      } else {
+        ranges.push({ from: pos, to: end });
+      }
+      result.set(id, ranges);
+    });
+  });
+  return result;
+}
+function getCommentAnchors(doc) {
+  const anchors = /* @__PURE__ */ new Map();
+  findCommentRanges(doc).forEach((ranges, id) => {
+    const from = ranges[0].from;
+    const to = ranges[ranges.length - 1].to;
+    anchors.set(id, {
+      from,
+      to,
+      quote: ranges.map((r) => doc.textBetween(r.from, r.to, " ", " ")).join(" ")
+    });
+  });
+  return anchors;
+}
+function getCommentIdsAt(state, pos = state.selection.from) {
+  const $pos = state.doc.resolve(pos);
+  const marks = [
+    ...$pos.nodeAfter?.marks ?? [],
+    ...$pos.nodeBefore?.marks ?? []
+  ];
+  const ids = [];
+  marks.forEach((m) => {
+    if (m.type.name === COMMENT_MARK_NAME && m.attrs.commentId && !ids.includes(m.attrs.commentId)) {
+      ids.push(m.attrs.commentId);
+    }
+  });
+  return ids;
+}
+function getCommentStore(editor) {
+  return editor?.storage?.[COMMENT_MARK_NAME]?.store ?? null;
+}
+function resolveAuthor(author) {
+  return typeof author === "function" ? author() : author;
+}
+var Comments = Mark.create({
+  name: COMMENT_MARK_NAME,
+  // Typing at the edge of a comment does not extend it.
+  inclusive: false,
+  // Allow several comment marks (different threads) on the same text.
+  excludes: "",
+  addOptions() {
+    return {
+      store: null,
+      author: { id: "anonymous", name: "Anonymous" },
+      HTMLAttributes: {},
+      commentClass: "pixerate-comment bg-amber-100 border-b-2 border-amber-400 dark:bg-amber-500/20 cursor-pointer",
+      activeClass: "pixerate-comment-active bg-amber-200 dark:bg-amber-500/40",
+      resolvedClass: "",
+      activateOnSelection: true
+    };
+  },
+  addStorage() {
+    return {
+      store: this.options.store ?? new CommentStore(),
+      // tiptap-markdown: comments are not part of the exported markdown.
+      markdown: { serialize: { open: "", close: "" }, parse: {} }
+    };
+  },
+  addAttributes() {
+    return {
+      commentId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-comment-id"),
+        renderHTML: (attrs) => attrs.commentId ? { "data-comment-id": attrs.commentId } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-comment-id]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", safeMergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  addCommands() {
+    const store = () => this.storage.store;
+    return {
+      addComment: (options = {}) => ({ state, tr, dispatch }) => {
+        const { from, to, empty } = state.selection;
+        if (empty) return false;
+        if (dispatch) {
+          const id = options.id ?? createReviewId("comment");
+          tr.addMark(from, to, this.type.create({ commentId: id }));
+          tr.setMeta(commentsPluginKey, "refresh");
+          store().createThread({
+            id,
+            body: options.body ?? "",
+            author: options.author ?? resolveAuthor(this.options.author),
+            anchor: { from, to, quote: state.doc.textBetween(from, to, " ", " ") }
+          });
+          store().setActiveThread(id);
+        }
+        return true;
+      },
+      resolveComment: (id, resolved = true) => ({ tr, dispatch }) => {
+        if (!store().getThread(id)) return false;
+        if (dispatch) {
+          store().resolveThread(id, resolved, resolveAuthor(this.options.author));
+          tr.setMeta(commentsPluginKey, "refresh");
+        }
+        return true;
+      },
+      deleteComment: (id) => ({ state, tr, dispatch }) => {
+        const ranges = findCommentRanges(state.doc).get(id) ?? [];
+        if (ranges.length === 0 && !store().getThread(id)) return false;
+        if (dispatch) {
+          ranges.forEach(({ from, to }) => {
+            state.doc.nodesBetween(from, to, (node, pos) => {
+              const mark = node.marks.find(
+                (m) => m.type === this.type && m.attrs.commentId === id
+              );
+              if (mark) {
+                tr.removeMark(Math.max(pos, from), Math.min(pos + node.nodeSize, to), mark);
+              }
+            });
+          });
+          tr.setMeta(commentsPluginKey, "refresh");
+          store().deleteThread(id);
+        }
+        return true;
+      },
+      setActiveComment: (id) => ({ tr, dispatch }) => {
+        if (id !== null && !store().getThread(id)) return false;
+        if (dispatch) {
+          store().setActiveThread(id);
+          tr.setMeta(commentsPluginKey, "refresh");
+        }
+        return true;
+      },
+      focusComment: (id) => ({ state, tr, dispatch }) => {
+        const ranges = findCommentRanges(state.doc).get(id);
+        if (!ranges || ranges.length === 0) return false;
+        if (dispatch) {
+          const from = ranges[0].from;
+          const to = ranges[ranges.length - 1].to;
+          tr.setSelection(TextSelection.create(tr.doc, from, to)).scrollIntoView();
+          store().setActiveThread(id);
+          tr.setMeta(commentsPluginKey, "refresh");
+        }
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const store = this.storage.store;
+    const options = this.options;
+    let cache = null;
+    const buildDecorations2 = (doc) => {
+      const snapshot = store.getSnapshot();
+      if (cache && cache.doc === doc && cache.snapshot === snapshot) return cache.set;
+      const decorations = [];
+      findCommentRanges(doc).forEach((ranges, id) => {
+        const thread = store.getThread(id);
+        const resolved = thread?.resolved ?? false;
+        const active = snapshot.activeThreadId === id;
+        const cls = [
+          resolved ? options.resolvedClass : options.commentClass,
+          active ? options.activeClass : ""
+        ].filter(Boolean).join(" ");
+        if (!cls) return;
+        ranges.forEach(({ from, to }) => {
+          decorations.push(Decoration.inline(from, to, { class: cls }));
+        });
+      });
+      const set = DecorationSet.create(doc, decorations);
+      cache = { doc, snapshot, set };
+      return set;
+    };
+    return [
+      new Plugin({
+        key: commentsPluginKey,
+        props: {
+          decorations: (state) => buildDecorations2(state.doc)
+        },
+        view: (view) => {
+          let destroyed = false;
+          let scheduled = false;
+          const sync = () => store.syncAnchors(getCommentAnchors(view.state.doc));
+          sync();
+          const unsubscribe = store.subscribe(() => {
+            if (scheduled) return;
+            scheduled = true;
+            queueMicrotask(() => {
+              scheduled = false;
+              if (destroyed) return;
+              sync();
+              if (cache?.snapshot !== store.getSnapshot()) {
+                view.dispatch(
+                  view.state.tr.setMeta(commentsPluginKey, "refresh").setMeta("addToHistory", false)
+                );
+              }
+            });
+          });
+          return {
+            update(view2, prevState) {
+              if (!prevState.doc.eq(view2.state.doc)) sync();
+              if (options.activateOnSelection && !prevState.selection.eq(view2.state.selection)) {
+                const ids = getCommentIdsAt(view2.state);
+                const active = store.getSnapshot().activeThreadId;
+                if (!active || !ids.includes(active)) {
+                  store.setActiveThread(ids[0] ?? null);
+                }
+              }
+            },
+            destroy() {
+              destroyed = true;
+              unsubscribe();
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+function getCommentAuthor(editor) {
+  const ext = editor?.extensionManager?.extensions.find((e) => e.name === COMMENT_MARK_NAME);
+  return ext ? resolveAuthor(ext.options.author) : null;
+}
+
 // src/extensions/table/nesting.ts
 import { Fragment, Slice } from "@tiptap/pm/model";
-import { Plugin, PluginKey, Selection } from "@tiptap/pm/state";
+import { Plugin as Plugin2, PluginKey as PluginKey2, Selection } from "@tiptap/pm/state";
 import {
   CellSelection,
   __pastedCells,
   handlePaste as handleTablePaste
 } from "@tiptap/pm/tables";
 var ALLOW_NESTED_TABLES_META = "allowNestedTables";
-var tableNestingPluginKey = new PluginKey("tableNesting");
+var tableNestingPluginKey = new PluginKey2("tableNesting");
 var roleOf = (node) => node.type.spec.tableRole;
 var isTableNode = (node) => roleOf(node) === "table";
 function outermostTableDepth($pos) {
@@ -171,7 +417,7 @@ var skip = (tr) => !tr.docChanged || tr.getMeta(ALLOW_NESTED_TABLES_META) === tr
 // (nested) table back so the deletion can be reviewed.
 !!tr.getMeta("appendedTransaction") || replacesDocument(tr);
 function createTableNestingPlugin() {
-  return new Plugin({
+  return new Plugin2({
     key: tableNestingPluginKey,
     props: {
       handlePaste: (view, event, slice) => handleTablePasteWithoutNesting(view, event, slice)
@@ -1334,7 +1580,7 @@ function createChartNodeView(mount, renderStatic) {
 
 // src/extensions/chart/chart-node.ts
 import { Node } from "@tiptap/core";
-import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
 
 // src/extensions/document-structure/utils.ts
 import { createDocument } from "@tiptap/core";
@@ -1419,7 +1665,7 @@ function syncInitialContent(editor, sync) {
 var STRUCTURE_PRIORITY = 45;
 
 // src/extensions/chart/chart-node.ts
-var chartPluginKey = new PluginKey2("chartNode");
+var chartPluginKey = new PluginKey3("chartNode");
 function getDocumentCharts(doc, typeName = "chart") {
   const charts = [];
   doc.descendants((node, pos) => {
@@ -1614,7 +1860,7 @@ var Chart = Node.create({
     const { name } = this;
     const { generateId } = this.options;
     return [
-      new Plugin2({
+      new Plugin3({
         key: chartPluginKey,
         appendTransaction: (transactions, _oldState, newState) => {
           if (!transactions.some((tr) => tr.docChanged)) return null;
@@ -2007,11 +2253,11 @@ function createTableStore(editor) {
 // src/extensions/agent-caret.ts
 import { Extension } from "@tiptap/core";
 import { closeHistory } from "@tiptap/pm/history";
-import { Plugin as Plugin3, PluginKey as PluginKey3 } from "@tiptap/pm/state";
-import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { Plugin as Plugin4, PluginKey as PluginKey4 } from "@tiptap/pm/state";
+import { Decoration as Decoration2, DecorationSet as DecorationSet2 } from "@tiptap/pm/view";
 var DEFAULT_AGENT_CARET_COLOR = "#8b5cf6";
 var DEFAULT_AGENT_CARET_NAME = "Agent";
-var agentCaretPluginKey = new PluginKey3("agentCaret");
+var agentCaretPluginKey = new PluginKey4("agentCaret");
 var clamp = (pos, size) => Math.max(0, Math.min(size, Math.round(pos)));
 function caretWidget(caret) {
   return (view) => {
@@ -2036,7 +2282,7 @@ function buildDecorations(state, carets) {
   for (const caret of carets) {
     for (const range of caret.changed) {
       decorations.push(
-        Decoration.inline(range.from, range.to, {
+        Decoration2.inline(range.from, range.to, {
           class: "pe-agent-changed",
           "data-agent-id": caret.id,
           style: `background-color:${tint(caret.color, 18)};`
@@ -2047,7 +2293,7 @@ function buildDecorations(state, carets) {
     const to = Math.max(caret.anchor, caret.head);
     if (from < to) {
       decorations.push(
-        Decoration.inline(from, to, {
+        Decoration2.inline(from, to, {
           class: "pe-agent-selection",
           "data-agent-id": caret.id,
           style: `background-color:${tint(caret.color, 28)};`
@@ -2055,20 +2301,20 @@ function buildDecorations(state, carets) {
       );
     }
     decorations.push(
-      Decoration.widget(caret.head, caretWidget(caret), {
+      Decoration2.widget(caret.head, caretWidget(caret), {
         key: `agent-caret:${caret.id}:${caret.name}:${caret.color}`,
         side: 10,
         ignoreSelection: true
       })
     );
   }
-  return DecorationSet.create(state.doc, decorations);
+  return DecorationSet2.create(state.doc, decorations);
 }
 function createAgentCaretPlugin() {
-  return new Plugin3({
+  return new Plugin4({
     key: agentCaretPluginKey,
     state: {
-      init: (_, state) => ({ carets: [], spans: {}, decorations: DecorationSet.create(state.doc, []) }),
+      init: (_, state) => ({ carets: [], spans: {}, decorations: DecorationSet2.create(state.doc, []) }),
       apply(tr, value, _old, state) {
         const meta = tr.getMeta(agentCaretPluginKey);
         if (!tr.docChanged && !meta) return value;
@@ -2217,6 +2463,14 @@ async function typeAgentText(editor, options) {
 }
 
 export {
+  commentsPluginKey,
+  COMMENT_MARK_NAME,
+  findCommentRanges,
+  getCommentAnchors,
+  getCommentIdsAt,
+  getCommentStore,
+  Comments,
+  getCommentAuthor,
   ALLOW_NESTED_TABLES_META,
   tableNestingPluginKey,
   outermostTableDepth,