From f78b512436ebc293d10e9ebdd0fc5fbd1705dde4 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Fri, 02 Feb 2024 03:25:45 +0000
Subject: [PATCH] chore(search): check for input type and assignment of focus (#785)

---
 quartz/components/scripts/search.inline.ts |   74 ++++++++++++++++++++++++++++++++----
 1 files changed, 65 insertions(+), 9 deletions(-)

diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 43332a6..8ead5c9 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -11,23 +11,29 @@
   tags: string[]
 }
 
-let index: FlexSearch.Document<Item> | undefined = undefined
-
 // Can be expanded with things like "term" in the future
 type SearchType = "basic" | "tags"
 
 // Current searchType
 let searchType: SearchType = "basic"
+// Current search term // TODO: exact match
+let currentSearchTerm: string = ""
+// index for search
+let index: FlexSearch.Document<Item> | undefined = undefined
 
 const contextWindowWords = 30
 const numSearchResults = 8
 const numTagResults = 5
-function highlight(searchTerm: string, text: string, trim?: boolean) {
-  // try to highlight longest tokens first
-  const tokenizedTerms = searchTerm
+
+const tokenizeTerm = (term: string) =>
+  term
     .split(/\s+/)
     .filter((t) => t !== "")
     .sort((a, b) => b.length - a.length)
+
+function highlight(searchTerm: string, text: string, trim?: boolean) {
+  // try to highlight longest tokens first
+  const tokenizedTerms = tokenizeTerm(searchTerm)
   let tokenizedText = text.split(/\s+/).filter((t) => t !== "")
 
   let startIndex = 0
@@ -64,6 +70,7 @@
       }
       return tok
     })
+    .slice(startIndex, endIndex + 1)
     .join(" ")
 
   return `${startIndex === 0 ? "" : "..."}${slice}${
@@ -71,6 +78,45 @@
   }`
 }
 
+function highlightHTML(searchTerm: string, el: HTMLElement) {
+  // try to highlight longest tokens first
+  const p = new DOMParser()
+  const tokenizedTerms = tokenizeTerm(searchTerm)
+  const html = p.parseFromString(el.innerHTML, "text/html")
+
+  const createHighlightSpan = (text: string) => {
+    const span = document.createElement("span")
+    span.className = "highlight"
+    span.textContent = text
+    return span
+  }
+
+  const highlightTextNodes = (node: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      let nodeText = node.nodeValue || ""
+      tokenizedTerms.forEach((term) => {
+        const regex = new RegExp(term.toLowerCase(), "gi")
+        const matches = nodeText.match(regex)
+        const spanContainer = document.createElement("span")
+        let lastIndex = 0
+        matches?.forEach((match) => {
+          const matchIndex = nodeText.indexOf(match, lastIndex)
+          spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex, matchIndex)))
+          spanContainer.appendChild(createHighlightSpan(match))
+          lastIndex = matchIndex + match.length
+        })
+        spanContainer.appendChild(document.createTextNode(nodeText.slice(lastIndex)))
+        node.parentNode?.replaceChild(spanContainer, node)
+      })
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      Array.from(node.childNodes).forEach(highlightTextNodes)
+    }
+  }
+
+  highlightTextNodes(html.body)
+  return html.body
+}
+
 const p = new DOMParser()
 const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
 let prevShortcutHandler: ((e: HTMLElementEventMap["keydown"]) => void) | undefined = undefined
@@ -96,6 +142,7 @@
 
   const enablePreview = searchLayout?.dataset?.preview === "true"
   let preview: HTMLDivElement | undefined = undefined
+  let previewInner: HTMLDivElement | undefined = undefined
   const results = document.createElement("div")
   results.id = "results-container"
   results.style.flexBasis = enablePreview ? "30%" : "100%"
@@ -191,7 +238,7 @@
       e.preventDefault()
       // The results should already been focused, so we need to find the next one.
       // The activeElement is the search bar, so we need to find the first result and focus it.
-      if (!results?.contains(document.activeElement)) {
+      if (document.activeElement === searchBar || currentHover !== null) {
         const firstResult = currentHover
           ? currentHover
           : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
@@ -351,6 +398,7 @@
         removeAllChildren(preview as HTMLElement)
       } else {
         firstChild.classList.add("focus")
+        currentHover = firstChild as HTMLInputElement
         await displayPreview(firstChild)
       }
     }
@@ -384,22 +432,30 @@
     el.classList.add("focus")
 
     removeAllChildren(preview as HTMLElement)
-    const contentDetails = await fetchContent(slug)
 
-    const previewInner = document.createElement("div")
+    previewInner = document.createElement("div")
     previewInner.classList.add("preview-inner")
     preview?.appendChild(previewInner)
-    contentDetails?.forEach((elt) => previewInner.appendChild(elt))
+
+    const innerDiv = await fetchContent(slug).then((contents) =>
+      contents.map((el) => highlightHTML(currentSearchTerm, el as HTMLElement)),
+    )
+    previewInner.append(...innerDiv)
   }
 
   async function onType(e: HTMLElementEventMap["input"]) {
     let term = (e.target as HTMLInputElement).value
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
+    currentSearchTerm = (e.target as HTMLInputElement).value
 
     if (searchLayout) {
       searchLayout.style.opacity = "1"
     }
 
+    if (term === "" && searchLayout) {
+      searchLayout.style.opacity = "0"
+    }
+
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
     } else {

--
Gitblit v1.10.0