From 4c9c4357043458879ebb511381f07bb9ebb3b0d0 Mon Sep 17 00:00:00 2001
From: "priyanshu.c" <priyanshu.c@juspay.in>
Date: Tue, 17 Mar 2026 14:34:21 +0530
Subject: [PATCH 1/5] feature: chnages for canvas commenting

---
 lib/block-reactions/BlockReactionButton.tsx   | 587 ++++++++++++++++++
 lib/block-reactions/block-reaction-button.css | 147 +++++
 lib/block-reactions/main.ts                   |   2 +
 lib/main.ts                                   |   9 +
 4 files changed, 745 insertions(+)
 create mode 100644 lib/block-reactions/BlockReactionButton.tsx
 create mode 100644 lib/block-reactions/block-reaction-button.css
 create mode 100644 lib/block-reactions/main.ts

diff --git a/lib/block-reactions/BlockReactionButton.tsx b/lib/block-reactions/BlockReactionButton.tsx
new file mode 100644
index 0000000..e8732a7
--- /dev/null
+++ b/lib/block-reactions/BlockReactionButton.tsx
@@ -0,0 +1,587 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import type { BlockNoteEditor } from '@blocknote/core';
+import EmojiPicker, { EmojiStyle } from 'emoji-picker-react';
+import * as Popover from '@radix-ui/react-popover';
+import type { EmojiClickData } from 'emoji-picker-react';
+import { SmilePlus, MessageCircle } from 'lucide-react';
+import './block-reaction-button.css';
+
+// Utility function to combine class names
+const cn = (...classes: (string | undefined | null | false)[]): string => {
+  return classes.filter(Boolean).join(' ');
+};
+
+// Button component using basic HTML
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string }
+>(({ className, variant, ...props }, ref) => {
+  const variants: Record<string, string> = {
+    ghost: 'bg-transparent hover:bg-transparent text-muted-foreground',
+    default: 'bg-primary text-primary-foreground',
+  };
+  
+  return (
+    <button
+      ref={ref}
+      className={cn(variants[variant || 'default'], className)}
+      {...props}
+    />
+  );
+});
+Button.displayName = 'Button';
+
+export interface BlockReactionButtonProps {
+  editor: BlockNoteEditor<any, any, any>;
+  blockReactions: Record<string, Record<string, string[]>>; // blockId -> emoji -> userIds[]
+  commentCounts: Record<string, number>; // blockId -> count
+  blockThreads?: Record<string, Array<{ threadId: string; threadData: any; commentCount: number }>>; // blockId -> threads
+  onAddReaction: (blockId: string, emoji: string) => void;
+  onRemoveReaction: (blockId: string, emoji: string) => void;
+  onCommentClick: (blockId: string) => void;
+  onThreadClick?: (blockId: string, threadId: string) => void;
+  isCommentPanelOpen?: boolean;
+  user?: any; // Optional user object with id property
+}
+
+export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
+  editor: _editor,
+  blockReactions,
+  commentCounts,
+  blockThreads,
+  onAddReaction,
+  onRemoveReaction,
+  onCommentClick,
+  onThreadClick,
+  isCommentPanelOpen,
+  user,
+}) => {
+  const [hoveredBlockId, setHoveredBlockId] = useState<string | null>(null);
+  const [isHoveringButton, setIsHoveringButton] = useState(false);
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState<string | null>(null);
+  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
+
+  // Blocks with reactions or comments (show persistent buttons)
+  const blocksWithActivity = useMemo(() => {
+    const set = new Set<string>();
+    // Blocks with reactions
+    Object.keys(blockReactions || {}).forEach(blockId => {
+      if (blockReactions[blockId] && Object.keys(blockReactions[blockId]).length > 0) {
+        set.add(blockId);
+      }
+    });
+    // Blocks with comments
+    Object.entries(commentCounts).forEach(([blockId, count]) => {
+      if (count > 0) {
+        set.add(blockId);
+      }
+    });
+    return Array.from(set);
+  }, [blockReactions, commentCounts]);
+
+  const clearHideTimeout = useCallback(() => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  }, []);
+
+  const scheduleHide = useCallback(() => {
+    clearHideTimeout();
+    hideTimeoutRef.current = setTimeout(() => {
+      setHoveredBlockId(null);
+      setIsHoveringButton(false);
+      setEmojiPickerOpen(null);
+    }, 150);
+  }, [clearHideTimeout]);
+
+  // Close emoji picker when hovered block changes
+  useEffect(() => {
+    setEmojiPickerOpen(null);
+  }, [hoveredBlockId]);
+
+  // Track mouse movement for hover detection
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+
+      // Check if hovering over button or picker
+      if (buttonRef.current && buttonRef.current.contains(target)) {
+        clearHideTimeout();
+        setIsHoveringButton(true);
+        return;
+      }
+
+      const pickerElement = document.querySelector('[class*="emoji-picker"]');
+      if (pickerElement && pickerElement.contains(target)) {
+        clearHideTimeout();
+        return;
+      }
+
+      // Check if hovering over block
+      const blockElement = target.closest('.bn-block') as HTMLElement | null;
+      if (blockElement) {
+        const blockId = blockElement.getAttribute('data-id');
+        // Only set hover if block has no activity (reactions or comments)
+        // Persistent buttons handle blocks with activity
+        if (blockId && blockId !== hoveredBlockId && !blocksWithActivity.includes(blockId)) {
+          clearHideTimeout();
+          setHoveredBlockId(blockId);
+        }
+      } else {
+        if (!isHoveringButton && !emojiPickerOpen) {
+          scheduleHide();
+        }
+      }
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [isHoveringButton, emojiPickerOpen, clearHideTimeout, scheduleHide, hoveredBlockId, blocksWithActivity]);
+
+  const handleToggleReaction = useCallback(
+    (blockId: string, emoji: string) => {
+      if (user?.id) {
+        const reactions = blockReactions[blockId] || {};
+        const userIds = reactions[emoji] || [];
+        const hasReacted = userIds.includes(user.id);
+
+        if (hasReacted) {
+          onRemoveReaction(blockId, emoji);
+        } else {
+          onAddReaction(blockId, emoji);
+        }
+      }
+      setEmojiPickerOpen(null);
+    },
+    [blockReactions, user?.id, onAddReaction, onRemoveReaction],
+  );
+
+  return (
+    <>
+      {/* Persistent activity buttons for blocks with reactions/comments */}
+      {blocksWithActivity.map(blockId => {
+        const blockReactionData = blockReactions[blockId] || {};
+        const commentCount = commentCounts[blockId] || 0;
+        const reactionEmojis = Object.keys(blockReactionData);
+
+        return (
+          <PersistentActivityButton
+            key={blockId}
+            blockId={blockId}
+            reactionEmojis={reactionEmojis}
+            reactions={blockReactionData}
+            commentCount={commentCount}
+            user={user}
+            onToggleReaction={(emoji) => handleToggleReaction(blockId, emoji)}
+            onCommentClick={() => onCommentClick(blockId)}
+            threads={blockThreads?.[blockId] || []}
+            onThreadClick={onThreadClick}
+            emojiPickerOpen={emojiPickerOpen === blockId}
+            onEmojiPickerOpenChange={(open) => {
+              setEmojiPickerOpen(open ? blockId : null);
+              if (open) clearHideTimeout();
+            }}
+            isCommentPanelOpen={isCommentPanelOpen}
+          />
+        );
+      })}
+
+      {/* Hover buttons for blocks without activity */}
+      {hoveredBlockId && !blocksWithActivity.includes(hoveredBlockId) && (
+        <HoverActivityButton
+          blockId={hoveredBlockId}
+          onReactionButtonHover={() => {
+            clearHideTimeout();
+            setIsHoveringButton(true);
+          }}
+          onReactionButtonLeave={() => {
+            setIsHoveringButton(false);
+            scheduleHide();
+          }}
+          onEmojiSelect={(emoji) => {
+            handleToggleReaction(hoveredBlockId, emoji);
+          }}
+          onCommentClick={() => onCommentClick(hoveredBlockId)}
+          emojiPickerOpen={emojiPickerOpen === hoveredBlockId}
+          onEmojiPickerOpenChange={(open) => {
+            setEmojiPickerOpen(open ? hoveredBlockId : null);
+            if (open) clearHideTimeout();
+          }}
+          isCommentPanelOpen={isCommentPanelOpen}
+          ref={buttonRef}
+        />
+      )}
+    </>
+  );
+};
+
+// Persistent button showing reactions and comments with counts
+interface PersistentActivityButtonProps {
+  blockId: string;
+  reactionEmojis: string[];
+  reactions: Record<string, string[]>; // emoji -> userIds[]
+  commentCount: number;
+  threads?: Array<{ threadId: string; threadData: any; commentCount: number }>;
+  user: any;
+  onToggleReaction: (emoji: string) => void;
+  onCommentClick: () => void;
+  onThreadClick?: ((blockId: string, threadId: string) => void) | undefined;
+  emojiPickerOpen: boolean;
+  onEmojiPickerOpenChange: (open: boolean) => void;
+  isCommentPanelOpen?: boolean | undefined;
+}
+
+const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
+  blockId,
+  reactionEmojis,
+  reactions,
+  commentCount,
+  threads = [],
+  user,
+  onToggleReaction,
+  onCommentClick,
+  onThreadClick,
+  emojiPickerOpen,
+  onEmojiPickerOpenChange,
+  isCommentPanelOpen,
+}) => {
+  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [threadsPopoverOpen, setThreadsPopoverOpen] = useState(false);
+
+  useEffect(() => {
+    const updatePosition = () => {
+      const blockElement = document.querySelector(`[data-id="${blockId}"]`) as HTMLElement | null;
+      if (blockElement) {
+        const rect = blockElement.getBoundingClientRect();
+        const buttonHeight = 36;
+        const padding = 12;
+
+        // Always position to the right of the block
+        let left = rect.right + padding;
+
+        // Center vertically relative to block
+        let top = rect.top + rect.height / 2 - buttonHeight / 2;
+
+        // Check bottom bounds
+        if (top + buttonHeight > window.innerHeight) {
+          top = window.innerHeight - buttonHeight - padding;
+        }
+        // Check top bounds
+        if (top < 0) {
+          top = padding;
+        }
+
+        setPosition({ top, left });
+      }
+    };
+
+    // Initial update
+    updatePosition();
+
+    // When panel state changes, we need multiple updates during the CSS transition
+    // slideIn is 0.2s, slideOut is 0.3s - update several times during this period
+    const transitionTimeouts: NodeJS.Timeout[] = [];
+    if (isCommentPanelOpen !== undefined) {
+      [50, 150, 300, 400].forEach(delay => {
+        transitionTimeouts.push(setTimeout(updatePosition, delay));
+      });
+    }
+
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    // Only update position periodically if emoji picker is not open
+    const interval = setInterval(() => {
+      if (!emojiPickerOpen) {
+        updatePosition();
+      }
+    }, 100);
+
+    return () => {
+      transitionTimeouts.forEach(clearTimeout);
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+      clearInterval(interval);
+    };
+  }, [blockId, isCommentPanelOpen, emojiPickerOpen]);
+
+  if (!position) return null;
+
+  const hasReactions = reactionEmojis.length > 0;
+  const hasComments = commentCount > 0;
+
+  return createPortal(
+    <div
+      className='bn-block-activity-button'
+      style={{
+        position: 'fixed',
+        top: position.top,
+        left: position.left,
+        zIndex: 999,
+      }}
+    >
+      {/* Reactions */}
+      {hasReactions &&
+        reactionEmojis.map(emoji => {
+          const userIds = reactions[emoji] || [];
+          const hasUserReacted = user?.id ? userIds.includes(user.id) : false;
+
+          return (
+            <button
+              key={emoji}
+              className={cn(
+                'bn-activity-btn bn-reaction-btn-with-count',
+                hasUserReacted && 'bn-activity-btn--active',
+              )}
+              onClick={() => onToggleReaction(emoji)}
+              title={`${userIds.length} reaction${userIds.length > 1 ? 's' : ''}`}
+              type='button'
+            >
+              <span className='emoji'>{emoji}</span>
+              {userIds.length > 0 && <span className='count'>{userIds.length}</span>}
+            </button>
+          );
+        })}
+
+      {/* Comments - only show if no reactions (mutually exclusive) */}
+      {hasComments && !hasReactions && threads && threads.length > 1 ? (
+        // Multiple threads: show popover with list
+        <Popover.Root open={threadsPopoverOpen} onOpenChange={setThreadsPopoverOpen}>
+          <Popover.Trigger asChild>
+            <button
+              className='bn-activity-btn bn-comment-btn-with-count'
+              onClick={(e) => e.stopPropagation()}
+              title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+              type='button'
+            >
+              <MessageCircle className='w-4 h-4' />
+              {commentCount > 0 && <span className='count'>{commentCount}</span>}
+            </button>
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              className='z-[1000] bg-popover rounded-lg shadow-md p-1'
+              align='start'
+              side='bottom'
+              sideOffset={8}
+              style={{ width: '120px' }}
+            >
+              <div className='bn-threads-list'>
+                {threads.map((thread) => (
+                  <button
+                    key={thread.threadId}
+                    className='bn-thread-item'
+                    onClick={() => {
+                      onThreadClick?.(blockId, thread.threadId);
+                      setThreadsPopoverOpen(false);
+                    }}
+                    type='button'
+                    title={`${thread.commentCount} comment${thread.commentCount > 1 ? 's' : ''}`}
+                  >
+                    <MessageCircle className='w-3 h-3 flex-shrink-0' />
+                    <span className='bn-thread-count'>{thread.commentCount}</span>
+                  </button>
+                ))}
+              </div>
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+      ) : hasComments && !hasReactions ? (
+        // Single thread: open directly
+        <button
+          className='bn-activity-btn bn-comment-btn-with-count'
+          onClick={onCommentClick}
+          title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+          type='button'
+        >
+          <MessageCircle className='w-4 h-4' />
+          {commentCount > 0 && <span className='count'>{commentCount}</span>}
+        </button>
+      ) : null}
+
+      {/* Add reaction button - only show if no comments (mutually exclusive) */}
+      {!hasComments && (
+        <Popover.Root open={emojiPickerOpen} onOpenChange={onEmojiPickerOpenChange}>
+          <Popover.Trigger asChild>
+            <Button
+              variant='ghost'
+              className='size-8 text-muted-foreground p-0'
+              title='Add reaction'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <SmilePlus className='w-4 h-4' />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              className='z-[1000] bg-popover rounded-lg shadow-md p-0'
+              align='start'
+              side='bottom'
+              sideOffset={8}
+            >
+              <EmojiPicker
+                style={{ width: '320px' }}
+                emojiStyle={EmojiStyle.NATIVE}
+                onEmojiClick={(emoji: EmojiClickData) => {
+                  const emojiName = emoji.isCustom
+                    ? `custom:${emoji.emoji}:${emoji.names[0] || 'custom'}`
+                    : emoji.emoji;
+                  onToggleReaction(emojiName);
+                }}
+                searchPlaceholder='Search emoji...'
+              />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+      )}
+    </div>,
+    document.body,
+  );
+};
+
+// Hover buttons for blocks without activity
+interface HoverActivityButtonProps {
+  blockId: string;
+  onReactionButtonHover: () => void;
+  onReactionButtonLeave: () => void;
+  onEmojiSelect: (emoji: string) => void;
+  onCommentClick: () => void;
+  emojiPickerOpen: boolean;
+  onEmojiPickerOpenChange: (open: boolean) => void;
+  isCommentPanelOpen?: boolean | undefined;
+}
+
+const HoverActivityButton = React.forwardRef<HTMLDivElement, HoverActivityButtonProps>(
+  (
+    {
+      blockId,
+      onReactionButtonHover,
+      onReactionButtonLeave,
+      onEmojiSelect,
+      onCommentClick,
+      emojiPickerOpen,
+      onEmojiPickerOpenChange,
+      isCommentPanelOpen,
+    },
+    ref,
+  ) => {
+    const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+
+    useEffect(() => {
+      const updatePosition = () => {
+        const blockElement = document.querySelector(`[data-id="${blockId}"]`) as HTMLElement | null;
+        if (blockElement) {
+          const rect = blockElement.getBoundingClientRect();
+          const buttonHeight = 36;
+          const padding = 12;
+
+          // Always position to the right of the block
+          let left = rect.right + padding;
+
+          // Center vertically relative to block
+          let top = rect.top + rect.height / 2 - buttonHeight / 2;
+
+          setPosition({ top, left });
+        }
+      };
+
+      // Initial update
+      updatePosition();
+
+      // When panel state changes, we need multiple updates during the CSS transition
+      // slideIn is 0.2s, slideOut is 0.3s - update several times during this period
+      const transitionTimeouts: NodeJS.Timeout[] = [];
+      if (isCommentPanelOpen !== undefined) {
+        [50, 150, 300, 400].forEach(delay => {
+          transitionTimeouts.push(setTimeout(updatePosition, delay));
+        });
+      }
+
+      window.addEventListener('scroll', updatePosition, true);
+      window.addEventListener('resize', updatePosition);
+
+      // Only update position periodically if emoji picker is not open
+      const interval = setInterval(() => {
+        if (!emojiPickerOpen) {
+          updatePosition();
+        }
+      }, 100);
+
+      return () => {
+        transitionTimeouts.forEach(clearTimeout);
+        window.removeEventListener('scroll', updatePosition, true);
+        window.removeEventListener('resize', updatePosition);
+        clearInterval(interval);
+      };
+    }, [blockId, isCommentPanelOpen, emojiPickerOpen]);
+
+    if (!position) return null;
+
+    return createPortal(
+      <div
+        ref={ref}
+        className='bn-block-hover-buttons'
+        style={{
+          position: 'fixed',
+          top: position.top,
+          left: position.left,
+          zIndex: 999,
+        }}
+        onMouseEnter={onReactionButtonHover}
+        onMouseLeave={onReactionButtonLeave}
+      >
+        {/* Reaction button with emoji picker */}
+        <Popover.Root open={emojiPickerOpen} onOpenChange={onEmojiPickerOpenChange}>
+          <Popover.Trigger asChild>
+            <Button
+              variant='ghost'
+              className='size-8 text-muted-foreground p-0'
+              title='Add reaction'
+              onClick={(e) => e.stopPropagation()}
+            >
+              <SmilePlus className='w-4 h-4' />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              className='z-[1000] bg-popover rounded-lg shadow-md p-0'
+              align='start'
+              side='bottom'
+              sideOffset={8}
+            >
+              <EmojiPicker
+                style={{ width: '320px' }}
+                emojiStyle={EmojiStyle.NATIVE}
+                onEmojiClick={(emoji: EmojiClickData) => {
+                  const emojiName = emoji.isCustom
+                    ? `custom:${emoji.emoji}:${emoji.names[0] || 'custom'}`
+                    : emoji.emoji;
+                  onEmojiSelect(emojiName);
+                }}
+                searchPlaceholder='Search emoji...'
+              />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+
+        {/* Comment button */}
+        <Button
+          variant='ghost'
+          className='size-8 text-muted-foreground p-0'
+          title='Add comment'
+          onClick={onCommentClick}
+        >
+          <MessageCircle className='w-4 h-4' />
+        </Button>
+      </div>,
+      document.body,
+    );
+  },
+);
+
+HoverActivityButton.displayName = 'HoverActivityButton';
diff --git a/lib/block-reactions/block-reaction-button.css b/lib/block-reactions/block-reaction-button.css
new file mode 100644
index 0000000..afa8f75
--- /dev/null
+++ b/lib/block-reactions/block-reaction-button.css
@@ -0,0 +1,147 @@
+.bn-block-activity-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 2px 4px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.bn-block-hover-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 2px 4px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  box-shadow: none;
+}
+
+.bn-activity-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 2px 4px;
+  min-width: 28px;
+  height: 24px;
+  border-radius: 4px;
+  background: transparent;
+  border: none;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.bn-activity-btn:hover {
+  background: transparent;
+  color: #6b7280;
+  transform: scale(1.05);
+}
+
+/* Reactions have border and background when active (user has reacted) */
+.bn-reaction-btn-with-count {
+  border: 1px solid transparent;
+}
+
+.bn-reaction-btn-with-count.bn-activity-btn--active {
+  background: #f0f9ff;
+  border: 1px solid #3b82f6;
+  color: #3b82f6;
+}
+
+.bn-reaction-btn-with-count.bn-activity-btn--active:hover {
+  background: #e0f2fe;
+  border-color: #0284c7;
+  color: #0284c7;
+}
+
+.bn-activity-btn:active {
+  transform: scale(0.95);
+}
+
+.bn-activity-btn--active {
+  background: #f0f9ff;
+  border: 1px solid #3b82f6;
+  color: #3b82f6;
+}
+
+.bn-activity-btn--active:hover {
+  background: #e0f2fe;
+  border-color: #0284c7;
+  color: #0284c7;
+}
+
+.bn-activity-btn .emoji {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.bn-activity-btn .count {
+  font-size: 12px;
+  font-weight: 500;
+  min-width: 14px;
+  color: #9ca3af;
+  padding: 0;
+  line-height: 1;
+}
+
+.bn-reaction-btn-with-count {
+  flex-shrink: 0;
+}
+
+.bn-comment-btn-with-count {
+  flex-shrink: 0;
+}
+
+/* Threads list popover */
+.bn-threads-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 100px;
+  max-width: 120px;
+}
+
+.bn-thread-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 8px;
+  text-align: center;
+  border: none;
+  border-radius: 3px;
+  background: #f9fafb;
+  color: #374151;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.15s ease;
+}
+
+.bn-thread-item:hover {
+  background: #f3f4f6;
+  color: #1f2937;
+}
+
+.bn-thread-count {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 3px;
+  background: #dbeafe;
+  color: #1e40af;
+  border-radius: 8px;
+  font-size: 10px;
+  font-weight: 600;
+}
diff --git a/lib/block-reactions/main.ts b/lib/block-reactions/main.ts
new file mode 100644
index 0000000..b739e4a
--- /dev/null
+++ b/lib/block-reactions/main.ts
@@ -0,0 +1,2 @@
+export { BlockReactionButton } from './BlockReactionButton';
+export type { BlockReactionButtonProps } from './BlockReactionButton';
diff --git a/lib/main.ts b/lib/main.ts
index d7d5812..2f3d9b8 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -101,6 +101,15 @@ export {
     insertGroupMention,
 } from "./mentions/main.js";
 
+// Block reactions exports
+export {
+    BlockReactionButton,
+} from "./block-reactions/main.js";
+
+export type {
+    BlockReactionButtonProps,
+} from "./block-reactions/main.js";
+
 // Common utilities exports
 export {
     asBlockNoteEditorForView,

From b0aa5eaa29fe8d9c99fb0a2b0da948f5d8360468 Mon Sep 17 00:00:00 2001
From: "priyanshu.c" <priyanshu.c@juspay.in>
Date: Wed, 18 Mar 2026 10:50:25 +0530
Subject: [PATCH 2/5] feature: changes in ui

---
 lib/block-reactions/BlockReactionButton.tsx | 327 ++++++++++++--------
 1 file changed, 205 insertions(+), 122 deletions(-)

diff --git a/lib/block-reactions/BlockReactionButton.tsx b/lib/block-reactions/BlockReactionButton.tsx
index e8732a7..d7bb367 100644
--- a/lib/block-reactions/BlockReactionButton.tsx
+++ b/lib/block-reactions/BlockReactionButton.tsx
@@ -43,6 +43,8 @@ export interface BlockReactionButtonProps {
   onThreadClick?: (blockId: string, threadId: string) => void;
   isCommentPanelOpen?: boolean;
   user?: any; // Optional user object with id property
+  users?: Array<{ id: string; name: string }> | undefined; // Users list for tooltip display
+  TooltipComponent?: React.ComponentType<{ content: string; side?: 'top'; delayDuration?: number; children: React.ReactNode }>;
 }
 
 export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
@@ -56,6 +58,8 @@ export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
   onThreadClick,
   isCommentPanelOpen,
   user,
+  users,
+  TooltipComponent,
 }) => {
   const [hoveredBlockId, setHoveredBlockId] = useState<string | null>(null);
   const [isHoveringButton, setIsHoveringButton] = useState(false);
@@ -177,16 +181,12 @@ export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
             reactions={blockReactionData}
             commentCount={commentCount}
             user={user}
-            onToggleReaction={(emoji) => handleToggleReaction(blockId, emoji)}
             onCommentClick={() => onCommentClick(blockId)}
             threads={blockThreads?.[blockId] || []}
             onThreadClick={onThreadClick}
-            emojiPickerOpen={emojiPickerOpen === blockId}
-            onEmojiPickerOpenChange={(open) => {
-              setEmojiPickerOpen(open ? blockId : null);
-              if (open) clearHideTimeout();
-            }}
             isCommentPanelOpen={isCommentPanelOpen}
+            users={users}
+            TooltipComponent={TooltipComponent}
           />
         );
       })}
@@ -213,6 +213,7 @@ export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
             if (open) clearHideTimeout();
           }}
           isCommentPanelOpen={isCommentPanelOpen}
+          TooltipComponent={TooltipComponent}
           ref={buttonRef}
         />
       )}
@@ -220,6 +221,61 @@ export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
   );
 };
 
+// Simple reaction display showing all emojis used and total count
+interface ReactionButtonsProps {
+  reactionEmojis: string[];
+  reactions: Record<string, string[]>;
+  usersById: Map<string, { name: string }>;
+  TooltipComponent?: React.ComponentType<{ content: string; side?: 'top'; delayDuration?: number; children: React.ReactNode }>;
+}
+
+const ReactionButtons: React.FC<ReactionButtonsProps> = React.memo(({
+  reactionEmojis,
+  reactions,
+  usersById,
+  TooltipComponent,
+}) => {
+  // Calculate total reaction count
+  let totalCount = 0;
+  const allUserIds = new Set<string>();
+
+  reactionEmojis.forEach(emoji => {
+    const userIds = reactions[emoji] || [];
+    totalCount += userIds.length;
+    userIds.forEach(id => allUserIds.add(id));
+  });
+
+  // Build tooltip with all user names
+  const userNames = Array.from(allUserIds).map(id => usersById.get(id)?.name || 'Unknown').join(', ');
+  const verb = allUserIds.size === 1 ? 'has' : 'have';
+  const tooltipTitle = `${userNames} ${verb} reacted`;
+
+  const display = (
+    <div
+      className='bn-activity-btn bn-reaction-btn-with-count'
+      style={{ cursor: 'default' }}
+    >
+      {reactionEmojis.map(emoji => (
+        <span key={emoji} className='emoji' style={{ marginRight: '2px' }}>{emoji}</span>
+      ))}
+      {totalCount > 0 && <span className='count'>{totalCount}</span>}
+    </div>
+  );
+
+  // Use custom Tooltip component if provided, otherwise use native title
+  if (TooltipComponent) {
+    return (
+      <TooltipComponent content={tooltipTitle} side="top" delayDuration={100}>
+        {display}
+      </TooltipComponent>
+    );
+  }
+
+  return React.cloneElement(display, { title: tooltipTitle });
+});
+
+ReactionButtons.displayName = 'ReactionButtons';
+
 // Persistent button showing reactions and comments with counts
 interface PersistentActivityButtonProps {
   blockId: string;
@@ -228,12 +284,11 @@ interface PersistentActivityButtonProps {
   commentCount: number;
   threads?: Array<{ threadId: string; threadData: any; commentCount: number }>;
   user: any;
-  onToggleReaction: (emoji: string) => void;
   onCommentClick: () => void;
   onThreadClick?: ((blockId: string, threadId: string) => void) | undefined;
-  emojiPickerOpen: boolean;
-  onEmojiPickerOpenChange: (open: boolean) => void;
   isCommentPanelOpen?: boolean | undefined;
+  users?: Array<{ id: string; name: string }> | undefined;
+  TooltipComponent?: React.ComponentType<{ content: string; side?: 'top'; delayDuration?: number; children: React.ReactNode }>;
 }
 
 const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
@@ -242,17 +297,25 @@ const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
   reactions,
   commentCount,
   threads = [],
-  user,
-  onToggleReaction,
+  user: _user,
   onCommentClick,
   onThreadClick,
-  emojiPickerOpen,
-  onEmojiPickerOpenChange,
   isCommentPanelOpen,
+  users,
+  TooltipComponent,
 }) => {
   const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
   const [threadsPopoverOpen, setThreadsPopoverOpen] = useState(false);
 
+  const usersById = useMemo(() => {
+    const map = new Map<string, { name: string }>();
+    for (const u of users || []) {
+      map.set(u.id, { name: u.name });
+    }
+    return map;
+  }, [users]);
+
+
   useEffect(() => {
     const updatePosition = () => {
       const blockElement = document.querySelector(`[data-id="${blockId}"]`) as HTMLElement | null;
@@ -261,19 +324,26 @@ const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
         const buttonHeight = 36;
         const padding = 12;
 
+        // Check if block is visible in viewport
+        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
+
+        if (!isVisible) {
+          // Hide button when block is out of view
+          setPosition(null);
+          return;
+        }
+
         // Always position to the right of the block
         let left = rect.right + padding;
 
         // Center vertically relative to block
         let top = rect.top + rect.height / 2 - buttonHeight / 2;
 
-        // Check bottom bounds
-        if (top + buttonHeight > window.innerHeight) {
-          top = window.innerHeight - buttonHeight - padding;
-        }
-        // Check top bounds
-        if (top < 0) {
-          top = padding;
+        const margin = 100; // Hide when within 100px of viewport edge
+
+        if (rect.top < margin || rect.bottom > window.innerHeight - margin) {
+          setPosition(null);
+          return;
         }
 
         setPosition({ top, left });
@@ -292,23 +362,32 @@ const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
       });
     }
 
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
+    // Use requestAnimationFrame for smooth updates during scroll
+    let rafId: number | null = null;
+    let lastUpdate = 0;
+    const throttledUpdate = () => {
+      const now = Date.now();
+      if (now - lastUpdate < 16) return; // Max ~60fps
+      lastUpdate = now;
 
-    // Only update position periodically if emoji picker is not open
-    const interval = setInterval(() => {
-      if (!emojiPickerOpen) {
-        updatePosition();
-      }
-    }, 100);
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(updatePosition);
+    };
+
+    window.addEventListener('scroll', throttledUpdate, { capture: true, passive: true });
+    window.addEventListener('resize', updatePosition, { passive: true });
+
+    // Also update periodically as a fallback
+    const interval = setInterval(updatePosition, 50);
 
     return () => {
       transitionTimeouts.forEach(clearTimeout);
       window.removeEventListener('scroll', updatePosition, true);
       window.removeEventListener('resize', updatePosition);
+      if (rafId) cancelAnimationFrame(rafId);
       clearInterval(interval);
     };
-  }, [blockId, isCommentPanelOpen, emojiPickerOpen]);
+  }, [blockId, isCommentPanelOpen]);
 
   if (!position) return null;
 
@@ -325,43 +404,43 @@ const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
         zIndex: 999,
       }}
     >
-      {/* Reactions */}
-      {hasReactions &&
-        reactionEmojis.map(emoji => {
-          const userIds = reactions[emoji] || [];
-          const hasUserReacted = user?.id ? userIds.includes(user.id) : false;
-
-          return (
-            <button
-              key={emoji}
-              className={cn(
-                'bn-activity-btn bn-reaction-btn-with-count',
-                hasUserReacted && 'bn-activity-btn--active',
-              )}
-              onClick={() => onToggleReaction(emoji)}
-              title={`${userIds.length} reaction${userIds.length > 1 ? 's' : ''}`}
-              type='button'
-            >
-              <span className='emoji'>{emoji}</span>
-              {userIds.length > 0 && <span className='count'>{userIds.length}</span>}
-            </button>
-          );
-        })}
+      {/* Reactions - display only, click on markText to interact */}
+      {hasReactions && (
+        <ReactionButtons
+          reactionEmojis={reactionEmojis}
+          reactions={reactions}
+          usersById={usersById}
+          TooltipComponent={TooltipComponent}
+        />
+      )}
 
       {/* Comments - only show if no reactions (mutually exclusive) */}
       {hasComments && !hasReactions && threads && threads.length > 1 ? (
         // Multiple threads: show popover with list
         <Popover.Root open={threadsPopoverOpen} onOpenChange={setThreadsPopoverOpen}>
           <Popover.Trigger asChild>
-            <button
-              className='bn-activity-btn bn-comment-btn-with-count'
-              onClick={(e) => e.stopPropagation()}
-              title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
-              type='button'
-            >
-              <MessageCircle className='w-4 h-4' />
-              {commentCount > 0 && <span className='count'>{commentCount}</span>}
-            </button>
+            {TooltipComponent ? (
+              <TooltipComponent content={`${commentCount} comment${commentCount > 1 ? 's' : ''}`} side='top' delayDuration={100}>
+                <button
+                  className='bn-activity-btn bn-comment-btn-with-count'
+                  onClick={(e) => e.stopPropagation()}
+                  type='button'
+                >
+                  <MessageCircle className='w-4 h-4' />
+                  {commentCount > 0 && <span className='count'>{commentCount}</span>}
+                </button>
+              </TooltipComponent>
+            ) : (
+              <button
+                className='bn-activity-btn bn-comment-btn-with-count'
+                onClick={(e) => e.stopPropagation()}
+                title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+                type='button'
+              >
+                <MessageCircle className='w-4 h-4' />
+                {commentCount > 0 && <span className='count'>{commentCount}</span>}
+              </button>
+            )}
           </Popover.Trigger>
           <Popover.Portal>
             <Popover.Content
@@ -393,52 +472,30 @@ const PersistentActivityButton: React.FC<PersistentActivityButtonProps> = ({
         </Popover.Root>
       ) : hasComments && !hasReactions ? (
         // Single thread: open directly
-        <button
-          className='bn-activity-btn bn-comment-btn-with-count'
-          onClick={onCommentClick}
-          title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
-          type='button'
-        >
-          <MessageCircle className='w-4 h-4' />
-          {commentCount > 0 && <span className='count'>{commentCount}</span>}
-        </button>
+        TooltipComponent ? (
+          <TooltipComponent content={`${commentCount} comment${commentCount > 1 ? 's' : ''}`} side='top' delayDuration={100}>
+            <button
+              className='bn-activity-btn bn-comment-btn-with-count'
+              onClick={onCommentClick}
+              type='button'
+            >
+              <MessageCircle className='w-4 h-4' />
+              {commentCount > 0 && <span className='count'>{commentCount}</span>}
+            </button>
+          </TooltipComponent>
+        ) : (
+          <button
+            className='bn-activity-btn bn-comment-btn-with-count'
+            onClick={onCommentClick}
+            title={`${commentCount} comment${commentCount > 1 ? 's' : ''}`}
+            type='button'
+          >
+            <MessageCircle className='w-4 h-4' />
+            {commentCount > 0 && <span className='count'>{commentCount}</span>}
+          </button>
+        )
       ) : null}
 
-      {/* Add reaction button - only show if no comments (mutually exclusive) */}
-      {!hasComments && (
-        <Popover.Root open={emojiPickerOpen} onOpenChange={onEmojiPickerOpenChange}>
-          <Popover.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='size-8 text-muted-foreground p-0'
-              title='Add reaction'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <SmilePlus className='w-4 h-4' />
-            </Button>
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Content
-              className='z-[1000] bg-popover rounded-lg shadow-md p-0'
-              align='start'
-              side='bottom'
-              sideOffset={8}
-            >
-              <EmojiPicker
-                style={{ width: '320px' }}
-                emojiStyle={EmojiStyle.NATIVE}
-                onEmojiClick={(emoji: EmojiClickData) => {
-                  const emojiName = emoji.isCustom
-                    ? `custom:${emoji.emoji}:${emoji.names[0] || 'custom'}`
-                    : emoji.emoji;
-                  onToggleReaction(emojiName);
-                }}
-                searchPlaceholder='Search emoji...'
-              />
-            </Popover.Content>
-          </Popover.Portal>
-        </Popover.Root>
-      )}
     </div>,
     document.body,
   );
@@ -454,6 +511,7 @@ interface HoverActivityButtonProps {
   emojiPickerOpen: boolean;
   onEmojiPickerOpenChange: (open: boolean) => void;
   isCommentPanelOpen?: boolean | undefined;
+  TooltipComponent?: React.ComponentType<{ content: string; side?: 'top'; delayDuration?: number; children: React.ReactNode }>;
 }
 
 const HoverActivityButton = React.forwardRef<HTMLDivElement, HoverActivityButtonProps>(
@@ -467,6 +525,7 @@ const HoverActivityButton = React.forwardRef<HTMLDivElement, HoverActivityButton
       emojiPickerOpen,
       onEmojiPickerOpenChange,
       isCommentPanelOpen,
+      TooltipComponent,
     },
     ref,
   ) => {
@@ -537,16 +596,28 @@ const HoverActivityButton = React.forwardRef<HTMLDivElement, HoverActivityButton
       >
         {/* Reaction button with emoji picker */}
         <Popover.Root open={emojiPickerOpen} onOpenChange={onEmojiPickerOpenChange}>
-          <Popover.Trigger asChild>
-            <Button
-              variant='ghost'
-              className='size-8 text-muted-foreground p-0'
-              title='Add reaction'
-              onClick={(e) => e.stopPropagation()}
-            >
-              <SmilePlus className='w-4 h-4' />
-            </Button>
-          </Popover.Trigger>
+          {TooltipComponent ? (
+            <TooltipComponent content='Add reaction' side='top'>
+              <Popover.Trigger asChild>
+                <button
+                  className='bn-activity-btn'
+                  type='button'
+                >
+                  <SmilePlus className='w-4 h-4' />
+                </button>
+              </Popover.Trigger>
+            </TooltipComponent>
+          ) : (
+            <Popover.Trigger asChild>
+              <button
+                className='bn-activity-btn'
+                title='Add reaction'
+                type='button'
+              >
+                <SmilePlus className='w-4 h-4' />
+              </button>
+            </Popover.Trigger>
+          )}
           <Popover.Portal>
             <Popover.Content
               className='z-[1000] bg-popover rounded-lg shadow-md p-0'
@@ -570,14 +641,26 @@ const HoverActivityButton = React.forwardRef<HTMLDivElement, HoverActivityButton
         </Popover.Root>
 
         {/* Comment button */}
-        <Button
-          variant='ghost'
-          className='size-8 text-muted-foreground p-0'
-          title='Add comment'
-          onClick={onCommentClick}
-        >
-          <MessageCircle className='w-4 h-4' />
-        </Button>
+        {TooltipComponent ? (
+          <TooltipComponent content='Add comment' side='top'>
+            <Button
+              variant='ghost'
+              className='size-8 text-muted-foreground p-0'
+              onClick={onCommentClick}
+            >
+              <MessageCircle className='w-4 h-4' />
+            </Button>
+          </TooltipComponent>
+        ) : (
+          <Button
+            variant='ghost'
+            className='size-8 text-muted-foreground p-0'
+            title='Add comment'
+            onClick={onCommentClick}
+          >
+            <MessageCircle className='w-4 h-4' />
+          </Button>
+        )}
       </div>,
       document.body,
     );

From a0e48055c39ae0cd399fdae2eeabc2ad4ae29cd6 Mon Sep 17 00:00:00 2001
From: "priyanshu.c" <priyanshu.c@juspay.in>
Date: Wed, 18 Mar 2026 10:52:10 +0530
Subject: [PATCH 3/5] feature: push package.json

---
 package.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/package.json b/package.json
index 6246bad..dd9cd41 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,10 @@
       "types": "./dist/main.d.ts",
       "import": "./dist/main.js"
     },
+    "./block-reactions": {
+      "types": "./dist/block-reactions/main.d.ts",
+      "import": "./dist/block-reactions/main.js"
+    },
     "./multicolumn": {
       "types": "./dist/multicolumn/main.d.ts",
       "import": "./dist/multicolumn/main.js"
@@ -105,8 +109,10 @@
     "@handsontable/react": "^16.2.0",
     "echarts": "^6.0.0",
     "echarts-for-react": "^3.0.5",
+    "emoji-picker-react": "^4.18.0",
     "handsontable": "^16.2.0",
     "hyperformula": "^3.1.0",
+    "lucide-react": "^0.577.0",
     "pyodide": "^0.29.0",
     "recharts": "^3.6.0",
     "reveal.js": "^5.1.0"

From 483e8ce1c48b7dc1416607e5226b64dfb54537aa Mon Sep 17 00:00:00 2001
From: "priyanshu.c" <priyanshu.c@juspay.in>
Date: Wed, 18 Mar 2026 14:06:22 +0530
Subject: [PATCH 4/5] feature: push package-lock.json

---
 package-lock.json | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b98bc25..9bf4e77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,8 +22,10 @@
         "@handsontable/react": "^16.2.0",
         "echarts": "^6.0.0",
         "echarts-for-react": "^3.0.5",
+        "emoji-picker-react": "^4.18.0",
         "handsontable": "^16.2.0",
         "hyperformula": "^3.1.0",
+        "lucide-react": "^0.577.0",
         "pyodide": "^0.29.0",
         "recharts": "^3.6.0",
         "reveal.js": "^5.1.0"
@@ -5432,6 +5434,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-picker-react": {
+      "version": "4.18.0",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.18.0.tgz",
+      "integrity": "sha512-vLTrLfApXAIciguGE57pXPWs9lPLBspbEpPMiUq03TIli2dHZBiB+aZ0R9/Wat0xmTfcd4AuEzQgSYxEZ8C88Q==",
+      "license": "MIT",
+      "dependencies": {
+        "flairup": "1.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -5863,6 +5880,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flairup": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz",
+      "integrity": "sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==",
+      "license": "MIT"
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -7008,6 +7031,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.577.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.577.0.tgz",
+      "integrity": "sha512-4LjoFv2eEPwYDPg/CUdBJQSDfPyzXCRrVW1X7jrx/trgxnxkHFjnVZINbzvzxjN70dxychOfg+FTYwBiS3pQ5A==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

From 344ae88116bab5db30faa54f2602678c2a06d591 Mon Sep 17 00:00:00 2001
From: "priyanshu.c" <priyanshu.c@juspay.in>
Date: Wed, 18 Mar 2026 14:12:04 +0530
Subject: [PATCH 5/5] feature: push rename files

---
 lib/block-reactions/main.ts                            |  2 --
 .../CanvasCommentButton.tsx}                           |  6 +++---
 .../canvas-comment-button.css}                         |  0
 lib/canvas-comments/main.ts                            |  2 ++
 lib/main.ts                                            | 10 +++++-----
 package.json                                           |  6 +++---
 6 files changed, 13 insertions(+), 13 deletions(-)
 delete mode 100644 lib/block-reactions/main.ts
 rename lib/{block-reactions/BlockReactionButton.tsx => canvas-comments/CanvasCommentButton.tsx} (99%)
 rename lib/{block-reactions/block-reaction-button.css => canvas-comments/canvas-comment-button.css} (100%)
 create mode 100644 lib/canvas-comments/main.ts

diff --git a/lib/block-reactions/main.ts b/lib/block-reactions/main.ts
deleted file mode 100644
index b739e4a..0000000
--- a/lib/block-reactions/main.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { BlockReactionButton } from './BlockReactionButton';
-export type { BlockReactionButtonProps } from './BlockReactionButton';
diff --git a/lib/block-reactions/BlockReactionButton.tsx b/lib/canvas-comments/CanvasCommentButton.tsx
similarity index 99%
rename from lib/block-reactions/BlockReactionButton.tsx
rename to lib/canvas-comments/CanvasCommentButton.tsx
index d7bb367..ed0754b 100644
--- a/lib/block-reactions/BlockReactionButton.tsx
+++ b/lib/canvas-comments/CanvasCommentButton.tsx
@@ -5,7 +5,7 @@ import EmojiPicker, { EmojiStyle } from 'emoji-picker-react';
 import * as Popover from '@radix-ui/react-popover';
 import type { EmojiClickData } from 'emoji-picker-react';
 import { SmilePlus, MessageCircle } from 'lucide-react';
-import './block-reaction-button.css';
+import './canvas-comment-button.css';
 
 // Utility function to combine class names
 const cn = (...classes: (string | undefined | null | false)[]): string => {
@@ -32,7 +32,7 @@ const Button = React.forwardRef<
 });
 Button.displayName = 'Button';
 
-export interface BlockReactionButtonProps {
+export interface CanvasCommentButtonProps {
   editor: BlockNoteEditor<any, any, any>;
   blockReactions: Record<string, Record<string, string[]>>; // blockId -> emoji -> userIds[]
   commentCounts: Record<string, number>; // blockId -> count
@@ -47,7 +47,7 @@ export interface BlockReactionButtonProps {
   TooltipComponent?: React.ComponentType<{ content: string; side?: 'top'; delayDuration?: number; children: React.ReactNode }>;
 }
 
-export const BlockReactionButton: React.FC<BlockReactionButtonProps> = ({
+export const CanvasCommentButton: React.FC<CanvasCommentButtonProps> = ({
   editor: _editor,
   blockReactions,
   commentCounts,
diff --git a/lib/block-reactions/block-reaction-button.css b/lib/canvas-comments/canvas-comment-button.css
similarity index 100%
rename from lib/block-reactions/block-reaction-button.css
rename to lib/canvas-comments/canvas-comment-button.css
diff --git a/lib/canvas-comments/main.ts b/lib/canvas-comments/main.ts
new file mode 100644
index 0000000..d6f771c
--- /dev/null
+++ b/lib/canvas-comments/main.ts
@@ -0,0 +1,2 @@
+export { CanvasCommentButton } from './CanvasCommentButton';
+export type { CanvasCommentButtonProps } from './CanvasCommentButton';
diff --git a/lib/main.ts b/lib/main.ts
index 2f3d9b8..975014f 100644
--- a/lib/main.ts
+++ b/lib/main.ts
@@ -101,14 +101,14 @@ export {
     insertGroupMention,
 } from "./mentions/main.js";
 
-// Block reactions exports
+// Canvas comments exports
 export {
-    BlockReactionButton,
-} from "./block-reactions/main.js";
+    CanvasCommentButton,
+} from "./canvas-comments/main.js";
 
 export type {
-    BlockReactionButtonProps,
-} from "./block-reactions/main.js";
+    CanvasCommentButtonProps,
+} from "./canvas-comments/main.js";
 
 // Common utilities exports
 export {
diff --git a/package.json b/package.json
index dd9cd41..e36f3b4 100644
--- a/package.json
+++ b/package.json
@@ -43,9 +43,9 @@
       "types": "./dist/main.d.ts",
       "import": "./dist/main.js"
     },
-    "./block-reactions": {
-      "types": "./dist/block-reactions/main.d.ts",
-      "import": "./dist/block-reactions/main.js"
+    "./canvas-comments": {
+      "types": "./dist/canvas-comments/main.d.ts",
+      "import": "./dist/canvas-comments/main.js"
     },
     "./multicolumn": {
       "types": "./dist/multicolumn/main.d.ts",