@ecsplico/editor 2.0.0 → 2.1.0

package/dist/features/comments/react/CommentsMargin.js

@@ -1,3 +1,4 @@
+import { DRAFT_CARD, marginCards } from "../margin-layout.js";
 import { useEditorI18n } from "../../../react/use-editor-i18n.js";
 import { cn } from "../../../react/ui/utils.js";
 import { Icon } from "../../../react/Icon.js";
@@ -7,285 +8,118 @@ import { CommentComposer } from "./CommentComposer.js";
 import { CommentAvatar } from "./CommentAvatar.js";
 import { CommentThreadView } from "./CommentThreadView.js";
 import { useComments } from "./use-comments.js";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMarginLayout } from "./use-margin-layout.js";
+import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/features/comments/react/CommentsMargin.tsx
-const GAP = 8;
-const DRAFT = "__draft";
 const excerpt = (text) => text.length > 60 ? `${text.slice(0, 60)}…` : text;
-function sameTops(a, b) {
-	const keys = Object.keys(a);
-	return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
-}
-/**
-* Comments margin („Randspalte“): a column the host places inside its scroll container right of the editor, so it
-* scrolls with the text. Cards sit at the height of their text, the active thread is expanded; shown only while `open`
-* and the user's comments layout is `margin`.
-*/
 function CommentsMargin({ editor, container, open = true }) {
 	const { settings } = useEditorSettings();
 	const { t } = useEditorI18n();
 	const enabled = settings.editing.commentsLayout === "margin";
 	const comments = useComments(enabled ? editor : void 0);
-	/** Draft and open threads with a text range, in document order. */
-	const positioned = useMemo(() => {
-		const items = [];
-		if (comments.draft) items.push({
-			key: DRAFT,
-			from: comments.draft.from,
-			thread: null
-		});
-		for (const thread of comments.open) {
-			const range = comments.ranges.get(thread.id);
-			if (range) items.push({
-				key: thread.id,
-				from: range.from,
-				thread
-			});
-		}
-		return items.sort((a, b) => a.from - b.from);
-	}, [
+	/** Draft and open threads in document order, each at its text (an orphan where its text was). */
+	const cards = useMemo(() => marginCards({
+		draft: comments.draft,
+		open: comments.open,
+		ranges: comments.ranges,
+		orphanAt: comments.orphanAt
+	}), [
 		comments.draft,
 		comments.open,
-		comments.ranges
+		comments.ranges,
+		comments.orphanAt
 	]);
-	const orphans = useMemo(() => comments.open.filter((thread) => !comments.ranges.has(thread.id)), [comments.open, comments.ranges]);
-	const [showResolved, setShowResolved] = useState(false);
-	const [tops, setTops] = useState({});
-	const [resolvedTop, setResolvedTop] = useState(0);
-	const [minHeight, setMinHeight] = useState(0);
-	const [layout] = useState(() => ({
-		observer: null,
-		observed: /* @__PURE__ */ new WeakSet(),
-		cards: /* @__PURE__ */ new Map(),
-		frame: 0,
-		column: null,
-		resolvedSection: null
-	}));
-	const latest = useRef({
+	/** The card that owns its line: the draft composer, else the active thread. */
+	const activeId = comments.draft ? DRAFT_CARD : comments.active;
+	const { state: layout, setColumn, setResolvedSection, setCard } = useMarginLayout({
 		editor,
-		positioned,
-		orphans
+		container,
+		cards,
+		activeId
 	});
-	latest.current = {
-		editor,
-		positioned,
-		orphans
-	};
-	const observe = useCallback((el) => {
-		if (!layout.observer || layout.observed.has(el)) return;
-		layout.observed.add(el);
-		layout.observer.observe(el);
-	}, [layout]);
-	const unobserve = useCallback((el) => {
-		layout.observer?.unobserve(el);
-		layout.observed.delete(el);
-	}, [layout]);
-	const relayout = useCallback(() => {
-		layout.frame = 0;
-		const { editor: instance, positioned: items, orphans: lost } = latest.current;
-		const col = layout.column;
-		if (!instance || instance.isDestroyed || !col || !col.getClientRects().length) return;
-		const live = /* @__PURE__ */ new Set([...items.map((i) => i.key), ...lost.map((t) => t.id)]);
-		for (const [key, el] of layout.cards) {
-			if (live.has(key)) continue;
-			unobserve(el);
-			layout.cards.delete(key);
-		}
-		const base = col.getBoundingClientRect().top;
-		const size = instance.state.doc.content.size;
-		const next = {};
-		let bottom = -8;
-		for (const item of items) {
-			let desired = bottom + GAP;
-			try {
-				desired = instance.view.coordsAtPos(Math.min(item.from, size)).top - base;
-			} catch {}
-			const top = Math.max(desired, bottom + GAP, 0);
-			next[item.key] = top;
-			bottom = top + (layout.cards.get(item.key)?.offsetHeight ?? 0);
-		}
-		for (const thread of lost) {
-			const top = bottom + GAP;
-			next[thread.id] = top;
-			bottom = top + (layout.cards.get(thread.id)?.offsetHeight ?? 0);
-		}
-		const nextResolvedTop = bottom < 0 ? 0 : bottom + 16;
-		setTops((previous) => sameTops(previous, next) ? previous : next);
-		setResolvedTop(nextResolvedTop);
-		setMinHeight(nextResolvedTop + (layout.resolvedSection?.offsetHeight ?? 0));
-	}, [layout, unobserve]);
-	const schedule = useCallback(() => {
-		if (layout.frame || typeof requestAnimationFrame === "undefined") return;
-		layout.frame = requestAnimationFrame(relayout);
-	}, [layout, relayout]);
-	useEffect(() => {
-		if (typeof ResizeObserver !== "undefined") {
-			layout.observer = new ResizeObserver(() => schedule());
-			layout.observed = /* @__PURE__ */ new WeakSet();
-			for (const el of layout.cards.values()) observe(el);
-			if (layout.column) observe(layout.column);
-			if (layout.resolvedSection) observe(layout.resolvedSection);
-		}
-		window.addEventListener("resize", schedule);
-		schedule();
-		return () => {
-			window.removeEventListener("resize", schedule);
-			layout.observer?.disconnect();
-			layout.observer = null;
-			if (layout.frame) cancelAnimationFrame(layout.frame);
-			layout.frame = 0;
-		};
-	}, [
-		layout,
-		observe,
-		schedule
-	]);
-	useEffect(() => {
-		if (!editor) return;
-		editor.on("transaction", schedule);
-		schedule();
-		return () => {
-			editor.off("transaction", schedule);
-		};
-	}, [editor, schedule]);
-	useEffect(() => {
-		if (!container || !layout.observer) return;
-		layout.observer.observe(container);
-		return () => layout.observer?.unobserve(container);
-	}, [container, layout]);
-	useEffect(() => {
-		schedule();
-	}, [
-		positioned,
-		orphans,
-		comments.active,
-		comments.resolved.length,
-		showResolved,
-		enabled,
-		schedule
-	]);
-	const setColumn = useCallback((el) => {
-		if (layout.column) unobserve(layout.column);
-		layout.column = el;
-		if (el) observe(el);
-		schedule();
-	}, [
-		layout,
-		observe,
-		unobserve,
-		schedule
-	]);
-	const setResolvedSection = useCallback((el) => {
-		if (layout.resolvedSection) unobserve(layout.resolvedSection);
-		layout.resolvedSection = el;
-		if (el) observe(el);
-		schedule();
-	}, [
-		layout,
-		observe,
-		unobserve,
-		schedule
-	]);
-	const setCard = (key, el) => {
-		if (!el) return;
-		layout.cards.set(key, el);
-		observe(el);
-	};
+	const [showResolved, setShowResolved] = useState(false);
 	/** Clicking a card activates (expands) it and reveals its text; clicks inside the already active card do nothing. */
 	function select(id) {
 		if (comments.active !== id) comments.activate(id, { reveal: true });
 	}
-	const cardStyle = (key) => ({ top: `${tops[key] ?? 0}px` });
 	return /* @__PURE__ */ jsx("div", {
 		ref: setColumn,
 		className: "relative w-[300px] shrink-0",
 		style: {
-			minHeight: `${minHeight}px`,
+			minHeight: `${layout.minHeight}px`,
 			...open && enabled ? {} : { display: "none" }
 		},
 		"aria-label": t("comments.title"),
 		children: !comments.available ? /* @__PURE__ */ jsx("p", {
 			className: "p-3 text-sm text-muted-foreground",
 			children: t("comments.unavailable")
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			positioned.map((item) => /* @__PURE__ */ jsx("div", {
-				ref: (el) => setCard(item.key, el),
-				className: cn("absolute inset-x-0 transition-[top] duration-100", tops[item.key] === void 0 && "invisible"),
-				style: cardStyle(item.key),
-				children: !item.thread ? /* @__PURE__ */ jsx(CommentComposer, {
-					quote: comments.draftQuote,
-					className: "shadow-md",
-					onSubmit: (text) => {
-						comments.add(text);
-					},
-					onCancel: () => comments.cancelDraft()
-				}) : comments.active === item.thread.id ? /* @__PURE__ */ jsx(CommentThreadView, {
-					thread: item.thread,
-					user: comments.user,
-					active: true,
-					orphan: false,
-					comments,
-					className: "shadow-md",
-					onClick: () => select(item.thread.id)
-				}) : /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					className: "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-left text-sm hover:bg-muted",
-					onClick: () => select(item.thread.id),
-					children: [
-						/* @__PURE__ */ jsx(CommentAvatar, {
-							name: item.thread.author.name,
-							color: item.thread.author.color,
-							size: "2xs"
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "shrink-0 font-medium",
-							children: item.thread.author.name
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 truncate text-muted-foreground",
-							children: excerpt(item.thread.text)
-						}),
-						item.thread.replies.length > 0 && /* @__PURE__ */ jsx("span", {
-							className: "shrink-0 text-xs text-muted-foreground/70",
-							children: item.thread.replies.length
-						})
-					]
-				})
-			}, item.key)),
-			orphans.map((thread) => /* @__PURE__ */ jsx("div", {
-				ref: (el) => setCard(thread.id, el),
-				className: cn("absolute inset-x-0", tops[thread.id] === void 0 && "invisible"),
-				style: cardStyle(thread.id),
-				children: /* @__PURE__ */ jsx(CommentThreadView, {
-					thread,
-					user: comments.user,
-					active: comments.active === thread.id,
-					orphan: true,
-					comments,
-					onClick: () => select(thread.id)
-				})
-			}, thread.id)),
-			comments.resolved.length > 0 && /* @__PURE__ */ jsxs("div", {
-				ref: setResolvedSection,
-				className: "absolute inset-x-0 flex flex-col gap-2",
-				style: { top: `${resolvedTop}px` },
-				children: [/* @__PURE__ */ jsxs(Button, {
-					variant: "ghost",
-					size: "sm",
-					className: "self-start",
-					onClick: () => setShowResolved((value) => !value),
-					children: [t("comments.resolvedCount", { n: comments.resolved.length }), /* @__PURE__ */ jsx(Icon, { name: showResolved ? "i-lucide-chevron-up" : "i-lucide-chevron-down" })]
-				}), showResolved && comments.resolved.map((thread) => /* @__PURE__ */ jsx(CommentThreadView, {
-					thread,
-					user: comments.user,
-					active: comments.active === thread.id,
-					orphan: comments.isOrphan(thread.id),
-					comments,
-					onClick: () => select(thread.id)
-				}, thread.id))]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [cards.map((card) => /* @__PURE__ */ jsx("div", {
+			ref: (el) => setCard(card.id, el),
+			className: cn("absolute inset-x-0 transition-[top] duration-100", !layout.tops.has(card.id) && "invisible"),
+			style: { top: `${layout.tops.get(card.id) ?? 0}px` },
+			children: !card.thread ? /* @__PURE__ */ jsx(CommentComposer, {
+				quote: comments.draftQuote,
+				className: "shadow-md",
+				onSubmit: (text) => {
+					comments.add(text);
+				},
+				onCancel: () => comments.cancelDraft()
+			}) : activeId === card.id ? /* @__PURE__ */ jsx(CommentThreadView, {
+				thread: card.thread,
+				user: comments.user,
+				active: true,
+				orphan: card.orphan,
+				comments,
+				className: "shadow-md",
+				onClick: () => select(card.id)
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: cn("flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-left text-sm hover:bg-muted", card.orphan && "opacity-70"),
+				onClick: () => select(card.id),
+				children: [
+					/* @__PURE__ */ jsx(CommentAvatar, {
+						name: card.thread.author.name,
+						color: card.thread.author.color,
+						size: "2xs"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-medium",
+						children: card.thread.author.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 flex-1 truncate text-muted-foreground",
+						children: excerpt(card.thread.text)
+					}),
+					card.orphan && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-xs text-muted-foreground/70 italic",
+						children: t("comments.orphan")
+					}),
+					card.thread.replies.length > 0 && /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-xs text-muted-foreground/70",
+						children: card.thread.replies.length
+					})
+				]
 			})
-		] })
+		}, card.id)), comments.resolved.length > 0 && /* @__PURE__ */ jsxs("div", {
+			ref: setResolvedSection,
+			className: "absolute inset-x-0 flex flex-col gap-2",
+			style: { top: `${layout.resolvedTop}px` },
+			children: [/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				className: "self-start",
+				onClick: () => setShowResolved((value) => !value),
+				children: [t("comments.resolvedCount", { n: comments.resolved.length }), /* @__PURE__ */ jsx(Icon, { name: showResolved ? "i-lucide-chevron-up" : "i-lucide-chevron-down" })]
+			}), showResolved && comments.resolved.map((thread) => /* @__PURE__ */ jsx(CommentThreadView, {
+				thread,
+				user: comments.user,
+				active: comments.active === thread.id,
+				orphan: comments.isOrphan(thread.id),
+				comments,
+				onClick: () => select(thread.id)
+			}, thread.id))]
+		})] })
 	});
 }
 //#endregion

package/dist/features/comments/react/CommentsMargin.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentsMargin.js","names":[],"sources":["../../../../src/features/comments/react/CommentsMargin.tsx"],"sourcesContent":["/**\n * Comments margin („Randspalte“): a 300px column the host places inside its scroll container right of the editor,\n * so it scrolls with the text. Cards sit absolutely at the height of their text (top-down in document order, pushed\n * down so they never overlap); the active thread is expanded, the others collapse to one line. The draft composer\n * takes part in the layout, orphaned threads stack after the positioned cards and resolved threads („Erledigt“)\n * sit at the bottom behind a toggle. Shown only while `open` (the host binds the surface's `commentsOpen` model) and the\n * user's comments layout is `margin`; the layout is recomputed whenever the column becomes visible again.\n */\nimport type { Editor } from '@tiptap/core'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport type { CommentThread as Thread } from '../schema'\nimport { CommentAvatar } from './CommentAvatar'\nimport { CommentComposer } from './CommentComposer'\nimport { CommentThreadView } from './CommentThreadView'\nimport { useComments } from './use-comments'\n\nconst GAP = 8\nconst DRAFT = '__draft'\n\ninterface Item { key: string, from: number, thread: Thread | null }\n\nconst excerpt = (text: string) => text.length > 60 ? `${text.slice(0, 60)}…` : text\n\nfunction sameTops(a: Record<string, number>, b: Record<string, number>): boolean {\n  const keys = Object.keys(a)\n  return keys.length === Object.keys(b).length && keys.every(key => a[key] === b[key])\n}\n\n/**\n * Comments margin („Randspalte“): a column the host places inside its scroll container right of the editor, so it\n * scrolls with the text. Cards sit at the height of their text, the active thread is expanded; shown only while `open`\n * and the user's comments layout is `margin`.\n */\nexport function CommentsMargin({ editor, container, open = true }: {\n  editor: Editor | undefined\n  /** The editor's scroll container, which the column sits in: its size changes re-run the layout. */\n  container: HTMLElement | null\n  /** Whether the column is shown (the surface's `commentsOpen` model). */\n  open?: boolean\n}) {\n  const { settings } = useEditorSettings()\n  const { t } = useEditorI18n()\n  const enabled = settings.editing.commentsLayout === 'margin'\n  // Idle (no Y.Doc observer) while another layout shows the comments.\n  const comments = useComments(enabled ? editor : undefined)\n\n  /** Draft and open threads with a text range, in document order. */\n  const positioned = useMemo<Item[]>(() => {\n    const items: Item[] = []\n    if (comments.draft) items.push({ key: DRAFT, from: comments.draft.from, thread: null })\n    for (const thread of comments.open) {\n      const range = comments.ranges.get(thread.id)\n      if (range) items.push({ key: thread.id, from: range.from, thread })\n    }\n    return items.sort((a, b) => a.from - b.from)\n  }, [comments.draft, comments.open, comments.ranges])\n  const orphans = useMemo(() => comments.open.filter(thread => !comments.ranges.has(thread.id)), [comments.open, comments.ranges])\n\n  const [showResolved, setShowResolved] = useState(false)\n  const [tops, setTops] = useState<Record<string, number>>({})\n  const [resolvedTop, setResolvedTop] = useState(0)\n  const [minHeight, setMinHeight] = useState(0)\n\n  // Layout machinery that lives outside rendering: the observer, the pending frame, the cards by key.\n  const [layout] = useState(() => ({\n    observer: null as ResizeObserver | null,\n    observed: new WeakSet<Element>(),\n    cards: new Map<string, HTMLElement>(),\n    frame: 0,\n    column: null as HTMLElement | null,\n    resolvedSection: null as HTMLElement | null,\n  }))\n  // What `relayout` reads: the latest render's values.\n  const latest = useRef({ editor, positioned, orphans })\n  latest.current = { editor, positioned, orphans }\n\n  const observe = useCallback((el: Element) => {\n    if (!layout.observer || layout.observed.has(el)) return\n    layout.observed.add(el)\n    layout.observer.observe(el)\n  }, [layout])\n\n  const unobserve = useCallback((el: Element) => {\n    layout.observer?.unobserve(el)\n    layout.observed.delete(el)\n  }, [layout])\n\n  const relayout = useCallback(() => {\n    layout.frame = 0\n    const { editor: instance, positioned: items, orphans: lost } = latest.current\n    const col = layout.column\n    // Hidden columns have no layout box; the column's own ResizeObserver re-runs this once shown.\n    if (!instance || instance.isDestroyed || !col || !col.getClientRects().length) return\n    const live = new Set([...items.map(i => i.key), ...lost.map(t => t.id)])\n    for (const [key, el] of layout.cards) {\n      if (live.has(key)) continue\n      unobserve(el)\n      layout.cards.delete(key)\n    }\n\n    const base = col.getBoundingClientRect().top\n    const size = instance.state.doc.content.size\n    const next: Record<string, number> = {}\n    let bottom = -GAP\n    for (const item of items) {\n      let desired = bottom + GAP\n      try {\n        desired = instance.view.coordsAtPos(Math.min(item.from, size)).top - base\n      }\n      catch {\n        // Position not rendered (yet): stack it below the previous card.\n      }\n      const top = Math.max(desired, bottom + GAP, 0)\n      next[item.key] = top\n      bottom = top + (layout.cards.get(item.key)?.offsetHeight ?? 0)\n    }\n    for (const thread of lost) {\n      const top = bottom + GAP\n      next[thread.id] = top\n      bottom = top + (layout.cards.get(thread.id)?.offsetHeight ?? 0)\n    }\n    const nextResolvedTop = bottom < 0 ? 0 : bottom + 2 * GAP\n    setTops(previous => sameTops(previous, next) ? previous : next)\n    setResolvedTop(nextResolvedTop)\n    setMinHeight(nextResolvedTop + (layout.resolvedSection?.offsetHeight ?? 0))\n  }, [layout, unobserve])\n\n  const schedule = useCallback(() => {\n    if (layout.frame || typeof requestAnimationFrame === 'undefined') return\n    layout.frame = requestAnimationFrame(relayout)\n  }, [layout, relayout])\n\n  // The observer and the window listener live while mounted; the elements already rendered are observed on creation.\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      layout.observer = new ResizeObserver(() => schedule())\n      layout.observed = new WeakSet()\n      for (const el of layout.cards.values()) observe(el)\n      if (layout.column) observe(layout.column)\n      if (layout.resolvedSection) observe(layout.resolvedSection)\n    }\n    window.addEventListener('resize', schedule)\n    schedule()\n    return () => {\n      window.removeEventListener('resize', schedule)\n      layout.observer?.disconnect()\n      layout.observer = null\n      if (layout.frame) cancelAnimationFrame(layout.frame)\n      layout.frame = 0\n    }\n  }, [layout, observe, schedule])\n\n  useEffect(() => {\n    if (!editor) return\n    editor.on('transaction', schedule)\n    schedule()\n    return () => { editor.off('transaction', schedule) }\n  }, [editor, schedule])\n\n  useEffect(() => {\n    if (!container || !layout.observer) return\n    layout.observer.observe(container)\n    return () => layout.observer?.unobserve(container)\n  }, [container, layout])\n\n  // Cards appearing/disappearing or expanding: lay out once the DOM has them.\n  useEffect(() => { schedule() }, [positioned, orphans, comments.active, comments.resolved.length, showResolved, enabled, schedule])\n\n  // The column itself: its size flips between zero and real when the host toggles it.\n  const setColumn = useCallback((el: HTMLElement | null) => {\n    if (layout.column) unobserve(layout.column)\n    layout.column = el\n    if (el) observe(el)\n    schedule()\n  }, [layout, observe, unobserve, schedule])\n\n  const setResolvedSection = useCallback((el: HTMLElement | null) => {\n    if (layout.resolvedSection) unobserve(layout.resolvedSection)\n    layout.resolvedSection = el\n    if (el) observe(el)\n    schedule()\n  }, [layout, observe, unobserve, schedule])\n\n  const setCard = (key: string, el: HTMLElement | null) => {\n    if (!el) return\n    layout.cards.set(key, el)\n    observe(el)\n  }\n\n  /** Clicking a card activates (expands) it and reveals its text; clicks inside the already active card do nothing. */\n  function select(id: string) {\n    if (comments.active !== id) comments.activate(id, { reveal: true })\n  }\n\n  const cardStyle = (key: string) => ({ top: `${tops[key] ?? 0}px` })\n\n  return (\n    <div\n      ref={setColumn}\n      className=\"relative w-[300px] shrink-0\"\n      style={{ minHeight: `${minHeight}px`, ...(open && enabled ? {} : { display: 'none' }) }}\n      aria-label={t('comments.title')}\n    >\n      {!comments.available\n        ? <p className=\"p-3 text-sm text-muted-foreground\">{t('comments.unavailable')}</p>\n        : (\n            <>\n              {positioned.map(item => (\n                <div\n                  key={item.key}\n                  ref={el => setCard(item.key, el)}\n                  className={cn('absolute inset-x-0 transition-[top] duration-100', tops[item.key] === undefined && 'invisible')}\n                  style={cardStyle(item.key)}\n                >\n                  {!item.thread\n                    ? (\n                        <CommentComposer\n                          quote={comments.draftQuote}\n                          className=\"shadow-md\"\n                          onSubmit={(text) => { comments.add(text) }}\n                          onCancel={() => comments.cancelDraft()}\n                        />\n                      )\n                    : comments.active === item.thread.id\n                      ? (\n                          <CommentThreadView\n                            thread={item.thread}\n                            user={comments.user}\n                            active\n                            orphan={false}\n                            comments={comments}\n                            className=\"shadow-md\"\n                            onClick={() => select(item.thread!.id)}\n                          />\n                        )\n                      : (\n                          <button\n                            type=\"button\"\n                            className=\"flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-left text-sm hover:bg-muted\"\n                            onClick={() => select(item.thread!.id)}\n                          >\n                            <CommentAvatar name={item.thread.author.name} color={item.thread.author.color} size=\"2xs\" />\n                            <span className=\"shrink-0 font-medium\">{item.thread.author.name}</span>\n                            <span className=\"min-w-0 flex-1 truncate text-muted-foreground\">{excerpt(item.thread.text)}</span>\n                            {item.thread.replies.length > 0 && <span className=\"shrink-0 text-xs text-muted-foreground/70\">{item.thread.replies.length}</span>}\n                          </button>\n                        )}\n                </div>\n              ))}\n\n              {orphans.map(thread => (\n                <div\n                  key={thread.id}\n                  ref={el => setCard(thread.id, el)}\n                  className={cn('absolute inset-x-0', tops[thread.id] === undefined && 'invisible')}\n                  style={cardStyle(thread.id)}\n                >\n                  <CommentThreadView\n                    thread={thread}\n                    user={comments.user}\n                    active={comments.active === thread.id}\n                    orphan\n                    comments={comments}\n                    onClick={() => select(thread.id)}\n                  />\n                </div>\n              ))}\n\n              {comments.resolved.length > 0 && (\n                <div ref={setResolvedSection} className=\"absolute inset-x-0 flex flex-col gap-2\" style={{ top: `${resolvedTop}px` }}>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"self-start\" onClick={() => setShowResolved(value => !value)}>\n                    {t('comments.resolvedCount', { n: comments.resolved.length })}\n                    <Icon name={showResolved ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'} />\n                  </Button>\n                  {showResolved && comments.resolved.map(thread => (\n                    <CommentThreadView\n                      key={thread.id}\n                      thread={thread}\n                      user={comments.user}\n                      active={comments.active === thread.id}\n                      orphan={comments.isOrphan(thread.id)}\n                      comments={comments}\n                      onClick={() => select(thread.id)}\n                    />\n                  ))}\n                </div>\n              )}\n            </>\n          )}\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"CommentsMargin.js","names":[],"sources":["../../../../src/features/comments/react/CommentsMargin.tsx"],"sourcesContent":["/**\n * Comments margin („Randspalte“): a 300px column the host places inside its scroll container right of the editor,\n * so it scrolls with the text. Layout „Aktiver Faden“ (`layoutMargin`): the active thread's card sits exactly at the\n * top of its text's line and expands, the others collapse to one line and give way up and down; without an active\n * thread the cards stack top-down at their lines. The draft composer takes part like an active card. An orphaned thread\n * (its text was deleted) is greyed out and sits where the text was; resolved threads („Erledigt“) sit at the bottom\n * behind a toggle. Shown only while `open` (the host binds the surface's `commentsOpen` model) and the user's comments\n * layout is `margin`; the layout is recomputed whenever the column becomes visible again.\n */\nimport type { Editor } from '@tiptap/core'\nimport { useMemo, useState } from 'react'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { Button } from '../../../react/ui/button'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { DRAFT_CARD, marginCards } from '../margin-layout'\nimport { CommentAvatar } from './CommentAvatar'\nimport { CommentComposer } from './CommentComposer'\nimport { CommentThreadView } from './CommentThreadView'\nimport { useComments } from './use-comments'\nimport { useMarginLayout } from './use-margin-layout'\n\nconst excerpt = (text: string) => text.length > 60 ? `${text.slice(0, 60)}…` : text\n\nexport function CommentsMargin({ editor, container, open = true }: {\n  editor: Editor | undefined\n  /** The editor's scroll container, which the column sits in: its size changes re-run the layout. */\n  container: HTMLElement | null\n  /** Whether the column is shown (the surface's `commentsOpen` model). */\n  open?: boolean\n}) {\n  const { settings } = useEditorSettings()\n  const { t } = useEditorI18n()\n  const enabled = settings.editing.commentsLayout === 'margin'\n  // Idle (no Y.Doc observer) while another layout shows the comments.\n  const comments = useComments(enabled ? editor : undefined)\n\n  /** Draft and open threads in document order, each at its text (an orphan where its text was). */\n  const cards = useMemo(\n    () => marginCards({ draft: comments.draft, open: comments.open, ranges: comments.ranges, orphanAt: comments.orphanAt }),\n    [comments.draft, comments.open, comments.ranges, comments.orphanAt],\n  )\n  /** The card that owns its line: the draft composer, else the active thread. */\n  const activeId = comments.draft ? DRAFT_CARD : comments.active\n\n  const { state: layout, setColumn, setResolvedSection, setCard } = useMarginLayout({ editor, container, cards, activeId })\n  const [showResolved, setShowResolved] = useState(false)\n\n  /** Clicking a card activates (expands) it and reveals its text; clicks inside the already active card do nothing. */\n  function select(id: string) {\n    if (comments.active !== id) comments.activate(id, { reveal: true })\n  }\n\n  return (\n    <div\n      ref={setColumn}\n      className=\"relative w-[300px] shrink-0\"\n      style={{ minHeight: `${layout.minHeight}px`, ...(open && enabled ? {} : { display: 'none' }) }}\n      aria-label={t('comments.title')}\n    >\n      {!comments.available\n        ? <p className=\"p-3 text-sm text-muted-foreground\">{t('comments.unavailable')}</p>\n        : (\n            <>\n              {cards.map(card => (\n                <div\n                  key={card.id}\n                  ref={el => setCard(card.id, el)}\n                  className={cn('absolute inset-x-0 transition-[top] duration-100', !layout.tops.has(card.id) && 'invisible')}\n                  style={{ top: `${layout.tops.get(card.id) ?? 0}px` }}\n                >\n                  {!card.thread\n                    ? (\n                        <CommentComposer\n                          quote={comments.draftQuote}\n                          className=\"shadow-md\"\n                          onSubmit={(text) => { comments.add(text) }}\n                          onCancel={() => comments.cancelDraft()}\n                        />\n                      )\n                    : activeId === card.id\n                      ? (\n                          <CommentThreadView\n                            thread={card.thread}\n                            user={comments.user}\n                            active\n                            orphan={card.orphan}\n                            comments={comments}\n                            className=\"shadow-md\"\n                            onClick={() => select(card.id)}\n                          />\n                        )\n                      : (\n                          <button\n                            type=\"button\"\n                            className={cn('flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-left text-sm hover:bg-muted', card.orphan && 'opacity-70')}\n                            onClick={() => select(card.id)}\n                          >\n                            <CommentAvatar name={card.thread.author.name} color={card.thread.author.color} size=\"2xs\" />\n                            <span className=\"shrink-0 font-medium\">{card.thread.author.name}</span>\n                            <span className=\"min-w-0 flex-1 truncate text-muted-foreground\">{excerpt(card.thread.text)}</span>\n                            {card.orphan && <span className=\"shrink-0 text-xs text-muted-foreground/70 italic\">{t('comments.orphan')}</span>}\n                            {card.thread.replies.length > 0 && <span className=\"shrink-0 text-xs text-muted-foreground/70\">{card.thread.replies.length}</span>}\n                          </button>\n                        )}\n                </div>\n              ))}\n\n              {comments.resolved.length > 0 && (\n                <div ref={setResolvedSection} className=\"absolute inset-x-0 flex flex-col gap-2\" style={{ top: `${layout.resolvedTop}px` }}>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"self-start\" onClick={() => setShowResolved(value => !value)}>\n                    {t('comments.resolvedCount', { n: comments.resolved.length })}\n                    <Icon name={showResolved ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'} />\n                  </Button>\n                  {showResolved && comments.resolved.map(thread => (\n                    <CommentThreadView\n                      key={thread.id}\n                      thread={thread}\n                      user={comments.user}\n                      active={comments.active === thread.id}\n                      orphan={comments.isOrphan(thread.id)}\n                      comments={comments}\n                      onClick={() => select(thread.id)}\n                    />\n                  ))}\n                </div>\n              )}\n            </>\n          )}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/features/comments/react/CommentsOverlay.js

@@ -1,6 +1,6 @@
+import { cancelCommentDraft, commentsKey, setActiveComment } from "../comments-plugin.js";
 import { useEditorSettings } from "../../../react/settings.js";
 import { useEditorUi } from "../../../react/editor-ui.js";
-import { cancelCommentDraft, commentsKey, setActiveComment } from "../comments-plugin.js";
 import { CommentBubble } from "./CommentBubble.js";
 import { CommentsPopover } from "./CommentsPopover.js";
 import { useEffect, useRef } from "react";

package/dist/features/comments/react/use-comments.js

@@ -1,5 +1,5 @@
-import { useStore } from "../../../react/use-store.js";
 import { createEditorCommentsModel } from "../model.js";
+import { useStore } from "../../../react/use-store.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/features/comments/react/use-comments.ts
 /**

package/dist/features/comments/react/use-margin-layout.js

@@ -0,0 +1,45 @@
+import { createMarginController } from "../margin-controller.js";
+import { useStore } from "../../../react/use-store.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/features/comments/react/use-margin-layout.ts
+/**
+* The layout of the comments margin for React: a thin hook over `createMarginController` (see there for the
+* measuring). Hand the column, the card and the resolved section elements in through the returned `set*` functions
+* (as ref callbacks); `state` holds the measured tops. Re-measures when `cards` or `activeId` change. It starts on
+* mount and stops on unmount.
+*/
+function useMarginLayout({ editor, container, cards, activeId }) {
+	const latest = useRef({
+		cards,
+		activeId
+	});
+	latest.current = {
+		cards,
+		activeId
+	};
+	const [controller] = useState(() => createMarginController({
+		cards: () => latest.current.cards,
+		activeId: () => latest.current.activeId
+	}));
+	useEffect(() => controller.setEditor(editor), [controller, editor]);
+	useEffect(() => controller.setContainer(container), [controller, container]);
+	useEffect(() => {
+		controller.connect();
+		return controller.disconnect;
+	}, [controller]);
+	useEffect(() => controller.schedule(), [
+		controller,
+		cards,
+		activeId
+	]);
+	return {
+		state: useStore(controller.state),
+		setColumn: controller.setColumn,
+		setResolvedSection: controller.setResolvedSection,
+		setCard: controller.setCard
+	};
+}
+//#endregion
+export { useMarginLayout };
+
+//# sourceMappingURL=use-margin-layout.js.map

package/dist/features/comments/react/use-margin-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-margin-layout.js","names":[],"sources":["../../../../src/features/comments/react/use-margin-layout.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useRef, useState } from 'react'\nimport { useStore } from '../../../react/use-store'\nimport { createMarginController, type MarginState } from '../margin-controller'\nimport type { MarginCard } from '../margin-layout'\n\n/**\n * The layout of the comments margin for React: a thin hook over `createMarginController` (see there for the\n * measuring). Hand the column, the card and the resolved section elements in through the returned `set*` functions\n * (as ref callbacks); `state` holds the measured tops. Re-measures when `cards` or `activeId` change. It starts on\n * mount and stops on unmount.\n */\nexport function useMarginLayout({ editor, container, cards, activeId }: {\n  editor: Editor | undefined\n  /** The editor's scroll container, which the column sits in: its size changes re-run the layout. */\n  container: HTMLElement | null\n  /** The cards in document order, and the one that owns its line. */\n  cards: readonly MarginCard[]\n  activeId: string | null\n}) {\n  // What the controller reads at each measurement: the latest render's values.\n  const latest = useRef({ cards, activeId })\n  latest.current = { cards, activeId }\n  const [controller] = useState(() => createMarginController({ cards: () => latest.current.cards, activeId: () => latest.current.activeId }))\n\n  useEffect(() => controller.setEditor(editor), [controller, editor])\n  useEffect(() => controller.setContainer(container), [controller, container])\n  // Paired start and stop, so StrictMode's mount, cleanup, mount leaves one observer.\n  useEffect(() => {\n    controller.connect()\n    return controller.disconnect\n  }, [controller])\n  // Cards appearing, disappearing or expanding: measure once the DOM has them.\n  useEffect(() => controller.schedule(), [controller, cards, activeId])\n\n  const state: MarginState = useStore(controller.state)\n  return { state, setColumn: controller.setColumn, setResolvedSection: controller.setResolvedSection, setCard: controller.setCard }\n}\n"],"mappings":";;;;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,QAAQ,WAAW,OAAO,YAOzD;CAED,MAAM,SAAS,OAAO;EAAE;EAAO;CAAS,CAAC;CACzC,OAAO,UAAU;EAAE;EAAO;CAAS;CACnC,MAAM,CAAC,cAAc,eAAe,uBAAuB;EAAE,aAAa,OAAO,QAAQ;EAAO,gBAAgB,OAAO,QAAQ;CAAS,CAAC,CAAC;CAE1I,gBAAgB,WAAW,UAAU,MAAM,GAAG,CAAC,YAAY,MAAM,CAAC;CAClE,gBAAgB,WAAW,aAAa,SAAS,GAAG,CAAC,YAAY,SAAS,CAAC;CAE3E,gBAAgB;EACd,WAAW,QAAQ;EACnB,OAAO,WAAW;CACpB,GAAG,CAAC,UAAU,CAAC;CAEf,gBAAgB,WAAW,SAAS,GAAG;EAAC;EAAY;EAAO;CAAQ,CAAC;CAGpE,OAAO;EAAE,OADkB,SAAS,WAAW,KAClC;EAAG,WAAW,WAAW;EAAW,oBAAoB,WAAW;EAAoB,SAAS,WAAW;CAAQ;AAClI"}

package/dist/features/comments/react.d.ts

@@ -1,6 +1,6 @@
+import { CommentsFeatureOptions } from "./feature.js";
 import { ReactFeature } from "../../react/EditorSurface.js";
 import "../../react/index.js";
-import { CommentsFeatureOptions } from "./feature.js";
 import { CommentBubble } from "./react/CommentBubble.js";
 import { CommentComposer } from "./react/CommentComposer.js";
 import { CommentsListMenu } from "./react/CommentsListMenu.js";

package/dist/features/comments/schema.d.ts

@@ -20,6 +20,23 @@ export interface CommentReply {
   createdAt: string;
   editedAt?: string;
 }
+/**
+ * Where a thread's text starts, as the JSON form of a Yjs relative position (`Y.relativePositionToJSON`): bound to the
+ * first commented character, so it keeps pointing at the place after that text was deleted (and moves with the text
+ * around it). Stored in the thread's `Y.Map` under `anchor`, so every collaborator resolves the same place.
+ */
+export interface CommentAnchor {
+  type?: {
+    client: number;
+    clock: number;
+  };
+  tname?: string;
+  item?: {
+    client: number;
+    clock: number;
+  };
+  assoc?: number;
+}
 /**
  * A comment thread: the root comment plus its replies. Stored as a nested `Y.Map` in `ydoc.getMap(COMMENTS_FIELD)`
  * (replies as a nested `Y.Array`), so concurrent replies and edits of different users merge. Its text range is the
@@ -35,6 +52,12 @@ export interface CommentThread {
   quote: string;
   /** Resolved threads are kept, without highlight, until reopened. */
   resolved: boolean;
+  /**
+   * Start of the commented text as a Yjs relative position, written when the thread is created (older threads get it
+   * once they are seen with their text still in the document). Tells where an orphaned thread's text was. Absent on threads
+   * not yet seen with a range, and when the position could not be captured.
+   */
+  anchor?: CommentAnchor;
   replies: CommentReply[];
 }
 /**

package/dist/features/comments/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","names":[],"sources":["../../../src/features/comments/schema.ts"],"sourcesContent":["import { type AnyExtension, Mark, mergeAttributes } from '@tiptap/core'\nimport type { AuthorIdentity } from '../../core/feature'\nimport '../../core/schema/mark-flags'\n\n// Vue-free and server-importable (`@ecsplico/editor/comments/schema`): the comment mark that anchors a thread to\n// text, the thread data model and the limits. The Y.Map store, the highlights and the UI live in the feature.\n\nexport { COMMENTS_LAYOUTS, type CommentsLayout } from '../../settings/values'\n\n/** Name of the `Y.Map` holding the comment threads in the Y.Doc, beside the document's 'default' XmlFragment. */\nexport const COMMENTS_FIELD = 'comments'\n\n/** Maximum lengths of a comment's or reply's text and of the quoted text a thread keeps of its range. */\nexport const COMMENT_LIMITS = { text: 5000, quote: 200 } as const\n\n/** Who wrote a comment or reply: the writing user's identity, copied in when writing. */\nexport type CommentAuthor = AuthorIdentity\n\nexport interface CommentReply {\n  id: string\n  author: CommentAuthor\n  text: string\n  /** ISO timestamps; `editedAt` once the author changed the text. */\n  createdAt: string\n  editedAt?: string\n}\n\n/**\n * A comment thread: the root comment plus its replies. Stored as a nested `Y.Map` in `ydoc.getMap(COMMENTS_FIELD)`\n * (replies as a nested `Y.Array`), so concurrent replies and edits of different users merge. Its text range is the\n * `comment` mark with the thread's `id`.\n */\nexport interface CommentThread {\n  id: string\n  author: CommentAuthor\n  text: string\n  createdAt: string\n  editedAt?: string\n  /** The commented text when the thread was created, cut to `COMMENT_LIMITS.quote`. */\n  quote: string\n  /** Resolved threads are kept, without highlight, until reopened. */\n  resolved: boolean\n  replies: CommentReply[]\n}\n\n/**\n * Anchors a comment thread to text (attribute `id` = the thread's id). Storage only: the visible highlight is a\n * client-side decoration driven by the thread's state (`Comments` extension). `excludes: ''` lets the marks of\n * overlapping threads coexist on the same text; `inclusive: false` keeps text typed at the end of a range outside it.\n * No Markdown form (`markdownInvisible`).\n */\nexport const CommentMark = Mark.create({\n  name: 'comment',\n  excludes: '',\n  inclusive: false,\n  markdownInvisible: true,\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: el => el.getAttribute('data-comment-id'),\n        renderHTML: attrs => ({ 'data-comment-id': attrs.id }),\n      },\n    }\n  },\n  parseHTML: () => [{ tag: 'span[data-comment-id]' }],\n  renderHTML: ({ HTMLAttributes }) => ['span', mergeAttributes(HTMLAttributes, { class: 'comment' }), 0],\n})\n\n/** The comment mark of the document schema. */\nexport const commentsSchemaExtensions = (): AnyExtension[] => [CommentMark]\n"],"mappings":";;;;AAUA,MAAa,iBAAiB;;AAG9B,MAAa,iBAAiB;CAAE,MAAM;CAAM,OAAO;AAAI;;;;;;;AAsCvD,MAAa,cAAc,KAAK,OAAO;CACrC,MAAM;CACN,UAAU;CACV,WAAW;CACX,mBAAmB;CACnB,gBAAgB;EACd,OAAO,EACL,IAAI;GACF,SAAS;GACT,YAAW,OAAM,GAAG,aAAa,iBAAiB;GAClD,aAAY,WAAU,EAAE,mBAAmB,MAAM,GAAG;EACtD,EACF;CACF;CACA,iBAAiB,CAAC,EAAE,KAAK,wBAAwB,CAAC;CAClD,aAAa,EAAE,qBAAqB;EAAC;EAAQ,gBAAgB,gBAAgB,EAAE,OAAO,UAAU,CAAC;EAAG;CAAC;AACvG,CAAC;;AAGD,MAAa,iCAAiD,CAAC,WAAW"}
+{"version":3,"file":"schema.js","names":[],"sources":["../../../src/features/comments/schema.ts"],"sourcesContent":["import { type AnyExtension, Mark, mergeAttributes } from '@tiptap/core'\nimport type { AuthorIdentity } from '../../core/feature'\nimport '../../core/schema/mark-flags'\n\n// Vue-free and server-importable (`@ecsplico/editor/comments/schema`): the comment mark that anchors a thread to\n// text, the thread data model and the limits. The Y.Map store, the highlights and the UI live in the feature.\n\nexport { COMMENTS_LAYOUTS, type CommentsLayout } from '../../settings/values'\n\n/** Name of the `Y.Map` holding the comment threads in the Y.Doc, beside the document's 'default' XmlFragment. */\nexport const COMMENTS_FIELD = 'comments'\n\n/** Maximum lengths of a comment's or reply's text and of the quoted text a thread keeps of its range. */\nexport const COMMENT_LIMITS = { text: 5000, quote: 200 } as const\n\n/** Who wrote a comment or reply: the writing user's identity, copied in when writing. */\nexport type CommentAuthor = AuthorIdentity\n\nexport interface CommentReply {\n  id: string\n  author: CommentAuthor\n  text: string\n  /** ISO timestamps; `editedAt` once the author changed the text. */\n  createdAt: string\n  editedAt?: string\n}\n\n/**\n * Where a thread's text starts, as the JSON form of a Yjs relative position (`Y.relativePositionToJSON`): bound to the\n * first commented character, so it keeps pointing at the place after that text was deleted (and moves with the text\n * around it). Stored in the thread's `Y.Map` under `anchor`, so every collaborator resolves the same place.\n */\nexport interface CommentAnchor {\n  type?: { client: number, clock: number }\n  tname?: string\n  item?: { client: number, clock: number }\n  assoc?: number\n}\n\n/**\n * A comment thread: the root comment plus its replies. Stored as a nested `Y.Map` in `ydoc.getMap(COMMENTS_FIELD)`\n * (replies as a nested `Y.Array`), so concurrent replies and edits of different users merge. Its text range is the\n * `comment` mark with the thread's `id`.\n */\nexport interface CommentThread {\n  id: string\n  author: CommentAuthor\n  text: string\n  createdAt: string\n  editedAt?: string\n  /** The commented text when the thread was created, cut to `COMMENT_LIMITS.quote`. */\n  quote: string\n  /** Resolved threads are kept, without highlight, until reopened. */\n  resolved: boolean\n  /**\n   * Start of the commented text as a Yjs relative position, written when the thread is created (older threads get it\n   * once they are seen with their text still in the document). Tells where an orphaned thread's text was. Absent on threads\n   * not yet seen with a range, and when the position could not be captured.\n   */\n  anchor?: CommentAnchor\n  replies: CommentReply[]\n}\n\n/**\n * Anchors a comment thread to text (attribute `id` = the thread's id). Storage only: the visible highlight is a\n * client-side decoration driven by the thread's state (`Comments` extension). `excludes: ''` lets the marks of\n * overlapping threads coexist on the same text; `inclusive: false` keeps text typed at the end of a range outside it.\n * No Markdown form (`markdownInvisible`).\n */\nexport const CommentMark = Mark.create({\n  name: 'comment',\n  excludes: '',\n  inclusive: false,\n  markdownInvisible: true,\n  addAttributes() {\n    return {\n      id: {\n        default: null,\n        parseHTML: el => el.getAttribute('data-comment-id'),\n        renderHTML: attrs => ({ 'data-comment-id': attrs.id }),\n      },\n    }\n  },\n  parseHTML: () => [{ tag: 'span[data-comment-id]' }],\n  renderHTML: ({ HTMLAttributes }) => ['span', mergeAttributes(HTMLAttributes, { class: 'comment' }), 0],\n})\n\n/** The comment mark of the document schema. */\nexport const commentsSchemaExtensions = (): AnyExtension[] => [CommentMark]\n"],"mappings":";;;;AAUA,MAAa,iBAAiB;;AAG9B,MAAa,iBAAiB;CAAE,MAAM;CAAM,OAAO;AAAI;;;;;;;AAwDvD,MAAa,cAAc,KAAK,OAAO;CACrC,MAAM;CACN,UAAU;CACV,WAAW;CACX,mBAAmB;CACnB,gBAAgB;EACd,OAAO,EACL,IAAI;GACF,SAAS;GACT,YAAW,OAAM,GAAG,aAAa,iBAAiB;GAClD,aAAY,WAAU,EAAE,mBAAmB,MAAM,GAAG;EACtD,EACF;CACF;CACA,iBAAiB,CAAC,EAAE,KAAK,wBAAwB,CAAC;CAClD,aAAa,EAAE,qBAAqB;EAAC;EAAQ,gBAAgB,gBAAgB,EAAE,OAAO,UAAU,CAAC;EAAG;CAAC;AACvG,CAAC;;AAGD,MAAa,iCAAiD,CAAC,WAAW"}

package/dist/features/comments/snapshot-equality.js

@@ -0,0 +1,40 @@
+//#region src/features/comments/snapshot-equality.ts
+const NO_RANGES = /* @__PURE__ */ new Map();
+const NO_THREADS = [];
+const NO_POSITIONS = /* @__PURE__ */ new Map();
+/** The snapshot of an editor that has no comments (yet). */
+const EMPTY_SNAPSHOT = {
+	available: false,
+	canComment: false,
+	user: null,
+	threads: NO_THREADS,
+	ranges: NO_RANGES,
+	orphanAt: NO_POSITIONS,
+	active: null,
+	draft: null,
+	draftQuote: "",
+	open: NO_THREADS,
+	resolved: NO_THREADS
+};
+function sameRange(a, b) {
+	return a === b || !!a && !!b && a.from === b.from && a.to === b.to;
+}
+function sameRanges(a, b) {
+	if (a === b) return true;
+	if (a.size !== b.size) return false;
+	for (const [id, range] of a) if (!sameRange(range, b.get(id) ?? null)) return false;
+	return true;
+}
+function sameOrphanAt(a, b) {
+	if (a === b) return true;
+	if (a.size !== b.size) return false;
+	for (const [id, position] of a) if (b.get(id) !== position) return false;
+	return true;
+}
+function sameUser(a, b) {
+	return a === b || !!a && !!b && a.id === b.id && a.name === b.name && a.color === b.color;
+}
+//#endregion
+export { EMPTY_SNAPSHOT, NO_POSITIONS, NO_RANGES, NO_THREADS, sameOrphanAt, sameRange, sameRanges, sameUser };
+
+//# sourceMappingURL=snapshot-equality.js.map

package/dist/features/comments/snapshot-equality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-equality.js","names":[],"sources":["../../../src/features/comments/snapshot-equality.ts"],"sourcesContent":["import type { AuthorIdentity } from '../../core'\nimport type { CommentsSnapshot, DocRange } from './model'\nimport type { CommentThread } from './schema'\n\n// What both comments models (the Y.Doc one in `./model` and the REST one in `adapters/comments/client`) need to hand\n// out a snapshot that keeps its identity while nothing in it changed. Type-only imports: this module stays free of `yjs`.\n\nexport const NO_RANGES: ReadonlyMap<string, DocRange> = new Map()\nexport const NO_THREADS: readonly CommentThread[] = []\nexport const NO_POSITIONS: ReadonlyMap<string, number> = new Map()\n\n/** The snapshot of an editor that has no comments (yet). */\nexport const EMPTY_SNAPSHOT: CommentsSnapshot = {\n  available: false,\n  canComment: false,\n  user: null,\n  threads: NO_THREADS,\n  ranges: NO_RANGES,\n  orphanAt: NO_POSITIONS,\n  active: null,\n  draft: null,\n  draftQuote: '',\n  open: NO_THREADS,\n  resolved: NO_THREADS,\n}\n\nexport function sameRange(a: DocRange | null, b: DocRange | null): boolean {\n  return a === b || (!!a && !!b && a.from === b.from && a.to === b.to)\n}\n\nexport function sameRanges(a: ReadonlyMap<string, DocRange>, b: ReadonlyMap<string, DocRange>): boolean {\n  if (a === b) return true\n  if (a.size !== b.size) return false\n  for (const [id, range] of a) {\n    if (!sameRange(range, b.get(id) ?? null)) return false\n  }\n  return true\n}\n\nexport function sameOrphanAt(a: ReadonlyMap<string, number>, b: ReadonlyMap<string, number>): boolean {\n  if (a === b) return true\n  if (a.size !== b.size) return false\n  for (const [id, position] of a) {\n    if (b.get(id) !== position) return false\n  }\n  return true\n}\n\nexport function sameUser(a: AuthorIdentity | null, b: AuthorIdentity | null): boolean {\n  return a === b || (!!a && !!b && a.id === b.id && a.name === b.name && a.color === b.color)\n}\n"],"mappings":";AAOA,MAAa,4BAA2C,IAAI,IAAI;AAChE,MAAa,aAAuC,CAAC;AACrD,MAAa,+BAA4C,IAAI,IAAI;;AAGjE,MAAa,iBAAmC;CAC9C,WAAW;CACX,YAAY;CACZ,MAAM;CACN,SAAS;CACT,QAAQ;CACR,UAAU;CACV,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,MAAM;CACN,UAAU;AACZ;AAEA,SAAgB,UAAU,GAAoB,GAA6B;CACzE,OAAO,MAAM,KAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE;AACnE;AAEA,SAAgB,WAAW,GAAkC,GAA2C;CACtG,IAAI,MAAM,GAAG,OAAO;CACpB,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO;CAC9B,KAAK,MAAM,CAAC,IAAI,UAAU,GACxB,IAAI,CAAC,UAAU,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,GAAG,OAAO;CAEnD,OAAO;AACT;AAEA,SAAgB,aAAa,GAAgC,GAAyC;CACpG,IAAI,MAAM,GAAG,OAAO;CACpB,IAAI,EAAE,SAAS,EAAE,MAAM,OAAO;CAC9B,KAAK,MAAM,CAAC,IAAI,aAAa,GAC3B,IAAI,EAAE,IAAI,EAAE,MAAM,UAAU,OAAO;CAErC,OAAO;AACT;AAEA,SAAgB,SAAS,GAA0B,GAAmC;CACpF,OAAO,MAAM,KAAM,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE;AACvF"}