🚀 Init preview and typebot cotext in editor

apps/builder/pages/_app.tsx

@@ -5,6 +5,7 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { customTheme } from 'libs/chakra'
 import { useRouterProgressBar } from 'libs/routerProgressBar'
 import 'assets/styles/routerProgressBar.css'
+import 'assets/styles/plate.css'
 import 'focus-visible/dist/focus-visible'
 
 const App = ({ Component, pageProps }: AppProps) => {

apps/builder/pages/api/typebots.ts

@@ -12,37 +12,45 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(401).json({ message: 'Not authenticated' })
 
   const user = session.user as User
-  if (req.method === 'GET') {
-    const folderId = req.query.folderId ? req.query.folderId.toString() : null
-    const typebots = await prisma.typebot.findMany({
-      where: {
-        ownerId: user.id,
-        folderId,
-      },
-    })
-    return res.send({ typebots })
-  }
-  if (req.method === 'POST') {
-    const data = JSON.parse(req.body) as Typebot
-    const startBlock: StartBlock = {
-      id: 'start-block',
-      title: 'Start',
-      graphCoordinates: { x: 0, y: 0 },
-      steps: [
-        {
-          id: 'start-step',
-          blockId: 'start-block',
-          label: 'Form starts here',
-          type: StepType.START,
+  try {
+    if (req.method === 'GET') {
+      const folderId = req.query.folderId ? req.query.folderId.toString() : null
+      const typebots = await prisma.typebot.findMany({
+        where: {
+          ownerId: user.id,
+          folderId,
         },
-      ],
+      })
+      return res.send({ typebots })
     }
-    const typebot = await prisma.typebot.create({
-      data: { ...data, ownerId: user.id, startBlock },
-    })
-    return res.send(typebot)
+    if (req.method === 'POST') {
+      const data = JSON.parse(req.body) as Typebot
+      const startBlock: StartBlock = {
+        id: 'start-block',
+        title: 'Start',
+        graphCoordinates: { x: 0, y: 0 },
+        steps: [
+          {
+            id: 'start-step',
+            blockId: 'start-block',
+            label: 'Form starts here',
+            type: StepType.START,
+          },
+        ],
+      }
+      const typebot = await prisma.typebot.create({
+        data: { ...data, ownerId: user.id, startBlock },
+      })
+      return res.send(typebot)
+    }
+    return methodNotAllowed(res)
+  } catch (err) {
+    console.error(err)
+    if (err instanceof Error) {
+      return res.status(500).send({ title: err.name, message: err.message })
+    }
+    return res.status(500).send({ message: 'An error occured', error: err })
   }
-  return methodNotAllowed(res)
 }
 
 export default handler

apps/builder/pages/typebots/[id]/edit.tsx

@@ -2,21 +2,32 @@ import { Flex } from '@chakra-ui/layout'
 import { Board } from 'components/board/Board'
 import withAuth from 'components/HOC/withUser'
 import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { EditorContext } from 'contexts/EditorContext'
 import { GraphProvider } from 'contexts/GraphContext'
 import { TypebotContext } from 'contexts/TypebotContext'
 import { useRouter } from 'next/router'
+import { KBarProvider } from 'kbar'
 import React from 'react'
+import { actions } from 'libs/kbar'
+import { KBar } from 'components/shared/KBar'
 
 const TypebotEditPage = () => {
   const { query } = useRouter()
   return (
     <TypebotContext typebotId={query.id?.toString()}>
       <Seo title="Editor" />
-      <Flex overflow="hidden" h="100vh">
-        <GraphProvider>
-          <Board />
-        </GraphProvider>
-      </Flex>
+      <EditorContext>
+        <KBarProvider actions={actions}>
+          <KBar />
+          <Flex overflow="hidden" h="100vh">
+            <TypebotHeader />
+            <GraphProvider>
+              <Board />
+            </GraphProvider>
+          </Flex>
+        </KBarProvider>
+      </EditorContext>
     </TypebotContext>
   )
 }