chore: use definition from components

apps/studio/src/contexts/EditorDrawerContext.tsx

@@ -1,19 +1,20 @@
+import { type IsomerComponent } from '@opengovsg/isomer-components'
 import React, {
   createContext,
   useState,
   useContext,
   useMemo,
   type PropsWithChildren,
 } from 'react'
-import { type Block, type DrawerState } from '~/types/editorDrawer'
+import { type DrawerState } from '~/types/editorDrawer'
 
 export interface DrawerContextType {
   drawerState: DrawerState
   setDrawerState: (state: DrawerState) => void
-  pageState: Block[]
-  setPageState: (state: Block[]) => void
-  editorState: Block[]
-  setEditorState: (state: Block[]) => void
+  pageState: IsomerComponent[]
+  setPageState: (state: IsomerComponent[]) => void
+  editorState: IsomerComponent[]
+  setEditorState: (state: IsomerComponent[]) => void
 }
 const EditorDrawerContext = createContext<DrawerContextType | null>(null)
 
@@ -22,9 +23,9 @@ export function EditorDrawerProvider({ children }: PropsWithChildren) {
     state: 'root',
   })
   // Current saved state of page
-  const [pageState, setPageState] = useState<Block[]>([])
+  const [pageState, setPageState] = useState<IsomerComponent[]>([])
   // Current edit view of page
-  const [editorState, setEditorState] = useState<Block[]>([])
+  const [editorState, setEditorState] = useState<IsomerComponent[]>([])
 
   const value = useMemo(
     () => ({

apps/studio/src/features/editing-experience/components/Preview.tsx

@@ -10,7 +10,7 @@ export interface PreviewProps {
     version: string
     layout: string
     page: any
-    content: IsomerPageSchema['content']
+    content: IsomerComponent
   }
 }
 

apps/studio/src/types/editorDrawer.ts

@@ -1,8 +1,3 @@
-export type Block = {
-  text: string
-  id: string
-}
-
 export type RootDrawerState = {
   state: 'root'
 }