fix: markdown bug'

subhadeeproy3902 · Jun 5, 2024 · 14679d1 · 14679d1
1 parent 2666449
commit 14679d1
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -53,6 +53,8 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.4",
     "react-redux": "^9.1.2",
+    "remark": "^15.0.1",
+    "remark-parse": "^11.0.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",

diff --git a/src/app/workspace/_components/Editor.tsx b/src/app/workspace/_components/Editor.tsx
@@ -81,8 +81,10 @@ function Editor({
         header: {
           class: Header,
           shortcut: "CMD+SHIFT+H",
+          inlineToolbar: true,
           config: {
             placeholder: "Enter a Header",
+            levels: [2, 3, 4],
           },
         },
         list: {
@@ -96,7 +98,10 @@ function Editor({
           class: Checklist,
           inlineToolbar: true,
         },
-        paragraph: Paragraph,
+        paragraph:{
+          class:Paragraph,
+          inlineToolbar:true
+        },
         warning: Warning,
       },
       holder: "editorjs",
@@ -127,6 +132,8 @@ function Editor({
     }
   };
 
+
+
   return (
     <div>
       <div

diff --git a/src/components/shared/AiModal.tsx b/src/components/shared/AiModal.tsx
@@ -27,7 +27,52 @@ import {
 } from "@/components/ui/form";
 import { getDocumentation, getFlowchart } from "@/config/gemini";
 import PromptLoader from "./PromptLoader";
-import { FILE } from "@/app/dashboard/_components/FileList";
+import { remark } from "remark";
+import remarkParse from 'remark-parse';
+
+function convertMarkdownToEditorBlocks(markdownAST:any) {
+  const blocks:any = [];
+
+  function visit(node:any) {
+    switch (node.type) {
+      case 'heading':
+        blocks.push({
+          type: 'header',
+          data: {
+            text: node.children.map((child: { value: any; }) => child.value).join(''),
+            level: node.depth,
+          },
+        });
+        break;
+      case 'paragraph':
+        blocks.push({
+          type: 'paragraph',
+          data: {
+            text: node.children.map((child: { value: any; }) => child.value).join(''),
+          },
+        });
+        break;
+      case 'list':
+        blocks.push({
+          type: 'list',
+          data: {
+            style: node.ordered ? 'ordered' : 'unordered',
+            items: node.children.map((listItem: { children: any[]; }) => listItem.children.map(item => item.children.map((child: { value: any; }) => child.value).join('')).join('')),
+          },
+        });
+        break;
+      // Add more cases to handle other Markdown elements like blockquote, code, etc.
+      default:
+        break;
+    }
+    if (node.children) {
+      node.children.forEach(visit);
+    }
+  }
+
+  visit(markdownAST);
+  return blocks;
+}
 
 const formSchema = z.object({
   prompt: z
@@ -48,7 +93,7 @@ export function GenAIModal({ setFileData }: Props) {
   const [validation, setValidation] = useState("");
   const [loading, setLoading] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const [APIerror,setError] = useState(false);
+  const [APIerror, setError] = useState(false);
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -68,45 +113,42 @@ export function GenAIModal({ setFileData }: Props) {
         let getData1 = true;
         let getData2 = true;
 
-
-        if(docsCheck) {
+        if (docsCheck) {
           const res1 = await getDocumentation(values.prompt);
-
-
+          // Parse Markdown to AST using remark
+        const parsedMarkdown = remark().use(remarkParse).parse(res1);
+        // Convert AST to Editor.js blocks
+        const editorBlocks = convertMarkdownToEditorBlocks(parsedMarkdown);
 
           const editorData = {
             time: new Date().getTime(),
-            blocks: [
-              {
-                type: "paragraph",
-                data: {
-                  text: res1.replaceAll("\n","<br/>"),
-                },
-              },
-            ],
+            blocks: editorBlocks,
           };
 
           setFileData((prevFileData: any) => ({
             ...prevFileData,
             document: JSON.stringify(editorData),
           }));
 
-          if(res1){
-          getData1 = false;
+          if (res1) {
+            getData1 = false;
           }
-        }else{
+        } else {
           getData1 = false;
         }
 
-        if(flowchartCheck){
-          const res2:string = await getFlowchart(values.prompt);
-          const docs = res2.replaceAll("`","").replaceAll("json","").replaceAll("JSON","")
-          const parsedString  = JSON.parse(docs);
-          console.log(parsedString)
-          if(res2){
+        if (flowchartCheck) {
+          const res2: string = await getFlowchart(values.prompt);
+          const docs = res2
+            .replaceAll("`", "")
+            .replaceAll("json", "")
+            .replaceAll("JSON", "");
+          const parsedString = JSON.parse(docs);
+          console.log(parsedString);
+          if (res2) {
             getData2 = false;
           }
-        }else{
+        } else {
           getData2 = false;
         }
 
@@ -118,7 +160,7 @@ export function GenAIModal({ setFileData }: Props) {
     } catch (err) {
       console.log(err);
       setLoading(false);
-      setError(true)
+      setError(true);
       setIsDialogOpen(false);
     }
   }
@@ -208,9 +250,7 @@ export function GenAIModal({ setFileData }: Props) {
         {APIerror && (
           <div className="backdrop-blur-sm absolute flex item-center justify-center w-full h-full top-0 left-0">
             <h1>Error Occured! Please Try again</h1>
-            <Button onClick={()=>setIsDialogOpen(false)}>
-              Try Again!
-            </Button>
+            <Button onClick={() => setIsDialogOpen(false)}>Try Again!</Button>
           </div>
         )}
       </DialogContent>

diff --git a/src/config/gemini.ts b/src/config/gemini.ts
@@ -24,7 +24,7 @@ const chatDocsHistory = [
     role: "user",
     parts: [
       {
-        text: `You are an expert in generating documentation. Your task is to create a Markdown documentation of given problem statement.`,
+        text: `You are an expert in generating documentation. Your task is to create a markdown documentation of given problem statement. Do not generate tables and diagrams.`,
       },
     ],
   },
@@ -54,7 +54,7 @@ export async function getDocumentation(
     history: chatDocsHistory,
   });
 
-  const result = await chat.sendMessage(`Problem Statement : ${prompt}. Note: Generate in parse able JSON format.`);
+  const result = await chat.sendMessage(`Problem Statement : ${prompt}.`);
   const response = result.response;
   console.log(response.text());
   return response.text();