feat: send email notifications on user mentions (#372)

* feat: add notifications schema

* chore: gen migration

* feat: add mention email template

* feat: add sendMentionEmail func

* feat: add repo funcs

* feat: update card router to send emails on mention

* fix: update the editor suggestion to show all members

* feat: skip pending members in sendMentionEmails

* feat: update comments to use tiptap editor

apps/web/src/views/card/components/NewCommentForm.tsx

@@ -1,8 +1,9 @@
 import { t } from "@lingui/core/macro";
-import ContentEditable from "react-contenteditable";
 import { useForm } from "react-hook-form";
 import { HiOutlineArrowUp } from "react-icons/hi2";
 
+import Editor from "~/components/Editor";
+import type { WorkspaceMember } from "~/components/Editor";
 import LoadingSpinner from "~/components/LoadingSpinner";
 import { usePermissions } from "~/hooks/usePermissions";
 import { usePopup } from "~/providers/popup";
@@ -13,7 +14,13 @@ interface FormValues {
   comment: string;
 }
 
-const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
+const NewCommentForm = ({
+  cardPublicId,
+  workspaceMembers,
+}: {
+  cardPublicId: string;
+  workspaceMembers: WorkspaceMember[];
+}) => {
   const utils = api.useUtils();
   const { showPopup } = usePopup();
   const { canCreateComment } = usePermissions();
@@ -23,10 +30,6 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
     },
   });
 
-  const queryParams = {
-    cardPublicId,
-  };
-
   const addCommentMutation = api.card.addComment.useMutation({
     onError: (_error, _newList) => {
       showPopup({
@@ -57,18 +60,13 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
       onSubmit={handleSubmit(onSubmit)}
       className="flex w-full max-w-[800px] flex-col rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000 sm:text-sm sm:leading-6"
     >
-      <ContentEditable
-        placeholder={t`Add a comment...`}
-        html={watch("comment")}
-        disabled={false}
-        onChange={(e) => setValue("comment", e.target.value)}
-        className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
-        onKeyDown={async (e) => {
-          if (e.key === "Enter" && e.shiftKey) {
-            e.preventDefault();
-            await handleSubmit(onSubmit)();
-          }
-        }}
+      <Editor
+        content={watch("comment")}
+        onChange={(value) => setValue("comment", value)}
+        workspaceMembers={workspaceMembers}
+        enableYouTubeEmbed={false}
+        placeholder={t`Add comment... (type '/' to open commands or '@' to mention)`}
+        disableHeadings={true}
       />
       <div className="flex justify-end">
         <button