fix: flatmap children when highlighting rich preview to avoid body

Jacky Zhao

2024-02-02 3b596c9311fd5fe552d6c53e9b27841932a26587

 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()
  }