Feat: Markdown editor for description on cards (#43)

* feat: integrate MDXEditor for card description with markdown support

* feat: replace textarea with markdown editor for card descriptions and improve styling

* refactor: replace MDXEditor with Tiptap for rich text editing

* fix: prevent menu item from taking focus and submitting

* feat: replace editor menu with bubble menu and add placeholder text

* feat: implement slash commands menu in editor with suggestion API

* chore: update editor styling

* chore: update editor placeholder text

* fix: navigate command list by keyboard and tweak styling

* fix: prevent editor onBlur from submitting NewCardForm

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

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

@@ -1,5 +1,7 @@
+import { authClient } from "@kan/auth/client";
 import { useRouter } from "next/router";
 import { HiXMark } from "react-icons/hi2";
+import Editor from "~/components/Editor";
 
 import { useModal } from "~/providers/modal";
 import { api } from "~/utils/api";
@@ -16,6 +18,7 @@ export function CardModal({
 }) {
   const router = useRouter();
   const { closeModal, isOpen } = useModal();
+  const { data: session } = authClient.useSession();
 
   const { data, isLoading } = api.card.byId.useQuery(
     {
@@ -90,9 +93,7 @@ export function CardModal({
           {data?.description && (
             <div className="mb-10 flex w-full max-w-2xl justify-between">
               <div className="mt-2">
-                <p 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">
-                  {data.description}
-                </p>
+                <Editor markdown={data.description} readOnly />
               </div>
             </div>
           )}