Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-21 12:06:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): support mentions in comments (#13000)

Browse Source 
fix AF-2706, PD-2687

<img width="412" alt="image"
src="https://github.com/user-attachments/assets/b796f543-1c42-452a-8f65-9dddfa751ab4"
/>
<img width="384" alt="image"
src="https://github.com/user-attachments/assets/7ac3bcc5-6cf1-49bb-9786-1eb33fad7225"
/>
<img width="347" alt="image"
src="https://github.com/user-attachments/assets/02babd37-4740-4770-8be8-e253be18bb5a"
/>

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Added support for mentions in comments and replies, including
detection and notification when users are mentioned.
* Introduced new notification types for comments and comment mentions,
with dedicated notification components and localized messages.
  * Enabled navigation directly to specific comments from notifications.
* Sidebar comment tab and comment features now depend on both feature
flags and server support.

* **Improvements**
  * Comment creation and reply workflows now support optional mentions.
* Menu configurations for linked widgets can now selectively include
specific menu groups.
* Enhanced navigation helper with a function to jump directly to a page
comment.
  * Improved comment entity lifecycle management for proper cleanup.

* **Bug Fixes**
* Improved lifecycle management for comment entities to ensure proper
cleanup.

* **Style**
* Updated mention styling to use a dynamic font size based on theme
variables.
  * Adjusted comment preview container underline highlight color.

* **Localization**
* Added English translations for comment and mention notification
messages.

* **Configuration**
* Updated feature flag logic for comment features, making configuration
more flexible and environment-aware.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->





#### PR Dependency Tree


* **PR #13000** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
This commit is contained in:
Peng Xiao
2025-07-03 14:44:14 +08:00
committed by GitHub
parent a7aa761e43
commit 532ea6af07
15 changed files with 317 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/components/comment/comment-editor/specs.ts
+13 -1
View File
@@ -1,6 +1,8 @@
import { CloudViewExtension } from '@affine/core/blocksuite/view-extensions/cloud';
import { createLinkedWidgetConfig } from '@affine/core/blocksuite/view-extensions/editor-config/linked';
import { AffineEditorViewExtension } from '@affine/core/blocksuite/view-extensions/editor-view/editor-view';
import { AffineThemeViewExtension } from '@affine/core/blocksuite/view-extensions/theme';
import { LinkedMenuGroupType } from '@affine/core/modules/at-menu-config/services';
import { CodeBlockViewExtension } from '@blocksuite/affine/blocks/code/view';
import { DividerViewExtension } from '@blocksuite/affine/blocks/divider/view';
import { LatexViewExtension as LatexBlockViewExtension } from '@blocksuite/affine/blocks/latex/view';
@@ -145,6 +147,9 @@ export function getCommentEditorViewManager(framework: FrameworkProvider) {
// Affine side
AffineThemeViewExtension,
AffineEditorViewExtension,
// for rendering mentions
CloudViewExtension,
]);
manager.configure(ParagraphViewExtension, {
@@ -155,8 +160,15 @@ export function getCommentEditorViewManager(framework: FrameworkProvider) {
manager.configure(
LinkedDocViewExtension,
createLinkedWidgetConfig(framework)
createLinkedWidgetConfig(framework, {
includedGroups: [LinkedMenuGroupType.Mention],
})
);
manager.configure(CloudViewExtension, {
framework,
enableCloud: true,
});
}
return manager;
}
packages/frontend/core/src/components/comment/sidebar/index.tsx
+1 -1
View File
@@ -551,7 +551,6 @@ const useCommentEntity = (docId: string | undefined) => {
const entityRef = docCommentManager.get(docId);
setEntity(entityRef.obj);
entityRef.obj.start();
entityRef.obj.revalidate();
// Set up pending comment watching to auto-open sidebar
const unwatchPending = commentPanelService.watchForPendingComments(
@@ -560,6 +559,7 @@ const useCommentEntity = (docId: string | undefined) => {
return () => {
unwatchPending();
entityRef.obj.stop();
entityRef.release();
};
}, [docCommentManager, commentPanelService, docId]);
packages/frontend/core/src/components/comment/sidebar/style.css.ts
+1 -1
View File
@@ -125,7 +125,7 @@ export const previewContainer = style({
position: 'absolute',
left: '0',
top: '0',
backgroundColor: cssVarV2('layer/insideBorder/primaryBorder'),
backgroundColor: cssVarV2('block/comment/highlightUnderline'),
},
},
});
packages/frontend/core/src/components/hooks/use-navigate-helper.ts
+22
View File
@@ -62,6 +62,26 @@ export function useNavigateHelper() {
},
[navigate]
);
const jumpToPageComment = useCallback(
(
workspaceId: string,
pageId: string,
commentId: string,
mode: DocMode,
logic: RouteLogic = RouteLogic.PUSH
) => {
const search = toDocSearchParams({
mode,
refreshKey: nanoid(),
commentId,
});
const query = search?.size ? `?${search.toString()}` : '';
return navigate(`/workspace/${workspaceId}/${pageId}${query}`, {
replace: logic === RouteLogic.REPLACE,
});
},
[navigate]
);
const jumpToCollections = useCallback(
(workspaceId: string, logic: RouteLogic = RouteLogic.PUSH) => {
return navigate(`/workspace/${workspaceId}/collection`, {
@@ -213,6 +233,7 @@ export function useNavigateHelper() {
() => ({
jumpToPage,
jumpToPageBlock,
jumpToPageComment,
jumpToIndex,
jumpTo404,
openPage,
@@ -229,6 +250,7 @@ export function useNavigateHelper() {
[
jumpToPage,
jumpToPageBlock,
jumpToPageComment,
jumpToIndex,
jumpTo404,
openPage,
packages/frontend/core/src/components/notification/list.tsx
+144
View File
@@ -156,6 +156,10 @@ const NotificationItem = ({ notification }: { notification: Notification }) => {
return type === NotificationType.Mention ? (
<MentionNotificationItem notification={notification} />
) : type === NotificationType.Comment ? (
<CommentNotificationItem notification={notification} />
) : type === NotificationType.CommentMention ? (
<CommentMentionNotificationItem notification={notification} />
) : type === NotificationType.InvitationAccepted ? (
<InvitationAcceptedNotificationItem notification={notification} />
) : type === NotificationType.Invitation ? (
@@ -771,3 +775,143 @@ const DocNameWithIcon = ({
</b>
);
};
const CommentNotificationItem = ({
notification,
}: {
notification: Notification;
}) => {
const notificationListService = useService(NotificationListService);
const { jumpToPageComment } = useNavigateHelper();
const t = useI18n();
const body = notification.body;
const memberInactived = !body.createdByUser;
const handleClick = useCallback(() => {
track.$.sidebar.notifications.clickNotification({
type: notification.type,
item: 'read',
});
if (!body.workspaceId || !body.doc?.id) {
return;
}
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
jumpToPageComment(
body.workspaceId,
body.doc.id,
body.commentId,
body.doc.mode
);
}, [body, jumpToPageComment, notificationListService, notification]);
return (
<div className={styles.itemContainer} onClick={handleClick}>
<Avatar
size={22}
name={body.createdByUser?.name}
url={body.createdByUser?.avatarUrl}
/>
<div className={styles.itemMain}>
<span>
<Trans
i18nKey={'com.affine.notification.comment'}
components={{
1: (
<b
className={styles.itemNameLabel}
data-inactived={memberInactived}
/>
),
2: <DocNameWithIcon mode={body.doc?.mode || 'page'} />,
}}
values={{
username:
body.createdByUser?.name ?? t['com.affine.inactive-member'](),
docTitle: body.doc?.title || t['Untitled'](),
}}
/>
</span>
<div className={styles.itemDate}>
{i18nTime(notification.createdAt, {
relative: true,
})}
</div>
</div>
<DeleteButton notification={notification} />
</div>
);
};
const CommentMentionNotificationItem = ({
notification,
}: {
notification: Notification;
}) => {
const notificationListService = useService(NotificationListService);
const { jumpToPageComment } = useNavigateHelper();
const t = useI18n();
const body = notification.body;
const memberInactived = !body.createdByUser;
const handleClick = useCallback(() => {
track.$.sidebar.notifications.clickNotification({
type: notification.type,
item: 'read',
});
if (!body.workspaceId || !body.doc?.id) {
return;
}
notificationListService.readNotification(notification.id).catch(err => {
console.error(err);
});
jumpToPageComment(
body.workspaceId,
body.doc.id,
body.commentId,
body.doc.mode
);
}, [body, jumpToPageComment, notificationListService, notification]);
return (
<div className={styles.itemContainer} onClick={handleClick}>
<Avatar
size={22}
name={body.createdByUser?.name}
url={body.createdByUser?.avatarUrl}
/>
<div className={styles.itemMain}>
<span>
<Trans
i18nKey={'com.affine.notification.comment-mention'}
components={{
1: (
<b
className={styles.itemNameLabel}
data-inactived={memberInactived}
/>
),
2: <DocNameWithIcon mode={body.doc?.mode || 'page'} />,
}}
values={{
username:
body.createdByUser?.name ?? t['com.affine.inactive-member'](),
docTitle: body.doc?.title || t['Untitled'](),
}}
/>
</span>
<div className={styles.itemDate}>
{i18nTime(notification.createdAt, {
relative: true,
})}
</div>
</div>
<DeleteButton notification={notification} />
</div>
);
};