From b03f1e0920b5a3090be03b90f2abed4edaa0cf22 Mon Sep 17 00:00:00 2001 From: samlhuillier Date: Fri, 15 Dec 2023 08:32:48 +0530 Subject: [PATCH] remove nord from markdown & make similar files sidebar use markdown renderer component --- package.json | 1 + src/components/File/MilkdownSecondTry.tsx | 43 +---- src/components/File/milkdown.css | 19 ++- .../Similarity/SimilarFilesSidebar.tsx | 158 +++++++++++++++++- src/components/Similarity/milkdown.css | 22 +++ 5 files changed, 199 insertions(+), 44 deletions(-) create mode 100644 src/components/Similarity/milkdown.css diff --git a/package.json b/package.json index 00e47267..2905667c 100644 --- a/package.json +++ b/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": { diff --git a/src/components/File/MilkdownSecondTry.tsx b/src/components/File/MilkdownSecondTry.tsx index c415764b..b100c406 100644 --- a/src/components/File/MilkdownSecondTry.tsx +++ b/src/components/File/MilkdownSecondTry.tsx @@ -77,50 +77,13 @@ const MarkdownEditor: React.FC = ({ 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) diff --git a/src/components/File/milkdown.css b/src/components/File/milkdown.css index 10b281a6..7a25526b 100644 --- a/src/components/File/milkdown.css +++ b/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; -} \ No newline at end of file + padding: 2px; + padding-left: 5px; +} + +.milkdown .editor:focus { + outline: none; +} + + +/* .milkdown { + font-size: 1em; +} + +h1 h2 h3 h4 h5 h6 { + font-size: 1em; +} */ \ No newline at end of file diff --git a/src/components/Similarity/SimilarFilesSidebar.tsx b/src/components/Similarity/SimilarFilesSidebar.tsx index 8ba7be45..49a84060 100644 --- a/src/components/Similarity/SimilarFilesSidebar.tsx +++ b/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,9 +98,11 @@ const SimilarEntriesComponent: React.FC = ({ 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)} > -

+ {/*

{entry.content} -

+

*/} + {/* */} + {entry.content} ))} @@ -78,3 +110,125 @@ const SimilarEntriesComponent: React.FC = ({ }; export default SimilarEntriesComponent; + +interface SimilarEntryItemProp { + content: string; +} +const SimilarEntryItem: React.FC = ({ content }) => { + // const [content, setContent] = useState(""); + + // const ref = useRef(null); + // const lastSavedContentRef = useRef(""); + + // 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 ( +
+ +
+ ); +}; diff --git a/src/components/Similarity/milkdown.css b/src/components/Similarity/milkdown.css new file mode 100644 index 00000000..05db0973 --- /dev/null +++ b/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; +} \ No newline at end of file