quoin-editor 2.0.4 → 2.1.0

package/dist/comments.cjs

@@ -1,18 +1,20 @@
 'use client';
 'use strict';
 
-var chunkLM3DHROX_cjs = require('./chunk-LM3DHROX.cjs');
-var chunk3HW3WRYC_cjs = require('./chunk-3HW3WRYC.cjs');
-var chunkEBSDPHPS_cjs = require('./chunk-EBSDPHPS.cjs');
-var chunk2QKFRKOP_cjs = require('./chunk-2QKFRKOP.cjs');
+var chunk5AUIA4B3_cjs = require('./chunk-5AUIA4B3.cjs');
+var chunkCSIUXYRU_cjs = require('./chunk-CSIUXYRU.cjs');
+var chunk4UFWFV43_cjs = require('./chunk-4UFWFV43.cjs');
+var chunkN25EH2GZ_cjs = require('./chunk-N25EH2GZ.cjs');
 var chunkZWTIRGY5_cjs = require('./chunk-ZWTIRGY5.cjs');
 require('./chunk-A6PGQVTR.cjs');
-var chunkFK7EBZPX_cjs = require('./chunk-FK7EBZPX.cjs');
-require('./chunk-DJU25PFC.cjs');
-var chunkI7X7B3WD_cjs = require('./chunk-I7X7B3WD.cjs');
+require('./chunk-QFGWSFOI.cjs');
+var chunkZ5EEDCRI_cjs = require('./chunk-Z5EEDCRI.cjs');
+require('./chunk-5L2NSIHZ.cjs');
+var chunk4JDRDPLC_cjs = require('./chunk-4JDRDPLC.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var DialogPrimitive = require('@radix-ui/react-dialog');
+var reactDirection = require('@radix-ui/react-direction');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -40,7 +42,7 @@ function addRegion(anchors, block, region, inline2) {
   let position = 0;
   for (const node of inline2) {
     const from = position;
-    position += chunkI7X7B3WD_cjs.nodeLength(node);
+    position += chunk4JDRDPLC_cjs.nodeLength(node);
     for (const id of idsOf(node)) {
       const ranges = anchors.get(id) ?? [];
       const last = ranges[ranges.length - 1];
@@ -67,25 +69,25 @@ function commentAnchors(doc) {
 var atomLabel = (node) => node.kind === "atom" ? node.attrs.label ?? "" : "";
 function anchorText(doc, ranges) {
   return ranges.map(({ block, region, from, to }) => {
-    const inline2 = chunkI7X7B3WD_cjs.blockById(doc, block)?.regions[region] ?? [];
-    return chunkI7X7B3WD_cjs.inlineText(chunkI7X7B3WD_cjs.sliceInline(inline2, from, to), atomLabel);
+    const inline2 = chunk4JDRDPLC_cjs.blockById(doc, block)?.regions[region] ?? [];
+    return chunk4JDRDPLC_cjs.inlineText(chunk4JDRDPLC_cjs.sliceInline(inline2, from, to), atomLabel);
   }).join(" ");
 }
 function commentIdsAt(doc, { block, region, offset }) {
-  const inline2 = chunkI7X7B3WD_cjs.blockById(doc, block)?.regions[region] ?? [];
+  const inline2 = chunk4JDRDPLC_cjs.blockById(doc, block)?.regions[region] ?? [];
   const ids = /* @__PURE__ */ new Set();
   let position = 0;
   for (const node of inline2) {
-    const end = position + chunkI7X7B3WD_cjs.nodeLength(node);
+    const end = position + chunk4JDRDPLC_cjs.nodeLength(node);
     if (position <= offset && offset <= end && end > position) idsOf(node).forEach((id) => ids.add(id));
     position = end;
   }
   return [...ids].sort();
 }
 function threadRemoval(state, id) {
-  const tr = new chunkFK7EBZPX_cjs.Transaction(state).setOrigin("command");
+  const tr = new chunkZ5EEDCRI_cjs.Transaction(state).setOrigin("command");
   for (const { block, region, from, to } of commentAnchors(state.doc).get(id) ?? []) {
-    tr.step(chunkFK7EBZPX_cjs.removeMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
+    tr.step(chunkZ5EEDCRI_cjs.removeMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
   }
   return tr;
 }
@@ -96,14 +98,14 @@ function mapPendingRanges(tr, ranges, state) {
     const from = tr.mapPos({ block: range.block, region: range.region, offset: range.from }, 1);
     const to = tr.mapPos({ block: range.block, region: range.region, offset: range.to }, -1);
     const { index } = state.doc;
-    if (!index.has(from.block) || !index.has(to.block) || chunkFK7EBZPX_cjs.comparePos(state.doc, from, to) >= 0) return [];
-    return chunkFK7EBZPX_cjs.markRanges({ ...state, selection: chunkFK7EBZPX_cjs.textSelection(from, to) });
+    if (!index.has(from.block) || !index.has(to.block) || chunkZ5EEDCRI_cjs.comparePos(state.doc, from, to) >= 0) return [];
+    return chunkZ5EEDCRI_cjs.markRanges({ ...state, selection: chunkZ5EEDCRI_cjs.textSelection(from, to) });
   });
 }
 
 // src/extensions/comments/comments-plugin.ts
 var isEnded = (ended, id, current) => ended.some((thread) => thread.id === id && thread.seen?.resolved === current?.resolved);
-var commentsKey = chunkFK7EBZPX_cjs.createPluginKey("comments");
+var commentsKey = chunkZ5EEDCRI_cjs.createPluginKey("comments");
 var COMMENTS = "comments";
 var IDLE = { pending: [], active: null, open: null, ended: [] };
 function act(value, action) {
@@ -156,26 +158,26 @@ var commentsPlugin = {
 
 // src/extensions/comments/comment-create.ts
 var nextKey = 0;
-var hasCommentableText = (state) => state.selection?.kind === "text" && chunkFK7EBZPX_cjs.markRanges(state).length > 0;
+var hasCommentableText = (state) => state.selection?.kind === "text" && chunkZ5EEDCRI_cjs.markRanges(state).length > 0;
 var requestComment = (state, dispatch) => {
   const { selection } = state;
-  if (selection?.kind !== "text" || chunkFK7EBZPX_cjs.getPluginState(state, commentsKey).pending.length > 0) return false;
-  const ranges = chunkFK7EBZPX_cjs.markRanges(state);
+  if (selection?.kind !== "text" || chunkZ5EEDCRI_cjs.getPluginState(state, commentsKey).pending.length > 0) return false;
+  const ranges = chunkZ5EEDCRI_cjs.markRanges(state);
   if (ranges.length === 0) return false;
   if (dispatch === void 0) return true;
   const pending = { key: ++nextKey, ranges, selection };
   const action = { type: "pending", pending };
-  dispatch(new chunkFK7EBZPX_cjs.Transaction(state).setMeta(COMMENTS, action).setMeta("addToHistory", false));
+  dispatch(new chunkZ5EEDCRI_cjs.Transaction(state).setMeta(COMMENTS, action).setMeta("addToHistory", false));
   return true;
 };
 function settledTransaction(editor, key, id) {
-  const pending = chunkFK7EBZPX_cjs.getPluginState(editor.state, commentsKey).pending.find((anchor) => anchor.key === key);
+  const pending = chunkZ5EEDCRI_cjs.getPluginState(editor.state, commentsKey).pending.find((anchor) => anchor.key === key);
   const tr = editor.createTransaction().setOrigin("command");
   const ranges = id === null ? [] : pending?.ranges ?? [];
   for (const { block, region, from, to } of ranges) {
-    tr.step(chunkFK7EBZPX_cjs.addMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
+    tr.step(chunkZ5EEDCRI_cjs.addMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
   }
-  const untouched = pending !== void 0 && chunkFK7EBZPX_cjs.sameSelection(editor.state.selection, pending.selection);
+  const untouched = pending !== void 0 && chunkZ5EEDCRI_cjs.sameSelection(editor.state.selection, pending.selection);
   const open = id !== null && ranges.length > 0 && untouched ? { ids: [id], focus: true } : void 0;
   const action = { type: "settled", key, open };
   return tr.setMeta(COMMENTS, action);
@@ -186,7 +188,7 @@ function create(editor, pending, onCreate, link) {
     if (link.mounts === 0) return;
     const tr = settledTransaction(editor, pending.key, id);
     editor.dispatch(tr);
-    if (id === null) link.report(chunkEBSDPHPS_cjs.toError(error));
+    if (id === null) link.report(chunk4UFWFV43_cjs.toError(error));
     else if (!tr.docChanged) link.report(new Error(`Comment thread ${id} has no text: it was deleted meanwhile`));
   };
   new Promise((resolve) => resolve(onCreate(input))).then(
@@ -203,20 +205,20 @@ function watchCreates(editor, onCreate, link) {
 
 // src/extensions/comments/comment-open.ts
 function openIds(state, threads, ids) {
-  const { ended } = chunkFK7EBZPX_cjs.getPluginState(state, commentsKey);
+  const { ended } = chunkZ5EEDCRI_cjs.getPluginState(state, commentsKey);
   return ids.filter((id) => {
     const thread = threads.find(id);
     return thread?.resolved === false && !isEnded(ended, id, thread);
   });
 }
 function commentsTransaction(state, action) {
-  return new chunkFK7EBZPX_cjs.Transaction(state).setMeta(COMMENTS, action).setMeta("addToHistory", false);
+  return new chunkZ5EEDCRI_cjs.Transaction(state).setMeta(COMMENTS, action).setMeta("addToHistory", false);
 }
 function commentCommand(threads) {
   return (state, dispatch) => {
     if (requestComment(state, dispatch)) return true;
     const { selection } = state;
-    if (selection?.kind !== "text" || !chunkFK7EBZPX_cjs.isCollapsed(selection)) return false;
+    if (selection?.kind !== "text" || !chunkZ5EEDCRI_cjs.isCollapsed(selection)) return false;
     const ids = openIds(state, threads, commentIdsAt(state.doc, selection.head));
     if (ids.length === 0) return false;
     dispatch?.(commentsTransaction(state, { type: "open", open: { ids, focus: true } }));
@@ -290,7 +292,7 @@ function place(controller, box, gap) {
   root.style.setProperty(HEIGHT, `${bottom}px`);
 }
 function useBlockAligned(controller, box, gap, key) {
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     const element = box.current;
     const view = element?.ownerDocument.defaultView;
     if (!element || !view) return void 0;
@@ -334,10 +336,10 @@ function CommentMarkers({ env, box, entries, onOpen }) {
       "data-rail-item": "",
       "data-block": block,
       "aria-label": env.labels.showComments(ids.length),
-      className: chunkEBSDPHPS_cjs.cn("quoin-comments-marker", chunkEBSDPHPS_cjs.FOCUS_RING),
+      className: chunk4UFWFV43_cjs.cn("quoin-comments-marker", chunk4UFWFV43_cjs.FOCUS_RING),
       onClick: (event) => onOpen(ids[0], event.currentTarget),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.MessageSquare, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.MessageSquare, { "aria-hidden": "true" }),
         ids.length
       ]
     },
@@ -351,7 +353,7 @@ async function called(link, call) {
     await call();
     return true;
   } catch (error) {
-    link.report(chunkEBSDPHPS_cjs.toError(error));
+    link.report(chunk4UFWFV43_cjs.toError(error));
     return false;
   }
 }
@@ -366,7 +368,7 @@ function sendReply(link, call, id, body) {
 }
 var initials = (name) => name.trim().split(/\s+/).slice(0, 2).map((word) => Array.from(word)[0]?.toUpperCase() ?? "").join("");
 function CommentAvatar({ author }) {
-  const picture = chunkLM3DHROX_cjs.webAddress(author.avatarUrl);
+  const picture = chunk5AUIA4B3_cjs.webAddress(author.avatarUrl);
   const [failed, setFailed] = react.useState(null);
   if (picture !== null && picture !== failed) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -444,21 +446,21 @@ function ReplyBox({ env, threadId, first }) {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunkEBSDPHPS_cjs.Button,
+      chunk4UFWFV43_cjs.Button,
       {
         type: "submit",
         variant: "ghost",
         size: "icon-sm",
         "aria-label": labels.send,
         "aria-disabled": text === "" || sending || void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.SendHorizontal, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.SendHorizontal, {})
       }
     )
   ] });
 }
 function ThreadView({ env, id, thread, onEnded }) {
   const { controller, host, labels, link } = env;
-  const readOnly = chunk2QKFRKOP_cjs.useReadOnly(controller);
+  const readOnly = chunkN25EH2GZ_cjs.useReadOnly(controller);
   const [busy, setBusy] = react.useState(false);
   const alive = react.useRef(true);
   const root = react.useRef(null);
@@ -479,11 +481,11 @@ function ThreadView({ env, id, thread, onEnded }) {
     if (ended && stayed) onEnded();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: root, className: "flex flex-col gap-3", children: [
-    comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-col gap-3", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(CommentItem, { comment, labels }, comment.id)) }),
+    comments.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex list-none flex-col gap-3", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(CommentItem, { comment, labels }, comment.id)) }),
     /* @__PURE__ */ jsxRuntime.jsx(ReplyBox, { env, threadId: id, first: comments.length === 0 }),
     !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkEBSDPHPS_cjs.Button,
+        chunk4UFWFV43_cjs.Button,
         {
           type: "button",
           variant: "ghost",
@@ -494,7 +496,7 @@ function ThreadView({ env, id, thread, onEnded }) {
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        chunkEBSDPHPS_cjs.Button,
+        chunk4UFWFV43_cjs.Button,
         {
           type: "button",
           variant: "ghost",
@@ -531,7 +533,7 @@ function ThreadCard({ env, entry, active, expanded, onToggle }) {
         ref: header,
         type: "button",
         "aria-expanded": expanded,
-        className: chunkEBSDPHPS_cjs.cn("flex w-full flex-col items-start gap-1 rounded-sm text-start", chunkEBSDPHPS_cjs.FOCUS_RING),
+        className: chunk4UFWFV43_cjs.cn("flex w-full flex-col items-start gap-1 rounded-sm text-start", chunk4UFWFV43_cjs.FOCUS_RING),
         onClick: () => onToggle(expanded ? null : thread.id),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: removed ? "text-xs text-muted-foreground italic" : "quoin-comments-quote", children: removed ? labels.textRemoved : anchorText2 }),
@@ -551,7 +553,7 @@ var GAP2 = 8;
 var layoutKey = (entries, value) => `${value.active} ${value.open !== null} ${entries.map(({ thread, ranges }) => `${thread.id}:${ranges[0]?.block}`)}`;
 function CommentsRail({ env, box, entries, value, onToggle }) {
   useBlockAligned(env.controller, box, GAP2, layoutKey(entries, value));
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: box, className: "quoin-comments-rail", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": env.labels.comments, children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { "data-rail-item": "", "data-block": entry.ranges[0]?.block ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: box, className: "quoin-comments-rail", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": env.labels.comments, className: "list-none", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { "data-rail-item": "", "data-block": entry.ranges[0]?.block ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
     ThreadCard,
     {
       env,
@@ -565,6 +567,7 @@ function CommentsRail({ env, box, entries, value, onToggle }) {
 function CommentsSheet({ env, entries, value, onToggle, onClose, returnFocus }) {
   const { labels } = env;
   const content = react.useRef(null);
+  const dir = reactDirection.useDirection();
   const outside = react.useRef(false);
   const focusOpened = (event) => {
     const opened = content.current?.querySelector('[aria-expanded="true"]');
@@ -584,6 +587,7 @@ function CommentsSheet({ env, entries, value, onToggle, onClose, returnFocus })
         DialogPrimitive__namespace.Content,
         {
           ref: content,
+          dir,
           "aria-describedby": void 0,
           className: "quoin quoin-comments-sheet",
           onOpenAutoFocus: focusOpened,
@@ -597,9 +601,9 @@ function CommentsSheet({ env, entries, value, onToggle, onClose, returnFocus })
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { className: "text-sm font-semibold", children: labels.comments }),
-              /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.close, children: /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.X, {}) }) })
+              /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.close, children: /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.X, {}) }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": labels.comments, className: "flex flex-col gap-2", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": labels.comments, className: "flex list-none flex-col gap-2", children: entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
               ThreadCard,
               {
                 env,
@@ -624,11 +628,11 @@ function railEntries(doc, threads, ended = []) {
     const ranges = anchors.get(thread.id) ?? NONE;
     return { thread, ranges, anchorText: anchorText(doc, ranges) };
   });
-  const place2 = ({ ranges: [first] }) => first === void 0 ? [Infinity, 0] : [chunkI7X7B3WD_cjs.indexOfBlock(doc, first.block), first.from];
+  const place2 = ({ ranges: [first] }) => first === void 0 ? [Infinity, 0] : [chunk4JDRDPLC_cjs.indexOfBlock(doc, first.block), first.from];
   return entries.map((entry, order) => ({ entry, order, at: place2(entry) })).sort((a, b) => a.at[0] - b.at[0] || a.at[1] - b.at[1] || a.order - b.order).map(({ entry }) => entry);
 }
 function ThreadChooser({ env, choices, onChoose }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": env.labels.threadsHere, className: "flex flex-col gap-1", children: choices.map(({ id, anchorText: anchorText2, preview }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": env.labels.threadsHere, className: "flex list-none flex-col gap-1", children: choices.map(({ id, anchorText: anchorText2, preview }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
@@ -644,22 +648,22 @@ function ThreadChooser({ env, choices, onChoose }) {
 var docOf = (state) => state.doc;
 function focusIsOurs(controller, content) {
   const active = content?.ownerDocument.activeElement ?? null;
-  return active === null || active === active.ownerDocument.body || chunk3HW3WRYC_cjs.ownsNode(controller, active);
+  return active === null || active === active.ownerDocument.body || chunkCSIUXYRU_cjs.ownsNode(controller, active);
 }
 function ThreadPopover({ env, open, threads, onChoose, onClose }) {
   const { controller, labels } = env;
-  const doc = chunk2QKFRKOP_cjs.useEditorState(controller, docOf);
+  const doc = chunkN25EH2GZ_cjs.useEditorState(controller, docOf);
   const anchors = commentAnchors(doc);
   const { ids } = open;
   const first = ids.map((id) => anchors.get(id)?.[0]).find(Boolean);
   const latest = react.useRef(first);
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     if (first) latest.current = first;
   });
   const anchor = react.useMemo(
     () => ({
-      current: chunkEBSDPHPS_cjs.virtualAnchor(
-        () => latest.current ? chunkEBSDPHPS_cjs.rangeRect(controller, latest.current) : null,
+      current: chunk4UFWFV43_cjs.virtualAnchor(
+        () => latest.current ? chunk4UFWFV43_cjs.rangeRect(controller, latest.current) : null,
         () => latest.current && controller.registry.get(latest.current.block, latest.current.region)
       )
     }),
@@ -672,7 +676,7 @@ function ThreadPopover({ env, open, threads, onChoose, onClose }) {
       target?.focus();
     }
   };
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     if (open.focus) focusField();
   }, [open]);
   if (first === void 0 && latest.current === void 0) return null;
@@ -693,7 +697,7 @@ function ThreadPopover({ env, open, threads, onChoose, onClose }) {
   };
   const choices = ids.map((id) => ({ id, anchorText: textOf(id), preview: threads.find(id)?.comments[0]?.body ?? "" }));
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkEBSDPHPS_cjs.Popover,
+    chunk4UFWFV43_cjs.Popover,
     {
       open: true,
       modal: false,
@@ -701,9 +705,9 @@ function ThreadPopover({ env, open, threads, onChoose, onClose }) {
         if (!next) onClose();
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkEBSDPHPS_cjs.PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk4UFWFV43_cjs.PopoverAnchor, { virtualRef: anchor }),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          chunkEBSDPHPS_cjs.PopoverContent,
+          chunk4UFWFV43_cjs.PopoverContent,
           {
             ref: content,
             "aria-label": gone ? labels.textRemoved : single ? labels.thread(textOf(ids[0])) : labels.threadsHere,
@@ -751,7 +755,7 @@ function useAnchorClicks(controller, threads) {
 var WIDE_CANVAS = 800;
 function useCanvasWide(box, initial) {
   const [wide, setWide] = react.useState(initial);
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     const canvas = box.current?.parentElement;
     if (!canvas) return void 0;
     const measure = () => setWide(canvas.offsetWidth >= WIDE_CANVAS);
@@ -765,18 +769,18 @@ function useCanvasWide(box, initial) {
 function useThreads(threads) {
   return react.useSyncExternalStore(threads.subscribe, threads.get, threads.get);
 }
-var commentsOf = (state) => chunkFK7EBZPX_cjs.getPluginState(state, commentsKey);
+var commentsOf = (state) => chunkZ5EEDCRI_cjs.getPluginState(state, commentsKey);
 var docOf2 = (state) => state.doc;
 function CommentsOverlay({ controller, host, labels }) {
-  const { onError } = chunkEBSDPHPS_cjs.useQuoin();
+  const { onError } = chunk4UFWFV43_cjs.useQuoin();
   const link = linkOf(controller.editor);
-  chunk2QKFRKOP_cjs.useIsomorphicLayoutEffect(() => {
+  chunkN25EH2GZ_cjs.useIsomorphicLayoutEffect(() => {
     link.report = onError;
   }, [link, onError]);
   useAnchorClicks(controller, host.threads);
   const threads = useThreads(host.threads);
-  const value = chunk2QKFRKOP_cjs.useEditorState(controller, commentsOf);
-  const doc = chunk2QKFRKOP_cjs.useEditorState(controller, docOf2);
+  const value = chunkN25EH2GZ_cjs.useEditorState(controller, commentsOf);
+  const doc = chunkN25EH2GZ_cjs.useEditorState(controller, docOf2);
   const entries = react.useMemo(() => railEntries(doc, threads, value.ended), [doc, threads, value.ended]);
   const box = react.useRef(null);
   const wide = useCanvasWide(box, host.initialLayout === "wide");
@@ -836,7 +840,7 @@ var ACTIVE = { class: "quoin-comment-active" };
 var inline = (ranges, attrs) => ranges.map((range) => ({ kind: "inline", ...range, attrs }));
 var drawn = /* @__PURE__ */ new WeakMap();
 function commentsDecorations(state) {
-  const value = chunkFK7EBZPX_cjs.getPluginState(state, commentsKey);
+  const value = chunkZ5EEDCRI_cjs.getPluginState(state, commentsKey);
   const last = drawn.get(value);
   if (last?.doc === state.doc) return last.decorations;
   const active = value.active === null ? [] : commentAnchors(state.doc).get(value.active) ?? [];
@@ -848,7 +852,7 @@ function commentsDecorations(state) {
 // src/extensions/comments/watch-ended.ts
 function watchEnded(editor, threads) {
   return threads.subscribe(() => {
-    const { ended } = chunkFK7EBZPX_cjs.getPluginState(editor.state, commentsKey);
+    const { ended } = chunkZ5EEDCRI_cjs.getPluginState(editor.state, commentsKey);
     const kept = ended.filter(({ id }) => isEnded(ended, id, threads.find(id)));
     if (kept.length < ended.length) editor.dispatch(commentsTransaction(editor.state, { type: "caught", kept }));
   });
@@ -856,9 +860,9 @@ function watchEnded(editor, threads) {
 var commentItem = (labels) => ({
   id: "comment",
   title: labels.comment,
-  icon: chunkEBSDPHPS_cjs.MessageSquarePlus,
+  icon: chunk4UFWFV43_cjs.MessageSquarePlus,
   shortcut: "Mod-Alt-m",
-  available: (state) => hasCommentableText(state) && chunkFK7EBZPX_cjs.getPluginState(state, commentsKey).pending.length === 0,
+  available: (state) => hasCommentableText(state) && chunkZ5EEDCRI_cjs.getPluginState(state, commentsKey).pending.length === 0,
   // Focus goes back to the text first: the button leaves the toolbar while the thread is being asked for.
   run: (controller) => {
     controller.focus();
@@ -872,7 +876,7 @@ function commentsExtension(options) {
     return /* @__PURE__ */ jsxRuntime.jsx(CommentsOverlay, { controller, host, labels });
   }
   const ui = { bubbleItems: [commentItem(labels)], overlays: [Overlay] };
-  return chunkFK7EBZPX_cjs.defineExtension({
+  return chunkZ5EEDCRI_cjs.defineExtension({
     name: "comments",
     plugins: [commentsPlugin],
     decorations: commentsDecorations,
@@ -919,6 +923,64 @@ function createCommentThreads(initial = NO_THREADS) {
   };
 }
 
+// src/extensions/comments/shared-threads.ts
+var byTime = (a, b) => (a.createdAt ?? "").localeCompare(b.createdAt ?? "") || a.id.localeCompare(b.id);
+function readThreads(metas, replies) {
+  const comments = /* @__PURE__ */ new Map();
+  for (const { threadId, ...comment } of [...replies.values()].sort(byTime)) {
+    const list = comments.get(threadId);
+    if (list === void 0) comments.set(threadId, [comment]);
+    else list.push(comment);
+  }
+  return [...metas.values()].sort(byTime).map(({ id, resolved }) => ({ id, resolved, comments: comments.get(id) ?? [] }));
+}
+
+// src/extensions/comments/yjs-comment-threads.ts
+function yjsCommentThreads(doc, options) {
+  const { currentUser, field = "comment" } = options;
+  const metas = doc.getMap(`${field}-threads`);
+  const replies = doc.getMap(`${field}-replies`);
+  const threads = createCommentThreads(readThreads(metas, replies));
+  const refresh = () => threads.set(readThreads(metas, replies));
+  const held = (threadId) => {
+    const meta = metas.get(threadId);
+    if (meta === void 0) throw new Error(`No comment thread "${threadId}" in the shared document.`);
+    return meta;
+  };
+  return {
+    threads,
+    async onCreate() {
+      const id = chunk4JDRDPLC_cjs.newId();
+      metas.set(id, { id, resolved: false, createdAt: (/* @__PURE__ */ new Date()).toISOString() });
+      return id;
+    },
+    async onReply(threadId, body) {
+      held(threadId);
+      const id = chunk4JDRDPLC_cjs.newId();
+      replies.set(id, { id, threadId, author: currentUser, body, createdAt: (/* @__PURE__ */ new Date()).toISOString() });
+    },
+    async onResolve(threadId) {
+      metas.set(threadId, { ...held(threadId), resolved: true });
+    },
+    async onDelete(threadId) {
+      doc.transact(() => {
+        metas.delete(threadId);
+        for (const comment of [...replies.values()]) if (comment.threadId === threadId) replies.delete(comment.id);
+      });
+    },
+    listen() {
+      refresh();
+      metas.observe(refresh);
+      replies.observe(refresh);
+      return () => {
+        metas.unobserve(refresh);
+        replies.unobserve(refresh);
+      };
+    }
+  };
+}
+
 exports.commentsExtension = commentsExtension;
 exports.createCommentThreads = createCommentThreads;
 exports.englishCommentsLabels = englishCommentsLabels;
+exports.yjsCommentThreads = yjsCommentThreads;

package/dist/comments.d.cts

@@ -64,5 +64,38 @@ type CommentsOptions = {
  */
 declare function commentsExtension(options: CommentsOptions): Extension;
 
-export { CommentsLabels, commentsExtension, createCommentThreads };
-export type { CommentAuthor, CommentThread, CommentThreads, CommentUser, CommentsOptions, ThreadComment };
+/** The part of a `Y.Map` that comment threads read and write. */
+type YjsCommentsMap<T> = {
+    get(key: string): T | undefined;
+    has(key: string): boolean;
+    set(key: string, value: T): unknown;
+    delete(key: string): void;
+    values(): Iterable<T>;
+    observe(listener: () => void): void;
+    unobserve(listener: () => void): void;
+};
+
+/** The part of a `Y.Doc` that `yjsCommentThreads` reads and writes, so that this entry needs no Yjs types. */
+type YjsCommentsDoc = {
+    getMap<T>(name: string): YjsCommentsMap<T>;
+    transact(change: () => void): unknown;
+};
+type YjsCommentThreadsOptions = {
+    /** Who writes the replies sent from this client, as given to `commentsExtension`. */
+    currentUser: CommentUser;
+    /** What the names of the two shared maps start with: `comment` gives `comment-threads` and `comment-replies`. */
+    field?: string;
+};
+type YjsCommentThreads = Pick<CommentsOptions, 'threads' | 'onCreate' | 'onReply' | 'onResolve' | 'onDelete'> & {
+    /** Reads the shared maps into `threads`, then follows them until the function it returns is called. */
+    listen(): () => void;
+};
+/**
+ * Comment threads kept in a Yjs document, so collaborators see each other's: each thread in one shared map and each
+ * comment in another, by its own id, so that replies sent at the same time all stay. Hand the store and the four
+ * callbacks to `commentsExtension`, and call `listen` while the canvas is mounted.
+ */
+declare function yjsCommentThreads(doc: YjsCommentsDoc, options: YjsCommentThreadsOptions): YjsCommentThreads;
+
+export { CommentsLabels, commentsExtension, createCommentThreads, yjsCommentThreads };
+export type { CommentAuthor, CommentThread, CommentThreads, CommentUser, CommentsOptions, ThreadComment, YjsCommentThreads, YjsCommentThreadsOptions, YjsCommentsDoc, YjsCommentsMap };

package/dist/comments.d.ts

@@ -64,5 +64,38 @@ type CommentsOptions = {
  */
 declare function commentsExtension(options: CommentsOptions): Extension;
 
-export { CommentsLabels, commentsExtension, createCommentThreads };
-export type { CommentAuthor, CommentThread, CommentThreads, CommentUser, CommentsOptions, ThreadComment };
+/** The part of a `Y.Map` that comment threads read and write. */
+type YjsCommentsMap<T> = {
+    get(key: string): T | undefined;
+    has(key: string): boolean;
+    set(key: string, value: T): unknown;
+    delete(key: string): void;
+    values(): Iterable<T>;
+    observe(listener: () => void): void;
+    unobserve(listener: () => void): void;
+};
+
+/** The part of a `Y.Doc` that `yjsCommentThreads` reads and writes, so that this entry needs no Yjs types. */
+type YjsCommentsDoc = {
+    getMap<T>(name: string): YjsCommentsMap<T>;
+    transact(change: () => void): unknown;
+};
+type YjsCommentThreadsOptions = {
+    /** Who writes the replies sent from this client, as given to `commentsExtension`. */
+    currentUser: CommentUser;
+    /** What the names of the two shared maps start with: `comment` gives `comment-threads` and `comment-replies`. */
+    field?: string;
+};
+type YjsCommentThreads = Pick<CommentsOptions, 'threads' | 'onCreate' | 'onReply' | 'onResolve' | 'onDelete'> & {
+    /** Reads the shared maps into `threads`, then follows them until the function it returns is called. */
+    listen(): () => void;
+};
+/**
+ * Comment threads kept in a Yjs document, so collaborators see each other's: each thread in one shared map and each
+ * comment in another, by its own id, so that replies sent at the same time all stay. Hand the store and the four
+ * callbacks to `commentsExtension`, and call `listen` while the canvas is mounted.
+ */
+declare function yjsCommentThreads(doc: YjsCommentsDoc, options: YjsCommentThreadsOptions): YjsCommentThreads;
+
+export { CommentsLabels, commentsExtension, createCommentThreads, yjsCommentThreads };
+export type { CommentAuthor, CommentThread, CommentThreads, CommentUser, CommentsOptions, ThreadComment, YjsCommentThreads, YjsCommentThreadsOptions, YjsCommentsDoc, YjsCommentsMap };