fix(puck): fix text editor by making the dialog fullscreen

components/CustomInputs/ExcalidrawInput.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { Excalidraw, exportToSvg } from "@excalidraw/excalidraw"
 import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types"
 import { Button } from "@shadcn/ui/button"
-import { Dialog, DialogContent, DialogTrigger } from "@shadcn/ui/dialog"
+import { DialogEditor } from "components/DialogEditor"
 
 export function ExcalidrawInput({ value, onChange }) {
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null)
@@ -29,18 +29,14 @@ export function ExcalidrawInput({ value, onChange }) {
   }
 
   return (
-    <div>
-      <Dialog>
-        <DialogTrigger className='w-full border py-2'>Open Editor</DialogTrigger>
-        <DialogContent className='flex h-[90vh] w-screen max-w-7xl flex-col items-center'>
-          <h2 className='text-2xl font-semibold'>Coursition - Excalidraw</h2>
-          <Excalidraw
-            excalidrawAPI={(api) => setExcalidrawAPI(api)}
-            renderTopRightUI={() => <Button onClick={onExport}>Export</Button>}
-            initialData={{ elements: value.raw }}
-          />
-        </DialogContent>
-      </Dialog>
-    </div>
+    <DialogEditor description='Press export to save the diagram. You can close the window after you are finished.'>
+      <div className='h-full w-full'>
+        <Excalidraw
+          excalidrawAPI={(api) => setExcalidrawAPI(api)}
+          initialData={{ elements: value.raw }}
+          renderTopRightUI={() => <Button onClick={onExport}>Export</Button>}
+        />
+      </div>
+    </DialogEditor>
   )
 }

components/CustomInputs/TextEditorInput.tsx

@@ -1,29 +1,22 @@
 "use client"
 
-import { Dialog, DialogContent, DialogTrigger } from "@shadcn/ui/dialog"
+import { DialogEditor } from "components/DialogEditor"
 import { Editor } from "novel"
 
 export function TextEditorInput({ value, onChange }) {
   return (
-    <div className='rounded-lg border py-2 text-center'>
-      <Dialog>
-        <DialogTrigger className='w-full'>Open Editor</DialogTrigger>
-
-        <DialogContent className='flex h-[90vh] w-screen max-w-4xl flex-col gap-4'>
-          <span className='mt-2 text-center text-sm'>
-            Text is automatically saved, when you are done, close the editor and continue with building your course.
-          </span>
-          <Editor
-            defaultValue={value.raw}
-            completionApi='/'
-            onDebouncedUpdate={(editor) => {
-              onChange({ raw: editor?.storage.markdown.getMarkdown(), html: editor?.getHTML() })
-            }}
-            disableLocalStorage
-            className='max-h-[90vh] w-full'
-          />
-        </DialogContent>
-      </Dialog>
-    </div>
+    <DialogEditor description='Text is automatically saved, when you are done, close the editor and continue with building your course.'>
+      <div className='h-full w-full'>
+        <Editor
+          defaultValue={value.raw}
+          completionApi='/'
+          onDebouncedUpdate={(editor) => {
+            onChange({ raw: editor?.storage.markdown.getMarkdown(), html: editor?.getHTML() })
+          }}
+          disableLocalStorage
+          className='mx-auto max-w-7xl'
+        />
+      </div>
+    </DialogEditor>
   )
 }

components/DialogEditor.tsx

@@ -0,0 +1,15 @@
+import { Dialog, DialogContent, DialogDescription, DialogTrigger } from "@shadcn/ui/dialog"
+
+export function DialogEditor({ description, children }) {
+  return (
+    <div>
+      <Dialog>
+        <DialogTrigger className='w-full border py-2'>Open Editor</DialogTrigger>
+        <DialogContent className='flex h-screen w-screen max-w-none flex-col items-center'>
+          <DialogDescription>{description}</DialogDescription>
+          {children}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}