@defensestation/y-comments-blocknote 1.0.0-dev.84f89ec

package/dist/components/icons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const base = (props) => ({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props,
+});
+export const CommentIcon = (props) => (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }));
+export const CheckIcon = (props) => (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" })] }));
+export const ReopenIcon = (props) => (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7" }), _jsx("path", { d: "M3 4v5h5" })] }));
+export const TrashIcon = (props) => (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3 6h18" }), _jsx("path", { d: "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" }), _jsx("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" })] }));
+export const EditIcon = (props) => (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M17 3a2.8 2.8 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5z" }) }));
+export const EmojiIcon = (props) => (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "12", cy: "12", r: "9" }), _jsx("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }), _jsx("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }), _jsx("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })] }));
+export const CloseIcon = (props) => (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }));

package/dist/context.d.ts

@@ -0,0 +1,47 @@
+import type { Resolution, ResolveUsersFn, Thread, ThreadStore, User } from "@defensestation/y-comments-core";
+import type { BlockNoteEditor } from "@blocknote/core";
+import { type ReactNode } from "react";
+export type AnyBlockNoteEditor = BlockNoteEditor<any, any, any>;
+export interface CommentsContextValue {
+    editor: AnyBlockNoteEditor;
+    store: ThreadStore;
+    docId: string;
+    threads: Thread[];
+    resolutions: Map<string, Resolution>;
+    selectedThreadId: string | null;
+    selectThread: (threadId: string | null) => void;
+    /** Selection captured when the composer was opened; null = closed. */
+    composer: {
+        from: number;
+        to: number;
+    } | null;
+    openComposer: () => void;
+    closeComposer: () => void;
+    users: Map<string, User>;
+    /** Ask the provider to resolve (and cache) these user ids. */
+    requestUsers: (userIds: string[]) => void;
+}
+export declare function useComments(): CommentsContextValue;
+export interface CommentsProviderProps {
+    editor: AnyBlockNoteEditor;
+    store: ThreadStore;
+    /** Document id used against the thread store. */
+    docId: string;
+    /** Lookup for avatars/names, same contract as BlockNote's resolveUsers. */
+    resolveUsers: ResolveUsersFn;
+    /**
+     * Persist fresh anchors after successful re-anchoring. Off by default —
+     * it writes to the store on read. See the README before enabling.
+     */
+    selfHeal?: boolean;
+    children: ReactNode;
+}
+/**
+ * Owns the comment machinery for one editor + document:
+ * installs the decorations plugin into BlockNote's ProseMirror view,
+ * subscribes to the thread store, and exposes everything to the UI
+ * components via context.
+ *
+ * Nothing under this provider ever writes to the Y.Doc.
+ */
+export declare function CommentsProvider(props: CommentsProviderProps): import("react").JSX.Element;

package/dist/context.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { selectThread as pmSelectThread, setPendingRange as pmSetPendingRange, setThreads as pmSetThreads, yCommentsPlugin, yCommentsPluginKey, } from "@defensestation/y-comments-prosemirror";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+const CommentsContext = createContext(null);
+export function useComments() {
+    const ctx = useContext(CommentsContext);
+    if (!ctx) {
+        throw new Error("y-comments: this component must be rendered inside <CommentsProvider>.");
+    }
+    return ctx;
+}
+/**
+ * Owns the comment machinery for one editor + document:
+ * installs the decorations plugin into BlockNote's ProseMirror view,
+ * subscribes to the thread store, and exposes everything to the UI
+ * components via context.
+ *
+ * Nothing under this provider ever writes to the Y.Doc.
+ */
+export function CommentsProvider(props) {
+    const { editor, store, docId, resolveUsers, selfHeal } = props;
+    const [threads, setThreadsState] = useState([]);
+    const [resolutions, setResolutions] = useState(new Map());
+    const [selectedThreadId, setSelectedThreadId] = useState(null);
+    const [composer, setComposer] = useState(null);
+    const [users, setUsers] = useState(new Map());
+    const threadsRef = useRef([]);
+    const pendingUserIds = useRef(new Set());
+    const withView = useCallback((fn) => {
+        try {
+            fn(editor.prosemirrorView);
+        }
+        catch {
+            // editor not mounted yet — callers re-run once it is
+        }
+    }, [editor]);
+    // Install the ProseMirror plugin (unless the host already registered it
+    // as a BlockNote extension) and subscribe to the thread store.
+    useEffect(() => {
+        let disposed = false;
+        let installedByUs = false;
+        let unsubscribe;
+        let retryTimer;
+        const start = () => {
+            if (disposed) {
+                return;
+            }
+            let view;
+            try {
+                view = editor.prosemirrorView;
+            }
+            catch {
+                retryTimer = setTimeout(start, 50); // BlockNoteView not mounted yet
+                return;
+            }
+            if (yCommentsPluginKey.getState(view.state) === undefined) {
+                editor._tiptapEditor.registerPlugin(yCommentsPlugin({
+                    selfHeal,
+                    store,
+                    onThreadSelect: (threadId) => setSelectedThreadId(threadId),
+                    onResolutionsChange: (r) => setResolutions(new Map(r)),
+                }));
+                installedByUs = true;
+            }
+            pmSetThreads(view, threadsRef.current);
+            // Polling stores re-emit unchanged lists; dropping those early keeps
+            // both React and the plugin from re-rendering every poll tick.
+            const serializeThreads = (threads) => JSON.stringify(threads, (_key, value) => value instanceof Uint8Array ? Array.from(value) : value);
+            let lastSerialized = serializeThreads(threadsRef.current);
+            unsubscribe = store.subscribe(docId, (nextThreads) => {
+                if (disposed) {
+                    return;
+                }
+                const serialized = serializeThreads(nextThreads);
+                if (serialized === lastSerialized) {
+                    return;
+                }
+                lastSerialized = serialized;
+                threadsRef.current = nextThreads;
+                setThreadsState(nextThreads);
+                withView((v) => pmSetThreads(v, nextThreads));
+            });
+        };
+        start();
+        return () => {
+            disposed = true;
+            if (retryTimer !== undefined) {
+                clearTimeout(retryTimer);
+            }
+            unsubscribe?.();
+            if (installedByUs) {
+                try {
+                    editor._tiptapEditor.unregisterPlugin(yCommentsPluginKey);
+                }
+                catch {
+                    // view already destroyed
+                }
+            }
+        };
+    }, [editor, store, docId, selfHeal, withView]);
+    const selectThread = useCallback((threadId) => {
+        setSelectedThreadId(threadId);
+        withView((view) => pmSelectThread(view, threadId));
+    }, [withView]);
+    const openComposer = useCallback(() => {
+        try {
+            const { from, to } = editor.prosemirrorState.selection;
+            if (from === to) {
+                return;
+            }
+            setComposer({ from, to });
+            // keep the selection visible while focus moves into the composer
+            withView((view) => pmSetPendingRange(view, { from, to }));
+        }
+        catch {
+            // not mounted
+        }
+    }, [editor, withView]);
+    const closeComposer = useCallback(() => {
+        setComposer(null);
+        withView((view) => pmSetPendingRange(view, null));
+    }, [withView]);
+    const requestUsers = useCallback((userIds) => {
+        const missing = userIds.filter((id) => !pendingUserIds.current.has(id));
+        if (missing.length === 0) {
+            return;
+        }
+        for (const id of missing) {
+            pendingUserIds.current.add(id);
+        }
+        resolveUsers(missing).then((resolved) => {
+            setUsers((prev) => {
+                const next = new Map(prev);
+                for (const user of resolved) {
+                    next.set(user.id, user);
+                }
+                return next;
+            });
+        }, () => {
+            for (const id of missing) {
+                pendingUserIds.current.delete(id); // allow retry
+            }
+        });
+    }, [resolveUsers]);
+    const value = useMemo(() => ({
+        editor,
+        store,
+        docId,
+        threads,
+        resolutions,
+        selectedThreadId,
+        selectThread,
+        composer,
+        openComposer,
+        closeComposer,
+        users,
+        requestUsers,
+    }), [
+        editor,
+        store,
+        docId,
+        threads,
+        resolutions,
+        selectedThreadId,
+        selectThread,
+        composer,
+        openComposer,
+        closeComposer,
+        users,
+        requestUsers,
+    ]);
+    return _jsx(CommentsContext.Provider, { value: value, children: props.children });
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { CommentsProvider, useComments, type CommentsProviderProps, type CommentsContextValue, type AnyBlockNoteEditor, } from "./context.js";
+export { CreateCommentButton } from "./components/CreateCommentButton.js";
+export { FloatingComposer } from "./components/FloatingComposer.js";
+export { FloatingThread } from "./components/FloatingThread.js";
+export { ThreadsSidebar, type ThreadsSidebarProps, type ThreadsFilter } from "./components/ThreadsSidebar.js";
+export { ThreadBody, type ThreadBodyProps } from "./components/ThreadBody.js";
+export { DefaultThreadStoreAuth, AllowAllThreadStoreAuth, InMemoryThreadStore, RestThreadStore, PushThreadStore, OptimisticThreadStore, type PushTransport, type Anchor, type Comment, type CommentBody, type Resolution, type Thread, type ThreadStore, type ThreadStoreAuth, type User, type ResolveUsersFn, } from "@defensestation/y-comments-core";
+export { anchorFromSelection, anchorFromRange, yCommentsPlugin, yCommentsPluginKey, } from "@defensestation/y-comments-prosemirror";

package/dist/index.js

@@ -0,0 +1,9 @@
+export { CommentsProvider, useComments, } from "./context.js";
+export { CreateCommentButton } from "./components/CreateCommentButton.js";
+export { FloatingComposer } from "./components/FloatingComposer.js";
+export { FloatingThread } from "./components/FloatingThread.js";
+export { ThreadsSidebar } from "./components/ThreadsSidebar.js";
+export { ThreadBody } from "./components/ThreadBody.js";
+// Re-exports so hosts only need this package for common flows.
+export { DefaultThreadStoreAuth, AllowAllThreadStoreAuth, InMemoryThreadStore, RestThreadStore, PushThreadStore, OptimisticThreadStore, } from "@defensestation/y-comments-core";
+export { anchorFromSelection, anchorFromRange, yCommentsPlugin, yCommentsPluginKey, } from "@defensestation/y-comments-prosemirror";

package/dist/style.css

@@ -0,0 +1,371 @@
+/* @defensestation/y-comments — themed via BlockNote CSS variables
+   (--bn-colors-*) with standalone fallbacks, so components work both inside
+   and next to a BlockNoteView. Override the --y-comments-* variables to
+   re-skin. */
+
+:root {
+  --y-comments-highlight-bg: rgba(252, 188, 3, 0.35);
+  --y-comments-highlight-active-bg: rgba(252, 188, 3, 0.6);
+  --y-comments-bg: var(--bn-colors-menu-background, #ffffff);
+  --y-comments-text: var(--bn-colors-menu-text, #3f4045);
+  --y-comments-muted: var(--bn-colors-side-menu, #cfcfcf);
+  --y-comments-border: var(--bn-colors-border, #efefef);
+  --y-comments-accent: var(--bn-colors-highlights-blue-background, #307bf6);
+  --y-comments-radius: var(--bn-border-radius, 6px);
+  --y-comments-font: var(
+    --bn-font-family,
+    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif
+  );
+  --y-comments-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
+}
+
+/* Dark theme is opt-in so the comment UI always matches the editor rather
+   than the OS: set data-y-comments-theme="dark" on any ancestor (e.g.
+   <html> or your app root), typically alongside BlockNoteView's
+   theme="dark". */
+[data-y-comments-theme="dark"] {
+  --y-comments-bg: var(--bn-colors-menu-background, #1f1f1f);
+  --y-comments-text: var(--bn-colors-menu-text, #cfcfcf);
+  --y-comments-border: var(--bn-colors-border, #353535);
+  --y-comments-shadow: 0 4px 12px rgb(0 0 0 / 0.5);
+}
+
+/* ---------- editor highlights (decorations) ---------- */
+
+.y-comments-highlight {
+  background: var(--y-comments-highlight-bg);
+  border-bottom: 2px solid var(--y-comments-highlight-active-bg);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.y-comments-highlight.y-comments-active,
+.y-comments-highlight:hover {
+  background: var(--y-comments-highlight-active-bg);
+}
+
+@keyframes y-comments-flash-frames {
+  0%, 60% { background: var(--y-comments-highlight-active-bg); }
+  100% { background: var(--y-comments-highlight-bg); }
+}
+
+.y-comments-flash {
+  animation: y-comments-flash-frames 1.2s ease;
+}
+
+/* Selection being commented on while the composer has focus. */
+.y-comments-pending {
+  background: var(--y-comments-highlight-bg);
+  border-bottom: 2px dashed var(--y-comments-highlight-active-bg);
+}
+
+/* ---------- shared chrome ---------- */
+
+.y-comments-floating,
+.y-comments-sidebar,
+.y-comments-card {
+  font-family: var(--y-comments-font);
+  color: var(--y-comments-text);
+  font-size: 14px;
+}
+
+.y-comments-floating {
+  background: var(--y-comments-bg);
+  border: 1px solid var(--y-comments-border);
+  border-radius: var(--y-comments-radius);
+  box-shadow: var(--y-comments-shadow);
+  padding: 10px;
+  width: 320px;
+  max-height: 420px;
+  overflow-y: auto;
+  z-index: 3000;
+}
+
+.y-comments-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.y-comments-input {
+  font-family: inherit;
+  font-size: 14px;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--y-comments-border);
+  border-radius: var(--y-comments-radius);
+  padding: 6px 8px;
+  resize: vertical;
+  min-height: 32px;
+}
+
+.y-comments-input:focus {
+  outline: none;
+  border-color: var(--y-comments-accent);
+}
+
+.y-comments-composer-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.y-comments-button {
+  font-family: inherit;
+  font-size: 13px;
+  border: 1px solid var(--y-comments-border);
+  background: transparent;
+  color: inherit;
+  border-radius: var(--y-comments-radius);
+  padding: 4px 10px;
+  cursor: pointer;
+}
+
+.y-comments-button-primary {
+  background: var(--y-comments-accent);
+  border-color: var(--y-comments-accent);
+  color: #ffffff;
+}
+
+.y-comments-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.y-comments-icon-button {
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 2px;
+  border-radius: var(--y-comments-radius);
+}
+
+.y-comments-icon-button:hover {
+  opacity: 1;
+  background: var(--y-comments-border);
+}
+
+.y-comments-error {
+  color: #d33131;
+  font-size: 12px;
+}
+
+/* ---------- thread & comments ---------- */
+
+.y-comments-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Long threads scroll in the middle; header, quote and reply box stay put. */
+.y-comments-comments {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  max-height: var(--y-comments-thread-max-height, 280px);
+  overscroll-behavior: contain;
+}
+
+.y-comments-thread-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 20px;
+}
+
+.y-comments-thread-header-spacer {
+  flex: 1;
+}
+
+.y-comments-badge {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--y-comments-highlight-bg);
+}
+
+.y-comments-badge-resolved {
+  background: rgba(48, 209, 88, 0.25);
+}
+
+.y-comments-quote {
+  margin: 0;
+  padding: 2px 8px;
+  border-left: 3px solid var(--y-comments-highlight-active-bg);
+  color: inherit;
+  opacity: 0.75;
+  font-style: italic;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.y-comments-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.y-comments-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex: none;
+}
+
+.y-comments-avatar-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--y-comments-accent);
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.y-comments-username {
+  font-weight: 600;
+}
+
+.y-comments-timestamp {
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.y-comments-comment-actions {
+  margin-left: auto;
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.y-comments-comment:hover .y-comments-comment-actions {
+  opacity: 1;
+}
+
+.y-comments-comment-body {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding-left: 26px;
+}
+
+.y-comments-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-left: 26px;
+  align-items: center;
+}
+
+.y-comments-reaction {
+  font-family: inherit;
+  font-size: 12px;
+  border: 1px solid var(--y-comments-border);
+  background: transparent;
+  color: inherit;
+  border-radius: 999px;
+  padding: 1px 8px;
+  cursor: pointer;
+}
+
+.y-comments-reaction-mine {
+  border-color: var(--y-comments-accent);
+  background: color-mix(in srgb, var(--y-comments-accent) 12%, transparent);
+}
+
+.y-comments-reaction-picker-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.y-comments-reaction-picker {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 0;
+  display: flex;
+  gap: 2px;
+  padding: 4px;
+  background: var(--y-comments-bg);
+  border: 1px solid var(--y-comments-border);
+  border-radius: var(--y-comments-radius);
+  box-shadow: var(--y-comments-shadow);
+  z-index: 1;
+}
+
+/* ---------- sidebar ---------- */
+
+.y-comments-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 280px;
+}
+
+.y-comments-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.y-comments-sidebar-title {
+  font-weight: 700;
+}
+
+.y-comments-filter {
+  display: inline-flex;
+  border: 1px solid var(--y-comments-border);
+  border-radius: var(--y-comments-radius);
+  overflow: hidden;
+}
+
+.y-comments-filter-button {
+  font-family: inherit;
+  font-size: 12px;
+  padding: 3px 10px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.y-comments-filter-button-active {
+  background: var(--y-comments-accent);
+  color: #ffffff;
+}
+
+.y-comments-card {
+  background: var(--y-comments-bg);
+  border: 1px solid var(--y-comments-border);
+  border-radius: var(--y-comments-radius);
+  padding: 10px;
+  cursor: pointer;
+}
+
+.y-comments-card-selected {
+  border-color: var(--y-comments-accent);
+}
+
+.y-comments-group-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.6;
+  margin-top: 6px;
+}
+
+.y-comments-empty {
+  opacity: 0.6;
+  font-style: italic;
+}

package/dist/time.d.ts

@@ -0,0 +1,2 @@
+/** "just now", "5m", "3h", "2d", then a locale date — GitHub-style. */
+export declare function relativeTime(iso: string, now?: Date): string;

package/dist/time.js

@@ -0,0 +1,18 @@
+/** "just now", "5m", "3h", "2d", then a locale date — GitHub-style. */
+export function relativeTime(iso, now = new Date()) {
+    const then = new Date(iso);
+    const seconds = Math.max(0, (now.getTime() - then.getTime()) / 1000);
+    if (seconds < 60) {
+        return "just now";
+    }
+    if (seconds < 3600) {
+        return `${Math.floor(seconds / 60)}m`;
+    }
+    if (seconds < 86400) {
+        return `${Math.floor(seconds / 3600)}h`;
+    }
+    if (seconds < 86400 * 7) {
+        return `${Math.floor(seconds / 86400)}d`;
+    }
+    return then.toLocaleDateString();
+}