@ecsplico/editor 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,294 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { useEditorSettings } from "../../../react/settings.js";
+import { Button } from "../../../react/ui/button.js";
+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 { 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);
+	}, [
+		comments.draft,
+		comments.open,
+		comments.ranges
+	]);
+	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({
+		editor,
+		positioned,
+		orphans
+	});
+	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);
+	};
+	/** 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`,
+			...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))]
+			})
+		] })
+	});
+}
+//#endregion
+export { CommentsMargin };
+
+//# sourceMappingURL=CommentsMargin.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,11 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/comments/react/CommentsOverlay.d.ts
+/**
+ * What the comments feature mounts beside the editor content: the selection bubble, the popover of the inline layout,
+ * and the layout glue below. The margin column itself (`CommentsMargin`) is placed by the host.
+ */
+export declare function CommentsOverlay({ editor }: {
+  editor: Editor;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CommentsOverlay.d.ts.map

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

@@ -0,0 +1,52 @@
+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";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/comments/react/CommentsOverlay.tsx
+/**
+* What the comments feature mounts beside the editor content: the selection bubble, the popover of the inline layout,
+* and the layout glue below. The margin column itself (`CommentsMargin`) is placed by the host.
+*/
+function CommentsOverlay({ editor }) {
+	const { settings } = useEditorSettings();
+	const ui = useEditorUi();
+	const layout = settings.editing.commentsLayout;
+	const latest = useRef({
+		layout,
+		ui
+	});
+	latest.current = {
+		layout,
+		ui
+	};
+	useEffect(() => {
+		let previous = !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null;
+		const onTransaction = () => {
+			const draft = !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null;
+			if (draft === previous) return;
+			previous = draft;
+			const { layout: current, ui: chrome } = latest.current;
+			if (draft && current === "margin" && !chrome?.commentsOpen) chrome?.toggleComments();
+		};
+		editor.on("transaction", onTransaction);
+		return () => {
+			editor.off("transaction", onTransaction);
+		};
+	}, [editor]);
+	const switched = useRef(layout);
+	useEffect(() => {
+		if (switched.current === layout) return;
+		switched.current = layout;
+		if (editor.isDestroyed) return;
+		cancelCommentDraft(editor);
+		setActiveComment(editor, null);
+	}, [layout, editor]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommentBubble, { editor }), /* @__PURE__ */ jsx(CommentsPopover, { editor })] });
+}
+//#endregion
+export { CommentsOverlay };
+
+//# sourceMappingURL=CommentsOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsOverlay.js","names":[],"sources":["../../../../src/features/comments/react/CommentsOverlay.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEffect, useRef } from 'react'\nimport { useEditorUi } from '../../../react/editor-ui'\nimport { useEditorSettings } from '../../../react/settings'\nimport { cancelCommentDraft, commentsKey, setActiveComment } from '../comments-plugin'\nimport { CommentBubble } from './CommentBubble'\nimport { CommentsPopover } from './CommentsPopover'\n\n/**\n * What the comments feature mounts beside the editor content: the selection bubble, the popover of the inline layout,\n * and the layout glue below. The margin column itself (`CommentsMargin`) is placed by the host.\n */\nexport function CommentsOverlay({ editor }: { editor: Editor }) {\n  const { settings } = useEditorSettings()\n  const ui = useEditorUi()\n  const layout = settings.editing.commentsLayout\n\n  // Starting a comment (the plugin's draft appears) opens the margin in the margin layout, so the composer is visible.\n  const latest = useRef({ layout, ui })\n  latest.current = { layout, ui }\n  useEffect(() => {\n    let previous = !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null\n    const onTransaction = () => {\n      const draft = !editor.isDestroyed ? commentsKey.getState(editor.state)?.draft ?? null : null\n      if (draft === previous) return\n      previous = draft\n      const { layout: current, ui: chrome } = latest.current\n      if (draft && current === 'margin' && !chrome?.commentsOpen) chrome?.toggleComments()\n    }\n    editor.on('transaction', onTransaction)\n    return () => { editor.off('transaction', onTransaction) }\n  }, [editor])\n\n  // A layout switch starts closed: otherwise the thread active in the margin opens the inline popover at once (over the\n  // settings dialog the switch was made in), and vice versa.\n  const switched = useRef(layout)\n  useEffect(() => {\n    if (switched.current === layout) return\n    switched.current = layout\n    if (editor.isDestroyed) return\n    cancelCommentDraft(editor)\n    setActiveComment(editor, null)\n  }, [layout, editor])\n\n  return (\n    <>\n      <CommentBubble editor={editor} />\n      <CommentsPopover editor={editor} />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,UAA8B;CAC9D,MAAM,EAAE,aAAa,kBAAkB;CACvC,MAAM,KAAK,YAAY;CACvB,MAAM,SAAS,SAAS,QAAQ;CAGhC,MAAM,SAAS,OAAO;EAAE;EAAQ;CAAG,CAAC;CACpC,OAAO,UAAU;EAAE;EAAQ;CAAG;CAC9B,gBAAgB;EACd,IAAI,WAAW,CAAC,OAAO,cAAc,YAAY,SAAS,OAAO,KAAK,CAAC,EAAE,SAAS,OAAO;EACzF,MAAM,sBAAsB;GAC1B,MAAM,QAAQ,CAAC,OAAO,cAAc,YAAY,SAAS,OAAO,KAAK,CAAC,EAAE,SAAS,OAAO;GACxF,IAAI,UAAU,UAAU;GACxB,WAAW;GACX,MAAM,EAAE,QAAQ,SAAS,IAAI,WAAW,OAAO;GAC/C,IAAI,SAAS,YAAY,YAAY,CAAC,QAAQ,cAAc,QAAQ,eAAe;EACrF;EACA,OAAO,GAAG,eAAe,aAAa;EACtC,aAAa;GAAE,OAAO,IAAI,eAAe,aAAa;EAAE;CAC1D,GAAG,CAAC,MAAM,CAAC;CAIX,MAAM,WAAW,OAAO,MAAM;CAC9B,gBAAgB;EACd,IAAI,SAAS,YAAY,QAAQ;EACjC,SAAS,UAAU;EACnB,IAAI,OAAO,aAAa;EACxB,mBAAmB,MAAM;EACzB,iBAAiB,QAAQ,IAAI;CAC/B,GAAG,CAAC,QAAQ,MAAM,CAAC;CAEnB,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,eAAD,EAAuB,OAAS,CAAA,GAChC,oBAAC,iBAAD,EAAyB,OAAS,CAAA,CAClC,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,15 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/comments/react/CommentsPopover.d.ts
+/**
+ * Inline comments („Inline“ layout): the draft composer or the active thread in a compact popover at its text.
+ * Opens when a comment is started or highlighted text is clicked (another highlight switches the thread); a click
+ * outside or Esc in the popover closes it (cancels the draft / deactivates the thread). Esc in the editor is a binding
+ * of the comments feature (ProseMirror marks every Esc in the editor as handled). Orphaned
+ * threads (opened from the toolbar's `CommentsListMenu`) anchor at the top of the editor. Renders only when the
+ * user's comments layout is `inline`.
+ */
+export declare function CommentsPopover({ editor }: {
+  editor: Editor | undefined;
+}): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=CommentsPopover.d.ts.map

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

@@ -0,0 +1,107 @@
+import { useEditorSettings } from "../../../react/settings.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../../../react/ui/popover.js";
+import { CommentComposer } from "./CommentComposer.js";
+import { CommentThreadView } from "./CommentThreadView.js";
+import { useComments } from "./use-comments.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/comments/react/CommentsPopover.tsx
+/**
+* Inline comments („Inline“ layout): the draft composer or the active thread in a compact popover at its text.
+* Opens when a comment is started or highlighted text is clicked (another highlight switches the thread); a click
+* outside or Esc in the popover closes it (cancels the draft / deactivates the thread). Esc in the editor is a binding
+* of the comments feature (ProseMirror marks every Esc in the editor as handled). Orphaned
+* threads (opened from the toolbar's `CommentsListMenu`) anchor at the top of the editor. Renders only when the
+* user's comments layout is `inline`.
+*/
+function CommentsPopover({ editor }) {
+	const { settings } = useEditorSettings();
+	const enabled = settings.editing.commentsLayout === "inline";
+	const comments = useComments(enabled ? editor : void 0);
+	const activeThread = comments.active ? comments.threads.find((t) => t.id === comments.active) ?? null : null;
+	const drafting = !!comments.draft;
+	const open = enabled && comments.available && (drafting || !!activeThread);
+	const latest = useRef({
+		editor,
+		comments
+	});
+	latest.current = {
+		editor,
+		comments
+	};
+	const [anchor] = useState(() => {
+		let anchorRect = new DOMRect();
+		/** The draft range, else the active thread's range; null for an orphan. */
+		const anchorRange = () => {
+			const { draft, active, ranges } = latest.current.comments;
+			if (draft) return draft;
+			return active ? ranges.get(active) ?? null : null;
+		};
+		return { current: {
+			getBoundingClientRect() {
+				const instance = latest.current.editor;
+				if (!instance || instance.isDestroyed) return anchorRect;
+				const { view } = instance;
+				const bounds = view.dom.getBoundingClientRect();
+				const range = anchorRange();
+				if (!range || range.from >= range.to || range.to > instance.state.doc.content.size) {
+					anchorRect = new DOMRect(bounds.left, bounds.top, Math.max(bounds.width, 1), 1);
+					return anchorRect;
+				}
+				const start = view.coordsAtPos(range.from, 1);
+				const end = view.coordsAtPos(range.to, -1);
+				const oneLine = end.top < start.bottom;
+				const left = oneLine ? start.left : bounds.left;
+				const right = oneLine ? end.right : bounds.right;
+				anchorRect = new DOMRect(left, start.top, Math.max(right - left, 1), end.bottom - start.top);
+				return anchorRect;
+			},
+			get contextElement() {
+				const instance = latest.current.editor;
+				return instance && !instance.isDestroyed ? instance.view.dom : void 0;
+			}
+		} };
+	});
+	if (!enabled) return null;
+	function close() {
+		if (drafting) comments.cancelDraft();
+		else comments.activate(null);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (value) => {
+			if (!value) close();
+		},
+		children: [/* @__PURE__ */ jsx(PopoverAnchor, { virtualRef: anchor }), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			updatePositionStrategy: "always",
+			className: "max-h-[60vh] w-72 max-w-[calc(100vw-2rem)] gap-0 overflow-auto p-2",
+			onInteractOutside: (event) => {
+				if (event.target instanceof Element && event.target.closest("[role=\"menu\"]")) event.preventDefault();
+			},
+			onOpenAutoFocus: (event) => {
+				if (!drafting) event.preventDefault();
+			},
+			onCloseAutoFocus: (event) => event.preventDefault(),
+			children: drafting ? /* @__PURE__ */ jsx(CommentComposer, {
+				dense: true,
+				quote: comments.draftQuote,
+				onSubmit: (text) => comments.add(text),
+				onCancel: () => comments.cancelDraft()
+			}) : activeThread && /* @__PURE__ */ jsx(CommentThreadView, {
+				dense: true,
+				thread: activeThread,
+				user: comments.user,
+				active: true,
+				orphan: comments.isOrphan(activeThread.id),
+				comments
+			})
+		})]
+	});
+}
+//#endregion
+export { CommentsPopover };
+
+//# sourceMappingURL=CommentsPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsPopover.js","names":[],"sources":["../../../../src/features/comments/react/CommentsPopover.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useRef, useState } from 'react'\nimport { useEditorSettings } from '../../../react/settings'\nimport { Popover, PopoverAnchor, PopoverContent } from '../../../react/ui/popover'\nimport { CommentComposer } from './CommentComposer'\nimport { CommentThreadView } from './CommentThreadView'\nimport { type CommentsApi, useComments } from './use-comments'\n\n/**\n * Inline comments („Inline“ layout): the draft composer or the active thread in a compact popover at its text.\n * Opens when a comment is started or highlighted text is clicked (another highlight switches the thread); a click\n * outside or Esc in the popover closes it (cancels the draft / deactivates the thread). Esc in the editor is a binding\n * of the comments feature (ProseMirror marks every Esc in the editor as handled). Orphaned\n * threads (opened from the toolbar's `CommentsListMenu`) anchor at the top of the editor. Renders only when the\n * user's comments layout is `inline`.\n */\nexport function CommentsPopover({ editor }: { editor: Editor | undefined }) {\n  const { settings } = useEditorSettings()\n  const enabled = settings.editing.commentsLayout === 'inline'\n  // Idle (no Y.Doc observer) while another layout shows the comments.\n  const comments = useComments(enabled ? editor : undefined)\n\n  const activeThread = comments.active ? comments.threads.find(t => t.id === comments.active) ?? null : null\n  const drafting = !!comments.draft\n  const open = enabled && comments.available && (drafting || !!activeThread)\n\n  // The virtual reference reads the latest editor and comments when the popover positions itself.\n  const latest = useRef<{ editor: Editor | undefined, comments: CommentsApi }>({ editor, comments })\n  latest.current = { editor, comments }\n  const [anchor] = useState(() => {\n    let anchorRect = new DOMRect()\n    /** The draft range, else the active thread's range; null for an orphan. */\n    const anchorRange = () => {\n      const { draft, active, ranges } = latest.current.comments\n      if (draft) return draft\n      return active ? ranges.get(active) ?? null : null\n    }\n    /** Virtual reference: the anchor text (its first line's extent, or the editor's width when it spans lines). */\n    const reference = {\n      getBoundingClientRect(): DOMRect {\n        const instance = latest.current.editor\n        if (!instance || instance.isDestroyed) return anchorRect\n        const { view } = instance\n        const bounds = view.dom.getBoundingClientRect()\n        const range = anchorRange()\n        if (!range || range.from >= range.to || range.to > instance.state.doc.content.size) {\n          anchorRect = new DOMRect(bounds.left, bounds.top, Math.max(bounds.width, 1), 1)\n          return anchorRect\n        }\n        const start = view.coordsAtPos(range.from, 1)\n        const end = view.coordsAtPos(range.to, -1)\n        const oneLine = end.top < start.bottom\n        const left = oneLine ? start.left : bounds.left\n        const right = oneLine ? end.right : bounds.right\n        anchorRect = new DOMRect(left, start.top, Math.max(right - left, 1), end.bottom - start.top)\n        return anchorRect\n      },\n      get contextElement() {\n        const instance = latest.current.editor\n        return instance && !instance.isDestroyed ? instance.view.dom : undefined\n      },\n    }\n    return { current: reference }\n  })\n\n  if (!enabled) return null\n\n  function close() {\n    if (drafting) comments.cancelDraft()\n    else comments.activate(null)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={(value) => { if (!value) close() }}>\n      <PopoverAnchor virtualRef={anchor} />\n      <PopoverContent\n        side=\"bottom\"\n        align=\"start\"\n        sideOffset={4}\n        updatePositionStrategy=\"always\"\n        className=\"max-h-[60vh] w-72 max-w-[calc(100vw-2rem)] gap-0 overflow-auto p-2\"\n        // Menus of the thread (dropdowns, portalled) count as inside, so choosing an action does not close the popover.\n        onInteractOutside={(event) => {\n          if (event.target instanceof Element && event.target.closest('[role=\"menu\"]')) event.preventDefault()\n        }}\n        // The active thread keeps the editor focused (clicks in the text activate it); the composer focuses itself.\n        onOpenAutoFocus={(event) => { if (!drafting) event.preventDefault() }}\n        onCloseAutoFocus={event => event.preventDefault()}\n      >\n        {drafting\n          ? (\n              <CommentComposer\n                dense\n                quote={comments.draftQuote}\n                onSubmit={text => comments.add(text)}\n                onCancel={() => comments.cancelDraft()}\n              />\n            )\n          : activeThread && (\n              <CommentThreadView\n                dense\n                thread={activeThread}\n                user={comments.user}\n                active\n                orphan={comments.isOrphan(activeThread.id)}\n                comments={comments}\n              />\n            )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,EAAE,UAA0C;CAC1E,MAAM,EAAE,aAAa,kBAAkB;CACvC,MAAM,UAAU,SAAS,QAAQ,mBAAmB;CAEpD,MAAM,WAAW,YAAY,UAAU,SAAS,KAAA,CAAS;CAEzD,MAAM,eAAe,SAAS,SAAS,SAAS,QAAQ,MAAK,MAAK,EAAE,OAAO,SAAS,MAAM,KAAK,OAAO;CACtG,MAAM,WAAW,CAAC,CAAC,SAAS;CAC5B,MAAM,OAAO,WAAW,SAAS,cAAc,YAAY,CAAC,CAAC;CAG7D,MAAM,SAAS,OAA8D;EAAE;EAAQ;CAAS,CAAC;CACjG,OAAO,UAAU;EAAE;EAAQ;CAAS;CACpC,MAAM,CAAC,UAAU,eAAe;EAC9B,IAAI,aAAa,IAAI,QAAQ;;EAE7B,MAAM,oBAAoB;GACxB,MAAM,EAAE,OAAO,QAAQ,WAAW,OAAO,QAAQ;GACjD,IAAI,OAAO,OAAO;GAClB,OAAO,SAAS,OAAO,IAAI,MAAM,KAAK,OAAO;EAC/C;EA0BA,OAAO,EAAE,SAAS;GAvBhB,wBAAiC;IAC/B,MAAM,WAAW,OAAO,QAAQ;IAChC,IAAI,CAAC,YAAY,SAAS,aAAa,OAAO;IAC9C,MAAM,EAAE,SAAS;IACjB,MAAM,SAAS,KAAK,IAAI,sBAAsB;IAC9C,MAAM,QAAQ,YAAY;IAC1B,IAAI,CAAC,SAAS,MAAM,QAAQ,MAAM,MAAM,MAAM,KAAK,SAAS,MAAM,IAAI,QAAQ,MAAM;KAClF,aAAa,IAAI,QAAQ,OAAO,MAAM,OAAO,KAAK,KAAK,IAAI,OAAO,OAAO,CAAC,GAAG,CAAC;KAC9E,OAAO;IACT;IACA,MAAM,QAAQ,KAAK,YAAY,MAAM,MAAM,CAAC;IAC5C,MAAM,MAAM,KAAK,YAAY,MAAM,IAAI,EAAE;IACzC,MAAM,UAAU,IAAI,MAAM,MAAM;IAChC,MAAM,OAAO,UAAU,MAAM,OAAO,OAAO;IAC3C,MAAM,QAAQ,UAAU,IAAI,QAAQ,OAAO;IAC3C,aAAa,IAAI,QAAQ,MAAM,MAAM,KAAK,KAAK,IAAI,QAAQ,MAAM,CAAC,GAAG,IAAI,SAAS,MAAM,GAAG;IAC3F,OAAO;GACT;GACA,IAAI,iBAAiB;IACnB,MAAM,WAAW,OAAO,QAAQ;IAChC,OAAO,YAAY,CAAC,SAAS,cAAc,SAAS,KAAK,MAAM,KAAA;GACjE;EAEwB,EAAE;CAC9B,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,SAAS,QAAQ;EACf,IAAI,UAAU,SAAS,YAAY;OAC9B,SAAS,SAAS,IAAI;CAC7B;CAEA,OACE,qBAAC,SAAD;EAAe;EAAM,eAAe,UAAU;GAAE,IAAI,CAAC,OAAO,MAAM;EAAE;EAApE,UAAA,CACE,oBAAC,eAAD,EAAe,YAAY,OAAS,CAAA,GACpC,oBAAC,gBAAD;GACE,MAAK;GACL,OAAM;GACN,YAAY;GACZ,wBAAuB;GACvB,WAAU;GAEV,oBAAoB,UAAU;IAC5B,IAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,iBAAe,GAAG,MAAM,eAAe;GACrG;GAEA,kBAAkB,UAAU;IAAE,IAAI,CAAC,UAAU,MAAM,eAAe;GAAE;GACpE,mBAAkB,UAAS,MAAM,eAAe;GAE/C,UAAA,WAEK,oBAAC,iBAAD;IACE,OAAA;IACA,OAAO,SAAS;IAChB,WAAU,SAAQ,SAAS,IAAI,IAAI;IACnC,gBAAgB,SAAS,YAAY;GACtC,CAAA,IAEH,gBACE,oBAAC,mBAAD;IACE,OAAA;IACA,QAAQ;IACR,MAAM,SAAS;IACf,QAAA;IACA,QAAQ,SAAS,SAAS,aAAa,EAAE;IAC/B;GACX,CAAA;EAEO,CAAA,CACT;;AAEb"}

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

@@ -0,0 +1,12 @@
+import { Editor } from "@tiptap/core";
+//#region src/features/comments/react/CommentsToolbarButton.d.ts
+/**
+ * Toolbar entry of the comments feature, by the user's layout: in `margin` the „Kommentare“ toggle of the margin
+ * column (Mod-Shift-m; disabled with an explanation without a collaborative document), in `inline` the
+ * `CommentsListMenu` with the number of open threads.
+ */
+export declare function CommentsToolbarButton({ editor }: {
+  editor: Editor | undefined;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=CommentsToolbarButton.d.ts.map

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

@@ -0,0 +1,52 @@
+import { useEditorI18n } from "../../../react/use-editor-i18n.js";
+import { cn } from "../../../react/ui/utils.js";
+import { Icon } from "../../../react/Icon.js";
+import { useEditorSettings } from "../../../react/settings.js";
+import { Button } from "../../../react/ui/button.js";
+import { useEditorUi } from "../../../react/editor-ui.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../react/ui/tooltip.js";
+import { useComments } from "./use-comments.js";
+import { CommentsListMenu } from "./CommentsListMenu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/features/comments/react/CommentsToolbarButton.tsx
+/** The toggle's shortcut as shown in the tooltip (key names, not translated). */
+const SHORTCUT = `${typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform) ? "⌘" : "Ctrl"}+⇧+M`;
+/**
+* Toolbar entry of the comments feature, by the user's layout: in `margin` the „Kommentare“ toggle of the margin
+* column (Mod-Shift-m; disabled with an explanation without a collaborative document), in `inline` the
+* `CommentsListMenu` with the number of open threads.
+*/
+function CommentsToolbarButton({ editor }) {
+	const { settings } = useEditorSettings();
+	const { t } = useEditorI18n();
+	const editorUi = useEditorUi(editor);
+	const comments = useComments(editor);
+	if (settings.editing.commentsLayout !== "margin") return /* @__PURE__ */ jsx(CommentsListMenu, { editor });
+	const { available } = comments;
+	const active = !!editorUi?.commentsOpen;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				"aria-label": t("comments.title"),
+				"aria-pressed": active,
+				disabled: !editorUi || !available,
+				className: cn(active && "bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary"),
+				onMouseDown: (event) => event.preventDefault(),
+				onClick: () => editorUi?.toggleComments(),
+				children: /* @__PURE__ */ jsx(Icon, { name: "i-lucide-message-square-text" })
+			})
+		})
+	}), /* @__PURE__ */ jsxs(TooltipContent, { children: [available ? t("comments.title") : t("comments.unavailable"), available && /* @__PURE__ */ jsx("kbd", {
+		"data-slot": "kbd",
+		className: "rounded-sm bg-background/20 px-1 font-sans",
+		children: SHORTCUT
+	})] })] });
+}
+//#endregion
+export { CommentsToolbarButton };
+
+//# sourceMappingURL=CommentsToolbarButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommentsToolbarButton.js","names":[],"sources":["../../../../src/features/comments/react/CommentsToolbarButton.tsx"],"sourcesContent":["import type { Editor } from '@tiptap/core'\nimport { useEditorUi } from '../../../react/editor-ui'\nimport { Icon } from '../../../react/Icon'\nimport { useEditorSettings } from '../../../react/settings'\nimport { Button } from '../../../react/ui/button'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../../react/ui/tooltip'\nimport { cn } from '../../../react/ui/utils'\nimport { useEditorI18n } from '../../../react/use-editor-i18n'\nimport { CommentsListMenu } from './CommentsListMenu'\nimport { useComments } from './use-comments'\n\nconst isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform)\n/** The toggle's shortcut as shown in the tooltip (key names, not translated). */\nconst SHORTCUT = `${isMac ? '⌘' : 'Ctrl'}+⇧+M`\n\n/**\n * Toolbar entry of the comments feature, by the user's layout: in `margin` the „Kommentare“ toggle of the margin\n * column (Mod-Shift-m; disabled with an explanation without a collaborative document), in `inline` the\n * `CommentsListMenu` with the number of open threads.\n */\nexport function CommentsToolbarButton({ editor }: { editor: Editor | undefined }) {\n  const { settings } = useEditorSettings()\n  const { t } = useEditorI18n()\n  // The toolbar sits beside the surface (outside its context): the chrome registered for `editor`.\n  const editorUi = useEditorUi(editor)\n  const comments = useComments(editor)\n\n  if (settings.editing.commentsLayout !== 'margin') return <CommentsListMenu editor={editor} />\n\n  // Without comments (the default model needs collaboration) the button is disabled and its tooltip says why.\n  const { available } = comments\n  const active = !!editorUi?.commentsOpen\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <span className=\"inline-flex\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={t('comments.title')}\n            aria-pressed={active}\n            disabled={!editorUi || !available}\n            className={cn(active && 'bg-primary/10 text-primary hover:bg-primary/15 hover:text-primary')}\n            onMouseDown={event => event.preventDefault()}\n            onClick={() => editorUi?.toggleComments()}\n          >\n            <Icon name=\"i-lucide-message-square-text\" />\n          </Button>\n        </span>\n      </TooltipTrigger>\n      <TooltipContent>\n        {available ? t('comments.title') : t('comments.unavailable')}\n        {available && <kbd data-slot=\"kbd\" className=\"rounded-sm bg-background/20 px-1 font-sans\">{SHORTCUT}</kbd>}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,WAAW,GAFH,OAAO,cAAc,eAAe,kBAAkB,KAAK,UAAU,QAAQ,IAE/D,MAAM,OAAO;;;;;;AAOzC,SAAgB,sBAAsB,EAAE,UAA0C;CAChF,MAAM,EAAE,aAAa,kBAAkB;CACvC,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,WAAW,YAAY,MAAM;CACnC,MAAM,WAAW,YAAY,MAAM;CAEnC,IAAI,SAAS,QAAQ,mBAAmB,UAAU,OAAO,oBAAC,kBAAD,EAA0B,OAAS,CAAA;CAG5F,MAAM,EAAE,cAAc;CACtB,MAAM,SAAS,CAAC,CAAC,UAAU;CAC3B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,cAAY,EAAE,gBAAgB;IAC9B,gBAAc;IACd,UAAU,CAAC,YAAY,CAAC;IACxB,WAAW,GAAG,UAAU,mEAAmE;IAC3F,cAAa,UAAS,MAAM,eAAe;IAC3C,eAAe,UAAU,eAAe;IAExC,UAAA,oBAAC,MAAD,EAAM,MAAK,+BAAgC,CAAA;GACrC,CAAA;EACJ,CAAA;CACQ,CAAA,GAChB,qBAAC,gBAAD,EAAA,UAAA,CACG,YAAY,EAAE,gBAAgB,IAAI,EAAE,sBAAsB,GAC1D,aAAa,oBAAC,OAAD;EAAK,aAAU;EAAM,WAAU;EAA8C,UAAA;CAAc,CAAA,CAC3F,EAAA,CAAA,CACT,EAAA,CAAA;AAEb"}

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

@@ -0,0 +1,5 @@
+//#region src/features/comments/react/SettingsCommentsTab.d.ts
+/** „Kommentare“: where the comments of a shared document are shown. */
+export declare function SettingsCommentsTab(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=SettingsCommentsTab.d.ts.map