remove nord from markdown & make similar files sidebar use markdown r…

…enderer component

package.json

@@ -46,6 +46,7 @@
     "node-llama-cpp": "^2.8.0",
     "openai": "^4.20.0",
     "react-icons": "^4.12.0",
+    "react-markdown": "^9.0.1",
     "vectordb": "^0.3.8"
   },
   "devDependencies": {

src/components/File/MilkdownSecondTry.tsx

@@ -77,50 +77,13 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
           ctx.set(defaultValueCtx, content);
           ctx
             .get(listenerCtx)
-            .beforeMount((ctx) => {
-              console.log("beforeMount");
-            })
-            .mounted((ctx) => {
-              console.log("mounted");
-              insert("# Default Title");
-            })
-            .updated((ctx, doc, prevDoc) => {
-              console.log("updated", doc, prevDoc);
-              console.log("updated JSON", doc.toJSON());
-            })
+
             .markdownUpdated((ctx, markdown, prevMarkdown) => {
-              console.log(
-                "markdownUpdated to=",
-                markdown,
-                "\nprev=",
-                prevMarkdown
-              );
               setContent(markdown);
-            })
-            .blur((ctx) => {
-              console.log("when editor loses focus");
-            })
-            .focus((ctx) => {
-              const view = ctx.get(editorViewCtx);
-              console.log("focus", view);
-            })
-            .destroy((ctx) => {
-              console.log("destroy");
             });
         })
-        .use(
-          tooltip.configure(tooltipPlugin, {
-            bottom: true,
-            items: (ctx: Ctx) => {
-              const marks = ctx.get(schemaCtx).marks;
-              const nodes = ctx.get(schemaCtx).nodes;
-              return [
-                createToggleIcon("bold", "OK", marks.strong, marks.code_inline),
-              ];
-            },
-          })
-        )
-        .use(nord)
+
+        // .use(nord)
         .use(commonmark)
         // .use(gfm)
         .use(history)

src/components/File/milkdown.css

@@ -3,7 +3,22 @@
     /* set the background color: */
     background-color: #2e3440;
     color: white;
-    /* font-size: 50px; */
+    font-size: 17px;
     /* border: 2px solid black; */
     overflow: auto;
-}
+    padding: 2px;
+    padding-left: 5px;
+}
+
+.milkdown .editor:focus {
+    outline: none;
+}
+
+
+/* .milkdown {
+    font-size: 1em;
+}
+
+h1 h2 h3 h4 h5 h6 {
+    font-size: 1em;
+} */

src/components/Similarity/SimilarFilesSidebar.tsx

@@ -1,5 +1,35 @@
 import { useEffect, useState } from "react";
 import { RagnoteDBEntry } from "electron/main/database/Table";
+import {
+  Editor,
+  rootCtx,
+  defaultValueCtx,
+  editorViewCtx,
+  Ctx,
+  schemaCtx,
+} from "@milkdown/core";
+import { nord } from "@milkdown/theme-nord";
+import { commonmark } from "@milkdown/preset-commonmark";
+import { history } from "@milkdown/plugin-history";
+import { gfm } from "@milkdown/preset-gfm";
+import { ReactEditor, useEditor } from "@milkdown/react";
+import {
+  tooltip,
+  tooltipPlugin,
+  createToggleIcon,
+  defaultButtons,
+} from "@milkdown/plugin-tooltip";
+// import "./milkdown.css";
+import { listener, listenerCtx } from "@milkdown/plugin-listener";
+import { prism } from "@milkdown/plugin-prism";
+import { menu } from "@milkdown/plugin-menu";
+import { block } from "@milkdown/plugin-block";
+// import slash from "./slash"; // Uncomment if slash is used
+import { cursor } from "@milkdown/plugin-cursor";
+import { clipboard } from "@milkdown/plugin-clipboard";
+import { insert, replaceAll, getMarkdown } from "@milkdown/utils";
+import ReactMarkdown from "react-markdown";
+
 interface SimilarEntriesComponentProps {
   filePath: string;
   onFileSelect: (path: string) => void;
@@ -68,13 +98,137 @@ const SimilarEntriesComponent: React.FC<SimilarEntriesComponentProps> = ({
           className="pr-2 pb-1 bg-white shadow-md rounded-lg cursor-pointer hover:scale-104 hover:shadow-lg transition-transform duration-300"
           onClick={() => onFileSelect(entry.notepath)}
         >
-          <p className="text-gray-700">
+          {/* <p className="text-gray-700">
             <span className="text-gray-500">{entry.content}</span>
-          </p>
+          </p> */}
+          {/* <SimilarEntryItem content={entry.content} /> */}
+          <ReactMarkdown>{entry.content}</ReactMarkdown>
         </div>
       ))}
     </div>
   );
 };
 
 export default SimilarEntriesComponent;
+
+interface SimilarEntryItemProp {
+  content: string;
+}
+const SimilarEntryItem: React.FC<SimilarEntryItemProp> = ({ content }) => {
+  // const [content, setContent] = useState<string>("");
+
+  // const ref = useRef<MDXEditorMethods>(null);
+  // const lastSavedContentRef = useRef<string>("");
+
+  // const saveFile = async () => {
+  //   if (content !== lastSavedContentRef.current) {
+  //     // Check for changes since last save
+  //     console.log("calling save file:");
+  //     await window.files.writeFile(filePath, content);
+  //     lastSavedContentRef.current = content; // Update the ref to the latest saved content
+  //   }
+  // };
+
+  // useEffect(() => {
+  //   const saveInterval = setInterval(() => {
+  //     saveFile();
+  //   }, 5000); // Every 10 seconds
+
+  //   return () => clearInterval(saveInterval); // Clear the interval when component unmounts
+  // }, [content]); // Dependency on content ensures saveFile has the latest content
+
+  // useEffect(() => {
+  //   // console.log("content set to: ")
+  //   setContentInParent(content);
+  // }, [content]);
+
+  const { editor, getInstance } = useEditor(
+    (root) =>
+      Editor.make()
+        .config((ctx) => {
+          ctx.set(rootCtx, root);
+          ctx.set(defaultValueCtx, content);
+          ctx
+            .get(listenerCtx)
+            .beforeMount((ctx) => {
+              console.log("beforeMount");
+            })
+            .mounted((ctx) => {
+              console.log("mounted");
+              insert("# Default Title");
+            })
+            .updated((ctx, doc, prevDoc) => {
+              console.log("updated", doc, prevDoc);
+              console.log("updated JSON", doc.toJSON());
+            })
+            .markdownUpdated((ctx, markdown, prevMarkdown) => {
+              console.log(
+                "markdownUpdated to=",
+                markdown,
+                "\nprev=",
+                prevMarkdown
+              );
+              // setContent(markdown);
+            })
+            .blur((ctx) => {
+              console.log("when editor loses focus");
+            })
+            .focus((ctx) => {
+              const view = ctx.get(editorViewCtx);
+              console.log("focus", view);
+            })
+            .destroy((ctx) => {
+              console.log("destroy");
+            });
+        })
+        .use(
+          tooltip.configure(tooltipPlugin, {
+            bottom: true,
+            items: (ctx: Ctx) => {
+              const marks = ctx.get(schemaCtx).marks;
+              const nodes = ctx.get(schemaCtx).nodes;
+              return [
+                createToggleIcon("bold", "OK", marks.strong, marks.code_inline),
+              ];
+            },
+          })
+        )
+        // .use(nord)
+        .use(commonmark)
+        // .use(gfm)
+        .use(history)
+        .use(listener)
+        .use(prism)
+        // .use(menu)
+        // .use(block)
+        .use(cursor)
+        .use(clipboard)
+    // .use(slash)
+  );
+  getInstance()?.action(replaceAll(content));
+  // useEffect(() => {
+  //   const fetchContent = async () => {
+  //     try {
+  //       const fileContent = await window.files.readFile(filePath);
+  //       // setContent(fileContent);
+  //       getInstance()?.action(replaceAll(fileContent));
+  //       // ref.current?.setMarkdown(fileContent);
+  //       lastSavedContentRef.current = fileContent; // Initialize with fetched content
+  //     } catch (error) {
+  //       // Handle the error here
+  //       console.error("Error reading file:", error);
+  //       // Optionally, you can set some state to show an error message in the UI
+  //     }
+  //   };
+
+  //   if (filePath) {
+  //     fetchContent();
+  //   }
+  // }, [filePath]);
+
+  return (
+    <div className="h-fulloverflow-auto">
+      <ReactEditor editor={editor} />
+    </div>
+  );
+};

src/components/Similarity/milkdown.css

@@ -0,0 +1,22 @@
+.milkdown .editor {
+    padding-top: 0px;
+    /* height: 100vh; */
+    /* set the background color: */
+    background-color: #2e3440;
+    /* color: white; */
+    font-size: 1em;
+    /* border: 2px solid black; */
+    overflow: auto;
+}
+
+.milkdown {
+    font-size: 1em;
+}
+
+h1 h2 h3 h4 h5 h6 {
+    font-size: 1em;
+}
+
+* {
+    font-size: 1px;
+}