Add mentions feature to objects in notes

[acee3]

Issue #15755

Context

As shown in the issue, users should be able to @ objects and have it be linked to their associated page.

Changes Made

• Updated the BlockNote schema to include the newly created MentionInlineContent that displays an object using a RecordChip
• Added the UI for the menu that appears to select the requested object (similar to this example: https://www.blocknotejs.org/examples/ui-components/suggestion-menus-slash-menu-component)
• Added a hook to retrieve the data for the UI
• Added the @ trigger to the block editor

Result

Screen.Recording.2025-12-05.at.2.56.34.PM.mov

[Copilot]

Pull request overview

This PR adds a mentions feature to the BlockNote editor, allowing users to type @ to trigger a dropdown menu for selecting and linking to objects within notes.

Key changes:

• Added MentionInlineContent to the BlockNote schema for rendering mentioned objects as clickable RecordChip components
• Implemented useMentionMenu hook to fetch and filter searchable object records
• Created CustomMentionMenu and CustomMentionMenuListItem components for the mention selection UI

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/twenty-front/src/modules/ui/input/editor/hooks/useMentionMenu.ts	Hook that fetches searchable objects and provides mention items for the suggestion menu
packages/twenty-front/src/modules/ui/input/editor/components/types.ts	Added MentionItem type definition extending DefaultReactSuggestionItem
packages/twenty-front/src/modules/ui/input/editor/components/CustomMentionMenuListItem.tsx	Component rendering individual items in the mention menu dropdown
packages/twenty-front/src/modules/ui/input/editor/components/CustomMentionMenu.tsx	Main mention menu component with keyboard navigation and selection support
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx	Integrated mention menu with @ trigger via SuggestionMenuController
packages/twenty-front/src/modules/ui/input/constants/MentionMenuListId.ts	Constant for mention menu selectable list identifier
packages/twenty-front/src/modules/ui/input/constants/MentionMenuDropdownClickOutsideId.ts	Constant for mention menu click-outside handling
packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx	Added mention menu dropdown to excluded click-outside IDs
packages/twenty-front/src/modules/activities/blocks/constants/Schema.ts	Extended BlockNote schema with mention inline content spec
packages/twenty-front/src/modules/activities/blocks/components/MentionInlineContent.tsx	React component that renders mentions as styled RecordChip components

---

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

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds @ mention functionality to the BlockNote editor in notes, allowing users to mention and link to any object in the CRM.

Key changes:

• Added MentionInlineContent component that renders mentions as clickable RecordChip elements using useFindOneRecord to fetch record data
• Extended the BlockNote schema to include mention inline content spec
• Implemented useMentionMenu hook that searches across all active, non-system, searchable objects using useObjectRecordSearchRecords
• Created CustomMentionMenu and CustomMentionMenuListItem components following similar patterns to the existing slash menu
• Added click-outside handling to prevent command menu from closing when interacting with the mention dropdown

Architecture notes:

• The search is limited to 50 results (MENTION_SEARCH_LIMIT)
• Mentions are stored with recordId and objectNameSingular, fetching fresh data on render via useFindOneRecord
• Results are filtered to exclude system objects and non-searchable items

Confidence Score: 4/5

• PR is generally safe to merge; the identified race condition may cause brief UI flicker but is not critical.
• Well-structured implementation following existing patterns (CustomSlashMenu). One potential race condition in search results delivery, but the feature will still function correctly after results load.
• useMentionMenu.ts has a potential race condition where search results may briefly show stale data.

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/ui/input/editor/hooks/useMentionMenu.ts	3/5	New hook for mention menu search. The getMentionItems callback has a potential race condition - it sets state then immediately returns stale items before the search query completes.
packages/twenty-front/src/modules/activities/blocks/components/MentionInlineContent.tsx	4/5	New inline content component for rendering mentions using RecordChip. Fetches record data using useFindOneRecord hook when rendered.
packages/twenty-front/src/modules/ui/input/editor/components/CustomMentionMenu.tsx	4/5	New mention menu dropdown component following similar patterns to CustomSlashMenu. Uses SelectableList and DropdownContent for consistent UI.
packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx	5/5	Added @ trigger for mention suggestions using new CustomMentionMenu and useMentionMenu hook.
packages/twenty-front/src/modules/activities/blocks/constants/Schema.ts	5/5	Extended BlockNote schema with mention inline content spec for displaying linked mentions.

Sequence Diagram

sequenceDiagram
    participant User
    participant BlockEditor
    participant SuggestionMenuController
    participant useMentionMenu
    participant useObjectRecordSearchRecords
    participant CustomMentionMenu
    participant CustomMentionMenuListItem
    participant MentionInlineContent
    participant useFindOneRecord

    User->>BlockEditor: Types "@"
    BlockEditor->>SuggestionMenuController: Trigger "@" character
    SuggestionMenuController->>useMentionMenu: getItems(query)
    useMentionMenu->>useObjectRecordSearchRecords: searchInput = query
    useObjectRecordSearchRecords-->>useMentionMenu: searchRecords[]
    useMentionMenu-->>SuggestionMenuController: MentionItem[]
    SuggestionMenuController->>CustomMentionMenu: render(items)
    CustomMentionMenu->>CustomMentionMenuListItem: render each item
    
    User->>CustomMentionMenuListItem: Clicks item
    CustomMentionMenuListItem->>useMentionMenu: onItemClick()
    useMentionMenu->>BlockEditor: insertInlineContent(mention)
    BlockEditor->>MentionInlineContent: render mention
    MentionInlineContent->>useFindOneRecord: fetch record data
    useFindOneRecord-->>MentionInlineContent: record
    MentionInlineContent-->>User: Display RecordChip

Loading

[greptile-apps]

Additional Comments (1)

1. packages/twenty-front/src/modules/ui/input/editor/hooks/useMentionMenu.ts, line 69-75 (link)

   logic: Potential race condition: setSearchQuery(query) triggers an async state update, but mentionItems is returned immediately with results from the previous query. On first keystroke, users may see stale/empty results until the next render cycle.

_{10 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:15717

This environment will automatically shut down when the PR is closed or after 5 hours.

[charlesBochet]

@Bonapara is this useful if it doesn't ping the user? I feel it's too early

[Bonapara]

@charlesBochet I think it’s useful to be able to mention other records in notes, even without notifications, as long as you can mention a team member in v1.

(It seems this PR only allows mentioning records from objects that are:

• Active (isActive: true)
• Not a system object (isSystem: false)
• Searchable (isSearchable: true)
  )

Which seems fine to me.

Thanks a lot for raising this PR @acee3! It will bring a lot of value to Twenty.

Two main pieces of feedback from a product/design perspective:

1. Can you use our relation chip component?

   

   https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=81380-345461&t=uz9k3iuEUALNCaD7-11

2. A few notes on the menu design:

   
   1. Add top padding.
   2. Add the name of the object as a subtitle.
   3. Set the menu width to 240 px.
   

   https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=84683-199172&t=uz9k3iuEUALNCaD7-11

[acee3]

@Bonapara Thanks for your response and feedback! I am a little bit confused about what you mean by using the relation chip component. I wasn't able to find one other than the RecordChip, which I was already using. I assumed you meant that the icon of the object should show, so I made some updates to that. If that is the case, I was able to implement all your changes.

Also, I don't think the failing CI front storybook test about network failure seems to be related to the change I just made. Other people seem to be getting the same exact failing test.

[Bonapara]

Hi @acee3, yes indeed!

For the rest, I couldn’t try your PR yet, as it seems you didn’t take permissions into account:

message: "Entity performing the request does not have permission"

[acee3]

@Bonapara @prastoin I fixed the issues with perms. Let me know if there is anything else that needs to be changed/added!

[prastoin]

Hey @charlesBochet could you please re-review this when you have some freetime please ?

[acee3]

@charlesBochet @prastoin @Bonapara Just checking in if there is anything I need to do to get this merged?

[FelixMalfait]

Great work! Sorry we took so long to merge (this was the oldest PR on this repo), we weren't sure about the product direction going forward. I made very minor fixes (extract useEffect, handle the case where a record or objectMetadata is deleted, remove the extra "@" that was showing up, use objectMetadataId which is more robust over time than using the name)

[cubic-dev-ai]

1 issue found across 12 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="packages/twenty-front/src/modules/activities/blocks/components/MentionInlineContent.tsx">

<violation number="1" location="packages/twenty-front/src/modules/activities/blocks/components/MentionInlineContent.tsx:41">
P2: `Unknown object` is never shown when `objectMetadataId` is missing/invalid because the `!record` check runs first and `useFindOneRecord` is skipped, so `record` is undefined. This causes unknown objects to be mislabeled as deleted records.</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Add one-off context when rerunning by tagging @cubic-dev-ai with guidance or docs links (including llms.txt)
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[twenty-eng-sync]

Hey @FelixMalfait! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

[twenty-eng-sync]

Hey @FelixMalfait! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!