Fixed TaskEdit and DocView

src/components/view/Doc.tsx

@@ -12,6 +12,46 @@ import Warning from "@editorjs/warning";
 import InlineCode from "@editorjs/inline-code";
 import { OutputData } from "@editorjs/editorjs";
 
+function toMarkdown(data: OutputData): string {
+  return data.blocks
+    .map((block) => {
+      switch (block.type) {
+        case "header":
+          return `${"#".repeat(block.data.level)} ${block.data.text}`;
+
+        case "paragraph":
+          return `${block.data.text}\n`;
+
+        case "list":
+          if (block.data.style === "ordered") {
+            return (block.data.items as Array<{ content: string }>)
+              .map((item, i) => `${i + 1}. ${item.content}`)
+              .join("\n");
+          } else {
+            return (block.data.items as Array<{ content: string }>)
+              .map((item) => `- ${item.content}`)
+              .join("\n");
+          }
+
+        case "code":
+          return `\`\`\`\n${block.data.code}\n\`\`\``;
+
+        case "quote":
+          return `> ${block.data.text}`;
+
+        case "delimiter":
+          return `---`;
+
+        case "image":
+          return `![${block.data.caption || ""}](${block.data.file.url})`;
+
+        default:
+          return "";
+      }
+    })
+    .join("\n\n");
+}
+
 export default function DocView({
   doc,
   setDoc,
@@ -47,7 +87,7 @@ export default function DocView({
         data: doc,
         async onChange() {
           const savedData = await editor.save();
-          console.log("Document data:", savedData);
+          console.log("Document data:", toMarkdown(savedData));
           setDoc(savedData);
         },
       });
@@ -59,5 +99,5 @@ export default function DocView({
     };
   }, []);
 
-  return <div ref={holderRef} className="docs-view h-max" />;
+  return <div ref={holderRef} className="docs-view h-max w-max" />;
 }

src/components/view/TaskEdit.tsx

@@ -12,12 +12,19 @@ import { Task } from "@/lib/types";
 import { Color, getColor } from "@/lib/ui/color";
 import { DraggableProvided } from "@hello-pangea/dnd";
 import { Button } from "../ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTrigger,
+} from "../ui/dialog";
 import DocView from "./Doc";
 import { useState } from "react";
 import { OutputData } from "@editorjs/editorjs";
 import { DialogTitle } from "@radix-ui/react-dialog";
 import { ScrollArea } from "../ui/scroll-area";
+import { Badge } from "../ui/badge";
 
 export default function TaskEdit({
   task,
@@ -80,10 +87,24 @@ export default function TaskEdit({
               <DialogTrigger asChild>
                 <Button>Open notes</Button>
               </DialogTrigger>
-              <DialogContent className="max-h-[80vh]">
+              <DialogContent className="max-h-[80vh] md:max-w-3xl! lg:max-w-4xl!">
                 <DialogTitle>{task.title} - Notes</DialogTitle>
+                <DialogDescription>{task.description}</DialogDescription>
+                <DialogHeader>
+                  <div className="flex flex-wrap gap-1.5 overflow-hidden">
+                    {task.tags?.map((tag, i) => (
+                      <Badge
+                        key={tag}
+                        variant="outline"
+                        style={getColor(tags[tag].color)}
+                      >
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </DialogHeader>
 
-                <ScrollArea className="h-[60vh] mt-4">
+                <ScrollArea className="h-[60vh]">
                   <DocView key={0} doc={doc} setDoc={setDoc} />
                 </ScrollArea>
               </DialogContent>