From 19bf8f03ffeec8c7de7ea717ae64612ee5f6e423 Mon Sep 17 00:00:00 2001
From: Matthew Alex <matalex412@gmail.com>
Date: Mon, 15 Jul 2024 13:39:18 +0100
Subject: [PATCH 01/12] feat: change answers type for maths single answer tasks

---
 .../Task/variants/HandwritingTask/index.tsx                 | 6 +++++-
 src/utils/answers.ts                                        | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index fef2c58..84eec43 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -11,6 +11,10 @@ import HandwritingEditor from './HandwritingEditor'
 import { ViewOnlyCanvas } from './ViewOnlyCanvas'
 import './index.scss'
 
+export interface HandwritingAnswer {
+  excalidraw: any
+  latex: string
+}
 export interface HandwritingTaskProps extends TaskBaseProps<string> {
   type: TaskType.PROCESSED_HANDWRITING
 }
@@ -43,7 +47,7 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
       <Dialog.Content className="excalidraw-dialog-content">
         <Flex direction="column" height="100%" gap="3">
           <HandwritingEditor
-            latex={answer ?? ''}
+            latex={answer?.latex ?? ''}
             onAnswerChange={onAnswerUpdate}
             username={username}
           />
diff --git a/src/utils/answers.ts b/src/utils/answers.ts
index a01384d..84becc9 100644
--- a/src/utils/answers.ts
+++ b/src/utils/answers.ts
@@ -26,6 +26,8 @@ export function parseAnswer(answer: string, targetTaskType: TaskType) {
       return answer === '' ? answer : Number(answer)
     case TaskType.MULTIPLE_CHOICE_SELECT_SEVERAL:
       return answer === '' ? [] : answer.split(',')
+    case TaskType.PROCESSED_HANDWRITING:
+      return answer === '' ? { excalidraw: null, latex: '' } : JSON.parse(answer)
     default:
       return answer
   }

From aefb65c612e9f0236d0d9624d006244bd4dcc225 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Mon, 15 Jul 2024 14:02:18 +0100
Subject: [PATCH 02/12] feat: wrap onAnswerChange for updating latex

---
 .../Task/variants/HandwritingTask/Canvas.tsx       | 14 +++++++++++++-
 .../Task/variants/HandwritingTask/index.tsx        |  7 ++-----
 .../Task/variants/HandwritingTask/types.ts         |  4 ++++
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 src/components/questionStructure/Task/variants/HandwritingTask/types.ts

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
index 14080d6..1ad1b19 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
@@ -13,6 +13,7 @@ import React, {
 
 import { ConfirmDialog } from '../../../../ConfirmDialog'
 import useLiveUpdates from './live-updates.hook'
+import { HandwritingAnswer } from './types'
 
 const stopEvent = (e: SyntheticEvent | Event) => {
   e.preventDefault()
@@ -45,10 +46,21 @@ const ALLOWED_TOOL_SHORTCUTS = [
 ]
 
 const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange }) => {
-  const { updateStrokes } = useLiveUpdates(username, onAnswerChange)
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
   const [clearDialogOpen, setClearDialogOpen] = useState(false)
 
+  const updateHandwriting = useCallback(
+    (latex: string) => {
+      const result: HandwritingAnswer = {
+        latex,
+        excalidraw: excalidrawAPI?.getSceneElements(),
+      }
+      onAnswerChange(JSON.stringify(result))
+    },
+    [excalidrawAPI, onAnswerChange]
+  )
+  const { updateStrokes } = useLiveUpdates(username, updateHandwriting)
+
   const clearCanvas = useCallback(() => {
     updateStrokes({ elements: [] })
     excalidrawAPI?.updateScene({ elements: [] })
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index 84eec43..d573446 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -10,12 +10,9 @@ import { TaskBaseProps } from '../../types'
 import HandwritingEditor from './HandwritingEditor'
 import { ViewOnlyCanvas } from './ViewOnlyCanvas'
 import './index.scss'
+import { HandwritingAnswer } from './types'
 
-export interface HandwritingAnswer {
-  excalidraw: any
-  latex: string
-}
-export interface HandwritingTaskProps extends TaskBaseProps<string> {
+export interface HandwritingTaskProps extends TaskBaseProps<HandwritingAnswer> {
   type: TaskType.PROCESSED_HANDWRITING
 }
 
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
new file mode 100644
index 0000000..38114af
--- /dev/null
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
@@ -0,0 +1,4 @@
+export interface HandwritingAnswer {
+  excalidraw: any
+  latex: string
+}

From 7c97417b668c5c2383b7dc82bc8e4e8eebead7aa Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Mon, 15 Jul 2024 14:23:42 +0100
Subject: [PATCH 03/12] feat: show updated handwriting in ViewOnlyCanvas

---
 .../Task/variants/HandwritingTask/Canvas.tsx  |  6 +++-
 .../HandwritingTask/ViewOnlyCanvas.tsx        | 30 ++++++++++++++-----
 .../Task/variants/HandwritingTask/index.tsx   |  2 +-
 .../Task/variants/HandwritingTask/types.ts    |  8 ++++-
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
index 1ad1b19..c1f5896 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
@@ -1,4 +1,5 @@
 import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
+import { getDefaultAppState } from '@excalidraw/excalidraw/main'
 import { ClipboardData } from '@excalidraw/excalidraw/types/clipboard'
 import { AppState, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
 import { Box } from '@radix-ui/themes'
@@ -53,7 +54,10 @@ const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange }) => {
     (latex: string) => {
       const result: HandwritingAnswer = {
         latex,
-        excalidraw: excalidrawAPI?.getSceneElements(),
+        excalidraw: {
+          elements: excalidrawAPI?.getSceneElements() ?? [],
+          appState: excalidrawAPI?.getAppState() ?? getDefaultAppState(),
+        },
       }
       onAnswerChange(JSON.stringify(result))
     },
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
index 5a1780f..4db8218 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
@@ -1,13 +1,11 @@
 import { Excalidraw } from '@excalidraw/excalidraw'
-import {
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-} from '@excalidraw/excalidraw/types/types'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
 import { Box, Card } from '@radix-ui/themes'
 import React, { useEffect, useState } from 'react'
 
 interface ViewOnlyCanvasProps {
-  initialData: ExcalidrawInitialDataState
+  initialData: readonly ExcalidrawElement[]
 }
 
 export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) => {
@@ -21,10 +19,26 @@ export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) =
     })
   }, [excalidrawAPI])
 
-  return initialData && initialData.elements?.length ? (
+  useEffect(() => {
+    if (excalidrawAPI && initialData) {
+      excalidrawAPI.updateScene({
+        elements: initialData,
+      })
+    }
+  }, [excalidrawAPI, initialData])
+
+  return initialData && initialData?.length ? (
     <Card>
-      <Box className="excalidraw-view-container excalidraw-box">
-        <Excalidraw excalidrawAPI={setExcalidrawAPI} viewModeEnabled initialData={initialData} />
+      <Box
+        className="excalidraw-view-container excalidraw-box"
+        height="calc(100% - 4px)"
+        style={{ margin: '2px' }}
+      >
+        <Excalidraw
+          excalidrawAPI={setExcalidrawAPI}
+          viewModeEnabled
+          initialData={{ elements: initialData }}
+        />
       </Box>
     </Card>
   ) : null
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index d573446..565ebc9 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -26,7 +26,7 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        <ViewOnlyCanvas initialData={{}} />
+        <ViewOnlyCanvas initialData={answer?.excalidraw?.elements ?? []} />
       </Dialog.Trigger>
       <Flex gap="3" align="center">
         <Card className="latex-preview">
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
index 38114af..27af259 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
@@ -1,4 +1,10 @@
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+import { AppState } from '@excalidraw/excalidraw/types/types'
+
 export interface HandwritingAnswer {
-  excalidraw: any
+  excalidraw: {
+    elements: readonly ExcalidrawElement[]
+    appState: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
+  }
   latex: string
 }

From 7fb8c6c1bae5135903d7778be845fc50237ed290 Mon Sep 17 00:00:00 2001
From: Illia Derevianko <iliaderevianko30@gmail.com>
Date: Mon, 15 Jul 2024 16:41:19 +0300
Subject: [PATCH 04/12] feat: display strokes from database in canvas

---
 .../Task/variants/HandwritingTask/Canvas.tsx             | 6 ++++--
 .../Task/variants/HandwritingTask/HandwritingEditor.tsx  | 9 +++++----
 .../Task/variants/HandwritingTask/index.tsx              | 2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
index c1f5896..1557b86 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
@@ -1,6 +1,7 @@
 import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
 import { getDefaultAppState } from '@excalidraw/excalidraw/main'
 import { ClipboardData } from '@excalidraw/excalidraw/types/clipboard'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import { AppState, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
 import { Box } from '@radix-ui/themes'
 import React, {
@@ -24,6 +25,7 @@ const stopEvent = (e: SyntheticEvent | Event) => {
 interface CanvasProps {
   username: string
   onAnswerChange: (value: string) => void
+  initialData: readonly ExcalidrawElement[]
 }
 
 // Excalidraw keyboard shortcuts we allow in the canvas:
@@ -46,7 +48,7 @@ const ALLOWED_TOOL_SHORTCUTS = [
   'Digit7', // pen
 ]
 
-const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange }) => {
+const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange, initialData }) => {
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
   const [clearDialogOpen, setClearDialogOpen] = useState(false)
 
@@ -144,7 +146,7 @@ const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange }) => {
         UIOptions={{ tools: { image: false } }}
         gridModeEnabled
         excalidrawAPI={setExcalidrawAPI}
-        // initialData={excalidrawData}
+        initialData={{ elements: initialData }}
         onPaste={pasteHandler}
       >
         <MainMenu>
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
index 86ca382..dfc68a6 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
@@ -5,27 +5,28 @@ import React from 'react'
 import Markdown from '../../../../Markdown'
 import Canvas from './Canvas'
 import './handwritingEditor.css'
+import { HandwritingAnswer } from './types'
 
 interface HandwritingEditorProps {
   username: string
-  latex: string
+  answer?: HandwritingAnswer
   onAnswerChange: (value: string) => void
 }
 
 const HandwritingEditor: React.FC<HandwritingEditorProps> = ({
   username,
-  latex,
+  answer,
   onAnswerChange,
 }) => {
   return (
     <Flex direction="column" flexGrow="1" align="center" gap="3">
       <Card className="mathjax-card">
         <Box p="3">
-          <MathJax>{`\\( ${latex} \\)`}</MathJax>
+          <MathJax>{`\\( ${answer?.latex} \\)`}</MathJax>
         </Box>
       </Card>
       <Card className="excalidraw-canvas-card">
-        <Canvas username={username} onAnswerChange={onAnswerChange} />
+        <Canvas username={username} onAnswerChange={onAnswerChange} initialData={answer?.excalidraw?.elements ?? []} />
       </Card>
     </Flex>
   )
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index 565ebc9..58f7a53 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -44,7 +44,7 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
       <Dialog.Content className="excalidraw-dialog-content">
         <Flex direction="column" height="100%" gap="3">
           <HandwritingEditor
-            latex={answer?.latex ?? ''}
+            answer={answer}
             onAnswerChange={onAnswerUpdate}
             username={username}
           />

From 542a39c6d4c88cc3ee85b0fd984acd626bdb8d95 Mon Sep 17 00:00:00 2001
From: Alexander Biraben-Renard <ab1223@ic.ac.uk>
Date: Mon, 15 Jul 2024 14:46:55 +0100
Subject: [PATCH 05/12] feat: scroll view-only canvas content into view on
 change

---
 .../variants/HandwritingTask/ViewOnlyCanvas.tsx     | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
index 4db8218..7430610 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
@@ -11,20 +11,17 @@ interface ViewOnlyCanvasProps {
 export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) => {
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
 
-  useEffect(() => {
-    setTimeout(() => {
-      excalidrawAPI?.scrollToContent(undefined, {
-        fitToContent: true,
-      })
-    })
-  }, [excalidrawAPI])
-
   useEffect(() => {
     if (excalidrawAPI && initialData) {
       excalidrawAPI.updateScene({
         elements: initialData,
       })
     }
+    setTimeout(() => {
+      excalidrawAPI?.scrollToContent(undefined, {
+        fitToContent: true,
+      })
+    })
   }, [excalidrawAPI, initialData])
 
   return initialData && initialData?.length ? (

From 1291abcb0eacf76b4fe3a3f9e0caa0b72bd469fc Mon Sep 17 00:00:00 2001
From: Alexander Biraben-Renard <ab1223@ic.ac.uk>
Date: Mon, 15 Jul 2024 15:06:44 +0100
Subject: [PATCH 06/12] feat: save app state to db

---
 .../Task/variants/HandwritingTask/Canvas.tsx        | 13 +++++++++----
 .../variants/HandwritingTask/HandwritingEditor.tsx  | 11 +++++++++--
 .../Task/variants/HandwritingTask/types.ts          |  2 +-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
index 1557b86..55c5e28 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
@@ -1,5 +1,4 @@
 import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
-import { getDefaultAppState } from '@excalidraw/excalidraw/main'
 import { ClipboardData } from '@excalidraw/excalidraw/types/clipboard'
 import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import { AppState, ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
@@ -25,7 +24,10 @@ const stopEvent = (e: SyntheticEvent | Event) => {
 interface CanvasProps {
   username: string
   onAnswerChange: (value: string) => void
-  initialData: readonly ExcalidrawElement[]
+  initialData: {
+    elements?: readonly ExcalidrawElement[]
+    appState?: AppState
+  }
 }
 
 // Excalidraw keyboard shortcuts we allow in the canvas:
@@ -58,7 +60,7 @@ const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange, initialData }
         latex,
         excalidraw: {
           elements: excalidrawAPI?.getSceneElements() ?? [],
-          appState: excalidrawAPI?.getAppState() ?? getDefaultAppState(),
+          appState: excalidrawAPI?.getAppState(),
         },
       }
       onAnswerChange(JSON.stringify(result))
@@ -146,7 +148,10 @@ const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange, initialData }
         UIOptions={{ tools: { image: false } }}
         gridModeEnabled
         excalidrawAPI={setExcalidrawAPI}
-        initialData={{ elements: initialData }}
+        initialData={{
+          ...initialData,
+          appState: { ...initialData.appState, collaborators: new Map() },
+        }}
         onPaste={pasteHandler}
       >
         <MainMenu>
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
index dfc68a6..b50d55b 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
@@ -25,8 +25,15 @@ const HandwritingEditor: React.FC<HandwritingEditorProps> = ({
           <MathJax>{`\\( ${answer?.latex} \\)`}</MathJax>
         </Box>
       </Card>
-      <Card className="excalidraw-canvas-card">
-        <Canvas username={username} onAnswerChange={onAnswerChange} initialData={answer?.excalidraw?.elements ?? []} />
+      <Card
+        className="excalidraw-canvas-card"
+      >
+        <Canvas
+          username={username}
+          onAnswerChange={onAnswerChange}
+          // @ts-expect-error: this is not just initialData
+          initialData={answer?.excalidraw ?? {}}
+        />
       </Card>
     </Flex>
   )
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
index 27af259..7a8d9d1 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
@@ -4,7 +4,7 @@ import { AppState } from '@excalidraw/excalidraw/types/types'
 export interface HandwritingAnswer {
   excalidraw: {
     elements: readonly ExcalidrawElement[]
-    appState: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
+    appState?: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
   }
   latex: string
 }

From a531ff3ffdb30e0e492d198f7febb7a83ef837ae Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 15:01:17 +0100
Subject: [PATCH 07/12] chore: run formtter

---
 .../Task/variants/HandwritingTask/HandwritingEditor.tsx     | 4 +---
 .../Task/variants/HandwritingTask/index.tsx                 | 6 +-----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
index b50d55b..be00f4e 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
@@ -25,9 +25,7 @@ const HandwritingEditor: React.FC<HandwritingEditorProps> = ({
           <MathJax>{`\\( ${answer?.latex} \\)`}</MathJax>
         </Box>
       </Card>
-      <Card
-        className="excalidraw-canvas-card"
-      >
+      <Card className="excalidraw-canvas-card">
         <Canvas
           username={username}
           onAnswerChange={onAnswerChange}
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index 58f7a53..de17ea9 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -43,11 +43,7 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
 
       <Dialog.Content className="excalidraw-dialog-content">
         <Flex direction="column" height="100%" gap="3">
-          <HandwritingEditor
-            answer={answer}
-            onAnswerChange={onAnswerUpdate}
-            username={username}
-          />
+          <HandwritingEditor answer={answer} onAnswerChange={onAnswerUpdate} username={username} />
           <Flex justify="end">
             <Dialog.Close>
               <Button>Save LaTeX</Button>

From ee212d287193da9bff24af34d1bcb98dd9823c15 Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 15:38:17 +0100
Subject: [PATCH 08/12] refactor: move display condition out of ViewOnlyCanvas

---
 .../Task/variants/HandwritingTask/ViewOnlyCanvas.tsx         | 4 ++--
 .../Task/variants/HandwritingTask/index.tsx                  | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
index 7430610..0b84a6f 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
@@ -24,7 +24,7 @@ export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) =
     })
   }, [excalidrawAPI, initialData])
 
-  return initialData && initialData?.length ? (
+  return (
     <Card>
       <Box
         className="excalidraw-view-container excalidraw-box"
@@ -38,5 +38,5 @@ export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) =
         />
       </Box>
     </Card>
-  ) : null
+  )
 }
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index de17ea9..2b02e80 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -1,6 +1,7 @@
 import { Pencil2Icon } from '@radix-ui/react-icons'
 import { Button, Card, Dialog, Flex } from '@radix-ui/themes'
 import { MathJax } from 'better-react-mathjax'
+import { isEmpty } from 'lodash'
 import { FC } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -26,7 +27,9 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        <ViewOnlyCanvas initialData={answer?.excalidraw?.elements ?? []} />
+        {!isEmpty(answer?.excalidraw?.elements) && (
+          <ViewOnlyCanvas initialData={answer!.excalidraw.elements} />
+        )}
       </Dialog.Trigger>
       <Flex gap="3" align="center">
         <Card className="latex-preview">

From eb0c209ea5f973a7c6d9a420e562347fa8d1572a Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 15:44:11 +0100
Subject: [PATCH 09/12] chore: remove unnecessary styling

---
 .../Task/variants/HandwritingTask/ViewOnlyCanvas.tsx        | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
index 0b84a6f..af3a710 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/ViewOnlyCanvas.tsx
@@ -26,11 +26,7 @@ export const ViewOnlyCanvas: React.FC<ViewOnlyCanvasProps> = ({ initialData }) =
 
   return (
     <Card>
-      <Box
-        className="excalidraw-view-container excalidraw-box"
-        height="calc(100% - 4px)"
-        style={{ margin: '2px' }}
-      >
+      <Box className="excalidraw-view-container excalidraw-box">
         <Excalidraw
           excalidrawAPI={setExcalidrawAPI}
           viewModeEnabled

From 08caaa90893cd0a7af53f4af047093308d09c5fe Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 16:01:00 +0100
Subject: [PATCH 10/12] refactor: rename excalidraw field to raw

---
 .../Task/variants/HandwritingTask/Canvas.tsx                  | 2 +-
 .../Task/variants/HandwritingTask/HandwritingEditor.tsx       | 4 ++--
 .../questionStructure/Task/variants/HandwritingTask/index.tsx | 4 +---
 .../questionStructure/Task/variants/HandwritingTask/types.ts  | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
index 55c5e28..d130cf8 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/Canvas.tsx
@@ -58,7 +58,7 @@ const Canvas: React.FC<CanvasProps> = ({ username, onAnswerChange, initialData }
     (latex: string) => {
       const result: HandwritingAnswer = {
         latex,
-        excalidraw: {
+        raw: {
           elements: excalidrawAPI?.getSceneElements() ?? [],
           appState: excalidrawAPI?.getAppState(),
         },
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
index be00f4e..5184368 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
@@ -29,8 +29,8 @@ const HandwritingEditor: React.FC<HandwritingEditorProps> = ({
         <Canvas
           username={username}
           onAnswerChange={onAnswerChange}
-          // @ts-expect-error: this is not just initialData
-          initialData={answer?.excalidraw ?? {}}
+          // @ts-expect-error: Types of initialData and answer are essentially the same but TypeScript doesn't recognize it
+          initialData={answer?.raw ?? {}}
         />
       </Card>
     </Flex>
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index 2b02e80..8bf09d5 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -27,9 +27,7 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        {!isEmpty(answer?.excalidraw?.elements) && (
-          <ViewOnlyCanvas initialData={answer!.excalidraw.elements} />
-        )}
+        {!isEmpty(answer?.raw?.elements) && <ViewOnlyCanvas initialData={answer!.raw.elements} />}
       </Dialog.Trigger>
       <Flex gap="3" align="center">
         <Card className="latex-preview">
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
index 7a8d9d1..b7298c1 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/types.ts
@@ -2,7 +2,7 @@ import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
 import { AppState } from '@excalidraw/excalidraw/types/types'
 
 export interface HandwritingAnswer {
-  excalidraw: {
+  raw: {
     elements: readonly ExcalidrawElement[]
     appState?: Omit<AppState, 'offsetTop' | 'offsetLeft' | 'width' | 'height'>
   }

From 5588d51eed0a164cc795606af8872bd9cf188e9e Mon Sep 17 00:00:00 2001
From: Kishan Sambhi <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 16:14:41 +0100
Subject: [PATCH 11/12] fix: can't render a dialog trigger with nothing inside

Co-authored-by: Alexander Biraben-Renard <ab1223@ic.ac.uk>
---
 .../Task/variants/HandwritingTask/index.scss           |  2 +-
 .../Task/variants/HandwritingTask/index.tsx            | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.scss b/src/components/questionStructure/Task/variants/HandwritingTask/index.scss
index 278437c..4d69fce 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.scss
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.scss
@@ -62,7 +62,7 @@
 }
 
 .excalidraw-box {
-  margin: '2px';
+  margin: 2px;
   height: calc(100% - 4px);
 }
 
diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
index 8bf09d5..abc8e48 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/index.tsx
@@ -26,13 +26,15 @@ export const HandwritingTask: FC<HandwritingTaskProps> = ({
 
   return (
     <Dialog.Root>
-      <Dialog.Trigger>
-        {!isEmpty(answer?.raw?.elements) && <ViewOnlyCanvas initialData={answer!.raw.elements} />}
-      </Dialog.Trigger>
+      {!isEmpty(answer?.raw?.elements) && (
+        <Dialog.Trigger>
+          <ViewOnlyCanvas initialData={answer!.raw.elements} />
+        </Dialog.Trigger>
+      )}
       <Flex gap="3" align="center">
         <Card className="latex-preview">
           <Flex p="3">
-            <MathJax>{answer ? `\\( ${answer} \\)` : 'No Answer'}</MathJax>
+            <MathJax>{answer?.latex ? `\\( ${answer.latex} \\)` : 'No Answer'}</MathJax>
           </Flex>
         </Card>
         <Dialog.Trigger>

From 7ef4c01f0e18318e93b239193a9858311e088078 Mon Sep 17 00:00:00 2001
From: Kishan <kss22@ic.ac.uk>
Date: Fri, 19 Jul 2024 16:15:53 +0100
Subject: [PATCH 12/12] Update
 src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx

Co-authored-by: Ivan Procaccini <ivanprocaccini905@gmail.com>
---
 .../Task/variants/HandwritingTask/HandwritingEditor.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
index 5184368..763ba2b 100644
--- a/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
+++ b/src/components/questionStructure/Task/variants/HandwritingTask/HandwritingEditor.tsx
@@ -22,7 +22,7 @@ const HandwritingEditor: React.FC<HandwritingEditorProps> = ({
     <Flex direction="column" flexGrow="1" align="center" gap="3">
       <Card className="mathjax-card">
         <Box p="3">
-          <MathJax>{`\\( ${answer?.latex} \\)`}</MathJax>
+          <MathJax>{`\\( ${answer?.latex ?? ''} \\)`}</MathJax>
         </Box>
       </Card>
       <Card className="excalidraw-canvas-card">