diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json index fa040002..aec23caa 100644 --- a/apps/client/public/locales/en-US/translation.json +++ b/apps/client/public/locales/en-US/translation.json @@ -590,5 +590,21 @@ "No answer available": "No answer available", "Background color": "Background color", "Highlight color": "Highlight color", - "Remove color": "Remove color" + "Remove color": "Remove color", + "Notifications": "Notifications", + "No notifications": "No notifications", + "No unread notifications": "No unread notifications", + "All notifications": "All notifications", + "Unread only": "Unread only", + "Mark all as read": "Mark all as read", + "Mark as read": "Mark as read", + "More options": "More options", + "mentioned you in a comment": "mentioned you in a comment", + "commented on a page": "commented on a page", + "resolved a comment": "resolved a comment", + "mentioned you on a page": "mentioned you on a page", + "Today": "Today", + "Yesterday": "Yesterday", + "This week": "This week", + "Older": "Older" } diff --git a/apps/client/src/components/layouts/global/app-header.tsx b/apps/client/src/components/layouts/global/app-header.tsx index eb1ca74f..58b76b71 100644 --- a/apps/client/src/components/layouts/global/app-header.tsx +++ b/apps/client/src/components/layouts/global/app-header.tsx @@ -22,6 +22,7 @@ import { searchSpotlight, shareSearchSpotlight, } from "@/features/search/constants.ts"; +import { NotificationPopover } from "@/features/notification/components/notification-popover.tsx"; const links = [{ link: APP_ROUTE.HOME, label: "Home" }]; @@ -97,6 +98,7 @@ export function AppHeader() { + {isCloud() && isTrial && trialDaysLeft !== 0 && ( { + if (document.querySelector("#mention")) return; handleDialogClose(); }); const createCommentMutation = useCreateCommentMutation(); @@ -105,6 +106,7 @@ function CommentDialog({ editor, pageId }: CommentDialogProps) { position={{ bottom: 500, right: 50 }} withCloseButton withBorder + data-comment-dialog > diff --git a/apps/client/src/features/comment/components/comment-editor.tsx b/apps/client/src/features/comment/components/comment-editor.tsx index efb0c586..067391f4 100644 --- a/apps/client/src/features/comment/components/comment-editor.tsx +++ b/apps/client/src/features/comment/components/comment-editor.tsx @@ -1,14 +1,15 @@ -import { EditorContent, useEditor } from "@tiptap/react"; +import { EditorContent, ReactNodeViewRenderer, useEditor } from "@tiptap/react"; import { Placeholder } from "@tiptap/extension-placeholder"; -import { Underline } from "@tiptap/extension-underline"; -import { Link } from "@tiptap/extension-link"; import { StarterKit } from "@tiptap/starter-kit"; +import { Mention, LinkExtension } from "@docmost/editor-ext"; import classes from "./comment.module.css"; import { useFocusWithin } from "@mantine/hooks"; import clsx from "clsx"; import { forwardRef, useEffect, useImperativeHandle } from "react"; import { useTranslation } from "react-i18next"; import EmojiCommand from "@/features/editor/extensions/emoji-command"; +import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion"; +import MentionView from "@/features/editor/components/mention/mention-view"; interface CommentEditorProps { defaultContent?: any; @@ -39,13 +40,29 @@ const CommentEditor = forwardRef( StarterKit.configure({ gapcursor: false, dropcursor: false, + link: false, }), Placeholder.configure({ placeholder: placeholder || t("Reply..."), }), - Underline, - Link, + LinkExtension, EmojiCommand, + Mention.configure({ + suggestion: { + allowSpaces: true, + items: () => [], + // @ts-ignore + render: mentionRenderItems, + }, + HTMLAttributes: { + class: "mention", + }, + }).extend({ + addNodeView() { + this.editor.isInitialized = true; + return ReactNodeViewRenderer(MentionView); + }, + }), ], editorProps: { handleDOMEvents: { @@ -60,7 +77,8 @@ const CommentEditor = forwardRef( ].includes(event.key) ) { const emojiCommand = document.querySelector("#emoji-command"); - if (emojiCommand) { + const mentionPopup = document.querySelector("#mention"); + if (emojiCommand || mentionPopup) { return true; } } @@ -108,7 +126,11 @@ const CommentEditor = forwardRef( })); return ( -
+