From f66b8e996faba6e8610035b814cc6617b6becf2b Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Wed, 18 Oct 2023 00:48:53 +0530
Subject: [PATCH 01/21] feat: created qna session page with temperory id

---
 app/qna/session/id/page.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 app/qna/session/id/page.tsx

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
new file mode 100644
index 0000000..01c08d9
--- /dev/null
+++ b/app/qna/session/id/page.tsx
@@ -0,0 +1,35 @@
+import PageContent from "@/components/layouts/page-content"
+import ViewContainer from "@/components/layouts/view-container"
+import { Button } from "@/components/ui/button"
+
+
+const QNASession : React.FunctionComponent = () =>{
+    console.log()
+    return(
+        <PageContent>
+            <ViewContainer className="flex justify-between">
+                <section className="qna-session-question-list">
+                    <div className="qna-session-topic">[Topic]</div>
+                    <div className="qna-questions flex flex-col">[question-list]</div>
+                </section>
+                <div>
+                    <div className="flex">
+                        <div className="remaining-time-wrapper">
+                            <div className="remaining-time flex justify-between">
+                                <p>Remaining Time</p>
+                                <p>[time]</p>
+                            </div>
+                        </div>
+                        <div className="remaining-time-line"></div>
+                        <Button className="end-session-btn">End Session</Button>
+                    </div>
+                    <div className="question">[question]</div>
+                    <div className="answer-wrapper"></div>
+                    <Button className="mark-complete-btn">Mark as completed</Button>
+                    <Button className="submit-btn">Submit and End Session</Button>
+                </div>
+            </ViewContainer>
+        </PageContent>
+    )
+}
+export default QNASession
\ No newline at end of file

From 82dccfb63fa937705abbddb53faf25795e7d2cc4 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Wed, 18 Oct 2023 02:26:27 +0530
Subject: [PATCH 02/21] feat: created question interface and mock questions
 data

---
 app/qna/page.tsx                |  1 +
 middleware/qna/qna-questions.ts | 16 ++++++++++++++++
 mocks/qna-questions-mock.ts     | 32 ++++++++++++++++++++++++++++++++
 types/qna-que-card.d.ts         |  5 +++++
 4 files changed, 54 insertions(+)
 create mode 100644 middleware/qna/qna-questions.ts
 create mode 100644 mocks/qna-questions-mock.ts
 create mode 100644 types/qna-que-card.d.ts

diff --git a/app/qna/page.tsx b/app/qna/page.tsx
index 8a3880f..11bfc86 100644
--- a/app/qna/page.tsx
+++ b/app/qna/page.tsx
@@ -33,6 +33,7 @@ import { fetchTopics } from '@/middleware/qna/sessions';
 import { getTopicDepthLevels } from '@/common';
 
 const TopicBasedQNA: React.FunctionComponent = () => {
+  
   const [recentQNASessions, setRecentQNASessions] = useState<
     Array<QNASessionCardInterface>
   >(fetchRecentQNASessions());
diff --git a/middleware/qna/qna-questions.ts b/middleware/qna/qna-questions.ts
new file mode 100644
index 0000000..23a986e
--- /dev/null
+++ b/middleware/qna/qna-questions.ts
@@ -0,0 +1,16 @@
+import { Environment } from '@/common/environment-variables';
+import { QnaMockQuestions } from '@/mocks/qna-questions-mock';
+
+function fetchQnaQuestions(){
+    switch (Environment.ENVIRONMENT_TYPE){
+        case "development":
+            return QnaMockQuestions;
+        case "production":
+            //TODO Send topic-name and fetch questions-list with marks for each question via openAI
+            return [];
+        default:
+            return [];
+    }
+}
+
+export {fetchQnaQuestions};
\ No newline at end of file
diff --git a/mocks/qna-questions-mock.ts b/mocks/qna-questions-mock.ts
new file mode 100644
index 0000000..9d52fd8
--- /dev/null
+++ b/mocks/qna-questions-mock.ts
@@ -0,0 +1,32 @@
+
+
+const QnaMockQuestions: Array<QnaQueCardInterface> = [
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "1"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "2"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "3"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "4"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "5"
+    }
+]
+
+
+export {QnaMockQuestions};
\ No newline at end of file
diff --git a/types/qna-que-card.d.ts b/types/qna-que-card.d.ts
new file mode 100644
index 0000000..465b9e5
--- /dev/null
+++ b/types/qna-que-card.d.ts
@@ -0,0 +1,5 @@
+declare interface QnaQueCardInterface {
+    question: string;
+    score: number;
+    questionId: string;
+  }
\ No newline at end of file

From e41cc88234028e561d1d451a86dcf5928309e520 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Wed, 18 Oct 2023 02:27:25 +0530
Subject: [PATCH 03/21] feat: created qna-question-card

---
 components/ui/qna-ques-card.tsx  | 17 +++++++++++++++++
 components/ui/recent-session.tsx |  2 +-
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/qna-ques-card.tsx

diff --git a/components/ui/qna-ques-card.tsx b/components/ui/qna-ques-card.tsx
new file mode 100644
index 0000000..b1fe86b
--- /dev/null
+++ b/components/ui/qna-ques-card.tsx
@@ -0,0 +1,17 @@
+import Link from "next/link";
+import { BoxCard } from "../layouts/box-card";
+import { cn } from "@/lib/utils";
+
+const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score})=>{
+    return(
+        <Link href="#">
+            <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4')}>
+            <div className="font-semibold text-lg">{question}</div>
+            <div className="
+            text-neutral-400">+{score} score</div>
+            </BoxCard>
+        </Link>
+    )
+}
+
+export {QnaQuesCard};
\ No newline at end of file
diff --git a/components/ui/recent-session.tsx b/components/ui/recent-session.tsx
index fb08b7d..b352809 100644
--- a/components/ui/recent-session.tsx
+++ b/components/ui/recent-session.tsx
@@ -12,7 +12,7 @@ const RecentSession: React.FunctionComponent<QNASessionCardInterface> = ({
     <Link
       href="#"
       className="w-fit active:outline-none active:transition-none focus:outline-none h-fit rounded-2xl max-sm:rounded-xl hover:scale-95 active:scale-90 transition-all">
-      <BoxCard className={cn('bg-neutral-100 hover:brightness-90')}>
+      <BoxCard className={cn('bg-neutral-700 hover:brightness-90')}>
         <MessageSquare
           className={cn('absolute icon-wrapper top-4 right-4 text-black')}
         />

From 61a84d1573a60b6675efbeff4f00b9248dc8e184 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Wed, 18 Oct 2023 02:28:35 +0530
Subject: [PATCH 04/21] feat: rendered question-list

---
 app/qna/session/id/page.tsx                   |  9 +++----
 .../sections/qna-questions-list/index.tsx     | 26 +++++++++++++++++++
 tsconfig.json                                 |  2 +-
 3 files changed, 31 insertions(+), 6 deletions(-)
 create mode 100644 components/sections/qna-questions-list/index.tsx

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 01c08d9..3b86ee8 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -1,17 +1,16 @@
 import PageContent from "@/components/layouts/page-content"
 import ViewContainer from "@/components/layouts/view-container"
 import { Button } from "@/components/ui/button"
+import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
+import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
 
 
 const QNASession : React.FunctionComponent = () =>{
-    console.log()
+    
     return(
         <PageContent>
             <ViewContainer className="flex justify-between">
-                <section className="qna-session-question-list">
-                    <div className="qna-session-topic">[Topic]</div>
-                    <div className="qna-questions flex flex-col">[question-list]</div>
-                </section>
+                <QnaQuestionsList data={fetchQnaQuestions()}/>
                 <div>
                     <div className="flex">
                         <div className="remaining-time-wrapper">
diff --git a/components/sections/qna-questions-list/index.tsx b/components/sections/qna-questions-list/index.tsx
new file mode 100644
index 0000000..925c2fc
--- /dev/null
+++ b/components/sections/qna-questions-list/index.tsx
@@ -0,0 +1,26 @@
+import { QnaQuesCard } from "@/components/ui/qna-ques-card";
+import { fetchQnaQuestions } from "@/middleware/qna/qna-questions";
+
+const QnaQuestionsList: React.FunctionComponent<{
+    data: Array<QnaQueCardInterface>;
+  }> = ({ data }) => {
+    return(
+        <section className="qna-question-list">
+            <div className="qna-topic mb-2 text-xl font-bold">Frontend Engineering</div>
+            <div className="qna-questions flex flex-col gap-4 overflow-y-scroll hide-scrollbar h-[75svh]">
+            {data.map((q, index) => {
+            return (
+              <QnaQuesCard
+                key={index}
+                question={q.question}
+                score = {q.score}
+                questionId={q.questionId}
+              />
+            );
+          })}
+            </div>
+        </section>
+    )
+}
+
+export {QnaQuestionsList};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index c714696..b773f2a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/sections/qna-ques-list"],
   "exclude": ["node_modules"]
 }

From ec2bfb5b3731ec60a37f12888823c6bffe09b39c Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Wed, 18 Oct 2023 02:39:04 +0530
Subject: [PATCH 05/21] fix: Link tab removed

---
 components/ui/qna-ques-card.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/ui/qna-ques-card.tsx b/components/ui/qna-ques-card.tsx
index b1fe86b..fa51ba8 100644
--- a/components/ui/qna-ques-card.tsx
+++ b/components/ui/qna-ques-card.tsx
@@ -4,13 +4,11 @@ import { cn } from "@/lib/utils";
 
 const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score})=>{
     return(
-        <Link href="#">
-            <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4')}>
-            <div className="font-semibold text-lg">{question}</div>
-            <div className="
-            text-neutral-400">+{score} score</div>
-            </BoxCard>
-        </Link>
+        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4')}>
+        <div className="font-semibold text-lg">{question}</div>
+        <div className="
+        text-neutral-400">+{score} score</div>
+        </BoxCard>
     )
 }
 

From 738ef59e13b1c2ebccf72c00dee8df47a09d107b Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 01:30:48 +0530
Subject: [PATCH 06/21] styles: qna-question-sections

---
 app/qna/session/id/page.tsx                   | 42 +++++++++++++------
 .../sections/qna-questions-list/index.tsx     |  4 +-
 components/ui/qna-ques-card.tsx               |  6 +--
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 3b86ee8..7d1c8ac 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -1,31 +1,47 @@
+'use client'
 import PageContent from "@/components/layouts/page-content"
 import ViewContainer from "@/components/layouts/view-container"
 import { Button } from "@/components/ui/button"
 import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
 import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
+import { Progress } from "@/components/ui/progress"
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
 
 
 const QNASession : React.FunctionComponent = () =>{
     
+    const [time, setTime] = useState("12:34")
+
     return(
         <PageContent>
-            <ViewContainer className="flex justify-between">
+            <ViewContainer className="flex justify-between gap-[120px]">
                 <QnaQuestionsList data={fetchQnaQuestions()}/>
-                <div>
-                    <div className="flex">
-                        <div className="remaining-time-wrapper">
-                            <div className="remaining-time flex justify-between">
-                                <p>Remaining Time</p>
-                                <p>[time]</p>
+                <div className="w-full flex flex-col gap-16 ">
+                    <div className="remainingTime-endSessionAction-wrapper flex justify-between">
+                        <div className="remainingTime-progress-wrapper w-3/4 flex flex-col gap-4">
+                            <div className="remaining-time-wrapper">
+                                <div className="remaining-time flex justify-between">
+                                    <h3 className="font-semibold text-lg">Remaining Time</h3>
+                                    <p className="text-neutral-400 font-medium">{time} min</p>
+                                </div>
+                            </div>
+                            {/* <div className="qna-progress-line"></div> */}
+                            <Progress/>
+                        </div>
+                        <Button variant="destructive" className="end-session-btn">End Session</Button>
+                    </div>
+                    <div>
+                        <div className="flex flex-col gap-16">
+                            <h2 className="question text-3xl font-semibold">[Question]</h2>
+                            <div className="answer-wrapper ">
+                                <p>Write your answer here</p>
+                                <Input className="answer-box h-3/4 " height="50px" />
                             </div>
                         </div>
-                        <div className="remaining-time-line"></div>
-                        <Button className="end-session-btn">End Session</Button>
+                        <Button className="mark-complete-btn">Mark as completed</Button>
                     </div>
-                    <div className="question">[question]</div>
-                    <div className="answer-wrapper"></div>
-                    <Button className="mark-complete-btn">Mark as completed</Button>
-                    <Button className="submit-btn">Submit and End Session</Button>
+                    <Button className="submit-btn w-fit ml-auto">Submit and End Session</Button>
                 </div>
             </ViewContainer>
         </PageContent>
diff --git a/components/sections/qna-questions-list/index.tsx b/components/sections/qna-questions-list/index.tsx
index 925c2fc..cb60fb9 100644
--- a/components/sections/qna-questions-list/index.tsx
+++ b/components/sections/qna-questions-list/index.tsx
@@ -5,8 +5,8 @@ const QnaQuestionsList: React.FunctionComponent<{
     data: Array<QnaQueCardInterface>;
   }> = ({ data }) => {
     return(
-        <section className="qna-question-list">
-            <div className="qna-topic mb-2 text-xl font-bold">Frontend Engineering</div>
+        <section className="qna-question-list flex flex-col items-center">
+            <div className="qna-topic mb-5 text-xl font-bold">Frontend Engineering</div>
             <div className="qna-questions flex flex-col gap-4 overflow-y-scroll hide-scrollbar h-[75svh]">
             {data.map((q, index) => {
             return (
diff --git a/components/ui/qna-ques-card.tsx b/components/ui/qna-ques-card.tsx
index fa51ba8..5ae28c6 100644
--- a/components/ui/qna-ques-card.tsx
+++ b/components/ui/qna-ques-card.tsx
@@ -5,9 +5,9 @@ import { cn } from "@/lib/utils";
 const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score})=>{
     return(
         <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4')}>
-        <div className="font-semibold text-lg">{question}</div>
-        <div className="
-        text-neutral-400">+{score} score</div>
+        <p className="font-semibold text-lg truncate">{question}</p>
+        <span className="
+        text-neutral-400">+{score} score</span>
         </BoxCard>
     )
 }

From 8a90d094d5f59e00c3cc4ce7ff30e62f6dc73834 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 02:32:50 +0530
Subject: [PATCH 07/21] feat: included text-area

---
 app/qna/session/id/page.tsx | 14 +++++++-------
 components/ui/textarea.tsx  | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 components/ui/textarea.tsx

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 7d1c8ac..8168572 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -6,7 +6,8 @@ import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
 import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
 import { Progress } from "@/components/ui/progress"
 import { useState } from "react"
-import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Check } from 'lucide-react';
 
 
 const QNASession : React.FunctionComponent = () =>{
@@ -26,22 +27,21 @@ const QNASession : React.FunctionComponent = () =>{
                                     <p className="text-neutral-400 font-medium">{time} min</p>
                                 </div>
                             </div>
-                            {/* <div className="qna-progress-line"></div> */}
                             <Progress/>
                         </div>
                         <Button variant="destructive" className="end-session-btn">End Session</Button>
                     </div>
                     <div>
-                        <div className="flex flex-col gap-16">
+                        <div className="flex flex-col gap-11">
                             <h2 className="question text-3xl font-semibold">[Question]</h2>
                             <div className="answer-wrapper ">
-                                <p>Write your answer here</p>
-                                <Input className="answer-box h-3/4 " height="50px" />
+                                <p className="font-medium mb-1 text-lg" >Write your answer here</p>
+                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 text-lg" placeholder="Good luck! You will do well" />
                             </div>
                         </div>
-                        <Button className="mark-complete-btn">Mark as completed</Button>
+                        <Button className="mark-complete-btn mt-3 flex gap-1"><Check/><span>Mark as completed</span></Button>
                     </div>
-                    <Button className="submit-btn w-fit ml-auto">Submit and End Session</Button>
+                    <Button className="submit-btn w-fit ml-auto mt-[-25px]">Submit and End Session</Button>
                 </div>
             </ViewContainer>
         </PageContent>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..2c30ec3
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

From 39a20672d51df2a98791058f30ccb751c0130b89 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 02:41:46 +0530
Subject: [PATCH 08/21] styles: text-area fixes

---
 app/qna/session/id/page.tsx | 4 ++--
 components/ui/textarea.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 8168572..965af05 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -35,8 +35,8 @@ const QNASession : React.FunctionComponent = () =>{
                         <div className="flex flex-col gap-11">
                             <h2 className="question text-3xl font-semibold">[Question]</h2>
                             <div className="answer-wrapper ">
-                                <p className="font-medium mb-1 text-lg" >Write your answer here</p>
-                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 text-lg" placeholder="Good luck! You will do well" />
+                                <p className="font-medium mb-1 text-sm" >Write your answer here</p>
+                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" />
                             </div>
                         </div>
                         <Button className="mark-complete-btn mt-3 flex gap-1"><Check/><span>Mark as completed</span></Button>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 2c30ec3..95b5d42 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-neutral-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
+          "flex min-h-[80px] w-full rounded-md border border-neutral-200 hover:border-neutral-400 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
           className
         )}
         ref={ref}

From 8d14fe50ab7c314107d313d31fdd1aadedec24a3 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 02:48:42 +0530
Subject: [PATCH 09/21] feat: UI completed

---
 app/qna/session/id/page.tsx | 2 +-
 components/ui/textarea.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 965af05..7430642 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -27,7 +27,7 @@ const QNASession : React.FunctionComponent = () =>{
                                     <p className="text-neutral-400 font-medium">{time} min</p>
                                 </div>
                             </div>
-                            <Progress/>
+                            <Progress value={70}/>
                         </div>
                         <Button variant="destructive" className="end-session-btn">End Session</Button>
                     </div>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 95b5d42..473c0ad 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-neutral-200 hover:border-neutral-400 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
+          "flex min-h-[80px] w-full rounded-md border border-neutral-200 hover:border-neutral-400 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300 text-neutral-700",
           className
         )}
         ref={ref}

From c3696c2bf7a3a645cd791fd58b217b5e47f86e2a Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 05:10:30 +0530
Subject: [PATCH 10/21] feat: remaining-time functionality added

---
 app/qna/session/id/page.tsx                   | 13 ++---
 .../sections/qna-questions-list/index.tsx     |  4 +-
 components/ui/qna-ques-card.tsx               |  7 ++-
 components/ui/qna-timer.tsx                   | 51 +++++++++++++++++++
 mocks/qna-questions-mock.ts                   | 27 +++++++++-
 tsconfig.json                                 |  2 +-
 6 files changed, 88 insertions(+), 16 deletions(-)
 create mode 100644 components/ui/qna-timer.tsx

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 7430642..cca2a97 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -4,15 +4,16 @@ import ViewContainer from "@/components/layouts/view-container"
 import { Button } from "@/components/ui/button"
 import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
 import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
-import { Progress } from "@/components/ui/progress"
 import { useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import { Check } from 'lucide-react';
+import  {Timer}  from "@/components/ui/qna-timer"
 
 
 const QNASession : React.FunctionComponent = () =>{
     
     const [time, setTime] = useState("12:34")
+    const [progressVal, setProgressVal] = useState(0);
 
     return(
         <PageContent>
@@ -20,15 +21,7 @@ const QNASession : React.FunctionComponent = () =>{
                 <QnaQuestionsList data={fetchQnaQuestions()}/>
                 <div className="w-full flex flex-col gap-16 ">
                     <div className="remainingTime-endSessionAction-wrapper flex justify-between">
-                        <div className="remainingTime-progress-wrapper w-3/4 flex flex-col gap-4">
-                            <div className="remaining-time-wrapper">
-                                <div className="remaining-time flex justify-between">
-                                    <h3 className="font-semibold text-lg">Remaining Time</h3>
-                                    <p className="text-neutral-400 font-medium">{time} min</p>
-                                </div>
-                            </div>
-                            <Progress value={70}/>
-                        </div>
+                        <Timer seconds={3600}/>
                         <Button variant="destructive" className="end-session-btn">End Session</Button>
                     </div>
                     <div>
diff --git a/components/sections/qna-questions-list/index.tsx b/components/sections/qna-questions-list/index.tsx
index cb60fb9..225e453 100644
--- a/components/sections/qna-questions-list/index.tsx
+++ b/components/sections/qna-questions-list/index.tsx
@@ -6,8 +6,8 @@ const QnaQuestionsList: React.FunctionComponent<{
   }> = ({ data }) => {
     return(
         <section className="qna-question-list flex flex-col items-center">
-            <div className="qna-topic mb-5 text-xl font-bold">Frontend Engineering</div>
-            <div className="qna-questions flex flex-col gap-4 overflow-y-scroll hide-scrollbar h-[75svh]">
+            <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
+            <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
             {data.map((q, index) => {
             return (
               <QnaQuesCard
diff --git a/components/ui/qna-ques-card.tsx b/components/ui/qna-ques-card.tsx
index 5ae28c6..6a44dad 100644
--- a/components/ui/qna-ques-card.tsx
+++ b/components/ui/qna-ques-card.tsx
@@ -4,8 +4,11 @@ import { cn } from "@/lib/utils";
 
 const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score})=>{
     return(
-        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4')}>
-        <p className="font-semibold text-lg truncate">{question}</p>
+        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px]')}>
+        <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
+            <span>{questionId}.</span>
+            <p>{question}</p>
+        </div>   
         <span className="
         text-neutral-400">+{score} score</span>
         </BoxCard>
diff --git a/components/ui/qna-timer.tsx b/components/ui/qna-timer.tsx
new file mode 100644
index 0000000..a3e9e26
--- /dev/null
+++ b/components/ui/qna-timer.tsx
@@ -0,0 +1,51 @@
+
+import { useEffect, useRef, useState } from "react";
+import { Progress } from "@/components/ui/progress";
+
+const formatTime = (time: number) => {
+  let minutes = Math.floor(time / 60);
+  let seconds = time % 60;
+
+  const formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+  const formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
+
+  return `${formattedMinutes}:${formattedSeconds}`;
+}
+
+function Timer({ seconds }: any) {
+  const totalTime = seconds;
+  const [progressVal, setProgressVal] = useState(0);
+  const [timer, setTimer] = useState(seconds);
+  const timerId: any = useRef();
+
+  useEffect(() => {
+    timerId.current = setInterval(() => {
+      setTimer((prev: number) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timerId.current);
+  }, []);
+
+  useEffect(() => {
+    const percent = ((totalTime-timer) / seconds) * 100; // Calculate progress relative to 'seconds'
+    setProgressVal(percent);
+    if (timer <= 0) {
+      clearInterval(timerId.current);
+      alert("Time up!");
+    }
+  }, [timer, seconds]);
+
+  return (
+    <div className="remainingTime-progress-wrapper w-3/4 flex flex-col gap-4">
+      <div className="remaining-time-wrapper">
+        <div className="remaining-time flex justify-between">
+          <h3 className="font-semibold text-lg">Remaining Time</h3>
+          <div className="text-neutral-400 font-medium">{formatTime(timer)}</div>
+        </div>
+      </div>
+      <Progress value={progressVal}/>
+    </div>
+  );
+}
+
+export { Timer };
+
diff --git a/mocks/qna-questions-mock.ts b/mocks/qna-questions-mock.ts
index 9d52fd8..d1e5d13 100644
--- a/mocks/qna-questions-mock.ts
+++ b/mocks/qna-questions-mock.ts
@@ -2,7 +2,7 @@
 
 const QnaMockQuestions: Array<QnaQueCardInterface> = [
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm ",
         score: 10,
         questionId: "1"
     },
@@ -25,6 +25,31 @@ const QnaMockQuestions: Array<QnaQueCardInterface> = [
         question: "Define Diffing Algorithm",
         score: 10,
         questionId: "5"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "6"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "7"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "8"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "9"
+    },
+    {
+        question: "Define Diffing Algorithm",
+        score: 10,
+        questionId: "10"
     }
 ]
 
diff --git a/tsconfig.json b/tsconfig.json
index b773f2a..438c72d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/sections/qna-ques-list"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "components/sections/qna-ques-list", "components/ui/qna-timer.tsx"],
   "exclude": ["node_modules"]
 }

From 6e7ab87c5e2dc7c14cb6ea151e74c2e0c5dc40fb Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 06:48:47 +0530
Subject: [PATCH 11/21] feat: added functionality in questions

---
 app/globals.css                               |  2 +
 app/qna/session/id/page.tsx                   | 44 +++++++++++++++++--
 components/layouts/box-card.tsx               |  2 +-
 .../sections/qna-questions-list/index.tsx     |  6 +--
 components/ui/textarea.tsx                    |  2 +-
 mocks/qna-questions-mock.ts                   | 40 ++++++++---------
 types/qna-que-card.d.ts                       |  2 +-
 7 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index af525c0..377e77b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -27,3 +27,5 @@ h4 {
 .form-input-wrapper {
   @apply grid grid-cols-1 gap-2 my-6;
 }
+
+
diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index cca2a97..a1d3d82 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -4,21 +4,57 @@ import ViewContainer from "@/components/layouts/view-container"
 import { Button } from "@/components/ui/button"
 import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
 import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import { Check } from 'lucide-react';
 import  {Timer}  from "@/components/ui/qna-timer"
+import { QnaQuesCard } from "@/components/ui/qna-ques-card";
+import { BoxCard } from "@/components/layouts/box-card"
+import { cn } from "@/lib/utils";
 
 
 const QNASession : React.FunctionComponent = () =>{
     
     const [time, setTime] = useState("12:34")
     const [progressVal, setProgressVal] = useState(0);
+    const qData = fetchQnaQuestions();
+    const [qNum, setQNum] = useState(0);
+    const [storeAns, setStoreAns] = useState(["", "", "", "", "", "", "", "", "", "",])
+    const handleAnsChange = (e:any)=>{
+        setStoreAns([
+            storeAns[qNum]=e.target.value as string
+        ])
+    }
 
     return(
         <PageContent>
             <ViewContainer className="flex justify-between gap-[120px]">
-                <QnaQuestionsList data={fetchQnaQuestions()}/>
+                {/* <QnaQuestionsList data={fetchQnaQuestions()}/> */}
+                {/**/}
+                <section className="qna-question-list flex flex-col items-center">
+                    <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
+                    <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
+                    {qData.map((q, index) => {
+                    return (
+                    // <QnaQuesCard
+                    //     key={index}
+                    //     question={q.question}
+                    //     score = {q.score}
+                    //     questionId={q.questionId}
+                    // />
+                        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={()=>setQNum(q.questionId)}>
+                            <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
+                                <span>{q.questionId}.</span>
+                                <p>{q.question}</p>
+                            </div>   
+                            <span className="
+                            text-neutral-400">+{q.score} score</span>
+                        </BoxCard>
+                    );
+                })}
+                    </div>
+                </section>
+                {/**/}
                 <div className="w-full flex flex-col gap-16 ">
                     <div className="remainingTime-endSessionAction-wrapper flex justify-between">
                         <Timer seconds={3600}/>
@@ -26,10 +62,10 @@ const QNASession : React.FunctionComponent = () =>{
                     </div>
                     <div>
                         <div className="flex flex-col gap-11">
-                            <h2 className="question text-3xl font-semibold">[Question]</h2>
+                            <h2 className="question text-3xl font-semibold">{qData[qNum].question}</h2>
                             <div className="answer-wrapper ">
                                 <p className="font-medium mb-1 text-sm" >Write your answer here</p>
-                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" />
+                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]}/>
                             </div>
                         </div>
                         <Button className="mark-complete-btn mt-3 flex gap-1"><Check/><span>Mark as completed</span></Button>
diff --git a/components/layouts/box-card.tsx b/components/layouts/box-card.tsx
index ac068ea..1e89fef 100644
--- a/components/layouts/box-card.tsx
+++ b/components/layouts/box-card.tsx
@@ -6,7 +6,7 @@ const BoxCard: React.FunctionComponent<
 > = ({ className, children, ...props }) => (
   <div
     className={cn(
-      'relative w-[240px] h-[140px] rounded-2xl border-transparent shadow transition-all hover:shadow-md',
+      'relative w-[240px] h-[140px] rounded-2xl border-transparent shadow transition-all hover:shadow-md cursor:pointer',
       'max-xl:w-[220px] max-xl:h-[120px]',
       'max-lg:w-[200px] max-lg:h-[100px]',
       'max-sm:rounded-xl',
diff --git a/components/sections/qna-questions-list/index.tsx b/components/sections/qna-questions-list/index.tsx
index 225e453..6b2327e 100644
--- a/components/sections/qna-questions-list/index.tsx
+++ b/components/sections/qna-questions-list/index.tsx
@@ -1,9 +1,7 @@
 import { QnaQuesCard } from "@/components/ui/qna-ques-card";
-import { fetchQnaQuestions } from "@/middleware/qna/qna-questions";
 
-const QnaQuestionsList: React.FunctionComponent<{
-    data: Array<QnaQueCardInterface>;
-  }> = ({ data }) => {
+const QnaQuestionsList: React.FunctionComponent<{ data: Array<QnaQueCardInterface> }> = ({ data }) => {
+  
     return(
         <section className="qna-question-list flex flex-col items-center">
             <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 473c0ad..b517ca9 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-neutral-200 hover:border-neutral-400 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300 text-neutral-700",
+          "flex min-h-[300px] w-full rounded-md border border-neutral-200 hover:border-neutral-400 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-neutral-400 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-950 dark:ring-offset-neutral-950 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300 text-neutral-700",
           className
         )}
         ref={ref}
diff --git a/mocks/qna-questions-mock.ts b/mocks/qna-questions-mock.ts
index d1e5d13..cd7504a 100644
--- a/mocks/qna-questions-mock.ts
+++ b/mocks/qna-questions-mock.ts
@@ -2,54 +2,54 @@
 
 const QnaMockQuestions: Array<QnaQueCardInterface> = [
     {
-        question: "Define Diffing Algorithm ",
+        question: "Define Diffing Algorithm 1",
         score: 10,
-        questionId: "1"
+        questionId: 0
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 2",
         score: 10,
-        questionId: "2"
+        questionId: 1
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 3",
         score: 10,
-        questionId: "3"
+        questionId: 2
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 4",
         score: 10,
-        questionId: "4"
+        questionId: 3
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 5",
         score: 10,
-        questionId: "5"
+        questionId: 4
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 6",
         score: 10,
-        questionId: "6"
+        questionId: 5
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 7",
         score: 10,
-        questionId: "7"
+        questionId: 6
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 8",
         score: 10,
-        questionId: "8"
+        questionId: 7
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 9",
         score: 10,
-        questionId: "9"
+        questionId: 8
     },
     {
-        question: "Define Diffing Algorithm",
+        question: "Define Diffing Algorithm 10",
         score: 10,
-        questionId: "10"
+        questionId: 9
     }
 ]
 
diff --git a/types/qna-que-card.d.ts b/types/qna-que-card.d.ts
index 465b9e5..99957ad 100644
--- a/types/qna-que-card.d.ts
+++ b/types/qna-que-card.d.ts
@@ -1,5 +1,5 @@
 declare interface QnaQueCardInterface {
     question: string;
     score: number;
-    questionId: string;
+    questionId: number;
   }
\ No newline at end of file

From c101f6aa57b006341001cc0063bbb346fd3d36e0 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 07:01:04 +0530
Subject: [PATCH 12/21] fix: vercel deployment issue fixed

---
 app/qna/session/id/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index a1d3d82..6f74704 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -42,7 +42,7 @@ const QNASession : React.FunctionComponent = () =>{
                     //     score = {q.score}
                     //     questionId={q.questionId}
                     // />
-                        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={()=>setQNum(q.questionId)}>
+                        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={()=>setQNum(q.questionId)}key={index}>
                             <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
                                 <span>{q.questionId}.</span>
                                 <p>{q.question}</p>

From 02d99be519431a73bbcae8525ca39dc4ca1194d0 Mon Sep 17 00:00:00 2001
From: Yash Sehgal <yashsehgal.work@gmail.com>
Date: Mon, 23 Oct 2023 17:10:46 +0530
Subject: [PATCH 13/21] fix: question prerender fix

---
 app/qna/session/id/page.tsx | 54 ++++++++++++++++++-------------------
 components/ui/qna-timer.tsx |  4 +--
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/id/page.tsx
index 6f74704..a767533 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/id/page.tsx
@@ -7,26 +7,26 @@ import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
 import { useEffect, useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import { Check } from 'lucide-react';
-import  {Timer}  from "@/components/ui/qna-timer"
+import { Timer } from "@/components/ui/qna-timer"
 import { QnaQuesCard } from "@/components/ui/qna-ques-card";
 import { BoxCard } from "@/components/layouts/box-card"
 import { cn } from "@/lib/utils";
 
 
-const QNASession : React.FunctionComponent = () =>{
-    
+const QNASession: React.FunctionComponent = () => {
+
     const [time, setTime] = useState("12:34")
     const [progressVal, setProgressVal] = useState(0);
     const qData = fetchQnaQuestions();
     const [qNum, setQNum] = useState(0);
     const [storeAns, setStoreAns] = useState(["", "", "", "", "", "", "", "", "", "",])
-    const handleAnsChange = (e:any)=>{
+    const handleAnsChange = (e: any) => {
         setStoreAns([
-            storeAns[qNum]=e.target.value as string
+            storeAns[qNum] = e.target.value as string
         ])
     }
 
-    return(
+    return (
         <PageContent>
             <ViewContainer className="flex justify-between gap-[120px]">
                 {/* <QnaQuestionsList data={fetchQnaQuestions()}/> */}
@@ -34,30 +34,30 @@ const QNASession : React.FunctionComponent = () =>{
                 <section className="qna-question-list flex flex-col items-center">
                     <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
                     <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
-                    {qData.map((q, index) => {
-                    return (
-                    // <QnaQuesCard
-                    //     key={index}
-                    //     question={q.question}
-                    //     score = {q.score}
-                    //     questionId={q.questionId}
-                    // />
-                        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={()=>setQNum(q.questionId)}key={index}>
-                            <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
-                                <span>{q.questionId}.</span>
-                                <p>{q.question}</p>
-                            </div>   
-                            <span className="
-                            text-neutral-400">+{q.score} score</span>
-                        </BoxCard>
-                    );
-                })}
+                        {qData?.map((q, index) => {
+                            return (
+                                // <QnaQuesCard
+                                //     key={index}
+                                //     question={q.question}
+                                //     score = {q.score}
+                                //     questionId={q.questionId}
+                                // />
+                                <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={() => setQNum(q?.questionId)} key={index}>
+                                    <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
+                                        <span>{q?.questionId}.</span>
+                                        <p>{q?.question}</p>
+                                    </div>
+                                    <span className="
+                            text-neutral-400">+{q?.score} score</span>
+                                </BoxCard>
+                            );
+                        })}
                     </div>
                 </section>
                 {/**/}
                 <div className="w-full flex flex-col gap-16 ">
                     <div className="remainingTime-endSessionAction-wrapper flex justify-between">
-                        <Timer seconds={3600}/>
+                        <Timer seconds={3600} />
                         <Button variant="destructive" className="end-session-btn">End Session</Button>
                     </div>
                     <div>
@@ -65,10 +65,10 @@ const QNASession : React.FunctionComponent = () =>{
                             <h2 className="question text-3xl font-semibold">{qData[qNum].question}</h2>
                             <div className="answer-wrapper ">
                                 <p className="font-medium mb-1 text-sm" >Write your answer here</p>
-                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]}/>
+                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]} />
                             </div>
                         </div>
-                        <Button className="mark-complete-btn mt-3 flex gap-1"><Check/><span>Mark as completed</span></Button>
+                        <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>
                     </div>
                     <Button className="submit-btn w-fit ml-auto mt-[-25px]">Submit and End Session</Button>
                 </div>
diff --git a/components/ui/qna-timer.tsx b/components/ui/qna-timer.tsx
index a3e9e26..a52f896 100644
--- a/components/ui/qna-timer.tsx
+++ b/components/ui/qna-timer.tsx
@@ -26,7 +26,7 @@ function Timer({ seconds }: any) {
   }, []);
 
   useEffect(() => {
-    const percent = ((totalTime-timer) / seconds) * 100; // Calculate progress relative to 'seconds'
+    const percent = ((totalTime - timer) / seconds) * 100; // Calculate progress relative to 'seconds'
     setProgressVal(percent);
     if (timer <= 0) {
       clearInterval(timerId.current);
@@ -42,7 +42,7 @@ function Timer({ seconds }: any) {
           <div className="text-neutral-400 font-medium">{formatTime(timer)}</div>
         </div>
       </div>
-      <Progress value={progressVal}/>
+      <Progress value={progressVal} />
     </div>
   );
 }

From 156b216e5bd640fd1c91c7f1a511649a014ba8e3 Mon Sep 17 00:00:00 2001
From: Yash Sehgal <yashsehgal.work@gmail.com>
Date: Mon, 23 Oct 2023 18:01:08 +0530
Subject: [PATCH 14/21] fix: minor style improvements & folder structure

---
 app/qna/session/{id => [id]}/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename app/qna/session/{id => [id]}/page.tsx (96%)

diff --git a/app/qna/session/id/page.tsx b/app/qna/session/[id]/page.tsx
similarity index 96%
rename from app/qna/session/id/page.tsx
rename to app/qna/session/[id]/page.tsx
index a767533..b9f8786 100644
--- a/app/qna/session/id/page.tsx
+++ b/app/qna/session/[id]/page.tsx
@@ -65,7 +65,7 @@ const QNASession: React.FunctionComponent = () => {
                             <h2 className="question text-3xl font-semibold">{qData[qNum].question}</h2>
                             <div className="answer-wrapper ">
                                 <p className="font-medium mb-1 text-sm" >Write your answer here</p>
-                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-sm text-lg" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]} />
+                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]} />
                             </div>
                         </div>
                         <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>

From 76afcd63022b4264d3b31cb553bd851d1026e9f6 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Mon, 23 Oct 2023 20:29:44 +0530
Subject: [PATCH 15/21] fix: added random mock questions for better UI clarity

---
 app/qna/session/[id]/page.tsx |  2 +-
 mocks/qna-questions-mock.ts   | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/qna/session/[id]/page.tsx b/app/qna/session/[id]/page.tsx
index b9f8786..b933eab 100644
--- a/app/qna/session/[id]/page.tsx
+++ b/app/qna/session/[id]/page.tsx
@@ -44,7 +44,7 @@ const QNASession: React.FunctionComponent = () => {
                                 // />
                                 <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={() => setQNum(q?.questionId)} key={index}>
                                     <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
-                                        <span>{q?.questionId}.</span>
+                                        <span>{q?.questionId+1}.</span>
                                         <p>{q?.question}</p>
                                     </div>
                                     <span className="
diff --git a/mocks/qna-questions-mock.ts b/mocks/qna-questions-mock.ts
index cd7504a..8f71887 100644
--- a/mocks/qna-questions-mock.ts
+++ b/mocks/qna-questions-mock.ts
@@ -2,52 +2,52 @@
 
 const QnaMockQuestions: Array<QnaQueCardInterface> = [
     {
-        question: "Define Diffing Algorithm 1",
+        question: "Explain the difference between <div> and <span> elements.",
         score: 10,
         questionId: 0
     },
     {
-        question: "Define Diffing Algorithm 2",
+        question: "How do you center an element both horizontally and vertically using CSS?",
         score: 10,
         questionId: 1
     },
     {
-        question: "Define Diffing Algorithm 3",
+        question: "What is the DOM (Document Object Model) in JavaScript?",
         score: 10,
         questionId: 2
     },
     {
-        question: "Define Diffing Algorithm 4",
+        question: "How do you create a responsive webpage, and what are media queries?",
         score: 10,
         questionId: 3
     },
     {
-        question: "Define Diffing Algorithm 5",
+        question: "What is virtual DOM, and how does it work in React?",
         score: 10,
         questionId: 4
     },
     {
-        question: "Define Diffing Algorithm 6",
+        question: "How do you use Git for version control, and what are some common Git commands?",
         score: 10,
         questionId: 5
     },
     {
-        question: "Define Diffing Algorithm 7",
+        question: "Explain lazy loading and its benefits for web performance.",
         score: 10,
         questionId: 6
     },
     {
-        question: "Define Diffing Algorithm 8",
+        question: "How do you ensure a website is compatible with various web browsers?",
         score: 10,
         questionId: 7
     },
     {
-        question: "Define Diffing Algorithm 9",
+        question: "What is the purpose of build tools like Webpack or Grunt?",
         score: 10,
         questionId: 8
     },
     {
-        question: "Define Diffing Algorithm 10",
+        question: "What is unit testing, and how can you perform it in JavaScript?",
         score: 10,
         questionId: 9
     }

From f9149a1a085b737476fca6c4ea6fc4463e65a180 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Tue, 24 Oct 2023 02:32:40 +0530
Subject: [PATCH 16/21] fix: abstracted the code into components

---
 app/qna/session/[id]/page.tsx                 | 58 ++-----------------
 .../qna-question-answer-section/index.tsx     | 21 +++++++
 .../sections/qna-questions-list/index.tsx     | 35 +++++------
 components/ui/qna-ques-card.tsx               | 15 +++--
 types/qna-que-card.d.ts                       |  1 +
 5 files changed, 53 insertions(+), 77 deletions(-)
 create mode 100644 components/sections/qna-question-answer-section/index.tsx

diff --git a/app/qna/session/[id]/page.tsx b/app/qna/session/[id]/page.tsx
index b933eab..137cfdc 100644
--- a/app/qna/session/[id]/page.tsx
+++ b/app/qna/session/[id]/page.tsx
@@ -4,72 +4,26 @@ import ViewContainer from "@/components/layouts/view-container"
 import { Button } from "@/components/ui/button"
 import { QnaQuestionsList } from "@/components/sections/qna-questions-list"
 import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
-import { useEffect, useState } from "react"
-import { Textarea } from "@/components/ui/textarea"
-import { Check } from 'lucide-react';
+import { useState } from "react"
 import { Timer } from "@/components/ui/qna-timer"
-import { QnaQuesCard } from "@/components/ui/qna-ques-card";
-import { BoxCard } from "@/components/layouts/box-card"
-import { cn } from "@/lib/utils";
+import { QnaQuestionAnswerSection } from "@/components/sections/qna-question-answer-section"
 
 
 const QNASession: React.FunctionComponent = () => {
 
-    const [time, setTime] = useState("12:34")
-    const [progressVal, setProgressVal] = useState(0);
-    const qData = fetchQnaQuestions();
-    const [qNum, setQNum] = useState(0);
-    const [storeAns, setStoreAns] = useState(["", "", "", "", "", "", "", "", "", "",])
-    const handleAnsChange = (e: any) => {
-        setStoreAns([
-            storeAns[qNum] = e.target.value as string
-        ])
-    }
+    const questionData = fetchQnaQuestions();
+    const [questionNum, setQuestionNum] = useState(0);
 
     return (
         <PageContent>
             <ViewContainer className="flex justify-between gap-[120px]">
-                {/* <QnaQuestionsList data={fetchQnaQuestions()}/> */}
-                {/**/}
-                <section className="qna-question-list flex flex-col items-center">
-                    <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
-                    <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
-                        {qData?.map((q, index) => {
-                            return (
-                                // <QnaQuesCard
-                                //     key={index}
-                                //     question={q.question}
-                                //     score = {q.score}
-                                //     questionId={q.questionId}
-                                // />
-                                <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={() => setQNum(q?.questionId)} key={index}>
-                                    <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
-                                        <span>{q?.questionId+1}.</span>
-                                        <p>{q?.question}</p>
-                                    </div>
-                                    <span className="
-                            text-neutral-400">+{q?.score} score</span>
-                                </BoxCard>
-                            );
-                        })}
-                    </div>
-                </section>
-                {/**/}
+                <QnaQuestionsList data={fetchQnaQuestions()} setQuestionNum={setQuestionNum} />
                 <div className="w-full flex flex-col gap-16 ">
                     <div className="remainingTime-endSessionAction-wrapper flex justify-between">
                         <Timer seconds={3600} />
                         <Button variant="destructive" className="end-session-btn">End Session</Button>
                     </div>
-                    <div>
-                        <div className="flex flex-col gap-11">
-                            <h2 className="question text-3xl font-semibold">{qData[qNum].question}</h2>
-                            <div className="answer-wrapper ">
-                                <p className="font-medium mb-1 text-sm" >Write your answer here</p>
-                                <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" onChange={handleAnsChange} value={storeAns[qNum]} />
-                            </div>
-                        </div>
-                        <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>
-                    </div>
+                    <QnaQuestionAnswerSection questionData={questionData} questionNum= {questionNum}/>
                     <Button className="submit-btn w-fit ml-auto mt-[-25px]">Submit and End Session</Button>
                 </div>
             </ViewContainer>
diff --git a/components/sections/qna-question-answer-section/index.tsx b/components/sections/qna-question-answer-section/index.tsx
new file mode 100644
index 0000000..46ba7d9
--- /dev/null
+++ b/components/sections/qna-question-answer-section/index.tsx
@@ -0,0 +1,21 @@
+import { Textarea } from "@/components/ui/textarea"
+import { Button } from "@/components/ui/button"
+import { Check } from 'lucide-react';
+
+
+function QnaQuestionAnswerSection(props:any){
+    return(
+        <section>
+            <div className="flex flex-col gap-11">
+                <h2 className="question text-3xl font-semibold">{props.questionData[props.questionNum].question}</h2>
+                <div className="answer-wrapper ">
+                    <p className="font-medium mb-1 text-sm" >Write your answer here</p>
+                    <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" />
+                </div>
+            </div>
+            <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>
+        </section>
+    )
+}
+
+export {QnaQuestionAnswerSection};
\ No newline at end of file
diff --git a/components/sections/qna-questions-list/index.tsx b/components/sections/qna-questions-list/index.tsx
index 6b2327e..02815e8 100644
--- a/components/sections/qna-questions-list/index.tsx
+++ b/components/sections/qna-questions-list/index.tsx
@@ -1,23 +1,24 @@
 import { QnaQuesCard } from "@/components/ui/qna-ques-card";
+import { useState } from "react";
 
-const QnaQuestionsList: React.FunctionComponent<{ data: Array<QnaQueCardInterface> }> = ({ data }) => {
-  
+const QnaQuestionsList = (props:any) => {
     return(
-        <section className="qna-question-list flex flex-col items-center">
-            <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
-            <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
-            {data.map((q, index) => {
-            return (
-              <QnaQuesCard
-                key={index}
-                question={q.question}
-                score = {q.score}
-                questionId={q.questionId}
-              />
-            );
-          })}
-            </div>
-        </section>
+      <section className="qna-question-list flex flex-col items-center">
+        <div className="qna-topic mb-7 text-xl font-bold">Frontend Engineering</div>
+        <div className="qna-questions flex flex-col gap-4 overflow-y-scroll max-h-[575px] hide-scrollbar h-[90svh]">
+            {props.data?.map((question:any) => {
+                return (
+                    <QnaQuesCard
+                        key={question.index}
+                        question={question.question}
+                        score = {question.score}
+                        questionId={question.questionId}
+                        setQuestionNum = {props.setQuestionNum}
+                    />
+                );
+            })}
+        </div>
+    </section>
     )
 }
 
diff --git a/components/ui/qna-ques-card.tsx b/components/ui/qna-ques-card.tsx
index 6a44dad..074f073 100644
--- a/components/ui/qna-ques-card.tsx
+++ b/components/ui/qna-ques-card.tsx
@@ -2,15 +2,14 @@ import Link from "next/link";
 import { BoxCard } from "../layouts/box-card";
 import { cn } from "@/lib/utils";
 
-const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score})=>{
+const QnaQuesCard: React.FunctionComponent<QnaQueCardInterface> = ({question, questionId, score, setQuestionNum})=>{
     return(
-        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px]')}>
-        <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
-            <span>{questionId}.</span>
-            <p>{question}</p>
-        </div>   
-        <span className="
-        text-neutral-400">+{score} score</span>
+        <BoxCard className={cn('bg-neutral-200 hover:brightness-90 flex flex-col justify-between p-4 min-h-[140px] cursor-pointer')} onClick={() => setQuestionNum(questionId)}>
+            <div className="flex gap-1 align-items-center font-semibold text-lg truncate " >
+                <span>{questionId+1}.</span>
+                <p>{question}</p>
+            </div>
+            <span className="text-neutral-400">+{score} score</span>
         </BoxCard>
     )
 }
diff --git a/types/qna-que-card.d.ts b/types/qna-que-card.d.ts
index 99957ad..cf0a6d8 100644
--- a/types/qna-que-card.d.ts
+++ b/types/qna-que-card.d.ts
@@ -2,4 +2,5 @@ declare interface QnaQueCardInterface {
     question: string;
     score: number;
     questionId: number;
+    setQuestionNum: function 
   }
\ No newline at end of file

From 9dd0f586414a94f596eaf552a92981eb927b26f3 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Tue, 24 Oct 2023 02:35:33 +0530
Subject: [PATCH 17/21] fix: mock data fix

---
 mocks/qna-questions-mock.ts | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/mocks/qna-questions-mock.ts b/mocks/qna-questions-mock.ts
index 8f71887..3066089 100644
--- a/mocks/qna-questions-mock.ts
+++ b/mocks/qna-questions-mock.ts
@@ -4,52 +4,62 @@ const QnaMockQuestions: Array<QnaQueCardInterface> = [
     {
         question: "Explain the difference between <div> and <span> elements.",
         score: 10,
-        questionId: 0
+        questionId: 0,
+        setQuestionNum: {}
     },
     {
         question: "How do you center an element both horizontally and vertically using CSS?",
         score: 10,
-        questionId: 1
+        questionId: 1,
+        setQuestionNum: {}
     },
     {
         question: "What is the DOM (Document Object Model) in JavaScript?",
         score: 10,
-        questionId: 2
+        questionId: 2,
+        setQuestionNum: {}
     },
     {
         question: "How do you create a responsive webpage, and what are media queries?",
         score: 10,
-        questionId: 3
+        questionId: 3,
+        setQuestionNum: {}
     },
     {
         question: "What is virtual DOM, and how does it work in React?",
         score: 10,
-        questionId: 4
+        questionId: 4,
+        setQuestionNum: {}
     },
     {
         question: "How do you use Git for version control, and what are some common Git commands?",
         score: 10,
-        questionId: 5
+        questionId: 5,
+        setQuestionNum: {}
     },
     {
         question: "Explain lazy loading and its benefits for web performance.",
         score: 10,
-        questionId: 6
+        questionId: 6,
+        setQuestionNum: {}
     },
     {
         question: "How do you ensure a website is compatible with various web browsers?",
         score: 10,
-        questionId: 7
+        questionId: 7,
+        setQuestionNum: {}
     },
     {
         question: "What is the purpose of build tools like Webpack or Grunt?",
         score: 10,
-        questionId: 8
+        questionId: 8,
+        setQuestionNum: {}
     },
     {
         question: "What is unit testing, and how can you perform it in JavaScript?",
         score: 10,
-        questionId: 9
+        questionId: 9,
+        setQuestionNum: {}
     }
 ]
 

From c20bf71890b9fcb05b445b8f5d0aded7ffe694fe Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Tue, 24 Oct 2023 04:08:09 +0530
Subject: [PATCH 18/21] feat: added TipTap instead of Text area

---
 .../qna-question-answer-section/index.tsx     |    3 +
 components/ui/tiptap.tsx                      |   20 +
 package-lock.json                             | 1474 ++++++++++++++++-
 package.json                                  |    4 +
 4 files changed, 1449 insertions(+), 52 deletions(-)
 create mode 100644 components/ui/tiptap.tsx

diff --git a/components/sections/qna-question-answer-section/index.tsx b/components/sections/qna-question-answer-section/index.tsx
index 46ba7d9..dda8304 100644
--- a/components/sections/qna-question-answer-section/index.tsx
+++ b/components/sections/qna-question-answer-section/index.tsx
@@ -1,6 +1,7 @@
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { Check } from 'lucide-react';
+import Tiptap from "@/components/ui/tiptap";
 
 
 function QnaQuestionAnswerSection(props:any){
@@ -11,6 +12,8 @@ function QnaQuestionAnswerSection(props:any){
                 <div className="answer-wrapper ">
                     <p className="font-medium mb-1 text-sm" >Write your answer here</p>
                     <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" />
+                    {/* <Tiptap  /> */}
+
                 </div>
             </div>
             <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>
diff --git a/components/ui/tiptap.tsx b/components/ui/tiptap.tsx
new file mode 100644
index 0000000..a68420e
--- /dev/null
+++ b/components/ui/tiptap.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+const Tiptap = () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit
+    ],
+    content: '<p>Hello World!🌎️</p>'
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}
+
+export default Tiptap
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d296397..bdc0ae4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,9 @@
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
+        "@tiptap/pm": "^2.1.12",
+        "@tiptap/react": "^2.1.12",
+        "@tiptap/starter-kit": "^2.1.12",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "lucide-react": "^0.282.0",
@@ -27,6 +30,7 @@
         "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.10",
         "@types/node": "latest",
         "@types/react": "latest",
         "@types/react-dom": "latest",
@@ -417,6 +421,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -1144,6 +1157,50 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
+      "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ=="
+    },
+    "node_modules/@remirror/core-helpers": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-3.0.0.tgz",
+      "integrity": "sha512-tusEgQJIqg4qKj6HSBUFcyRnWnziw3neh4T9wOmsPGHFC3w9kl5KSrDb9UAgE8uX6y32FnS7vJ955mWOl3n50A==",
+      "dependencies": {
+        "@remirror/core-constants": "^2.0.2",
+        "@remirror/types": "^1.0.1",
+        "@types/object.omit": "^3.0.0",
+        "@types/object.pick": "^1.3.2",
+        "@types/throttle-debounce": "^2.1.0",
+        "case-anything": "^2.1.13",
+        "dash-get": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "make-error": "^1.3.6",
+        "object.omit": "^3.0.0",
+        "object.pick": "^1.3.0",
+        "throttle-debounce": "^3.0.1"
+      }
+    },
+    "node_modules/@remirror/types": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@remirror/types/-/types-1.0.1.tgz",
+      "integrity": "sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==",
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@remirror/types/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz",
@@ -1158,6 +1215,377 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@tiptap/core": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.1.12.tgz",
+      "integrity": "sha512-ZGc3xrBJA9KY8kln5AYTj8y+GDrKxi7u95xIl2eccrqTY5CQeRu6HRNM1yT4mAjuSaG9jmazyjGRlQuhyxCKxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.1.12.tgz",
+      "integrity": "sha512-Qb3YRlCfugx9pw7VgLTb+jY37OY4aBJeZnqHzx4QThSm13edNYjasokbX0nTwL1Up4NPTcY19JUeHt6fVaVVGg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.1.12.tgz",
+      "integrity": "sha512-AZGxIxcGU1/y6V2YEbKsq6BAibL8yQrbRm6EdcBnby41vj1WziewEKswhLGmZx5IKM2r2ldxld03KlfSIlKQZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.12.tgz",
+      "integrity": "sha512-gAGi21EQ4wvLmT7klgariAc2Hf+cIjaNU2NWze3ut6Ku9gUo5ZLqj1t9SKHmNf4d5JG63O8GxpErqpA7lHlRtw==",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.12.tgz",
+      "integrity": "sha512-vtD8vWtNlmAZX8LYqt2yU9w3mU9rPCiHmbp4hDXJs2kBnI0Ju/qAyXFx6iJ3C3XyuMnMbJdDI9ee0spAvFz7cQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.1.12.tgz",
+      "integrity": "sha512-CRiRq5OTC1lFgSx6IMrECqmtb93a0ZZKujEnaRhzWliPBjLIi66va05f/P1vnV6/tHaC3yfXys6dxB5A4J8jxw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.1.12.tgz",
+      "integrity": "sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.1.12.tgz",
+      "integrity": "sha512-0QNfAkCcFlB9O8cUNSwTSIQMV9TmoEhfEaLz/GvbjwEq4skXK3bU+OQX7Ih07waCDVXIGAZ7YAZogbvrn/WbOw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.12.tgz",
+      "integrity": "sha512-0tT/q8nL4NBCYPxr9T0Brck+RQbWuczm9nV0bnxgt0IiQXoRHutfPWdS7GA65PTuVRBS/3LOco30fbjFhkfz/A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.12.tgz",
+      "integrity": "sha512-uo0ydCJNg6AWwLT6cMUJYVChfvw2PY9ZfvKRhh9YJlGfM02jS4RUG/bJBts6R37f+a5FsOvAVwg8EvqPlNND1A==",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.12.tgz",
+      "integrity": "sha512-zFYdZCqPgpwoB7whyuwpc8EYLYjUE5QYKb8vICvc+FraBUDM51ujYhFSgJC3rhs8EjI+8GcK8ShLbSMIn49YOQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.1.12.tgz",
+      "integrity": "sha512-nqKcAYGEOafg9D+2cy1E4gHNGuL12LerVa0eS2SQOb+PT8vSel9OTKU1RyZldsWSQJ5rq/w4uIjmLnrSR2w6Yw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.1.12.tgz",
+      "integrity": "sha512-MoANP3POAP68Ko9YXarfDKLM/kXtscgp6m+xRagPAghRNujVY88nK1qBMZ3JdvTVN6b/ATJhp8UdrZX96TLV2w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.1.12.tgz",
+      "integrity": "sha512-6b7UFVkvPjq3LVoCTrYZAczt5sQrQUaoDWAieVClVZoFLfjga2Fwjcfgcie8IjdPt8YO2hG/sar/c07i9vM0Sg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.12.tgz",
+      "integrity": "sha512-RRuoK4KxrXRrZNAjJW5rpaxjiP0FJIaqpi7nFbAua2oHXgsCsG8qbW2Y0WkbIoS8AJsvLZ3fNGsQ8gpdliuq3A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.1.12.tgz",
+      "integrity": "sha512-/XYrW4ZEWyqDvnXVKbgTXItpJOp2ycswk+fJ3vuexyolO6NSs0UuYC6X4f+FbHYL5VuWqVBv7EavGa+tB6sl3A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.1.12.tgz",
+      "integrity": "sha512-Gk7hBFofAPmNQ8+uw8w5QSsZOMEGf7KQXJnx5B022YAUJTYYxO3jYVuzp34Drk9p+zNNIcXD4kc7ff5+nFOTrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.12.tgz",
+      "integrity": "sha512-tF6VGl+D2avCgn9U/2YLJ8qVmV6sPE/iEzVAFZuOSe6L0Pj7SQw4K6AO640QBob/d8VrqqJFHCb6l10amJOnXA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.1.12.tgz",
+      "integrity": "sha512-hoH/uWPX+KKnNAZagudlsrr4Xu57nusGekkJWBcrb5MCDE91BS+DN2xifuhwXiTHxnwOMVFjluc0bPzQbkArsw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.1.12.tgz",
+      "integrity": "sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.1.12.tgz",
+      "integrity": "sha512-rCNUd505p/PXwU9Jgxo4ZJv4A3cIBAyAqlx/dtcY6cjztCQuXJhuQILPhjGhBTOLEEL4kW2wQtqzCmb7O8i2jg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.1.12.tgz",
+      "integrity": "sha512-Q3MXXQABG4CZBesSp82yV84uhJh/W0Gag6KPm2HRWPimSFELM09Z9/5WK9RItAYE0aLhe4Krnyiczn9AAa1tQQ==",
+      "dependencies": {
+        "prosemirror-changeset": "^2.2.0",
+        "prosemirror-collab": "^1.3.0",
+        "prosemirror-commands": "^1.3.1",
+        "prosemirror-dropcursor": "^1.5.0",
+        "prosemirror-gapcursor": "^1.3.1",
+        "prosemirror-history": "^1.3.0",
+        "prosemirror-inputrules": "^1.2.0",
+        "prosemirror-keymap": "^1.2.0",
+        "prosemirror-markdown": "^1.10.1",
+        "prosemirror-menu": "^1.2.1",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-schema-basic": "^1.2.0",
+        "prosemirror-schema-list": "^1.2.2",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-tables": "^1.3.0",
+        "prosemirror-trailing-node": "^2.0.2",
+        "prosemirror-transform": "^1.7.0",
+        "prosemirror-view": "^1.28.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.1.12.tgz",
+      "integrity": "sha512-RMO4QmmpL7sPR7w8o1Wq0hrUe/ttHzsn5I/eWwqg1d3fGx5y9mOdfCoQ9XBtm49Xzdejy3QVzt4zYp9fX0X/xg==",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.1.12",
+        "@tiptap/extension-floating-menu": "^2.1.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.1.12.tgz",
+      "integrity": "sha512-+RoP1rWV7rSCit2+3wl2bjvSRiePRJE/7YNKbvH8Faz/+AMO23AFegHoUFynR7U0ouGgYDljGkkj35e0asbSDA==",
+      "dependencies": {
+        "@tiptap/core": "^2.1.12",
+        "@tiptap/extension-blockquote": "^2.1.12",
+        "@tiptap/extension-bold": "^2.1.12",
+        "@tiptap/extension-bullet-list": "^2.1.12",
+        "@tiptap/extension-code": "^2.1.12",
+        "@tiptap/extension-code-block": "^2.1.12",
+        "@tiptap/extension-document": "^2.1.12",
+        "@tiptap/extension-dropcursor": "^2.1.12",
+        "@tiptap/extension-gapcursor": "^2.1.12",
+        "@tiptap/extension-hard-break": "^2.1.12",
+        "@tiptap/extension-heading": "^2.1.12",
+        "@tiptap/extension-history": "^2.1.12",
+        "@tiptap/extension-horizontal-rule": "^2.1.12",
+        "@tiptap/extension-italic": "^2.1.12",
+        "@tiptap/extension-list-item": "^2.1.12",
+        "@tiptap/extension-ordered-list": "^2.1.12",
+        "@tiptap/extension-paragraph": "^2.1.12",
+        "@tiptap/extension-strike": "^2.1.12",
+        "@tiptap/extension-text": "^2.1.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -1170,6 +1598,16 @@
       "integrity": "sha512-RcdC3hOBOauLP+r/kRt27NrByYtDjsXyAuSbR87O6xpsvi763WI+5fbSIvYJrXnt9w4RuxhV6eAXfIs7aaf/FQ==",
       "dev": true
     },
+    "node_modules/@types/object.omit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.2.tgz",
+      "integrity": "sha512-BxWU36cMP+FKD3OLFluQaj2cBev2sx2LJaHELuphHwnleq+xnEhTmuYYYx4pOT/1U/ZoR6B+RdvxWh2FD6lGGA=="
+    },
+    "node_modules/@types/object.pick": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.3.tgz",
+      "integrity": "sha512-qZqHmdGEALeSATMB1djT1S5szv6Wtpb7DKpHrt2XG4iyKlV7C2Xk8GmDXr1KXakOqUfX6ohw7ceruYt4NVmB1Q=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.7",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz",
@@ -1202,6 +1640,11 @@
       "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==",
       "devOptional": true
     },
+    "node_modules/@types/throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
+    },
     "node_modules/@typescript-eslint/parser": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.3.tgz",
@@ -1390,8 +1833,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-hidden": {
       "version": "1.2.3",
@@ -1750,6 +2192,17 @@
         }
       ]
     },
+    "node_modules/case-anything": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz",
+      "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1858,6 +2311,11 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1895,6 +2353,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/dash-get": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz",
+      "integrity": "sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1918,6 +2381,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
@@ -2022,6 +2493,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
@@ -2150,7 +2632,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2579,8 +3060,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "3.3.1",
@@ -3175,6 +3655,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3274,6 +3765,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -3402,6 +3904,14 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
@@ -3535,6 +4045,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3550,6 +4068,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -3587,6 +4117,31 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
+    "node_modules/markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3866,6 +4421,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.omit": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz",
+      "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==",
+      "dependencies": {
+        "is-extendable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object.values": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
@@ -3908,6 +4485,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -4129,56 +4711,233 @@
         "postcss": "^8.2.14"
       }
     },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.13",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
-      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
+      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
+      "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
+      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
+      "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.2.tgz",
+      "integrity": "sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.1.tgz",
+      "integrity": "sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.11.2.tgz",
+      "integrity": "sha512-Eu5g4WPiCdqDTGhdSsG9N6ZjACQRYrsAkrF9KYfdMaCmjIApH75aVncsWYOJvEk2i1B3i8jZppv3J/tnuHGiUQ==",
+      "dependencies": {
+        "markdown-it": "^13.0.1",
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.3.tgz",
+      "integrity": "sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz",
+      "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==",
+      "dependencies": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz",
+      "integrity": "sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
       "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
-      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
+    "node_modules/prosemirror-tables": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.4.tgz",
+      "integrity": "sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz",
-      "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
+    "node_modules/prosemirror-trailing-node": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.7.tgz",
+      "integrity": "sha512-8zcZORYj/8WEwsGo6yVCRXFMOfBo0Ub3hCUvmoWIZYfMP26WqENU0mpEP27w7mt8buZWuGrydBewr0tOArPb1Q==",
+      "dependencies": {
+        "@remirror/core-constants": "^2.0.2",
+        "@remirror/core-helpers": "^3.0.0",
+        "escape-string-regexp": "^4.0.0"
       },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+      "peerDependencies": {
+        "prosemirror-model": "^1.19.0",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.31.2"
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
+    "node_modules/prosemirror-transform": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz",
+      "integrity": "sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==",
       "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.32.1.tgz",
+      "integrity": "sha512-9SnB4HBgRczzTyIMZLPE1iszegL04hNfUyS8uPtP1RPxNM2NTCiIs8KwNsJU4nbZO9rxJTwVTv7Jm3zU4CR78A==",
+      "dependencies": {
+        "prosemirror-model": "^1.16.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
       }
     },
     "node_modules/punycode": {
@@ -4424,6 +5183,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4845,6 +5609,22 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4992,6 +5772,11 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -5092,6 +5877,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -5471,6 +6261,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
     "@radix-ui/number": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
@@ -5843,6 +6638,46 @@
         "@babel/runtime": "^7.13.10"
       }
     },
+    "@remirror/core-constants": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
+      "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ=="
+    },
+    "@remirror/core-helpers": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-helpers/-/core-helpers-3.0.0.tgz",
+      "integrity": "sha512-tusEgQJIqg4qKj6HSBUFcyRnWnziw3neh4T9wOmsPGHFC3w9kl5KSrDb9UAgE8uX6y32FnS7vJ955mWOl3n50A==",
+      "requires": {
+        "@remirror/core-constants": "^2.0.2",
+        "@remirror/types": "^1.0.1",
+        "@types/object.omit": "^3.0.0",
+        "@types/object.pick": "^1.3.2",
+        "@types/throttle-debounce": "^2.1.0",
+        "case-anything": "^2.1.13",
+        "dash-get": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "make-error": "^1.3.6",
+        "object.omit": "^3.0.0",
+        "object.pick": "^1.3.0",
+        "throttle-debounce": "^3.0.1"
+      }
+    },
+    "@remirror/types": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@remirror/types/-/types-1.0.1.tgz",
+      "integrity": "sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==",
+      "requires": {
+        "type-fest": "^2.19.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+          "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA=="
+        }
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.0.tgz",
@@ -5857,6 +6692,220 @@
         "tslib": "^2.4.0"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+      "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+      "dev": true,
+      "requires": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "dependencies": {
+        "postcss-selector-parser": {
+          "version": "6.0.10",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+          "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        }
+      }
+    },
+    "@tiptap/core": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.1.12.tgz",
+      "integrity": "sha512-ZGc3xrBJA9KY8kln5AYTj8y+GDrKxi7u95xIl2eccrqTY5CQeRu6HRNM1yT4mAjuSaG9jmazyjGRlQuhyxCKxQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-blockquote": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.1.12.tgz",
+      "integrity": "sha512-Qb3YRlCfugx9pw7VgLTb+jY37OY4aBJeZnqHzx4QThSm13edNYjasokbX0nTwL1Up4NPTcY19JUeHt6fVaVVGg==",
+      "requires": {}
+    },
+    "@tiptap/extension-bold": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.1.12.tgz",
+      "integrity": "sha512-AZGxIxcGU1/y6V2YEbKsq6BAibL8yQrbRm6EdcBnby41vj1WziewEKswhLGmZx5IKM2r2ldxld03KlfSIlKQZg==",
+      "requires": {}
+    },
+    "@tiptap/extension-bubble-menu": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.12.tgz",
+      "integrity": "sha512-gAGi21EQ4wvLmT7klgariAc2Hf+cIjaNU2NWze3ut6Ku9gUo5ZLqj1t9SKHmNf4d5JG63O8GxpErqpA7lHlRtw==",
+      "requires": {
+        "tippy.js": "^6.3.7"
+      }
+    },
+    "@tiptap/extension-bullet-list": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.12.tgz",
+      "integrity": "sha512-vtD8vWtNlmAZX8LYqt2yU9w3mU9rPCiHmbp4hDXJs2kBnI0Ju/qAyXFx6iJ3C3XyuMnMbJdDI9ee0spAvFz7cQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-code": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.1.12.tgz",
+      "integrity": "sha512-CRiRq5OTC1lFgSx6IMrECqmtb93a0ZZKujEnaRhzWliPBjLIi66va05f/P1vnV6/tHaC3yfXys6dxB5A4J8jxw==",
+      "requires": {}
+    },
+    "@tiptap/extension-code-block": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.1.12.tgz",
+      "integrity": "sha512-RXtSYCVsnk8D+K80uNZShClfZjvv1EgO42JlXLVGWQdIgaNyuOv/6I/Jdf+ZzhnpsBnHufW+6TJjwP5vJPSPHA==",
+      "requires": {}
+    },
+    "@tiptap/extension-document": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.1.12.tgz",
+      "integrity": "sha512-0QNfAkCcFlB9O8cUNSwTSIQMV9TmoEhfEaLz/GvbjwEq4skXK3bU+OQX7Ih07waCDVXIGAZ7YAZogbvrn/WbOw==",
+      "requires": {}
+    },
+    "@tiptap/extension-dropcursor": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.12.tgz",
+      "integrity": "sha512-0tT/q8nL4NBCYPxr9T0Brck+RQbWuczm9nV0bnxgt0IiQXoRHutfPWdS7GA65PTuVRBS/3LOco30fbjFhkfz/A==",
+      "requires": {}
+    },
+    "@tiptap/extension-floating-menu": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.12.tgz",
+      "integrity": "sha512-uo0ydCJNg6AWwLT6cMUJYVChfvw2PY9ZfvKRhh9YJlGfM02jS4RUG/bJBts6R37f+a5FsOvAVwg8EvqPlNND1A==",
+      "requires": {
+        "tippy.js": "^6.3.7"
+      }
+    },
+    "@tiptap/extension-gapcursor": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.12.tgz",
+      "integrity": "sha512-zFYdZCqPgpwoB7whyuwpc8EYLYjUE5QYKb8vICvc+FraBUDM51ujYhFSgJC3rhs8EjI+8GcK8ShLbSMIn49YOQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-hard-break": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.1.12.tgz",
+      "integrity": "sha512-nqKcAYGEOafg9D+2cy1E4gHNGuL12LerVa0eS2SQOb+PT8vSel9OTKU1RyZldsWSQJ5rq/w4uIjmLnrSR2w6Yw==",
+      "requires": {}
+    },
+    "@tiptap/extension-heading": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.1.12.tgz",
+      "integrity": "sha512-MoANP3POAP68Ko9YXarfDKLM/kXtscgp6m+xRagPAghRNujVY88nK1qBMZ3JdvTVN6b/ATJhp8UdrZX96TLV2w==",
+      "requires": {}
+    },
+    "@tiptap/extension-history": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.1.12.tgz",
+      "integrity": "sha512-6b7UFVkvPjq3LVoCTrYZAczt5sQrQUaoDWAieVClVZoFLfjga2Fwjcfgcie8IjdPt8YO2hG/sar/c07i9vM0Sg==",
+      "requires": {}
+    },
+    "@tiptap/extension-horizontal-rule": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.12.tgz",
+      "integrity": "sha512-RRuoK4KxrXRrZNAjJW5rpaxjiP0FJIaqpi7nFbAua2oHXgsCsG8qbW2Y0WkbIoS8AJsvLZ3fNGsQ8gpdliuq3A==",
+      "requires": {}
+    },
+    "@tiptap/extension-italic": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.1.12.tgz",
+      "integrity": "sha512-/XYrW4ZEWyqDvnXVKbgTXItpJOp2ycswk+fJ3vuexyolO6NSs0UuYC6X4f+FbHYL5VuWqVBv7EavGa+tB6sl3A==",
+      "requires": {}
+    },
+    "@tiptap/extension-list-item": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.1.12.tgz",
+      "integrity": "sha512-Gk7hBFofAPmNQ8+uw8w5QSsZOMEGf7KQXJnx5B022YAUJTYYxO3jYVuzp34Drk9p+zNNIcXD4kc7ff5+nFOTrg==",
+      "requires": {}
+    },
+    "@tiptap/extension-ordered-list": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.12.tgz",
+      "integrity": "sha512-tF6VGl+D2avCgn9U/2YLJ8qVmV6sPE/iEzVAFZuOSe6L0Pj7SQw4K6AO640QBob/d8VrqqJFHCb6l10amJOnXA==",
+      "requires": {}
+    },
+    "@tiptap/extension-paragraph": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.1.12.tgz",
+      "integrity": "sha512-hoH/uWPX+KKnNAZagudlsrr4Xu57nusGekkJWBcrb5MCDE91BS+DN2xifuhwXiTHxnwOMVFjluc0bPzQbkArsw==",
+      "requires": {}
+    },
+    "@tiptap/extension-strike": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.1.12.tgz",
+      "integrity": "sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==",
+      "requires": {}
+    },
+    "@tiptap/extension-text": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.1.12.tgz",
+      "integrity": "sha512-rCNUd505p/PXwU9Jgxo4ZJv4A3cIBAyAqlx/dtcY6cjztCQuXJhuQILPhjGhBTOLEEL4kW2wQtqzCmb7O8i2jg==",
+      "requires": {}
+    },
+    "@tiptap/pm": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.1.12.tgz",
+      "integrity": "sha512-Q3MXXQABG4CZBesSp82yV84uhJh/W0Gag6KPm2HRWPimSFELM09Z9/5WK9RItAYE0aLhe4Krnyiczn9AAa1tQQ==",
+      "requires": {
+        "prosemirror-changeset": "^2.2.0",
+        "prosemirror-collab": "^1.3.0",
+        "prosemirror-commands": "^1.3.1",
+        "prosemirror-dropcursor": "^1.5.0",
+        "prosemirror-gapcursor": "^1.3.1",
+        "prosemirror-history": "^1.3.0",
+        "prosemirror-inputrules": "^1.2.0",
+        "prosemirror-keymap": "^1.2.0",
+        "prosemirror-markdown": "^1.10.1",
+        "prosemirror-menu": "^1.2.1",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-schema-basic": "^1.2.0",
+        "prosemirror-schema-list": "^1.2.2",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-tables": "^1.3.0",
+        "prosemirror-trailing-node": "^2.0.2",
+        "prosemirror-transform": "^1.7.0",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
+    "@tiptap/react": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.1.12.tgz",
+      "integrity": "sha512-RMO4QmmpL7sPR7w8o1Wq0hrUe/ttHzsn5I/eWwqg1d3fGx5y9mOdfCoQ9XBtm49Xzdejy3QVzt4zYp9fX0X/xg==",
+      "requires": {
+        "@tiptap/extension-bubble-menu": "^2.1.12",
+        "@tiptap/extension-floating-menu": "^2.1.12"
+      }
+    },
+    "@tiptap/starter-kit": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.1.12.tgz",
+      "integrity": "sha512-+RoP1rWV7rSCit2+3wl2bjvSRiePRJE/7YNKbvH8Faz/+AMO23AFegHoUFynR7U0ouGgYDljGkkj35e0asbSDA==",
+      "requires": {
+        "@tiptap/core": "^2.1.12",
+        "@tiptap/extension-blockquote": "^2.1.12",
+        "@tiptap/extension-bold": "^2.1.12",
+        "@tiptap/extension-bullet-list": "^2.1.12",
+        "@tiptap/extension-code": "^2.1.12",
+        "@tiptap/extension-code-block": "^2.1.12",
+        "@tiptap/extension-document": "^2.1.12",
+        "@tiptap/extension-dropcursor": "^2.1.12",
+        "@tiptap/extension-gapcursor": "^2.1.12",
+        "@tiptap/extension-hard-break": "^2.1.12",
+        "@tiptap/extension-heading": "^2.1.12",
+        "@tiptap/extension-history": "^2.1.12",
+        "@tiptap/extension-horizontal-rule": "^2.1.12",
+        "@tiptap/extension-italic": "^2.1.12",
+        "@tiptap/extension-list-item": "^2.1.12",
+        "@tiptap/extension-ordered-list": "^2.1.12",
+        "@tiptap/extension-paragraph": "^2.1.12",
+        "@tiptap/extension-strike": "^2.1.12",
+        "@tiptap/extension-text": "^2.1.12"
+      }
+    },
     "@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -5869,6 +6918,16 @@
       "integrity": "sha512-RcdC3hOBOauLP+r/kRt27NrByYtDjsXyAuSbR87O6xpsvi763WI+5fbSIvYJrXnt9w4RuxhV6eAXfIs7aaf/FQ==",
       "dev": true
     },
+    "@types/object.omit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/object.omit/-/object.omit-3.0.2.tgz",
+      "integrity": "sha512-BxWU36cMP+FKD3OLFluQaj2cBev2sx2LJaHELuphHwnleq+xnEhTmuYYYx4pOT/1U/ZoR6B+RdvxWh2FD6lGGA=="
+    },
+    "@types/object.pick": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/object.pick/-/object.pick-1.3.3.tgz",
+      "integrity": "sha512-qZqHmdGEALeSATMB1djT1S5szv6Wtpb7DKpHrt2XG4iyKlV7C2Xk8GmDXr1KXakOqUfX6ohw7ceruYt4NVmB1Q=="
+    },
     "@types/prop-types": {
       "version": "15.7.7",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.7.tgz",
@@ -5901,6 +6960,11 @@
       "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==",
       "devOptional": true
     },
+    "@types/throttle-debounce": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
+      "integrity": "sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ=="
+    },
     "@typescript-eslint/parser": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.7.3.tgz",
@@ -6017,8 +7081,7 @@
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "aria-hidden": {
       "version": "1.2.3",
@@ -6254,6 +7317,11 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001541.tgz",
       "integrity": "sha512-bLOsqxDgTqUBkzxbNlSBt8annkDpQB9NdzdTbO2ooJ+eC/IQcvDspDc058g84ejCelF7vHUx57KIOjEecOHXaw=="
     },
+    "case-anything": {
+      "version": "2.1.13",
+      "resolved": "https://registry.npmjs.org/case-anything/-/case-anything-2.1.13.tgz",
+      "integrity": "sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng=="
+    },
     "chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -6332,6 +7400,11 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -6360,6 +7433,11 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "dash-get": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dash-get/-/dash-get-1.0.2.tgz",
+      "integrity": "sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6375,6 +7453,11 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
     "define-data-property": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.0.tgz",
@@ -6458,6 +7541,11 @@
         "tapable": "^2.2.0"
       }
     },
+    "entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+    },
     "es-abstract": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.2.tgz",
@@ -6567,8 +7655,7 @@
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
     "eslint": {
       "version": "8.50.0",
@@ -6891,8 +7978,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "3.3.1",
@@ -7319,6 +8405,14 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "requires": {
+        "is-plain-object": "^2.0.4"
+      }
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -7382,6 +8476,14 @@
       "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
       "dev": true
     },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
     "is-regex": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
@@ -7471,6 +8573,11 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg=="
+    },
     "iterator.prototype": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.2.tgz",
@@ -7586,6 +8693,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7595,6 +8710,18 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -7624,6 +8751,28 @@
       "integrity": "sha512-rN5U7DnX73M8LLZ/n37ZWcwow4vGJ94KKlJrdjzXjkiSRVymzCDaJJJh+38KqRiiRHopJ9+l4rRgd1p3OK+hig==",
       "requires": {}
     },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
+    "markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      }
+    },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7810,6 +8959,22 @@
         "es-abstract": "^1.22.1"
       }
     },
+    "object.omit": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-3.0.0.tgz",
+      "integrity": "sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==",
+      "requires": {
+        "is-extendable": "^1.0.0"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
     "object.values": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
@@ -7843,6 +9008,11 @@
         "type-check": "^0.4.0"
       }
     },
+    "orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -8000,6 +9170,178 @@
         "react-is": "^16.13.1"
       }
     },
+    "prosemirror-changeset": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
+      "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
+      "requires": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "requires": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-commands": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
+      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
+      "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.2.tgz",
+      "integrity": "sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.1.tgz",
+      "integrity": "sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-markdown": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.11.2.tgz",
+      "integrity": "sha512-Eu5g4WPiCdqDTGhdSsG9N6ZjACQRYrsAkrF9KYfdMaCmjIApH75aVncsWYOJvEk2i1B3i8jZppv3J/tnuHGiUQ==",
+      "requires": {
+        "markdown-it": "^13.0.1",
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-menu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
+      "requires": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.3.tgz",
+      "integrity": "sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==",
+      "requires": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "prosemirror-schema-basic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz",
+      "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==",
+      "requires": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz",
+      "integrity": "sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "prosemirror-tables": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.4.tgz",
+      "integrity": "sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==",
+      "requires": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "prosemirror-trailing-node": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.7.tgz",
+      "integrity": "sha512-8zcZORYj/8WEwsGo6yVCRXFMOfBo0Ub3hCUvmoWIZYfMP26WqENU0mpEP27w7mt8buZWuGrydBewr0tOArPb1Q==",
+      "requires": {
+        "@remirror/core-constants": "^2.0.2",
+        "@remirror/core-helpers": "^3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz",
+      "integrity": "sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.32.1.tgz",
+      "integrity": "sha512-9SnB4HBgRczzTyIMZLPE1iszegL04hNfUyS8uPtP1RPxNM2NTCiIs8KwNsJU4nbZO9rxJTwVTv7Jm3zU4CR78A==",
+      "requires": {
+        "prosemirror-model": "^1.16.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -8147,6 +9489,11 @@
         "glob": "^7.1.3"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8438,6 +9785,19 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
+    "tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "requires": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8543,6 +9903,11 @@
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -8596,6 +9961,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 35039aa..e5e5d5b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,9 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
+    "@tiptap/pm": "^2.1.12",
+    "@tiptap/react": "^2.1.12",
+    "@tiptap/starter-kit": "^2.1.12",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.282.0",
@@ -30,6 +33,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@types/node": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",

From 289f70dec29166bab0e6eb2e7f638fde3e047823 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Tue, 24 Oct 2023 05:20:04 +0530
Subject: [PATCH 19/21] feat: dialog created with prevailing errros in the
 rendered ui

---
 app/qna/session/[id]/page.tsx            |  6 ++++--
 components/ui/qna-end-session-dialog.tsx | 27 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/qna-end-session-dialog.tsx

diff --git a/app/qna/session/[id]/page.tsx b/app/qna/session/[id]/page.tsx
index 137cfdc..45906b3 100644
--- a/app/qna/session/[id]/page.tsx
+++ b/app/qna/session/[id]/page.tsx
@@ -7,6 +7,7 @@ import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
 import { useState } from "react"
 import { Timer } from "@/components/ui/qna-timer"
 import { QnaQuestionAnswerSection } from "@/components/sections/qna-question-answer-section"
+import { QnaEndSessionDialog } from "@/components/ui/qna-end-session-dialog"
 
 
 const QNASession: React.FunctionComponent = () => {
@@ -21,10 +22,11 @@ const QNASession: React.FunctionComponent = () => {
                 <div className="w-full flex flex-col gap-16 ">
                     <div className="remainingTime-endSessionAction-wrapper flex justify-between">
                         <Timer seconds={3600} />
-                        <Button variant="destructive" className="end-session-btn">End Session</Button>
+                        {/* <Button variant="destructive" className="end-session-btn">End Session</Button> */}
+                        <QnaEndSessionDialog variant="destructive" btnText="End Session" />
                     </div>
                     <QnaQuestionAnswerSection questionData={questionData} questionNum= {questionNum}/>
-                    <Button className="submit-btn w-fit ml-auto mt-[-25px]">Submit and End Session</Button>
+                    <QnaEndSessionDialog variant="default" btnText="Submit and End Session" classname="w-fit ml-auto mt-[-25px]" />
                 </div>
             </ViewContainer>
         </PageContent>
diff --git a/components/ui/qna-end-session-dialog.tsx b/components/ui/qna-end-session-dialog.tsx
new file mode 100644
index 0000000..336636b
--- /dev/null
+++ b/components/ui/qna-end-session-dialog.tsx
@@ -0,0 +1,27 @@
+'use client'
+import React from "react";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader } from "./dialog";
+import { Button } from "./button";
+
+interface QnaEndSessionDialogProps {
+  variant: string; // You can use a more specific type if necessary
+  btnText: string;
+  classname?: string;
+}
+
+const QnaEndSessionDialog: React.FunctionComponent<QnaEndSessionDialogProps> = (props) => {
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger>
+          <Button variant={props.btnText==="End Session"? "destructive": "default"} className={props.classname}>{props.btnText}</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader></DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export { QnaEndSessionDialog };

From 84601a44b5480f483c0a77bfce211b04bdca1f26 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Tue, 24 Oct 2023 06:01:20 +0530
Subject: [PATCH 20/21] feat: dialog box ui completed

---
 components/ui/qna-end-session-dialog.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/components/ui/qna-end-session-dialog.tsx b/components/ui/qna-end-session-dialog.tsx
index 336636b..ca385c4 100644
--- a/components/ui/qna-end-session-dialog.tsx
+++ b/components/ui/qna-end-session-dialog.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from "react";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader } from "./dialog";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./dialog";
 import { Button } from "./button";
 
 interface QnaEndSessionDialogProps {
@@ -13,11 +13,20 @@ const QnaEndSessionDialog: React.FunctionComponent<QnaEndSessionDialogProps> = (
   return (
     <>
       <Dialog>
-        <DialogTrigger>
+        <DialogTrigger asChild>
           <Button variant={props.btnText==="End Session"? "destructive": "default"} className={props.classname}>{props.btnText}</Button>
-        </DialogTrigger>
+        </DialogTrigger >
         <DialogContent>
-          <DialogHeader></DialogHeader>
+          <DialogHeader className="p-2">
+            <DialogTitle className="mb-1">Are you sure about {props.btnText==="End Session"?"ending": "submitting"}?</DialogTitle>
+            <DialogDescription >
+                <p className="text-neutral-400 text-base mb-4">This action will end this test and will be considered as your final submission to this Q/A Session!</p>
+                <div className="flex justify-end gap-2 ">
+                    <Button variant="outline" className="text-base text-stale-900 font-base">Ah, let me try more</Button>
+                    <Button className="text-base font-base">Sure, Enought now</Button>
+                </div>
+            </DialogDescription>
+          </DialogHeader>
         </DialogContent>
       </Dialog>
     </>

From 982d362e63e1205a68c5a6cd3e02cc0a94e8c260 Mon Sep 17 00:00:00 2001
From: Shristi Gupta <shristiguptawork@gmail.com>
Date: Sat, 25 Nov 2023 11:51:07 +0530
Subject: [PATCH 21/21] add: answer updation feature

---
 .../qna-question-answer-section/index.tsx     | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/components/sections/qna-question-answer-section/index.tsx b/components/sections/qna-question-answer-section/index.tsx
index dda8304..d174c3a 100644
--- a/components/sections/qna-question-answer-section/index.tsx
+++ b/components/sections/qna-question-answer-section/index.tsx
@@ -1,19 +1,41 @@
+"use client"
 import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
 import { Check } from 'lucide-react';
 import Tiptap from "@/components/ui/tiptap";
-
+import { fetchQnaQuestions } from "@/middleware/qna/qna-questions"
+import { useEffect, useState } from "react";
 
 function QnaQuestionAnswerSection(props:any){
+
+    const responseList = ()=>{
+        let response: {id: number, question: string, answer: string}[] = [];
+        fetchQnaQuestions().map((object,index)=>{
+            response.push({
+                id: index,
+                question: object.question,
+                answer: "" 
+            })
+        })
+        return response;
+    }
+
+    const [responses, setResponses] = useState(responseList());
+
+    const handleTextAreaChange = (questionNum: number, value: string)=>{
+        let newResponses = [...responses];
+        newResponses[questionNum].answer = value;
+        setResponses(newResponses)
+    }
+    
     return(
         <section>
             <div className="flex flex-col gap-11">
                 <h2 className="question text-3xl font-semibold">{props.questionData[props.questionNum].question}</h2>
                 <div className="answer-wrapper ">
                     <p className="font-medium mb-1 text-sm" >Write your answer here</p>
-                    <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" />
+                    <Textarea className="answer-box min-h-[300px] w-full px-4 py-2 placeholder:text-base text-base" placeholder="Good luck! You will do well" value={responses[props.questionNum].answer} onChange={(e)=>{handleTextAreaChange(props.questionNum, e.target.value)}}/>
                     {/* <Tiptap  /> */}
-
                 </div>
             </div>
             <Button className="mark-complete-btn mt-3 flex gap-1"><Check /><span>Mark as completed</span></Button>