feat: tagging members in description (#140)

* feat: tagging members in description

* chore: tiptap mention package

* feat: avatar before names in members dropdown

apps/web/src/views/board/components/NewCardForm.tsx

@@ -14,7 +14,7 @@ import { generateUID } from "@kan/shared/utils";
 import Avatar from "~/components/Avatar";
 import Button from "~/components/Button";
 import CheckboxDropdown from "~/components/CheckboxDropdown";
-import Editor from "~/components/Editor";
+import Editor, { WorkspaceMember } from "~/components/Editor";
 import Input from "~/components/Input";
 import LabelIcon from "~/components/LabelIcon";
 import Toggle from "~/components/Toggle";
@@ -322,6 +322,17 @@ export function NewCardForm({
                 setValue("description", value);
                 saveFormState({ ...formState, description: value });
               }}
+              workspaceMembers={
+                boardData?.workspace.members?.map((member): WorkspaceMember => ({
+                  publicId: member.publicId,
+                  email: member.email,
+                  user: member.user ? {
+                    id: member.publicId,
+                    name: member.user.name,
+                    image: member.user.image ?? null,
+                  } : null,
+                })) ?? []
+              }
             />
           </div>
         </div>

apps/web/src/views/card/index.tsx

@@ -247,6 +247,7 @@ export default function CardPage() {
                         content={card.description}
                         onChange={(e) => setValue("description", e)}
                         onBlur={() => handleSubmit(onSubmit)()}
+                        workspaceMembers={board?.workspace?.members ?? []}
                       />
                     </div>
                   </form>

apps/web/src/views/public/board/CardModal.tsx

@@ -119,7 +119,11 @@ export function CardModal({
               {data?.description && (
                 <div className="mb-10 flex w-full max-w-2xl justify-between">
                   <div className="mt-2">
-                    <Editor content={data.description} readOnly />
+                    <Editor
+                      content={data.description}
+                      readOnly
+                      workspaceMembers={data?.list.board.workspace.members ?? []}
+                    />
                   </div>
                 </div>
               )}