@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/dist-cjs/canvas/anchor-lifecycle.js

@@ -0,0 +1,148 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var anchor_lifecycle_exports = {};
+__export(anchor_lifecycle_exports, {
+  registerCommentAnchorLifecycle: () => registerCommentAnchorLifecycle
+});
+module.exports = __toCommonJS(anchor_lifecycle_exports);
+var import_utils = require("@tldraw/utils");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_store = require("./comment-store");
+var import_thread_state = require("./thread-state");
+const convertedByShapeCache = new import_utils.WeakCache();
+function isAnchoredToShape(thread, shapeId) {
+  const anchor = thread.anchor;
+  return anchor.type === "shape" && anchor.shapeId === shapeId;
+}
+function registerCommentAnchorLifecycle(editor) {
+  const pendingByShape = /* @__PURE__ */ new Map();
+  const convertedByShape = convertedByShapeCache.get(editor, () => /* @__PURE__ */ new Map());
+  function rehomeThread(thread, pageId, updates) {
+    updates.push({ ...thread, pageId });
+    for (const comment of (0, import_comment_store.getComments)(editor)) {
+      if (comment.threadId === thread.id) updates.push({ ...comment, pageId });
+    }
+  }
+  const disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      for (const thread of (0, import_comment_store.getCommentThreads)(editor)) {
+        if (!isAnchoredToShape(thread, shape.id)) continue;
+        let snapshot = pendingByShape.get(shape.id);
+        if (!snapshot) {
+          snapshot = /* @__PURE__ */ new Map();
+          pendingByShape.set(shape.id, snapshot);
+        }
+        let point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
+        const inset = (0, import_thread_state.impreciseShapePinInset)(editor, thread.anchor);
+        if (point && inset) {
+          const zoom = editor.getZoomLevel();
+          point = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom };
+        }
+        snapshot.set(thread.id, point);
+      }
+    }
+  );
+  const returnedShapeIds = /* @__PURE__ */ new Set();
+  const disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {
+    if (source === "remote") return;
+    if (pendingByShape.size === 0 && returnedShapeIds.size === 0) return;
+    const settled = [...pendingByShape.entries()];
+    pendingByShape.clear();
+    const returned = [...returnedShapeIds];
+    returnedShapeIds.clear();
+    const updates = [];
+    for (const [shapeId, threadPoints] of settled) {
+      if (editor.getShape(shapeId)) continue;
+      for (const [threadId, point] of threadPoints) {
+        if (!point) continue;
+        const thread = (0, import_comment_store.getCommentRecord)(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        if (!isAnchoredToShape(thread, shapeId)) continue;
+        let converted = convertedByShape.get(shapeId);
+        if (!converted) {
+          converted = [];
+          convertedByShape.set(shapeId, converted);
+        }
+        converted.push({ threadId, anchor: thread.anchor, point });
+        updates.push({ ...thread, anchor: { type: "point", x: point.x, y: point.y } });
+      }
+    }
+    for (const shapeId of returned) {
+      const shape = editor.getShape(shapeId);
+      if (!shape) continue;
+      const converted = convertedByShape.get(shapeId);
+      if (!converted) continue;
+      convertedByShape.delete(shapeId);
+      const pageId = editor.getAncestorPageId(shape);
+      for (const { threadId, anchor, point } of converted) {
+        const thread = (0, import_comment_store.getCommentRecord)(editor, threadId);
+        if (!thread || thread.typeName !== "comment-thread") continue;
+        const current = thread.anchor;
+        if (current.type !== "point" || current.x !== point.x || current.y !== point.y) {
+          continue;
+        }
+        if (!pageId || thread.pageId === pageId) {
+          updates.push({ ...thread, anchor });
+        } else {
+          rehomeThread({ ...thread, anchor }, pageId, updates);
+        }
+      }
+    }
+    if (updates.length > 0) {
+      (0, import_comment_mutations.commitCommentMutation)(editor, () => (0, import_comment_mutations.putRecordsInCommit)(editor, updates));
+    }
+  });
+  const disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(
+    "shape",
+    (shape, source) => {
+      if (source === "remote") return;
+      if (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id);
+    }
+  );
+  const disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(
+    "shape",
+    (prev, next, source) => {
+      if (source === "remote") return;
+      if (prev.parentId === next.parentId) return;
+      const pageId = editor.getAncestorPageId(next);
+      if (!pageId) return;
+      const movedIds = editor.getShapeAndDescendantIds([next.id]);
+      const updates = [];
+      for (const thread of (0, import_comment_store.getCommentThreads)(editor)) {
+        const anchor = thread.anchor;
+        if (anchor.type !== "shape") continue;
+        if (!movedIds.has(anchor.shapeId)) continue;
+        if (thread.pageId === pageId) continue;
+        rehomeThread(thread, pageId, updates);
+      }
+      if (updates.length > 0) {
+        (0, import_comment_mutations.commitCommentMutation)(editor, () => (0, import_comment_mutations.putRecordsInCommit)(editor, updates));
+      }
+    }
+  );
+  return () => {
+    disposeBeforeDelete();
+    disposeOperationComplete();
+    disposeAfterCreate();
+    disposeAfterChange();
+  };
+}
+//# sourceMappingURL=anchor-lifecycle.js.map

package/dist-cjs/canvas/anchor-lifecycle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/anchor-lifecycle.ts"],
+  "sourcesContent": ["import { WeakCache } from '@tldraw/utils'\nimport { Editor, TLCommentAnchor, TLCommentThread, TLPageId, TLShapeId, VecLike } from 'tldraw'\nimport { commitCommentMutation, putRecordsInCommit } from './comment-mutations'\nimport { getCommentRecord, getComments, getCommentThreads, TLCommentRecord } from './comment-store'\nimport { anchorPagePoint, impreciseShapePinInset } from './thread-state'\n\ntype ShapeAnchor = Extract<TLCommentAnchor, { type: 'shape' }>\n\n/**\n * Threads converted to point anchors because their shape was deleted, kept so the anchor can be\n * restored if the shape comes back (page move re-create, undo of the delete). Owned by the\n * editor, not the registration closure: the registering effect can re-run (a prop identity\n * change, a remount), and an undo can arrive arbitrarily long after the delete \u2014 the memory has\n * to outlive any one registration.\n */\nconst convertedByShapeCache = new WeakCache<\n\tEditor,\n\tMap<TLShapeId, { threadId: string; anchor: ShapeAnchor; point: VecLike }[]>\n>()\n\nfunction isAnchoredToShape(\n\tthread: TLCommentThread,\n\tshapeId: TLShapeId\n): thread is TLCommentThread & { anchor: ShapeAnchor } {\n\tconst anchor = thread.anchor\n\treturn anchor.type === 'shape' && anchor.shapeId === shapeId\n}\n\n/**\n * Keep shape-anchored threads alive across their shape's lifecycle:\n *\n * - When the shape is deleted, the thread converts to a `point` anchor at the spot its pin last\n *   occupied, so the conversation outlives the shape instead of becoming invisible (a missing\n *   shape has no bounds, which hides the pin).\n * - When the shape moves to another page, the thread follows: its `pageId` and each comment's\n *   denormalized `pageId` update to the shape's new page, and the anchor keeps riding the shape.\n * - When a deleted shape comes back (a page move re-creates it with its id preserved; undoing a\n *   delete restores it), the thread re-attaches \u2014 unless its pin was manually moved in the\n *   meantime, in which case the manual placement wins.\n *\n * A page move is `deleteShapes` + re-create with preserved ids inside one `editor.run`, but each\n * store write is its own operation \u2014 so at no single moment does \"this shape is being moved\"\n * exist as an observable event. The handlers therefore cooperate across operations:\n * `beforeDelete` snapshots where each affected pin sits (every record is still in the store at\n * that point, so page bounds resolve even for children of a deleted frame); the\n * operation-complete pass converts threads whose shape is really gone, remembering the original\n * anchor; `afterCreate` notes a reappeared shape id, and the operation-complete pass restores\n * the anchor once the store has settled (creation order within an operation is arbitrary, so a\n * fresh shape may not resolve an ancestor page mid-operation). Undo/redo of a move\n * replays as a `parentId` update (remove + add of one id squash to an update in the history\n * diff), so an `afterChange` handler re-homes threads on cross-page reparents \u2014 including\n * threads anchored to descendants, which move with their parent without change events of their\n * own.\n *\n * Remote changes are ignored: the client that performed the operation runs this same\n * maintenance and syncs the resulting thread updates. Writes honour the\n * {@link CommentingOptions.history} option, so the consumer decides whether they're undoable.\n *\n * Registered by `CanvasComments` on mount; parts-built consumers can call this directly.\n * Returns a cleanup function that unregisters all handlers.\n *\n * @public\n */\nexport function registerCommentAnchorLifecycle(editor: Editor): () => void {\n\t// Pin positions snapshotted during the current operation: shape id -> (thread id -> pin page\n\t// point).\n\tconst pendingByShape = new Map<TLShapeId, Map<string, VecLike | null>>()\n\tconst convertedByShape = convertedByShapeCache.get(editor, () => new Map())\n\n\tfunction rehomeThread(thread: TLCommentThread, pageId: TLPageId, updates: TLCommentRecord[]) {\n\t\tupdates.push({ ...thread, pageId })\n\t\tfor (const comment of getComments(editor)) {\n\t\t\tif (comment.threadId === thread.id) updates.push({ ...comment, pageId })\n\t\t}\n\t}\n\n\tconst disposeBeforeDelete = editor.sideEffects.registerBeforeDeleteHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tif (!isAnchoredToShape(thread, shape.id)) continue\n\t\t\t\tlet snapshot = pendingByShape.get(shape.id)\n\t\t\t\tif (!snapshot) {\n\t\t\t\t\tsnapshot = new Map()\n\t\t\t\t\tpendingByShape.set(shape.id, snapshot)\n\t\t\t\t}\n\t\t\t\t// Snapshot where the pin is drawn, not just the anchor point: imprecise shape pins\n\t\t\t\t// render inset toward the shape's centre, and the converted point pin renders at\n\t\t\t\t// its point exactly \u2014 without the inset the pin would jump on deletion. The inset\n\t\t\t\t// is screen-fixed, so bake it in at the current zoom.\n\t\t\t\tlet point = anchorPagePoint(editor, thread.anchor)\n\t\t\t\tconst inset = impreciseShapePinInset(editor, thread.anchor)\n\t\t\t\tif (point && inset) {\n\t\t\t\t\tconst zoom = editor.getZoomLevel()\n\t\t\t\t\tpoint = { x: point.x + inset.x / zoom, y: point.y + inset.y / zoom }\n\t\t\t\t}\n\t\t\t\tsnapshot.set(thread.id, point)\n\t\t\t}\n\t\t}\n\t)\n\n\t// Shape ids from `convertedByShape` re-created during the current operation. Restores are\n\t// settled at operation complete rather than in `afterCreate` itself: creation order within an\n\t// operation is arbitrary, so a shape can appear before its parent and not resolve an ancestor\n\t// page yet \u2014 and the conversion memory must outlive any such partial state.\n\tconst returnedShapeIds = new Set<TLShapeId>()\n\n\tconst disposeOperationComplete = editor.sideEffects.registerOperationCompleteHandler((source) => {\n\t\t// Only user-sourced handlers populate the maps and only local operations should settle\n\t\t// them; a remote operation completing leaves any (impossible-in-practice) leftovers for\n\t\t// the next local settle rather than judging them against remote state.\n\t\tif (source === 'remote') return\n\t\tif (pendingByShape.size === 0 && returnedShapeIds.size === 0) return\n\t\tconst settled = [...pendingByShape.entries()]\n\t\tpendingByShape.clear()\n\t\tconst returned = [...returnedShapeIds]\n\t\treturnedShapeIds.clear()\n\n\t\tconst updates: TLCommentRecord[] = []\n\t\tfor (const [shapeId, threadPoints] of settled) {\n\t\t\tif (editor.getShape(shapeId)) continue\n\t\t\tfor (const [threadId, point] of threadPoints) {\n\t\t\t\tif (!point) continue\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\tif (!isAnchoredToShape(thread, shapeId)) continue\n\t\t\t\tlet converted = convertedByShape.get(shapeId)\n\t\t\t\tif (!converted) {\n\t\t\t\t\tconverted = []\n\t\t\t\t\tconvertedByShape.set(shapeId, converted)\n\t\t\t\t}\n\t\t\t\tconverted.push({ threadId, anchor: thread.anchor, point })\n\t\t\t\tupdates.push({ ...thread, anchor: { type: 'point', x: point.x, y: point.y } })\n\t\t\t}\n\t\t}\n\n\t\tfor (const shapeId of returned) {\n\t\t\tconst shape = editor.getShape(shapeId)\n\t\t\tif (!shape) continue\n\t\t\tconst converted = convertedByShape.get(shapeId)\n\t\t\tif (!converted) continue\n\t\t\tconvertedByShape.delete(shapeId)\n\n\t\t\tconst pageId = editor.getAncestorPageId(shape)\n\t\t\tfor (const { threadId, anchor, point } of converted) {\n\t\t\t\tconst thread = getCommentRecord(editor, threadId)\n\t\t\t\tif (!thread || thread.typeName !== 'comment-thread') continue\n\t\t\t\t// Re-attach only threads still sitting exactly where the conversion left them \u2014 a\n\t\t\t\t// pin moved since then was placed deliberately, and that placement wins.\n\t\t\t\tconst current = thread.anchor\n\t\t\t\tif (current.type !== 'point' || current.x !== point.x || current.y !== point.y) {\n\t\t\t\t\tcontinue\n\t\t\t\t}\n\t\t\t\tif (!pageId || thread.pageId === pageId) {\n\t\t\t\t\tupdates.push({ ...thread, anchor })\n\t\t\t\t} else {\n\t\t\t\t\trehomeThread({ ...thread, anchor }, pageId, updates)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (updates.length > 0) {\n\t\t\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, updates))\n\t\t}\n\t})\n\n\tconst disposeAfterCreate = editor.sideEffects.registerAfterCreateHandler(\n\t\t'shape',\n\t\t(shape, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (convertedByShape.has(shape.id)) returnedShapeIds.add(shape.id)\n\t\t}\n\t)\n\n\tconst disposeAfterChange = editor.sideEffects.registerAfterChangeHandler(\n\t\t'shape',\n\t\t(prev, next, source) => {\n\t\t\tif (source === 'remote') return\n\t\t\tif (prev.parentId === next.parentId) return\n\t\t\tconst pageId = editor.getAncestorPageId(next)\n\t\t\tif (!pageId) return\n\t\t\t// Descendants move with their parent without change events of their own.\n\t\t\tconst movedIds = editor.getShapeAndDescendantIds([next.id])\n\t\t\tconst updates: TLCommentRecord[] = []\n\t\t\tfor (const thread of getCommentThreads(editor)) {\n\t\t\t\tconst anchor = thread.anchor\n\t\t\t\tif (anchor.type !== 'shape') continue\n\t\t\t\tif (!movedIds.has(anchor.shapeId)) continue\n\t\t\t\tif (thread.pageId === pageId) continue\n\t\t\t\trehomeThread(thread, pageId, updates)\n\t\t\t}\n\t\t\tif (updates.length > 0) {\n\t\t\t\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, updates))\n\t\t\t}\n\t\t}\n\t)\n\n\treturn () => {\n\t\tdisposeBeforeDelete()\n\t\tdisposeOperationComplete()\n\t\tdisposeAfterCreate()\n\t\tdisposeAfterChange()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/canvas/cluster-input.js

@@ -22,13 +22,13 @@ __export(cluster_input_exports, {
 });
 module.exports = __toCommonJS(cluster_input_exports);
 var import_thread_state = require("./thread-state");
-function collectClusterLeaves(editor, threads, openThreadId, impreciseShapeAnchor) {
+function collectClusterLeaves(editor, threads, openThreadId) {
   const pageId = editor.getCurrentPageId();
   const leaves = [];
   for (const thread of threads) {
     if (thread.id === openThreadId) continue;
     if (thread.pageId !== pageId) continue;
-    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor, impreciseShapeAnchor);
+    const point = (0, import_thread_state.anchorPagePoint)(editor, thread.anchor);
     if (!point) continue;
     leaves.push({
       id: thread.id,

package/dist-cjs/canvas/cluster-input.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/cluster-input.ts"],
-  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** @public */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null,\n\timpreciseShapeAnchor?: { x: number; y: number }\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAGzB,SAAS,qBACf,QACA,SACA,cACA,sBACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,QAAQ,oBAAoB;AACzE,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
+  "sourcesContent": ["import type { Editor, TLCommentThread } from 'tldraw'\nimport type { LeafInput } from '../clustering/types'\nimport { anchorPagePoint } from './thread-state'\n\n/** The cluster leaves for the threads pinned on the current page. @internal */\nexport function collectClusterLeaves(\n\teditor: Editor,\n\tthreads: readonly TLCommentThread[],\n\topenThreadId: string | null\n): LeafInput[] {\n\tconst pageId = editor.getCurrentPageId()\n\tconst leaves: LeafInput[] = []\n\n\tfor (const thread of threads) {\n\t\tif (thread.id === openThreadId) continue\n\t\tif (thread.pageId !== pageId) continue\n\n\t\tconst point = anchorPagePoint(editor, thread.anchor)\n\t\tif (!point) continue\n\n\t\tleaves.push({\n\t\t\tid: thread.id,\n\t\t\tpoint: { x: point.x, y: point.y },\n\t\t})\n\t}\n\n\treturn leaves\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,0BAAgC;AAGzB,SAAS,qBACf,QACA,SACA,cACc;AACd,QAAM,SAAS,OAAO,iBAAiB;AACvC,QAAM,SAAsB,CAAC;AAE7B,aAAW,UAAU,SAAS;AAC7B,QAAI,OAAO,OAAO,aAAc;AAChC,QAAI,OAAO,WAAW,OAAQ;AAE9B,UAAM,YAAQ,qCAAgB,QAAQ,OAAO,MAAM;AACnD,QAAI,CAAC,MAAO;AAEZ,WAAO,KAAK;AAAA,MACX,IAAI,OAAO;AAAA,MACX,OAAO,EAAE,GAAG,MAAM,GAAG,GAAG,MAAM,EAAE;AAAA,IACjC,CAAC;AAAA,EACF;AAEA,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/canvas/comment-body.js

@@ -26,6 +26,6 @@ var import_react = require("react");
 var import_comment_render = require("./comment-render");
 function CommentBody({ richText, resolveName }) {
   const html = (0, import_react.useMemo)(() => (0, import_comment_render.renderCommentHtml)(richText, resolveName), [richText, resolveName]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-text", dangerouslySetInnerHTML: { __html: html } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-text", dangerouslySetInnerHTML: { __html: html } });
 }
 //# sourceMappingURL=comment-body.js.map

package/dist-cjs/canvas/comment-body.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/canvas/comment-body.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,mBAAwB;AAExB,4BAAkC;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,WAAO,sBAAQ,UAAM,yCAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,4CAAC,SAAI,WAAU,YAAW,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAC7E;",
+  "sourcesContent": ["import { useMemo } from 'react'\nimport { TLRichText } from 'tldraw'\nimport { renderCommentHtml } from './comment-render'\n\n/** @public */\nexport interface CommentBodyProps {\n\trichText: TLRichText\n\t/** Maps a member id to its current display name, so \\@mentions show the live name. */\n\tresolveName?(id: string): string | undefined\n}\n\n/**\n * Renders a comment's rich-text body read-only through the limited comment extension set (no\n * headings), so formatting (bold, links, lists, highlight) is preserved rather than flattened, and\n * headings can never render. Use this as the `body` of a `CommentCard` on a canvas.\n * @public @react\n */\nexport function CommentBody({ richText, resolveName }: CommentBodyProps) {\n\tconst html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])\n\treturn <div className=\"tlui-cmt-text\" dangerouslySetInnerHTML={{ __html: html }} />\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBQ;AAnBR,mBAAwB;AAExB,4BAAkC;AAe3B,SAAS,YAAY,EAAE,UAAU,YAAY,GAAqB;AACxE,QAAM,WAAO,sBAAQ,UAAM,yCAAkB,UAAU,WAAW,GAAG,CAAC,UAAU,WAAW,CAAC;AAC5F,SAAO,4CAAC,SAAI,WAAU,iBAAgB,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAClF;",
   "names": []
 }

package/dist-cjs/canvas/comment-drafts.js

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_drafts_exports = {};
+__export(comment_drafts_exports, {
+  NEW_COMMENT_DRAFT: () => NEW_COMMENT_DRAFT,
+  clearCommentDraft: () => clearCommentDraft,
+  getCommentDraft: () => getCommentDraft,
+  replyDraftSlot: () => replyDraftSlot,
+  saveCommentDraft: () => saveCommentDraft
+});
+module.exports = __toCommonJS(comment_drafts_exports);
+var import_utils = require("@tldraw/utils");
+var import_comment_extensions = require("../ui/comment-extensions");
+const DRAFT_KEY_PREFIX = "tldraw-comment-draft";
+const NEW_COMMENT_DRAFT = "new";
+function replyDraftSlot(threadId) {
+  return `reply:${threadId}`;
+}
+function getCommentDraft(slot) {
+  const raw = (0, import_utils.getFromLocalStorage)(`${DRAFT_KEY_PREFIX}:${slot}`);
+  if (!raw) return void 0;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return void 0;
+  }
+}
+function saveCommentDraft(slot, value) {
+  if ((0, import_comment_extensions.isCommentEmpty)(value)) {
+    clearCommentDraft(slot);
+    return;
+  }
+  (0, import_utils.setInLocalStorage)(`${DRAFT_KEY_PREFIX}:${slot}`, JSON.stringify(value));
+}
+function clearCommentDraft(slot) {
+  (0, import_utils.deleteFromLocalStorage)(`${DRAFT_KEY_PREFIX}:${slot}`);
+}
+//# sourceMappingURL=comment-drafts.js.map

package/dist-cjs/canvas/comment-drafts.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-drafts.ts"],
+  "sourcesContent": ["import { deleteFromLocalStorage, getFromLocalStorage, setInLocalStorage } from '@tldraw/utils'\nimport type { TLRichText } from 'tldraw'\nimport { isCommentEmpty } from '../ui/comment-extensions'\n\nconst DRAFT_KEY_PREFIX = 'tldraw-comment-draft'\n\n/** The single slot for an unsent new-comment (placement composer) draft. The anchor is re-picked\n *  by clicking when the composer reopens, so only the text is worth keeping \u2014 and without a\n *  universal document id in the SDK, one slot is the honest scope. */\nexport const NEW_COMMENT_DRAFT = 'new'\n\n/** The draft slot for an unsent reply on a thread. Thread record ids are globally unique and\n *  stable across reloads, so replies never need a document key. @public */\nexport function replyDraftSlot(threadId: string): string {\n\treturn `reply:${threadId}`\n}\n\n/** Read a saved unsent draft, or undefined when there is none (or it fails to parse). @public */\nexport function getCommentDraft(slot: string): TLRichText | undefined {\n\tconst raw = getFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)\n\tif (!raw) return undefined\n\ttry {\n\t\treturn JSON.parse(raw) as TLRichText\n\t} catch {\n\t\treturn undefined\n\t}\n}\n\n/**\n * Save an unsent draft so click-away and reload don't lose it \u2014 the flip side of not warning\n * before discard. Saving empty content clears the slot instead, so deleting your text and\n * closing doesn't resurrect an empty draft later.\n * @public\n */\nexport function saveCommentDraft(slot: string, value: TLRichText) {\n\tif (isCommentEmpty(value)) {\n\t\tclearCommentDraft(slot)\n\t\treturn\n\t}\n\tsetInLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`, JSON.stringify(value))\n}\n\n/** Remove a saved draft (after posting, or when its content was emptied). @public */\nexport function clearCommentDraft(slot: string) {\n\tdeleteFromLocalStorage(`${DRAFT_KEY_PREFIX}:${slot}`)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+E;AAE/E,gCAA+B;AAE/B,MAAM,mBAAmB;AAKlB,MAAM,oBAAoB;AAI1B,SAAS,eAAe,UAA0B;AACxD,SAAO,SAAS,QAAQ;AACzB;AAGO,SAAS,gBAAgB,MAAsC;AACrE,QAAM,UAAM,kCAAoB,GAAG,gBAAgB,IAAI,IAAI,EAAE;AAC7D,MAAI,CAAC,IAAK,QAAO;AACjB,MAAI;AACH,WAAO,KAAK,MAAM,GAAG;AAAA,EACtB,QAAQ;AACP,WAAO;AAAA,EACR;AACD;AAQO,SAAS,iBAAiB,MAAc,OAAmB;AACjE,UAAI,0CAAe,KAAK,GAAG;AAC1B,sBAAkB,IAAI;AACtB;AAAA,EACD;AACA,sCAAkB,GAAG,gBAAgB,IAAI,IAAI,IAAI,KAAK,UAAU,KAAK,CAAC;AACvE;AAGO,SAAS,kBAAkB,MAAc;AAC/C,2CAAuB,GAAG,gBAAgB,IAAI,IAAI,EAAE;AACrD;",
+  "names": []
+}

package/dist-cjs/canvas/comment-mutations.js

@@ -0,0 +1,123 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_mutations_exports = {};
+__export(comment_mutations_exports, {
+  commitCommentMutation: () => commitCommentMutation,
+  deleteComment: () => deleteComment,
+  deleteThread: () => deleteThread,
+  editComment: () => editComment,
+  putCommentRecords: () => putCommentRecords,
+  putRecordsInCommit: () => putRecordsInCommit,
+  removeCommentRecords: () => removeCommentRecords,
+  removeRecordsInCommit: () => removeRecordsInCommit,
+  reopenThread: () => reopenThread,
+  resolveThread: () => resolveThread
+});
+module.exports = __toCommonJS(comment_mutations_exports);
+var import_comment_store = require("./comment-store");
+var import_options = require("./options");
+var import_state = require("./state");
+function historyModeFor(options, kind) {
+  switch (kind) {
+    case "delete":
+      return "ignore";
+    case "drag":
+      return options.dragHistory ?? options.history;
+    case "mutation":
+      return options.history;
+  }
+}
+function commitCommentMutation(editor, fn, kind = "mutation") {
+  const history = historyModeFor((0, import_options.getCommentingOptions)(editor), kind);
+  let result;
+  editor.run(
+    () => {
+      result = fn();
+    },
+    { history }
+  );
+  return result;
+}
+function putRecordsInCommit(editor, records) {
+  editor.store.put(records);
+}
+function removeRecordsInCommit(editor, ids) {
+  editor.store.remove(ids);
+}
+function putCommentRecords(editor, records) {
+  commitCommentMutation(editor, () => putRecordsInCommit(editor, records));
+}
+function removeCommentRecords(editor, ids) {
+  commitCommentMutation(editor, () => removeRecordsInCommit(editor, ids));
+}
+function readLatest(editor, record) {
+  const current = (0, import_comment_store.getCommentRecord)(editor, record.id);
+  return current?.typeName === record.typeName ? current : void 0;
+}
+function editComment(editor, comment, body) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, comment);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, body, editedAt: Date.now() }]);
+  });
+}
+function resolveThread(editor, thread, userId) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, thread);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, resolved: { at: Date.now(), by: userId } }]);
+  });
+}
+function reopenThread(editor, thread) {
+  commitCommentMutation(editor, () => {
+    const current = readLatest(editor, thread);
+    if (!current) return;
+    putRecordsInCommit(editor, [{ ...current, resolved: null }]);
+  });
+}
+function deleteComment(editor, comment) {
+  commitCommentMutation(
+    editor,
+    () => {
+      const current = readLatest(editor, comment);
+      if (!current || current.isDeleted) return;
+      const isLastInThread = (0, import_comment_store.getLiveComments)(editor).filter((c) => c.threadId === current.threadId).length <= 1;
+      if (isLastInThread && import_state.openThreadId.get(editor) === current.threadId) {
+        import_state.openThreadId.set(editor, null);
+      }
+      putRecordsInCommit(editor, [{ ...current, isDeleted: true }]);
+    },
+    "delete"
+  );
+}
+function deleteThread(editor, thread) {
+  commitCommentMutation(
+    editor,
+    () => {
+      const current = readLatest(editor, thread);
+      if (!current) return;
+      if (import_state.openThreadId.get(editor) === current.id) {
+        import_state.openThreadId.set(editor, null);
+      }
+      putRecordsInCommit(editor, [{ ...current, isDeleted: true }]);
+    },
+    "delete"
+  );
+}
+//# sourceMappingURL=comment-mutations.js.map

package/dist-cjs/canvas/comment-mutations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/canvas/comment-mutations.ts"],
+  "sourcesContent": ["import {\n\tEditor,\n\tTLComment,\n\tTLCommentId,\n\tTLCommentReactionId,\n\tTLCommentThread,\n\tTLCommentThreadId,\n\tTLHistoryBatchOptions,\n\tTLRecord,\n\tTLRichText,\n} from 'tldraw'\nimport { getCommentRecord, getLiveComments, type TLCommentRecord } from './comment-store'\nimport { getCommentingOptions, type CommentingOptions } from './options'\nimport { openThreadId } from './state'\n\n/**\n * Every write to a comment record, and the undo/redo policy governing them.\n *\n * This file layers bottom-up: {@link commitCommentMutation} resolves the history mode,\n * {@link putCommentRecords} and {@link removeCommentRecords} are the typed writes that run under\n * it, and the verbs below are those writes plus the one rule each carries \u2014 a timestamp to stamp, a\n * shape to put the `resolved` field in, or the soft-delete protocol. The built-in thread view calls\n * exactly these verbs, so a UI of your own behaves the same as the one in the box.\n *\n * Every verb takes the record it acts on, but treats it as the identity of what to change rather\n * than as the value to write back \u2014 see {@link readLatest}.\n *\n * Posting carries no such rule, so it isn't a verb here: build the records with\n * `createCommentThread`/`createComment` and write them with {@link putCommentRecords}.\n */\n\n/**\n * Which history policy a comment write follows:\n *\n * - `mutation` \u2014 {@link CommentingOptions.history}: posts, replies, edits, resolves.\n * - `drag` \u2014 {@link CommentingOptions.dragHistory}, falling back to `history`: pin and region\n *   re-anchors, which are spatial edits a host may reasonably want undoable alongside a shape move.\n * - `delete` \u2014 always `'ignore'`, whatever the options say. A soft-delete flag is write-once\n *   server-side, so an undo clearing it would be vetoed and rebased rather than restore anything.\n *\n * @internal\n */\nexport type CommentMutationKind = 'delete' | 'drag' | 'mutation'\n\n/** The undo/redo mode a write of the given kind runs under. See {@link CommentMutationKind}. */\nfunction historyModeFor(\n\toptions: CommentingOptions,\n\tkind: CommentMutationKind\n): TLHistoryBatchOptions['history'] {\n\tswitch (kind) {\n\t\tcase 'delete':\n\t\t\treturn 'ignore'\n\t\tcase 'drag':\n\t\t\treturn options.dragHistory ?? options.history\n\t\tcase 'mutation':\n\t\t\treturn options.history\n\t}\n}\n\n/**\n * Commit a comment mutation with the configured undo/redo behavior, so the\n * {@link CommentingOptions.history} option governs whether it lands on the undo stack. Defaults to\n * `'ignore'`. See {@link CommentMutationKind} for what each kind resolves to.\n * @internal\n */\nexport function commitCommentMutation<T>(\n\teditor: Editor,\n\tfn: () => T,\n\tkind: CommentMutationKind = 'mutation'\n): T {\n\tconst history = historyModeFor(getCommentingOptions(editor), kind)\n\tlet result: T\n\teditor.run(\n\t\t() => {\n\t\t\tresult = fn()\n\t\t},\n\t\t{ history }\n\t)\n\treturn result!\n}\n\n/**\n * Write records without opening a commit, for call sites that already sit inside one.\n *\n * `editor.run`'s history option isn't additive \u2014 a nested run overwrites the enclosing mode for its\n * own scope \u2014 so a {@link putCommentRecords} call inside a commit would discard the mode its caller\n * chose. A pin drag committed as `drag` under `dragHistory: 'record'` would land back on\n * `history: 'ignore'` and quietly stop being undoable. Inside a commit, write with this.\n *\n * @internal\n */\nexport function putRecordsInCommit(editor: Editor, records: TLCommentRecord[]): void {\n\teditor.store.put(records as unknown as TLRecord[])\n}\n\n/** {@link putRecordsInCommit}'s counterpart for removals. @internal */\nexport function removeRecordsInCommit(\n\teditor: Editor,\n\tids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]\n): void {\n\teditor.store.remove(ids as unknown as TLRecord['id'][])\n}\n\n/**\n * Write comment records to the store, under the configured\n * {@link CommentingOptions.history} behavior \u2014 so a record you write lands on the undo stack (or\n * doesn't) exactly like one the built-in UI writes. Defaults to `'ignore'`.\n *\n * Use it to seed or import threads, and to save an edit. To delete, prefer\n * {@link deleteComment} and {@link deleteThread} over {@link removeCommentRecords}: comments are\n * soft-deleted, and a synced server rejects the hard delete.\n *\n * @public\n */\nexport function putCommentRecords(editor: Editor, records: TLCommentRecord[]): void {\n\tcommitCommentMutation(editor, () => putRecordsInCommit(editor, records))\n}\n\n/**\n * Remove comment records from the store by id, under the configured\n * {@link CommentingOptions.history} behavior.\n *\n * This is a hard delete, which is rarely what you want for a comment or a thread: the built-in UI\n * soft-deletes them ({@link deleteComment}, {@link deleteThread}) so the server can prune the\n * records \u2014 including reactions, which belong to whoever left them rather than to the deleter. A\n * server that enforces per-record permissions will veto a hard delete outright. Reach for this on\n * a local, unsynced comment store, or to drop a reaction (which is a hard delete \u2014 see\n * {@link toggleCommentReaction}).\n *\n * @public\n */\nexport function removeCommentRecords(\n\teditor: Editor,\n\tids: (TLCommentId | TLCommentReactionId | TLCommentThreadId)[]\n): void {\n\tcommitCommentMutation(editor, () => removeRecordsInCommit(editor, ids))\n}\n\n/**\n * The record as the store currently holds it, or `undefined` if it isn't there any more.\n *\n * A verb is handed a record, but that record is a snapshot of whenever its caller got hold of one,\n * and a comment record moves underneath it. A thread's `anchor` and `pageId` are rewritten without\n * anyone touching the thread: deleting a pinned shape converts the anchor to a point, reparenting\n * one rehomes the thread to another page, a pin drag re-anchors it. Writing the caller's snapshot\n * back would put those fields as they were and sync the revert out to everyone.\n *\n * `put` is also an upsert, so a record a remote delete has already removed would come back \u2014 with\n * `isDeleted: false` on an edit or a resolve. That's the multiplayer surprise the schema warns\n * about (see `TLComment`), reached by a route the history option doesn't cover.\n *\n * So a verb reads what it's changing rather than trusting what it was given, and a record that's\n * gone is a no-op: whatever the change was, there's nothing left for it to apply to.\n */\nfunction readLatest<T extends TLComment | TLCommentThread>(\n\teditor: Editor,\n\trecord: T\n): T | undefined {\n\tconst current = getCommentRecord(editor, record.id)\n\t// Record ids carry their type, so a matching `typeName` means a record of exactly T.\n\treturn current?.typeName === record.typeName ? (current as T) : undefined\n}\n\n/**\n * Replace a comment's body and stamp it as edited, which is what renders the \"(edited)\" marker on\n * its byline.\n *\n * Editing is the author's to do. The built-in UI only offers it on your own comments, and a server\n * that enforces per-record permissions rejects anyone else's edit.\n *\n * The `comment` you pass says which comment to edit; the body lands on the version the store\n * currently holds, so a copy you've held on to can't revert a change made since it, and can't\n * re-create a comment that's already been removed \u2014 editing one of those does nothing.\n *\n * @example\n * ```ts\n * editComment(editor, comment, toRichText('Actually, make it dashed'))\n * ```\n *\n * @public\n */\nexport function editComment(editor: Editor, comment: TLComment, body: TLRichText): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, comment)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, body, editedAt: Date.now() }])\n\t})\n}\n\n/**\n * Mark a thread resolved, stamping who resolved it and when. Resolved threads keep their pin (a\n * checked one) and are hidden from the sidebar until its \"show resolved\" filter is on.\n *\n * Only the resolution is written: the rest of the thread is read fresh, so resolving with a stale\n * copy in hand won't drag a pin back to where it used to be. A no-op on a thread that's gone.\n *\n * @public\n */\nexport function resolveThread(editor: Editor, thread: TLCommentThread, userId: string): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, thread)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, resolved: { at: Date.now(), by: userId } }])\n\t})\n}\n\n/**\n * Reopen a resolved thread, clearing the resolution. A no-op on a thread that isn't resolved, and\n * on one that's gone. Like {@link resolveThread}, it touches only the resolution.\n *\n * @public\n */\nexport function reopenThread(editor: Editor, thread: TLCommentThread): void {\n\tcommitCommentMutation(editor, () => {\n\t\tconst current = readLatest(editor, thread)\n\t\tif (!current) return\n\t\tputRecordsInCommit(editor, [{ ...current, resolved: null }])\n\t})\n}\n\n/**\n * Delete a comment.\n *\n * This is a soft delete: it sets the record's `isDeleted` flag rather than removing it, and the\n * server prunes the comment and its reactions once the flag is persisted. That way no client ever\n * removes records it doesn't own \u2014 a reaction belongs to whoever left it \u2014 and a server enforcing\n * per-record permissions has a write it can check rather than a deletion it can only refuse.\n * Deleting is the author's to do; the built-in UI only offers it on your own comments.\n *\n * The write is never undoable, whatever {@link CommentingOptions.history} says: the flag is\n * write-once server-side, so an undo clearing it would be vetoed and rebased rather than bring the\n * comment back.\n *\n * Deleting a thread's last comment leaves the thread with no surface \u2014 an empty thread renders\n * nothing \u2014 and closes it if it's open. The thread record is left for the server to prune, since\n * the deleter may not be its creator.\n *\n * A comment that's already deleted, or already pruned, is a no-op.\n *\n * @public\n */\nexport function deleteComment(editor: Editor, comment: TLComment): void {\n\tcommitCommentMutation(\n\t\teditor,\n\t\t() => {\n\t\t\tconst current = readLatest(editor, comment)\n\t\t\t// Deleting twice \u2014 a double activation, a handler firing on a copy taken before the first\n\t\t\t// delete \u2014 is nothing to do rather than something to redo. The check below counts the\n\t\t\t// comment being deleted among the live ones, so it only reads as \"the last one\" while\n\t\t\t// this delete is the one taking it away.\n\t\t\tif (!current || current.isDeleted) return\n\t\t\tconst isLastInThread =\n\t\t\t\tgetLiveComments(editor).filter((c) => c.threadId === current.threadId).length <= 1\n\t\t\tif (isLastInThread && openThreadId.get(editor) === current.threadId) {\n\t\t\t\topenThreadId.set(editor, null)\n\t\t\t}\n\t\t\tputRecordsInCommit(editor, [{ ...current, isDeleted: true }])\n\t\t},\n\t\t'delete'\n\t)\n}\n\n/**\n * Delete a thread and, with it, the whole conversation.\n *\n * A soft delete on the same model as {@link deleteComment}: the flag goes on the thread record and\n * the server prunes the thread, its comments, and their reactions once it's persisted. Deleting a\n * thread is its creator's to do \u2014 a server enforcing per-record permissions vetoes anyone else \u2014\n * and the write is never undoable.\n *\n * Closes the thread if it's the open one. A thread that's already pruned is a no-op.\n *\n * @public\n */\nexport function deleteThread(editor: Editor, thread: TLCommentThread): void {\n\tcommitCommentMutation(\n\t\teditor,\n\t\t() => {\n\t\t\tconst current = readLatest(editor, thread)\n\t\t\tif (!current) return\n\t\t\tif (openThreadId.get(editor) === current.id) {\n\t\t\t\topenThreadId.set(editor, null)\n\t\t\t}\n\t\t\tputRecordsInCommit(editor, [{ ...current, isDeleted: true }])\n\t\t},\n\t\t'delete'\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-cjs/canvas/comment-reactions.js

@@ -0,0 +1,163 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_reactions_exports = {};
+__export(comment_reactions_exports, {
+  CommentReactionPicker: () => CommentReactionPicker,
+  CommentReactions: () => CommentReactions,
+  summarizeReactions: () => summarizeReactions,
+  toggleCommentReaction: () => toggleCommentReaction,
+  useCommentReactions: () => useCommentReactions
+});
+module.exports = __toCommonJS(comment_reactions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tldraw = require("tldraw");
+var import_reaction_picker = require("../ui/reaction-picker");
+var import_reactions = require("../ui/reactions");
+var import_comment_mutations = require("./comment-mutations");
+var import_comment_render = require("./comment-render");
+var import_comment_store = require("./comment-store");
+var import_options = require("./options");
+function useCommentReactions(editor, commentId) {
+  return (0, import_tldraw.useValue)(
+    "comment reactions",
+    () => (0, import_comment_store.getCommentReactions)(editor).filter((reaction) => reaction.commentId === commentId).sort((a, b) => a.createdAt - b.createdAt),
+    [editor, commentId]
+  );
+}
+function summarizeReactions(reactions, currentUserId, resolveName) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const reaction of reactions) {
+    const mine = currentUserId != null && reaction.userId === currentUserId;
+    const reactor = { name: resolveName?.(reaction.userId) ?? import_comment_render.UNKNOWN_AUTHOR, you: mine };
+    const group = groups.get(reaction.emoji);
+    if (group) {
+      group.count++;
+      group.active ||= mine;
+      group.firstAt = Math.min(group.firstAt, reaction.createdAt);
+      group.reactors.push(reactor);
+    } else {
+      groups.set(reaction.emoji, {
+        count: 1,
+        active: mine,
+        firstAt: reaction.createdAt,
+        reactors: [reactor]
+      });
+    }
+  }
+  return [...groups].sort(([, a], [, b]) => a.firstAt - b.firstAt).map(([emoji, group]) => ({
+    emoji,
+    count: group.count,
+    active: group.active,
+    reactors: group.reactors
+  }));
+}
+function toggleCommentReaction(editor, comment, userId, emoji, now = Date.now()) {
+  const { allowMultipleReactions, isAllowedReaction } = (0, import_options.getCommentingOptions)(editor);
+  const targetId = (0, import_tldraw.createCommentReactionId)(comment.id, userId, emoji);
+  const mine = (0, import_comment_store.getCommentReactions)(editor).filter(
+    (reaction) => reaction.commentId === comment.id && reaction.userId === userId
+  );
+  const removing = mine.some((reaction) => reaction.id === targetId);
+  if (!removing && !isAllowedReaction(emoji)) return;
+  (0, import_comment_mutations.commitCommentMutation)(editor, () => {
+    if (removing) {
+      (0, import_comment_mutations.removeRecordsInCommit)(editor, [targetId]);
+      return;
+    }
+    if (!allowMultipleReactions && mine.length > 0) {
+      (0, import_comment_mutations.removeRecordsInCommit)(
+        editor,
+        mine.map((reaction) => reaction.id)
+      );
+    }
+    (0, import_comment_mutations.putRecordsInCommit)(editor, [
+      (0, import_tldraw.createCommentReaction)({
+        commentId: comment.id,
+        threadId: comment.threadId,
+        pageId: comment.pageId,
+        userId,
+        emoji,
+        now
+      })
+    ]);
+  });
+}
+function useReactionRenderer() {
+  const { components } = (0, import_options.useCommentingOptions)();
+  const ReactionContent = components.ReactionContent;
+  return (0, import_react.useMemo)(
+    () => ReactionContent ? (token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReactionContent, { token }) : void 0,
+    [ReactionContent]
+  );
+}
+function CommentReactions({ comment, currentUserId, resolveName }) {
+  const editor = (0, import_tldraw.useEditor)();
+  const renderReaction = useReactionRenderer();
+  const { components } = (0, import_options.useCommentingOptions)();
+  const reactions = useCommentReactions(editor, comment.id);
+  const summaries = (0, import_react.useMemo)(
+    () => summarizeReactions(reactions, currentUserId, resolveName),
+    [reactions, currentUserId, resolveName]
+  );
+  const anyMenuOpen = (0, import_tldraw.useValue)("any menu open", () => editor.menus.getOpenMenus().length > 0, [
+    editor
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_reactions.Reactions,
+    {
+      reactions: summaries,
+      canReact: currentUserId != null,
+      enableHoverList: !anyMenuOpen,
+      renderReaction,
+      ReactionTooltip: components.ReactionTooltip,
+      onToggle: (value) => {
+        if (currentUserId == null) return;
+        toggleCommentReaction(editor, comment, currentUserId, value);
+      }
+    }
+  );
+}
+function CommentReactionPicker({
+  comment,
+  currentUserId,
+  emoji
+}) {
+  const editor = (0, import_tldraw.useEditor)();
+  const { components } = (0, import_options.useCommentingOptions)();
+  const renderReaction = useReactionRenderer();
+  const reactions = useCommentReactions(editor, comment.id);
+  const selected = (0, import_react.useMemo)(
+    () => reactions.filter((reaction) => currentUserId != null && reaction.userId === currentUserId).map((reaction) => reaction.emoji),
+    [reactions, currentUserId]
+  );
+  if (currentUserId == null) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_reaction_picker.ReactionPicker,
+    {
+      emoji,
+      selected,
+      renderReaction,
+      palette: components.ReactionPalette,
+      menuId: `comment-reactions-${comment.id}`,
+      onSelect: (value) => toggleCommentReaction(editor, comment, currentUserId, value)
+    }
+  );
+}
+//# sourceMappingURL=comment-reactions.js.map