From 595018b4a1ca31cb94b15766a03c4ba4edd16841 Mon Sep 17 00:00:00 2001
From: J the Code Monkey <jaythecodemonkey.7vk7i@slmail.me>
Date: Fri, 13 Sep 2024 17:42:03 -0400
Subject: [PATCH 1/2] feat: add highlight search terms in note feed when
 searching #103

---
 frontend/package-lock.json                    |  31 +++++
 frontend/package.json                         |   2 +
 frontend/src/components/notes/NoteCard.tsx    |   7 +-
 .../src/components/notes/NoteCardPreview.tsx  |  26 ++++
 frontend/src/components/notes/SearchNotes.tsx |   2 +-
 .../src/components/notes/TrashNoteCard.tsx    |  10 +-
 .../components/notes/TrashNoteCardPreview.tsx |  26 ++++
 .../src/components/notes/TrashSearchFeed.tsx  |   2 -
 frontend/src/lib/markdown.ts                  | 118 +++++++++++++++---
 9 files changed, 197 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/notes/NoteCardPreview.tsx
 create mode 100644 frontend/src/components/notes/TrashNoteCardPreview.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 416d1c0d..3ef28883 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -47,7 +47,9 @@
         "react-intersection-observer": "^9.10.3",
         "react-resizable-panels": "^2.0.19",
         "rehype-sanitize": "^6.0.0",
+        "remark": "^15.0.1",
         "sonner": "^1.5.0",
+        "strip-markdown": "^6.0.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8",
@@ -8841,6 +8843,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz",
+      "integrity": "sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
@@ -9234,6 +9252,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-markdown": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/strip-markdown/-/strip-markdown-6.0.0.tgz",
+      "integrity": "sha512-mSa8FtUoX3ExJYDkjPUTC14xaBAn4Ik5GPQD45G5E2egAmeV3kHgVSTfIoSDggbF6Pk9stahVgqsLCNExv6jHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/style-mod": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9ffefc9a..79094e77 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,7 +49,9 @@
     "react-intersection-observer": "^9.10.3",
     "react-resizable-panels": "^2.0.19",
     "rehype-sanitize": "^6.0.0",
+    "remark": "^15.0.1",
     "sonner": "^1.5.0",
+    "strip-markdown": "^6.0.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8",
diff --git a/frontend/src/components/notes/NoteCard.tsx b/frontend/src/components/notes/NoteCard.tsx
index 4365153c..f657b711 100644
--- a/frontend/src/components/notes/NoteCard.tsx
+++ b/frontend/src/components/notes/NoteCard.tsx
@@ -1,9 +1,9 @@
 import { Note } from "&/github.com/nodetec/captains-log/db/models";
-import { parseContent } from "~/lib/markdown";
 import { cn, fromNow } from "~/lib/utils";
 import { useAppState } from "~/store";
 
 import { Separator } from "../ui/separator";
+import NoteCardPreview from "./NoteCardPreview";
 
 type Props = {
   note: Note;
@@ -22,6 +22,7 @@ export default function NoteCard({ note }: Props) {
     event.preventDefault();
     console.log("Right Clicked");
   };
+
   return (
     <div className="mx-3 flex w-full flex-col items-center">
       <button
@@ -42,11 +43,11 @@ export default function NoteCard({ note }: Props) {
           }
         >
           <div className="flex w-full flex-col gap-1.5">
-            <h2 className="select-none truncate line-clamp-1 break-all whitespace-break-spaces text-ellipsis font-semibold text-primary">
+            <h2 className="line-clamp-1 select-none truncate text-ellipsis whitespace-break-spaces break-all font-semibold text-primary">
               {note.Title}
             </h2>
             <div className="mt-0 line-clamp-2 text-ellipsis whitespace-break-spaces break-all pt-0 text-muted-foreground">
-              {parseContent(note.Content) || "No content \n "}
+              <NoteCardPreview note={note} />
             </div>
             <span className="select-none text-xs text-muted-foreground/80">
               {note.ModifiedAt && fromNow(note.ModifiedAt)}
diff --git a/frontend/src/components/notes/NoteCardPreview.tsx b/frontend/src/components/notes/NoteCardPreview.tsx
new file mode 100644
index 00000000..f76b1806
--- /dev/null
+++ b/frontend/src/components/notes/NoteCardPreview.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+import { Note } from "&/github.com/nodetec/captains-log/db/models";
+import { parseContent } from "~/lib/markdown";
+import { useAppState } from "~/store";
+
+type Props = {
+  note: Note;
+};
+
+export default function NoteCardPreview({ note }: Props) {
+  const noteSearch = useAppState((state) => state.noteSearch);
+  const [parsedContent, setParsedContent] = useState("");
+
+  useEffect(() => {
+    const getParsedContent = async () => {
+      const parsedContentResult =
+        (await parseContent(note.Content, noteSearch)) || "No content \n ";
+      setParsedContent(parsedContentResult);
+    };
+
+    getParsedContent();
+  }, [noteSearch]);
+
+  return <div dangerouslySetInnerHTML={{ __html: parsedContent }}></div>;
+}
diff --git a/frontend/src/components/notes/SearchNotes.tsx b/frontend/src/components/notes/SearchNotes.tsx
index eb932d7a..40563b23 100644
--- a/frontend/src/components/notes/SearchNotes.tsx
+++ b/frontend/src/components/notes/SearchNotes.tsx
@@ -21,7 +21,7 @@ export default function SearchNotes() {
     <div className="flex items-center px-3 pb-4 pt-2">
       <Input
         placeholder="Search..."
-        className="text-muted-foreground/80 h-8 placeholder:text-muted-foreground/60 focus-visible:ring-primary"
+        className="h-8 text-muted-foreground/80 placeholder:text-muted-foreground/60 focus-visible:ring-primary"
         onChange={handleSetSearchNote}
         value={noteSearch}
       />
diff --git a/frontend/src/components/notes/TrashNoteCard.tsx b/frontend/src/components/notes/TrashNoteCard.tsx
index bbaa7d0d..a91b59c3 100644
--- a/frontend/src/components/notes/TrashNoteCard.tsx
+++ b/frontend/src/components/notes/TrashNoteCard.tsx
@@ -1,17 +1,17 @@
 import { Trash } from "&/github.com/nodetec/captains-log/db/models";
-import { parseContent } from "~/lib/markdown";
 import { cn, fromNow } from "~/lib/utils";
 import { useAppState } from "~/store";
 
 import { Separator } from "../ui/separator";
+import TrashNoteCardPreview from "./TrashNoteCardPreview";
 
 type Props = {
   trashNote: Trash;
 };
 
 export default function TrashNoteCard({ trashNote }: Props) {
-  const setActiveTrashNote = useAppState((state) => state.setActiveTrashNote);
   const activeTrashNote = useAppState((state) => state.activeTrashNote);
+  const setActiveTrashNote = useAppState((state) => state.setActiveTrashNote);
 
   function handleSetActiveNote(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
@@ -27,8 +27,8 @@ export default function TrashNoteCard({ trashNote }: Props) {
         )}
       >
         <div
-          onClick={handleSetActiveNote}
           className="flex w-full flex-col gap-1"
+          onClick={handleSetActiveNote}
           style={
             {
               "--custom-contextmenu": "trashNoteMenu",
@@ -37,11 +37,11 @@ export default function TrashNoteCard({ trashNote }: Props) {
           }
         >
           <div className="flex w-full flex-col gap-1.5">
-            <h2 className="select-none truncate line-clamp-1 break-all whitespace-break-spaces text-ellipsis font-semibold text-primary">
+            <h2 className="line-clamp-1 select-none truncate text-ellipsis whitespace-break-spaces break-all font-semibold text-primary">
               {trashNote.Title}
             </h2>
             <div className="mt-0 line-clamp-2 text-ellipsis whitespace-break-spaces break-all pt-0 text-muted-foreground">
-              {parseContent(trashNote.Content) || "No content \n "}
+              <TrashNoteCardPreview trashNote={trashNote} />
             </div>
             <span className="select-none text-xs text-muted-foreground/80">
               {trashNote.ModifiedAt && fromNow(trashNote.ModifiedAt)}
diff --git a/frontend/src/components/notes/TrashNoteCardPreview.tsx b/frontend/src/components/notes/TrashNoteCardPreview.tsx
new file mode 100644
index 00000000..cf7b24e7
--- /dev/null
+++ b/frontend/src/components/notes/TrashNoteCardPreview.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+import { Trash } from "&/github.com/nodetec/captains-log/db/models";
+import { parseContent } from "~/lib/markdown";
+import { useAppState } from "~/store";
+
+type Props = {
+  trashNote: Trash;
+};
+
+export default function TrashNoteCardPreview({ trashNote }: Props) {
+  const noteSearch = useAppState((state) => state.noteSearch);
+  const [parsedContent, setParsedContent] = useState("");
+
+  useEffect(() => {
+    const getParsedContent = async () => {
+      const parsedContentResult =
+        (await parseContent(trashNote.Content, noteSearch)) || "No content \n ";
+      setParsedContent(parsedContentResult);
+    };
+
+    getParsedContent();
+  }, [noteSearch]);
+
+  return <div dangerouslySetInnerHTML={{ __html: parsedContent }}></div>;
+}
diff --git a/frontend/src/components/notes/TrashSearchFeed.tsx b/frontend/src/components/notes/TrashSearchFeed.tsx
index af8fae21..294f3abb 100644
--- a/frontend/src/components/notes/TrashSearchFeed.tsx
+++ b/frontend/src/components/notes/TrashSearchFeed.tsx
@@ -27,8 +27,6 @@ export default function TrashSearchFeed() {
       sortDirection,
     );
 
-    console.log("search trash",notes);
-
     return {
       data: notes || [],
       nextPage: pageParam + 1,
diff --git a/frontend/src/lib/markdown.ts b/frontend/src/lib/markdown.ts
index c53ac099..10482058 100644
--- a/frontend/src/lib/markdown.ts
+++ b/frontend/src/lib/markdown.ts
@@ -1,4 +1,11 @@
 import dayjs from "dayjs";
+import { remark } from "remark";
+import strip from "strip-markdown";
+
+interface NoteSearchMatchIndices {
+  start: number;
+  end: number;
+}
 
 export function parseTitle(markdownContent: string) {
   // Split the content into lines
@@ -10,8 +17,6 @@ export function parseTitle(markdownContent: string) {
   // Check if the first line is a header
   const headerMatch = firstLine.match(/^#+\s+(.*)$/);
 
-  console.log("headerMatch", headerMatch);
-
   if (headerMatch) {
     // Extract and return the title without the header markdown
     return headerMatch[1];
@@ -21,24 +26,105 @@ export function parseTitle(markdownContent: string) {
   return dayjs().format("YYYY-MM-DD");
 }
 
-export function parseContent(markdownContent: string) {
-    // Split the content into lines
-    const lines = markdownContent.split("\n");
+async function stripMarkdown(content: string) {
+  const strippedMdContentVFile = await remark().use(strip).process(content);
+  const strippedMdContent = String(strippedMdContentVFile);
+
+  return strippedMdContent;
+}
+
+function addSpanTags(
+  content: string,
+  searchMatchIndices: NoteSearchMatchIndices[],
+) {
+  const spanTagOpen = `<span class='bg-primary text-primary-foreground rounded-sm'>`;
+  const spanTagOpenLength = spanTagOpen.length;
 
-    // Check if the first line is a header
-    const firstLine = lines[0].trim();
-    const isHeader = /^#+\s+(.*)$/.test(firstLine);
+  const spanTagClose = `</span>`;
+  const spanTagCloseLength = spanTagClose.length;
 
-    // Determine the starting index for processing lines
-    const startIndex = isHeader ? 1 : 0;
+  const spanTagLength = spanTagOpenLength + spanTagCloseLength;
 
-    // Filter out empty lines, ignoring the title if present
-    const filteredLines = lines
-        .slice(startIndex) // Start from the second line if the first line is a header
-        .filter((line) => line.trim() !== "");
+  let numberOfSpanTagsAdded = 0;
+  searchMatchIndices.forEach((match) => {
+    content =
+      content.substring(
+        0,
+        match.start + numberOfSpanTagsAdded * spanTagLength,
+      ) +
+      spanTagOpen +
+      content.substring(match.start + numberOfSpanTagsAdded * spanTagLength);
 
-    // Join the lines back together with newlines
-    const content = filteredLines.join("\n");
+    content =
+      content.substring(
+        0,
+        match.end +
+          1 +
+          spanTagOpenLength +
+          numberOfSpanTagsAdded * spanTagLength,
+      ) +
+      spanTagClose +
+      content.substring(
+        match.end +
+          1 +
+          spanTagOpenLength +
+          numberOfSpanTagsAdded * spanTagLength,
+      );
+
+    numberOfSpanTagsAdded = numberOfSpanTagsAdded + 1;
+  });
+  return content;
+}
+
+export async function parseContent(
+  markdownContent: string,
+  noteSearch: string,
+) {
+  // Split the content into lines
+  const lines = markdownContent.split("\n");
 
+  // Check if the first line is a header
+  const firstLine = lines[0].trim();
+  const isHeader = /^#+\s+(.*)$/.test(firstLine);
+
+  // Determine the starting index for processing lines
+  const startIndex = isHeader ? 1 : 0;
+
+  // Filter out empty lines, ignoring the title if present
+  const filteredLines = lines
+    .slice(startIndex) // Start from the second line if the first line is a header
+    .filter((line) => line.trim() !== "");
+
+  // Join the lines back together with newlines
+  const content = filteredLines.join("\n");
+
+  try {
+    const strippedMdContent = await stripMarkdown(content);
+    const searchMatchIndices: NoteSearchMatchIndices[] = [];
+    let matchIndexStart = 0;
+    let step = 0;
+    if (noteSearch !== "") {
+      while (step < strippedMdContent.length) {
+        matchIndexStart = strippedMdContent.indexOf(noteSearch, step);
+        if (matchIndexStart === -1) {
+          break;
+        }
+
+        step = matchIndexStart + noteSearch.length;
+
+        searchMatchIndices.push({
+          start: matchIndexStart,
+          end: step - 1,
+        });
+      }
+    }
+    const contentWithSpanTags = addSpanTags(
+      strippedMdContent,
+      searchMatchIndices,
+    );
+
+    return contentWithSpanTags;
+  } catch {
     return content;
+  }
 }

From e67d4780e105639409f894e963da10386cd9ce27 Mon Sep 17 00:00:00 2001
From: J the Code Monkey <jaythecodemonkey.7vk7i@slmail.me>
Date: Fri, 13 Sep 2024 18:38:35 -0400
Subject: [PATCH 2/2] chore: update go mod file

---
 go.mod | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/go.mod b/go.mod
index b1be2562..0f4589e0 100644
--- a/go.mod
+++ b/go.mod
@@ -41,7 +41,7 @@ require (
 	github.com/sergi/go-diff v1.2.0 // indirect
 	github.com/sethvargo/go-retry v0.2.4 // indirect
 	github.com/skeema/knownhosts v1.2.1 // indirect
-	github.com/wailsapp/go-webview2 v1.0.11 // indirect
+	github.com/wailsapp/go-webview2 v1.0.15 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
 	github.com/xanzy/ssh-agent v0.3.3 // indirect
 	go.uber.org/multierr v1.11.0 // indirect