fix: Comments emoji picker button issues (BLO-1199)

[matthewlipski]

Summary

This PR fixes 2 issues with the emoji picker button in comments:

1. The user often has to click the button multiple times to bring up the emoji picker.
2. Clicking an emoji does nothing.

This is because the component passed to the actions prop of CommentEditor in the Comment component was inlined. This passed component contains the reactions & problematic "add reaction" button This caused it to get re-rendered every time emojiPickerOpen changed, so on each click of the "add reaction" button.

Closes #2763

Rationale

This is a bug.

Changes

• Memoized the component passed to the CommentEditor's actions prop for each consumer.

Impact

N/A

Testing

Added e2e test.

Screenshots/Video

N/A

Checklist

• Code follows the project's coding standards.
• Unit tests covering the new feature have been added.
• All existing tests pass.
• The documentation has been updated to reflect the new feature

Additional Notes

N/A

Summary by CodeRabbit

• Refactor

  • Streamlined comment, reply and composer action rendering for more consistent editor toolbar behavior.

• New Features / UX

  • Improved comment action toolbar: shows reaction badges and emoji picker when applicable, and displays save/cancel controls while editing.
  • Reply composer shows a contextual "save reply" action only when there’s content.

• Tests

  • Expanded end-to-end coverage for adding reactions and thread/link UI behaviors.

[coderabbitai]

📝 Walkthrough

Walkthrough

Inline CommentEditor action renderers were extracted into memoized useCallback callbacks in Comment, FloatingComposer, and Thread; end-to-end tests add an emoji-reaction flow and tighten link/thread UI assertions.

Changes

Comment Actions Callback Extraction

Layer / File(s)	Summary
Comment component actions extraction packages/react/src/components/Comments/Comment.tsx	CommentEditorActions useCallback conditionally renders reaction badges + emoji picker (when reactions exist and not editing) and save/cancel editing toolbar (when isEditing is true). CommentEditor actions prop is updated to use this memoized callback.
FloatingComposer component actions extraction packages/react/src/components/Comments/FloatingComposer.tsx	Added React useCallback import and defined an Actions callback to render the save action, preserving thread creation, pending state clearing, TipTap TextSelection adjustment, and editor focus on save. CommentEditor actions prop now receives Actions.
Thread component reply actions extraction packages/react/src/components/Comments/Thread.tsx	ReplyActions useCallback conditionally returns null when the reply composer is empty or a save toolbar when not empty. CommentEditor actions prop replaced inline function with this memoized callback.
E2E tests: reactions and link assertions tests/src/end-to-end/comments/comments.test.ts	Adds a new test that adds two emoji reactions (verifies picker closes and reaction count increments) and adds assertions for thread mark visibility after entering a link and that the formatting toolbar is hidden at a specific step.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• TypeCellOS/BlockNote#2620: Related E2E test updates validating thread/comment mark visibility during link insertion.
• TypeCellOS/BlockNote#2696: Overlapping test/spec edits for comment+link interactions; touches related click-handling logic.

Suggested reviewers

• nperez0111

Poem

🐰 I hopped through callbacks, tidy and neat,
Pulled inline actions into memoized seats.
Emojis now pop and toolbars behave,
A little rabbit fixed the comment cave. 🥕✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: Comments emoji picker button issues (BLO-1199)' directly and accurately describes the main change in the pull request: fixing emoji picker issues in comments.
Description check	✅ Passed	The description covers the key sections (Summary, Rationale, Changes, Testing) and clearly explains the bug, root cause, solution, and testing approach; some optional sections like Screenshots/Video are marked N/A as appropriate for a bug fix.
Linked Issues check	✅ Passed	The PR directly addresses issue #2763 by memoizing the CommentEditor actions component to prevent re-renders that were interfering with emoji picker opening and emoji selection, and adds an e2e test validating the fix.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the emoji picker issues: memoizing actions callbacks in Comment/FloatingComposer/Thread components and adding e2e tests for the reaction flow.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch comments-emoji-picker-fix

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/@blocknote/ariakit@2769

@blocknote/code-block

npm i https://pkg.pr.new/@blocknote/code-block@2769

@blocknote/core

npm i https://pkg.pr.new/@blocknote/core@2769

@blocknote/mantine

npm i https://pkg.pr.new/@blocknote/mantine@2769

@blocknote/react

npm i https://pkg.pr.new/@blocknote/react@2769

@blocknote/server-util

npm i https://pkg.pr.new/@blocknote/server-util@2769

@blocknote/shadcn

npm i https://pkg.pr.new/@blocknote/shadcn@2769

@blocknote/xl-ai

npm i https://pkg.pr.new/@blocknote/xl-ai@2769

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/@blocknote/xl-docx-exporter@2769

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/@blocknote/xl-email-exporter@2769

@blocknote/xl-multi-column

npm i https://pkg.pr.new/@blocknote/xl-multi-column@2769

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/@blocknote/xl-odt-exporter@2769

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/@blocknote/xl-pdf-exporter@2769

commit: 04d4b6e

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blocknote	Ready	Preview	May 22, 2026 5:59pm
blocknote-website	Ready	Preview	May 22, 2026 5:59pm

[coderabbitai]

🧹 Nitpick comments (1)

tests/src/end-to-end/comments/comments.test.ts (1)

49-49: 💤 Low value

Consider a more stable emoji selection strategy.

Using .nth(5) to select a "different" emoji is positional and fragile. If the emoji picker order changes (e.g., new categories, reordering, or emoji added earlier in the list), the test will still pass but might inadvertently select the same emoji or one that's no longer representative. Consider selecting by a known emoji data attribute (if available) or using a higher index to reduce collision risk.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/src/end-to-end/comments/comments.test.ts` at line 49, The test uses a
fragile positional selector page.locator(EMOJI_BUTTON_SELECTOR).nth(5).click(),
so change it to a more stable selection: locate the specific emoji by a stable
attribute (e.g., data-emoji or aria-label) if available, e.g., use
page.locator(`${EMOJI_BUTTON_SELECTOR}[data-emoji=":smile:"]`) or fall back to a
higher, less-colliding index (e.g., .nth(10)) to reduce breakage; update the
test to use EMOJI_BUTTON_SELECTOR combined with the known attribute or the safer
index so selection is deterministic.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@tests/src/end-to-end/comments/comments.test.ts`:
- Line 49: The test uses a fragile positional selector
page.locator(EMOJI_BUTTON_SELECTOR).nth(5).click(), so change it to a more
stable selection: locate the specific emoji by a stable attribute (e.g.,
data-emoji or aria-label) if available, e.g., use
page.locator(`${EMOJI_BUTTON_SELECTOR}[data-emoji=":smile:"]`) or fall back to a
higher, less-colliding index (e.g., .nth(10)) to reduce breakage; update the
test to use EMOJI_BUTTON_SELECTOR combined with the known attribute or the safer
index so selection is deterministic.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 883e3eb7-acce-4904-bb4b-a2663c80e2f5

📥 Commits

Reviewing files that changed from the base of the PR and between d427128 and 04d4b6e.

📒 Files selected for processing (1)

• tests/src/end-to-end/comments/comments.test.ts