feat: tiptap markdown to json conversion

Author: oshankkkk

backend/internal/api/handler/handler.go

@@ -97,7 +97,7 @@ func (h *Handler) ImportNotesHandler(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "unauthorized", http.StatusUnauthorized)
 		return
 	}
-	fmt.Println(clerkID)
+	fmt.Println(clerkID,"yay")
 	//response.WriteResponse(w, http.StatusAccepted, fmt.Sprintf("%d", noteID))
 }
 

backend/internal/api/validator/validator.go

@@ -142,7 +142,7 @@ func ImportNotesValidator(r *http.Request) *httpError {
 	}
 
 	contentType := r.Header.Get("Content-Type")
-	if !strings.HasPrefix(contentType, "multipart/form-data") {
+	if contentType != "application/json"  {
 		log.Printf("invalid content-type: %s", contentType)
 		return &httpError{Status: http.StatusUnsupportedMediaType, Msg: "media not supported"}
 	}

frontend/src/components/Editor.tsx

@@ -1,29 +1,25 @@
-import { useEditor, EditorContent } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { Markdown } from "@tiptap/markdown";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { createLowlight, common } from "lowlight";
-import { useEffect } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { useEffect, useRef } from "react";
 import type { Note } from "../hooks/useNotes";
-
-const lowlight = createLowlight(common);
+import { editorExtensions, normalizeEditorContent } from "../editor";
 
 type Props = {
   activeNote: Note | null;
   updateNoteContent: (json: object) => void;
 };
 
 export function Editor({ activeNote, updateNoteContent }: Props) {
+  const updateNoteContentRef = useRef(updateNoteContent);
+
+  useEffect(() => {
+    updateNoteContentRef.current = updateNoteContent;
+  }, [updateNoteContent]);
+
   const editor = useEditor({
-    extensions: [
-      StarterKit.configure({ codeBlock: false }),
-      CodeBlockLowlight.configure({ lowlight }),
-      Markdown,
-    ],
-    content: activeNote?.content ?? "",
-    contentType: "markdown",
+    extensions: editorExtensions,
+    content: normalizeEditorContent(activeNote?.content),
     onUpdate({ editor }) {
-      updateNoteContent(editor.getJSON());
+      updateNoteContentRef.current(editor.getJSON());
     },
     onBlur({ editor }) {
       setTimeout(() => {
@@ -32,7 +28,6 @@ export function Editor({ activeNote, updateNoteContent }: Props) {
     },
   });
 
-  // Auto-focus on mount and when the window regains focus
   useEffect(() => {
     const timer = setTimeout(() => editor?.commands.focus(), 100);
     return () => clearTimeout(timer);
@@ -44,16 +39,17 @@ export function Editor({ activeNote, updateNoteContent }: Props) {
     return () => window.removeEventListener("focus", onFocus);
   }, [editor]);
 
-  // When switching notes, update editor content
   useEffect(() => {
-    if (!editor || !activeNote) return;
+    if (!editor) return;
+
     const currentJson = JSON.stringify(editor.getJSON());
-    const targetContent = activeNote.content;
+    const targetContent = normalizeEditorContent(activeNote?.content);
     const targetJson = JSON.stringify(targetContent);
+
     if (currentJson !== targetJson) {
-      editor.commands.setContent(targetContent as string | object, { emitUpdate: false });
+      editor.commands.setContent(targetContent, { emitUpdate: false });
     }
-  }, [editor, activeNote?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [editor, activeNote]);
 
   return (
     <EditorContent

frontend/src/editor.ts

@@ -0,0 +1,31 @@
+import type { Content, JSONContent } from "@tiptap/core";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { Markdown, MarkdownManager } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+import { createLowlight, common } from "lowlight";
+
+const lowlight = createLowlight(common);
+
+export const editorExtensions = [
+  StarterKit.configure({ codeBlock: false }),
+  CodeBlockLowlight.configure({ lowlight }),
+  Markdown,
+];
+
+const markdownManager = new MarkdownManager({
+  extensions: editorExtensions,
+});
+
+export function parseMarkdownContent(markdown: string): JSONContent {
+  return markdownManager.parse(markdown);
+}
+
+export function normalizeEditorContent(
+  content: object | string | null | undefined
+): Content {
+  if (typeof content === "string") {
+    return parseMarkdownContent(content);
+  }
+
+  return (content ?? parseMarkdownContent("")) as Content;
+}

frontend/src/hooks/useNotes.ts

@@ -1,5 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { useAuth } from "@clerk/clerk-react";
+import { parseMarkdownContent } from "../editor";
 
 const BASEURL = import.meta.env.VITE_API_BASE_URL;
 
@@ -106,25 +107,26 @@ async function deleteNoteRequest(id: string, getToken: GetToken): Promise<void>
 
 async function importNotes(file: File, getToken: GetToken): Promise<void> {
   const url = BASEURL + "/notes/imports";
-  const formData = new FormData();
-  formData.append("file", file);
-
   const headers = await authHeaders(getToken);
-
-  try {
-    const response = await fetch(url, {
-      method: "POST",
-      headers,
-      credentials: "include",
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error("request failed");
-    }
-  } catch (err) {
-    console.error(err);
-    throw err;
+  const markdown = await file.text();
+  const content = parseMarkdownContent(markdown);
+  const title = file.name.replace(/\.md$/i, "");
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      ...headers,
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({
+      title,
+      content,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error("request failed");
   }
 }