Add mentions feature to objects in notes (#16373)

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 

https://github.com/user-attachments/assets/87dae6a2-ad7a-4642-80b2-8b1751feae24

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
acee3
2026-02-13 08:12:37 -05:00
committed by GitHub
parent b7c1d47273
commit e2b9bc935f
19 changed files with 489 additions and 28 deletions
@@ -26,6 +26,7 @@ const StyledLink = styled(Link)`
display: inline-flex;
text-decoration: none;
min-width: 0;
vertical-align: middle;
`;
export const LinkChip = ({
@@ -10,6 +10,8 @@ export type MenuItemSuggestionProps = {
LeftIcon?: IconComponent | null;
withIconContainer?: boolean;
text: string;
contextualText?: string;
contextualTextPosition?: 'left' | 'right';
selected?: boolean;
className?: string;
onClick?: (event: MouseEvent<HTMLLIElement>) => void;
@@ -55,6 +57,8 @@ export const MenuItemSuggestion = ({
LeftIcon,
withIconContainer = false,
text,
contextualText = undefined,
contextualTextPosition = 'left',
className,
selected,
onClick,
@@ -77,6 +81,8 @@ export const MenuItemSuggestion = ({
<MenuItemLeftContent
LeftIcon={LeftIcon ?? undefined}
text={text}
contextualText={contextualText}
contextualTextPosition={contextualTextPosition}
withIconContainer={withIconContainer}
/>
</StyledMenuItemLeftContent>