[WIKI-826] chore: add unique id as key to logo selector

[iam-vipin]

Description

this PR is optimizing React component rendering and improving the emoji picker’s behavior.

Type of Change

• Improvement (change that would cause existing functionality to not work as expected)

Screenshots and Media (if applicable)

Screen.Recording.2026-01-06.at.8.08.51.PM.mov

Test Scenarios

References

Summary by CodeRabbit

• New Features

  • Emoji picker now automatically closes after emoji selection.

• Bug Fixes

  • Improved callout block rendering stability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Two files in the callout extension were modified: a key prop was added to CalloutBlockLogoSelector for stable element reconciliation, and the EmojiPicker's closeOnSelect behavior was changed to automatically dismiss after selection.

Changes

Cohort / File(s)	Summary
Callout Block Reconciliation packages/editor/src/core/extensions/callout/block.tsx	Added key prop to CalloutBlockLogoSelector using node.attrs["id"] for stable React element identity.
Callout Logo Selector packages/editor/src/core/extensions/callout/logo-selector.tsx	Changed EmojiPicker closeOnSelect from false to true, enabling automatic dismissal after emoji selection.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A key for each callout, to keep them stable and bright,
The emoji picker now closes—quick and tight!
React reconciles smoothly, selections feel right,
Small tweaks make the editor sing with delight! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	The description covers the main points but lacks detail on the specific changes and rationale. The Type of Change selection appears inconsistent with a 'chore' title, and test scenarios are not documented.	Clarify the Type of Change selection, provide specific details about the rendering optimization and emoji picker behavior changes, and document the test scenarios performed.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a unique ID as key to the logo selector, which aligns with the code changes in CalloutBlockLogoSelector.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea1f92e and a5e8710.

📒 Files selected for processing (2)

• packages/editor/src/core/extensions/callout/block.tsx
• packages/editor/src/core/extensions/callout/logo-selector.tsx

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• packages/editor/src/core/extensions/callout/block.tsx
• packages/editor/src/core/extensions/callout/logo-selector.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Enable TypeScript strict mode and ensure all files are fully typed

Files:

• packages/editor/src/core/extensions/callout/block.tsx
• packages/editor/src/core/extensions/callout/logo-selector.tsx

**/*.{js,jsx,ts,tsx,json,css}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with Tailwind plugin for code formatting, run pnpm fix:format

Files:

• packages/editor/src/core/extensions/callout/block.tsx
• packages/editor/src/core/extensions/callout/logo-selector.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately

Files:

• packages/editor/src/core/extensions/callout/block.tsx
• packages/editor/src/core/extensions/callout/logo-selector.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Agent
• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Analyze (javascript)
• GitHub Check: Build packages

🔇 Additional comments (2)

packages/editor/src/core/extensions/callout/logo-selector.tsx (1)

36-36: LGTM! Improved UX with auto-close behavior.

Setting closeOnSelect={true} improves the user experience by automatically dismissing the emoji picker after a selection is made. The explicit handleOpen(false) call on line 89 remains appropriate for maintaining state synchronization between the picker and parent component.

packages/editor/src/core/extensions/callout/block.tsx (1)

38-38: Excellent fix for React reconciliation!

Adding the key prop with node.attrs["id"] is the correct solution for ensuring proper component identity when multiple callout blocks exist in the editor. This prevents React from confusing state between different callout blocks' logo selectors, which was likely causing the rerender issues mentioned in the PR objectives.

---

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.}

[makeplane]

Linked to Plane Work Item(s)

• [WIKI-826] Emoji Picker Flickers Instead of Opening When Clicking Callout Emoji

This comment was auto-generated by Plane

[Copilot]

Pull request overview

This PR optimizes React component rendering by adding a unique id as a key to the CalloutBlockLogoSelector component and improves the emoji picker's UX by closing it automatically after emoji/icon selection.

• Added a unique key prop based on node ID to prevent unnecessary re-renders of the logo selector component
• Changed closeOnSelect from false to true for better emoji picker user experience

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/editor/src/core/extensions/callout/block.tsx	Added unique key prop to CalloutBlockLogoSelector using the node's id attribute for better React rendering optimization
packages/editor/src/core/extensions/callout/logo-selector.tsx	Changed closeOnSelect to true to automatically close the emoji picker after selection

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The type definition for CustomCalloutNodeViewProps restricts node.attrs to TCalloutBlockAttributes, which doesn't include the "id" attribute. While the UniqueID extension adds an "id" attribute to all callout nodes at runtime, TypeScript doesn't know about this relationship. This creates a type safety issue where node.attrs["id"] is being accessed without proper type support.

Consider extending TCalloutBlockAttributes to include the id field, or updating the type definition to allow for the dynamically added "id" attribute from the UniqueID extension.