From 3b596c9311fd5fe552d6c53e9b27841932a26587 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 02 Feb 2024 08:19:19 +0000
Subject: [PATCH] fix: flatmap children when highlighting rich preview to avoid body
---
quartz/components/scripts/search.inline.ts | 33 +++++++++++++++++++--------------
1 files changed, 19 insertions(+), 14 deletions(-)
diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index c960f5e..57067d1 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -76,14 +76,15 @@
})
.join(" ")
- return `${startIndex === 0 ? "" : "..."}${slice}${endIndex === tokenizedText.length - 1 ? "" : "..."
- }`
+ return `${startIndex === 0 ? "" : "..."}${slice}${
+ endIndex === tokenizedText.length - 1 ? "" : "..."
+ }`
}
-function highlightHTML(searchTerm: string, innerHTML: string) {
+function highlightHTML(searchTerm: string, el: HTMLElement) {
const p = new DOMParser()
const tokenizedTerms = tokenizeTerm(searchTerm)
- const html = p.parseFromString(innerHTML, "text/html")
+ const html = p.parseFromString(el.innerHTML, "text/html")
const createHighlightSpan = (text: string) => {
const span = document.createElement("span")
@@ -276,13 +277,15 @@
return []
}
- return tags.map(tag => {
- if (tag.toLowerCase().includes(term.toLowerCase())) {
- return `<li><p class="match-tag">#${tag}</p></li>`
- } else {
- return `<li><p>#${tag}</p></li>`
- }
- }).slice(0, numTagResults)
+ return tags
+ .map((tag) => {
+ if (tag.toLowerCase().includes(term.toLowerCase())) {
+ return `<li><p class="match-tag">#${tag}</p></li>`
+ } else {
+ return `<li><p>#${tag}</p></li>`
+ }
+ })
+ .slice(0, numTagResults)
}
function resolveUrl(slug: FullSlug): URL {
@@ -299,7 +302,7 @@
async function onMouseEnter(ev: MouseEvent) {
if (!ev.target) return
- currentHover?.classList.remove('focus')
+ currentHover?.classList.remove("focus")
currentHover?.blur()
const target = ev.target as HTMLInputElement
await displayPreview(target)
@@ -386,13 +389,15 @@
previewInner = document.createElement("div")
previewInner.classList.add("preview-inner")
const innerDiv = await fetchContent(slug).then((contents) =>
- contents.map((el) => highlightHTML(currentSearchTerm, el.innerHTML)),
+ contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
)
previewInner.append(...innerDiv)
preview.replaceChildren(previewInner)
// scroll to longest
- const highlights = [...preview.querySelectorAll(".highlight")].sort((a, b) => b.innerHTML.length - a.innerHTML.length)
+ const highlights = [...preview.querySelectorAll(".highlight")].sort(
+ (a, b) => b.innerHTML.length - a.innerHTML.length,
+ )
highlights[0]?.scrollIntoView()
}
--
Gitblit v1.10.0