quoin-editor 0.4.2 → 1.0.1

package/dist/comments.js

@@ -0,0 +1,1008 @@
+"use client";
+import {
+  webAddress
+} from "./chunk-OCCKQHCY.js";
+import {
+  ownsNode
+} from "./chunk-LV6EYPJO.js";
+import {
+  Button,
+  FOCUS_RING,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  cn,
+  rangeRect,
+  toError,
+  useQuoin,
+  virtualAnchor
+} from "./chunk-LE3F7WIP.js";
+import {
+  useEditorState,
+  useIsomorphicLayoutEffect,
+  useReadOnly
+} from "./chunk-SSIRYUCK.js";
+import "./chunk-O4Z2WMFF.js";
+import {
+  Transaction,
+  addMarkStep,
+  comparePos,
+  createPluginKey,
+  defineExtension,
+  getPluginState,
+  isCollapsed,
+  markRanges,
+  removeMarkStep,
+  sameSelection,
+  textSelection
+} from "./chunk-UPSLDTLT.js";
+import "./chunk-6LMS5J3Y.js";
+import {
+  blockById,
+  indexOfBlock,
+  inlineText,
+  nodeLength,
+  sliceInline
+} from "./chunk-62WKUAQY.js";
+
+// src/extensions/comments/comments-extension.tsx
+import { MessageSquarePlus } from "lucide-react";
+
+// src/extensions/comments/comment-anchors.ts
+var idsOf = (node) => node?.marks.flatMap((mark) => mark.type === "comment" && mark.attrs?.id ? [mark.attrs.id] : []) ?? [];
+function addRegion(anchors, block, region, inline2) {
+  let position = 0;
+  for (const node of inline2) {
+    const from = position;
+    position += nodeLength(node);
+    for (const id of idsOf(node)) {
+      const ranges = anchors.get(id) ?? [];
+      const last = ranges[ranges.length - 1];
+      const continues = last?.block === block && last.region === region && last.to === from;
+      if (continues) ranges[ranges.length - 1] = { ...last, to: position };
+      else ranges.push({ block, region, from, to: position });
+      anchors.set(id, ranges);
+    }
+  }
+}
+var read = /* @__PURE__ */ new WeakMap();
+function commentAnchors(doc) {
+  let anchors = read.get(doc);
+  if (anchors === void 0) {
+    const found = /* @__PURE__ */ new Map();
+    for (const block of doc.blocks) {
+      for (const [region, inline2] of Object.entries(block.regions)) addRegion(found, block.id, region, inline2);
+    }
+    anchors = found;
+    read.set(doc, anchors);
+  }
+  return anchors;
+}
+var atomLabel = (node) => node.kind === "atom" ? node.attrs.label ?? "" : "";
+function anchorText(doc, ranges) {
+  return ranges.map(({ block, region, from, to }) => {
+    const inline2 = blockById(doc, block)?.regions[region] ?? [];
+    return inlineText(sliceInline(inline2, from, to), atomLabel);
+  }).join(" ");
+}
+function commentIdsAt(doc, { block, region, offset }) {
+  const inline2 = blockById(doc, block)?.regions[region] ?? [];
+  const ids = /* @__PURE__ */ new Set();
+  let position = 0;
+  for (const node of inline2) {
+    const end = position + 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 Transaction(state).setOrigin("command");
+  for (const { block, region, from, to } of commentAnchors(state.doc).get(id) ?? []) {
+    tr.step(removeMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
+  }
+  return tr;
+}
+
+// src/extensions/comments/pending-ranges.ts
+function mapPendingRanges(tr, ranges, state) {
+  return ranges.flatMap((range) => {
+    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) || comparePos(state.doc, from, to) >= 0) return [];
+    return markRanges({ ...state, selection: 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 = createPluginKey("comments");
+var COMMENTS = "comments";
+var IDLE = { pending: [], active: null, open: null, ended: [] };
+function act(value, action) {
+  switch (action.type) {
+    case "pending":
+      return { ...value, pending: [...value.pending, action.pending] };
+    case "settled": {
+      const pending = value.pending.filter(({ key }) => key !== action.key);
+      if (action.open === void 0) return { ...value, pending };
+      return { ...value, pending, active: action.open.ids[0] ?? null, open: action.open };
+    }
+    case "activate":
+      return value.active === action.id ? value : { ...value, active: action.id };
+    case "open":
+      return { ...value, active: action.open.ids.length === 1 ? action.open.ids[0] : value.active, open: action.open };
+    case "close":
+      return value.open === null ? value : { ...value, active: null, open: null };
+    case "forget": {
+      const active = value.active === action.id ? null : value.active;
+      const open = value.open?.ids.includes(action.id) ? null : value.open;
+      const ended = [...value.ended.filter(({ id }) => id !== action.id), { id: action.id, seen: action.seen }];
+      return { ...value, active, open, ended };
+    }
+    case "caught":
+      return { ...value, ended: action.kept };
+  }
+}
+function afterEdit(tr, value, state) {
+  if (!tr.docChanged || value.pending.length === 0) return value;
+  const pending = value.pending.map((anchor) => ({ ...anchor, ranges: mapPendingRanges(tr, anchor.ranges, state) }));
+  return { ...value, pending };
+}
+var WRITER_MOVES = ["input", "history", "drop"];
+function afterMove(tr, value, state) {
+  const { open } = value;
+  if (open === null || open.focus || !tr.selectionSet || !WRITER_MOVES.includes(tr.origin)) return value;
+  const { selection } = state;
+  const here = selection?.kind === "text" ? commentIdsAt(state.doc, selection.head) : [];
+  return open.ids.some((id) => here.includes(id)) ? value : { ...value, active: null, open: null };
+}
+var commentsPlugin = {
+  key: commentsKey,
+  init: () => IDLE,
+  apply(tr, value, _oldState, newState) {
+    const edited = afterMove(tr, afterEdit(tr, value, newState), newState);
+    const action = tr.getMeta(COMMENTS);
+    return action === void 0 ? edited : act(edited, action);
+  }
+};
+
+// src/extensions/comments/comment-create.ts
+var nextKey = 0;
+var hasCommentableText = (state) => state.selection?.kind === "text" && markRanges(state).length > 0;
+var requestComment = (state, dispatch) => {
+  const { selection } = state;
+  if (selection?.kind !== "text" || getPluginState(state, commentsKey).pending.length > 0) return false;
+  const ranges = 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 Transaction(state).setMeta(COMMENTS, action).setMeta("addToHistory", false));
+  return true;
+};
+function settledTransaction(editor, key, id) {
+  const pending = 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(addMarkStep(block, region, from, to, { type: "comment", attrs: { id } }));
+  }
+  const untouched = pending !== void 0 && 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);
+}
+function create(editor, pending, onCreate, link) {
+  const input = { anchorText: anchorText(editor.state.doc, pending.ranges), blockId: pending.ranges[0].block };
+  const settle = (id, error) => {
+    if (link.mounts === 0) return;
+    const tr = settledTransaction(editor, pending.key, id);
+    editor.dispatch(tr);
+    if (id === null) link.report(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(
+    (id) => typeof id === "string" && id !== "" ? settle(id) : settle(null, new Error("onCreate gave no thread id")),
+    (error) => settle(null, error)
+  );
+}
+function watchCreates(editor, onCreate, link) {
+  return editor.subscribe((_, tr) => {
+    const action = tr?.getMeta(COMMENTS);
+    if (action?.type === "pending") create(editor, action.pending, onCreate, link);
+  });
+}
+
+// src/extensions/comments/comment-open.ts
+function openIds(state, threads, ids) {
+  const { ended } = 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 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" || !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 } }));
+    return true;
+  };
+}
+
+// src/extensions/comments/comments-labels.ts
+var DATE = new Intl.DateTimeFormat("en", { dateStyle: "medium", timeStyle: "short" });
+function englishDate(createdAt) {
+  const date = new Date(createdAt);
+  return Number.isNaN(date.getTime()) ? createdAt : DATE.format(date);
+}
+var englishCommentsLabels = {
+  comment: "Comment",
+  comments: "Comments",
+  showComments: (count) => `Comments (${count})`,
+  thread: (anchorText2) => `Comment on "${anchorText2}"`,
+  threadsHere: "Comments on this text",
+  textRemoved: "Text removed",
+  addComment: "Add a comment",
+  reply: "Reply",
+  send: "Send",
+  resolve: "Resolve",
+  delete: "Delete",
+  close: "Close",
+  commentCount: (count) => `${count} ${count === 1 ? "comment" : "comments"}`,
+  postedAt: englishDate
+};
+function resolveCommentsLabels(overrides) {
+  const given = Object.entries(overrides ?? {}).filter(([, value]) => value !== void 0);
+  return given.length === 0 ? englishCommentsLabels : { ...englishCommentsLabels, ...Object.fromEntries(given) };
+}
+
+// src/extensions/comments/comments-link.ts
+var links = /* @__PURE__ */ new WeakMap();
+function linkOf(editor) {
+  let link = links.get(editor);
+  if (link === void 0) {
+    link = { mounts: 0, report: (error) => console.error(error), stopWatching: null };
+    links.set(editor, link);
+  }
+  return link;
+}
+
+// src/extensions/comments/CommentsOverlay.tsx
+import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
+
+// src/extensions/comments/CommentMarkers.tsx
+import { MessageSquare } from "lucide-react";
+
+// src/extensions/comments/rail-layout.ts
+function stackTops(items, gap) {
+  let next = 0;
+  return items.map(({ top, height }) => {
+    const placed = Math.max(top ?? next, next);
+    next = placed + height + gap;
+    return placed;
+  });
+}
+
+// src/extensions/comments/use-block-aligned.ts
+function topOf(controller, root, block) {
+  const shell = block === "" ? void 0 : controller.blockElement(block);
+  if (shell === void 0) return null;
+  return shell.getBoundingClientRect().top - root.getBoundingClientRect().top - root.clientTop + root.scrollTop;
+}
+var HEIGHT = "--quoin-comments-height";
+function place(controller, box, gap) {
+  const root = box.parentElement;
+  if (root === null) return;
+  const items = Array.from(box.querySelectorAll("[data-rail-item]"));
+  const tops = stackTops(
+    items.map((item) => ({ top: topOf(controller, root, item.dataset.block ?? ""), height: item.offsetHeight })),
+    gap
+  );
+  items.forEach((item, i) => item.style.transform = `translateY(${tops[i]}px)`);
+  const bottom = Math.max(0, ...items.map((item, i) => tops[i] + item.offsetHeight));
+  root.style.setProperty(HEIGHT, `${bottom}px`);
+}
+function useBlockAligned(controller, box, gap, key) {
+  useIsomorphicLayoutEffect(() => {
+    const element = box.current;
+    const view = element?.ownerDocument.defaultView;
+    if (!element || !view) return void 0;
+    const update = () => place(controller, element, gap);
+    update();
+    let frame = 0;
+    const later = () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(update);
+    };
+    const unsubscribe = controller.editor.subscribe(later);
+    const observer = new ResizeObserver(later);
+    if (element.parentElement) observer.observe(element.parentElement);
+    element.querySelectorAll("[data-rail-item]").forEach((item) => observer.observe(item));
+    return () => {
+      view.cancelAnimationFrame(frame);
+      unsubscribe();
+      observer.disconnect();
+      element.parentElement?.style.removeProperty(HEIGHT);
+    };
+  }, [controller, box, gap, key]);
+}
+
+// src/extensions/comments/CommentMarkers.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var GAP = 4;
+function groupsOf(entries) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const { thread, ranges } of entries) {
+    const block = ranges[0]?.block ?? "";
+    groups.set(block, [...groups.get(block) ?? [], thread.id]);
+  }
+  const removed = groups.get("");
+  groups.delete("");
+  return [...groups, ...removed ? [["", removed]] : []].map(([block, ids]) => ({ block, ids }));
+}
+function CommentMarkers({ env, box, entries, onOpen }) {
+  const groups = groupsOf(entries);
+  useBlockAligned(env.controller, box, GAP, groups.map(({ block, ids }) => `${block}:${ids}`).join(" "));
+  return /* @__PURE__ */ jsx("div", { ref: box, className: "quoin-comments-markers", children: groups.map(({ block, ids }) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-rail-item": "",
+      "data-block": block,
+      "aria-label": env.labels.showComments(ids.length),
+      className: cn("quoin-comments-marker", FOCUS_RING),
+      onClick: (event) => onOpen(ids[0], event.currentTarget),
+      children: [
+        /* @__PURE__ */ jsx(MessageSquare, { "aria-hidden": "true" }),
+        ids.length
+      ]
+    },
+    block
+  )) });
+}
+
+// src/extensions/comments/ThreadCard.tsx
+import { useRef as useRef3 } from "react";
+
+// src/extensions/comments/ThreadView.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+
+// src/extensions/comments/comment-actions.ts
+async function called(link, call) {
+  try {
+    await call();
+    return true;
+  } catch (error) {
+    link.report(toError(error));
+    return false;
+  }
+}
+async function endThread(editor, link, call, id, threads) {
+  if (!await called(link, () => call(id)) || link.mounts === 0) return false;
+  const action = { type: "forget", id, seen: threads?.find(id) };
+  editor.dispatch(threadRemoval(editor.state, id).setMeta(COMMENTS, action));
+  return true;
+}
+function sendReply(link, call, id, body) {
+  return called(link, () => call(id, body));
+}
+
+// src/extensions/comments/CommentAvatar.tsx
+import { useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var initials = (name) => name.trim().split(/\s+/).slice(0, 2).map((word) => Array.from(word)[0]?.toUpperCase() ?? "").join("");
+function CommentAvatar({ author }) {
+  const picture = webAddress(author.avatarUrl);
+  const [failed, setFailed] = useState(null);
+  if (picture !== null && picture !== failed) {
+    return /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: picture,
+        alt: "",
+        loading: "lazy",
+        referrerPolicy: "no-referrer",
+        draggable: false,
+        className: "size-6 shrink-0 rounded-full object-cover",
+        onError: () => setFailed(picture)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "quoin-comments-initials", children: initials(author.name) });
+}
+
+// src/extensions/comments/CommentItem.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function CommentItem({ comment, labels }) {
+  return /* @__PURE__ */ jsxs2("li", { className: "flex gap-2", children: [
+    /* @__PURE__ */ jsx3(CommentAvatar, { author: comment.author }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs2("p", { className: "flex flex-wrap items-baseline gap-x-2 text-sm", children: [
+        /* @__PURE__ */ jsx3("span", { className: "font-medium", children: comment.author.name }),
+        /* @__PURE__ */ jsx3("time", { dateTime: comment.createdAt, className: "text-xs text-muted-foreground", children: labels.postedAt(comment.createdAt) })
+      ] }),
+      /* @__PURE__ */ jsx3("p", { className: "quoin-comments-body text-sm", children: comment.body })
+    ] })
+  ] });
+}
+
+// src/extensions/comments/ReplyBox.tsx
+import { SendHorizontal } from "lucide-react";
+import { useEffect, useRef, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var REPLY_FIELD = "data-comments-field";
+function ReplyBox({ env, threadId, first }) {
+  const { controller, host, labels, link } = env;
+  const [body, setBody] = useState2("");
+  const [sending, setSending] = useState2(false);
+  const alive = useRef(true);
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const label = first ? labels.addComment : labels.reply;
+  const text = body.trim();
+  const send = async () => {
+    if (text === "" || sending) return;
+    setSending(true);
+    const sent = await sendReply(link, host.onReply, threadId, text);
+    if (!alive.current) return;
+    setSending(false);
+    if (sent) setBody("");
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    void send();
+  };
+  const onKeyDown = (event) => {
+    if (event.nativeEvent.isComposing || event.key !== "Enter") return;
+    if (controller.isMac ? !event.metaKey : !event.ctrlKey) return;
+    event.preventDefault();
+    void send();
+  };
+  return /* @__PURE__ */ jsxs3("form", { className: "flex items-start gap-2", onSubmit, children: [
+    /* @__PURE__ */ jsx4(CommentAvatar, { author: host.currentUser }),
+    /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        ...{ [REPLY_FIELD]: "" },
+        "aria-label": label,
+        placeholder: label,
+        rows: 2,
+        value: body,
+        onChange: (event) => setBody(event.target.value),
+        onKeyDown,
+        className: "quoin-comments-field"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      Button,
+      {
+        type: "submit",
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": labels.send,
+        "aria-disabled": text === "" || sending || void 0,
+        children: /* @__PURE__ */ jsx4(SendHorizontal, {})
+      }
+    )
+  ] });
+}
+
+// src/extensions/comments/ThreadView.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ThreadView({ env, id, thread, onEnded }) {
+  const { controller, host, labels, link } = env;
+  const readOnly = useReadOnly(controller);
+  const [busy, setBusy] = useState3(false);
+  const alive = useRef2(true);
+  const root = useRef2(null);
+  useEffect2(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+    };
+  }, []);
+  const comments = thread?.comments ?? [];
+  const end = async (call) => {
+    if (busy) return;
+    setBusy(true);
+    const ended = await endThread(controller.editor, link, call, id, host.threads);
+    if (alive.current) setBusy(false);
+    const active = document.activeElement;
+    const stayed = active === null || active === document.body || root.current?.contains(active) === true;
+    if (ended && stayed) onEnded();
+  };
+  return /* @__PURE__ */ jsxs4("div", { ref: root, className: "flex flex-col gap-3", children: [
+    comments.length > 0 && /* @__PURE__ */ jsx5("ol", { className: "flex flex-col gap-3", children: comments.map((comment) => /* @__PURE__ */ jsx5(CommentItem, { comment, labels }, comment.id)) }),
+    /* @__PURE__ */ jsx5(ReplyBox, { env, threadId: id, first: comments.length === 0 }),
+    !readOnly && /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-1", children: [
+      /* @__PURE__ */ jsx5(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          "aria-disabled": busy || void 0,
+          onClick: () => void end(host.onResolve),
+          children: labels.resolve
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "xs",
+          "aria-disabled": busy || void 0,
+          onClick: () => void end(host.onDelete),
+          children: labels.delete
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/extensions/comments/ThreadCard.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ThreadCard({ env, entry, active, expanded, onToggle }) {
+  const { labels, controller } = env;
+  const { thread, anchorText: anchorText2, ranges } = entry;
+  const header = useRef3(null);
+  const [first] = thread.comments;
+  const removed = ranges.length === 0;
+  const backToHeader = () => {
+    if (header.current?.isConnected) header.current.focus();
+    else controller.focus();
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || !expanded) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onToggle(null);
+    header.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: "quoin-comments-card", "data-active": active || void 0, onKeyDown, children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        ref: header,
+        type: "button",
+        "aria-expanded": expanded,
+        className: cn("flex w-full flex-col items-start gap-1 rounded-sm text-start", FOCUS_RING),
+        onClick: () => onToggle(expanded ? null : thread.id),
+        children: [
+          /* @__PURE__ */ jsx6("span", { className: removed ? "text-xs text-muted-foreground italic" : "quoin-comments-quote", children: removed ? labels.textRemoved : anchorText2 }),
+          first !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "line-clamp-2 text-sm", children: [
+            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: first.author.name }),
+            " ",
+            first.body
+          ] }),
+          /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground", children: labels.commentCount(thread.comments.length) })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx6("div", { className: "mt-3", role: "group", "aria-label": removed ? labels.textRemoved : labels.thread(anchorText2), children: /* @__PURE__ */ jsx6(ThreadView, { env, id: thread.id, thread, onEnded: backToHeader }) })
+  ] });
+}
+
+// src/extensions/comments/CommentsRail.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+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__ */ jsx7("div", { ref: box, className: "quoin-comments-rail", children: /* @__PURE__ */ jsx7("ul", { "aria-label": env.labels.comments, children: entries.map((entry) => /* @__PURE__ */ jsx7("li", { "data-rail-item": "", "data-block": entry.ranges[0]?.block ?? "", children: /* @__PURE__ */ jsx7(
+    ThreadCard,
+    {
+      env,
+      entry,
+      active: value.active === entry.thread.id,
+      expanded: value.active === entry.thread.id && value.open === null,
+      onToggle
+    }
+  ) }, entry.thread.id)) }) });
+}
+
+// src/extensions/comments/CommentsSheet.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function CommentsSheet({ env, entries, value, onToggle, onClose, returnFocus }) {
+  const { labels } = env;
+  const content = useRef4(null);
+  const outside = useRef4(false);
+  const focusOpened = (event) => {
+    const opened = content.current?.querySelector('[aria-expanded="true"]');
+    if (!opened) return;
+    event.preventDefault();
+    opened.focus();
+  };
+  return /* @__PURE__ */ jsx8(
+    DialogPrimitive.Root,
+    {
+      open: true,
+      modal: false,
+      onOpenChange: (open) => {
+        if (!open) onClose();
+      },
+      children: /* @__PURE__ */ jsx8(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
+        DialogPrimitive.Content,
+        {
+          ref: content,
+          "aria-describedby": void 0,
+          className: "quoin quoin-comments-sheet",
+          onOpenAutoFocus: focusOpened,
+          onInteractOutside: () => {
+            outside.current = true;
+          },
+          onCloseAutoFocus: (event) => {
+            event.preventDefault();
+            if (!outside.current) returnFocus();
+          },
+          children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx8(DialogPrimitive.Title, { className: "text-sm font-semibold", children: labels.comments }),
+              /* @__PURE__ */ jsx8(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.close, children: /* @__PURE__ */ jsx8(XIcon, {}) }) })
+            ] }),
+            /* @__PURE__ */ jsx8("ul", { "aria-label": labels.comments, className: "flex flex-col gap-2", children: entries.map((entry) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(
+              ThreadCard,
+              {
+                env,
+                entry,
+                active: value.active === entry.thread.id,
+                expanded: value.active === entry.thread.id,
+                onToggle
+              }
+            ) }, entry.thread.id)) })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+// src/extensions/comments/rail-entries.ts
+var NONE = [];
+function railEntries(doc, threads, ended = []) {
+  const anchors = commentAnchors(doc);
+  const entries = threads.filter((thread) => !thread.resolved && !isEnded(ended, thread.id, thread)).map((thread) => {
+    const ranges = anchors.get(thread.id) ?? NONE;
+    return { thread, ranges, anchorText: anchorText(doc, ranges) };
+  });
+  const place2 = ({ ranges: [first] }) => first === void 0 ? [Infinity, 0] : [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);
+}
+
+// src/extensions/comments/ThreadPopover.tsx
+import { useMemo, useRef as useRef5 } from "react";
+
+// src/extensions/comments/ThreadChooser.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function ThreadChooser({ env, choices, onChoose }) {
+  return /* @__PURE__ */ jsx9("ul", { "aria-label": env.labels.threadsHere, className: "flex flex-col gap-1", children: choices.map(({ id, anchorText: anchorText2, preview }) => /* @__PURE__ */ jsx9("li", { children: /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      type: "button",
+      className: "quoin-comments-choice",
+      onClick: () => onChoose(id),
+      children: [
+        /* @__PURE__ */ jsx9("span", { className: "quoin-comments-quote", children: anchorText2 }),
+        preview && /* @__PURE__ */ jsx9("span", { className: "line-clamp-1 text-sm", children: preview })
+      ]
+    }
+  ) }, id)) });
+}
+
+// src/extensions/comments/ThreadPopover.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var docOf = (state) => state.doc;
+function focusIsOurs(controller, content) {
+  const active = content?.ownerDocument.activeElement ?? null;
+  return active === null || active === active.ownerDocument.body || ownsNode(controller, active);
+}
+function ThreadPopover({ env, open, threads, onChoose, onClose }) {
+  const { controller, labels } = env;
+  const doc = useEditorState(controller, docOf);
+  const anchors = commentAnchors(doc);
+  const { ids } = open;
+  const first = ids.map((id) => anchors.get(id)?.[0]).find(Boolean);
+  const latest = useRef5(first);
+  useIsomorphicLayoutEffect(() => {
+    if (first) latest.current = first;
+  });
+  const anchor = useMemo(
+    () => ({
+      current: virtualAnchor(
+        () => latest.current ? rangeRect(controller, latest.current) : null,
+        () => latest.current && controller.registry.get(latest.current.block, latest.current.region)
+      )
+    }),
+    [controller]
+  );
+  const content = useRef5(null);
+  const focusField = () => {
+    const target = content.current?.querySelector(`[${REPLY_FIELD}], button`);
+    if (focusIsOurs(controller, content.current) && !content.current?.contains(content.current.ownerDocument.activeElement)) {
+      target?.focus();
+    }
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (open.focus) focusField();
+  }, [open]);
+  if (first === void 0 && latest.current === void 0) return null;
+  const textOf = (id) => anchorText(doc, anchors.get(id) ?? []) || labels.textRemoved;
+  const single = ids.length === 1;
+  const gone = single && !anchors.has(ids[0]);
+  const backToText = () => controller.focus();
+  const focusInside = (event) => {
+    event.preventDefault();
+    if (open.focus) focusField();
+  };
+  const onEscape = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const inside = content.current?.contains(content.current.ownerDocument.activeElement) ?? false;
+    onClose();
+    if (inside) backToText();
+  };
+  const choices = ids.map((id) => ({ id, anchorText: textOf(id), preview: threads.find(id)?.comments[0]?.body ?? "" }));
+  return /* @__PURE__ */ jsxs8(
+    Popover,
+    {
+      open: true,
+      modal: false,
+      onOpenChange: (next) => {
+        if (!next) onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx10(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsxs8(
+          PopoverContent,
+          {
+            ref: content,
+            "aria-label": gone ? labels.textRemoved : single ? labels.thread(textOf(ids[0])) : labels.threadsHere,
+            side: "bottom",
+            align: "start",
+            className: "w-80 p-3",
+            onOpenAutoFocus: focusInside,
+            onCloseAutoFocus: (event) => event.preventDefault(),
+            onEscapeKeyDown: onEscape,
+            children: [
+              gone && /* @__PURE__ */ jsx10("p", { className: "mb-2 text-xs text-muted-foreground italic", children: labels.textRemoved }),
+              single ? /* @__PURE__ */ jsx10(ThreadView, { env, id: ids[0], thread: threads.find(ids[0]), onEnded: backToText }) : /* @__PURE__ */ jsx10(ThreadChooser, { env, choices, onChoose })
+            ]
+          },
+          ids.join(" ")
+        )
+      ]
+    }
+  );
+}
+
+// src/extensions/comments/use-anchor-clicks.ts
+import { useEffect as useEffect3 } from "react";
+function idsUnder(root, target) {
+  const ids = [];
+  let element = target instanceof Element ? target.closest("[data-comment]") : null;
+  while (element !== null && root.contains(element)) {
+    const id = element.getAttribute("data-comment");
+    if (id) ids.push(id);
+    element = element.parentElement?.closest("[data-comment]") ?? null;
+  }
+  return ids;
+}
+function useAnchorClicks(controller, threads) {
+  useEffect3(() => {
+    const onClick = (event) => {
+      const root = controller.root;
+      if (root === null || event.defaultPrevented || !root.ownerDocument.getSelection()?.isCollapsed) return;
+      const { editor } = controller;
+      const ids = openIds(editor.state, threads, idsUnder(root, event.target));
+      if (ids.length === 0) return;
+      editor.dispatch(commentsTransaction(editor.state, { type: "open", open: { ids, focus: false } }));
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, [controller, threads]);
+}
+
+// src/extensions/comments/use-canvas-wide.ts
+import { useState as useState4 } from "react";
+var WIDE_CANVAS = 800;
+function useCanvasWide(box, initial) {
+  const [wide, setWide] = useState4(initial);
+  useIsomorphicLayoutEffect(() => {
+    const canvas = box.current?.parentElement;
+    if (!canvas) return void 0;
+    const measure = () => setWide(canvas.offsetWidth >= WIDE_CANVAS);
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(canvas);
+    return () => observer.disconnect();
+  }, [box]);
+  return wide;
+}
+
+// src/extensions/comments/use-threads.ts
+import { useSyncExternalStore } from "react";
+function useThreads(threads) {
+  return useSyncExternalStore(threads.subscribe, threads.get, threads.get);
+}
+
+// src/extensions/comments/CommentsOverlay.tsx
+import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var commentsOf = (state) => getPluginState(state, commentsKey);
+var docOf2 = (state) => state.doc;
+function CommentsOverlay({ controller, host, labels }) {
+  const { onError } = useQuoin();
+  const link = linkOf(controller.editor);
+  useIsomorphicLayoutEffect(() => {
+    link.report = onError;
+  }, [link, onError]);
+  useAnchorClicks(controller, host.threads);
+  const threads = useThreads(host.threads);
+  const value = useEditorState(controller, commentsOf);
+  const doc = useEditorState(controller, docOf2);
+  const entries = useMemo2(() => railEntries(doc, threads, value.ended), [doc, threads, value.ended]);
+  const box = useRef6(null);
+  const wide = useCanvasWide(box, host.initialLayout === "wide");
+  const [sheet, setSheet] = useState5(false);
+  const opener = useRef6(null);
+  useEffect4(() => {
+    if (wide) setSheet(false);
+  }, [wide]);
+  const env = useMemo2(() => ({ controller, host, labels, link }), [controller, host, labels, link]);
+  const act2 = useCallback(
+    (action) => controller.editor.dispatch(commentsTransaction(controller.editor.state, action)),
+    [controller]
+  );
+  const toggle = useCallback((id) => act2({ type: "activate", id }), [act2]);
+  const openSheet = (id, marker) => {
+    opener.current = marker;
+    toggle(id);
+    setSheet(true);
+  };
+  const returnFocus = () => {
+    if (opener.current?.isConnected) opener.current.focus();
+    else controller.focus();
+  };
+  const closeSheet = () => {
+    setSheet(false);
+    toggle(null);
+  };
+  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+    wide ? /* @__PURE__ */ jsx11(CommentsRail, { env, box, entries, value, onToggle: toggle }) : /* @__PURE__ */ jsx11(CommentMarkers, { env, box, entries, onOpen: openSheet }),
+    !wide && sheet && /* @__PURE__ */ jsx11(
+      CommentsSheet,
+      {
+        env,
+        entries,
+        value,
+        onToggle: toggle,
+        onClose: closeSheet,
+        returnFocus
+      }
+    ),
+    value.open && /* @__PURE__ */ jsx11(
+      ThreadPopover,
+      {
+        env,
+        open: value.open,
+        threads: host.threads,
+        onChoose: (id) => act2({ type: "open", open: { ids: [id], focus: true } }),
+        onClose: () => act2({ type: "close" })
+      }
+    )
+  ] });
+}
+
+// src/extensions/comments/comments-decorations.ts
+var PENDING = { class: "quoin-comment-pending" };
+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 = 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) ?? [];
+  const decorations = [...value.pending.flatMap(({ ranges }) => inline(ranges, PENDING)), ...inline(active, ACTIVE)];
+  drawn.set(value, { doc: state.doc, decorations });
+  return decorations;
+}
+
+// src/extensions/comments/watch-ended.ts
+function watchEnded(editor, threads) {
+  return threads.subscribe(() => {
+    const { ended } = 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 }));
+  });
+}
+
+// src/extensions/comments/comments-extension.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var commentItem = (labels) => ({
+  id: "comment",
+  title: labels.comment,
+  icon: MessageSquarePlus,
+  shortcut: "Mod-Alt-m",
+  available: (state) => hasCommentableText(state) && 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();
+    controller.run(requestComment);
+  }
+});
+function commentsExtension(options) {
+  const { labels: overrides, ...host } = options;
+  const labels = resolveCommentsLabels(overrides);
+  function Overlay({ controller }) {
+    return /* @__PURE__ */ jsx12(CommentsOverlay, { controller, host, labels });
+  }
+  const ui = { bubbleItems: [commentItem(labels)], overlays: [Overlay] };
+  return defineExtension({
+    name: "comments",
+    plugins: [commentsPlugin],
+    decorations: commentsDecorations,
+    keymap: { "Mod-Alt-m": commentCommand(host.threads) },
+    // One watcher per editor however many views mount it at once, so the host is asked once per thread.
+    onMount(editor) {
+      const link = linkOf(editor);
+      if (link.mounts++ === 0) {
+        const stops = [watchCreates(editor, host.onCreate, link), watchEnded(editor, host.threads)];
+        link.stopWatching = () => stops.forEach((stop) => stop());
+      }
+      return () => {
+        if (--link.mounts > 0) return;
+        link.stopWatching?.();
+        link.stopWatching = null;
+      };
+    },
+    ui
+  });
+}
+
+// src/extensions/comments/comment-threads.ts
+var NO_THREADS = [];
+function createCommentThreads(initial = NO_THREADS) {
+  let threads = initial;
+  let byId = null;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => threads,
+    set(next) {
+      if (next === threads) return;
+      threads = next;
+      byId = null;
+      for (const listener of [...listeners]) listener();
+    },
+    find(id) {
+      byId ??= new Map(threads.map((thread) => [thread.id, thread]));
+      return byId.get(id);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+export {
+  commentsExtension,
+  createCommentThreads,
+  englishCommentsLabels
+};
+//# sourceMappingURL=comments.js.map