fix(search): oops restore ability to preview on hover lol

Jacky Zhao

2024-02-02 9ff1fdd280f4b4c554f1bddfa51689fcb1576558

 quartz/components/scripts/search.inline.ts

@@ -15,10 +15,30 @@
type SearchType = "basic" | "tags"
let searchType: SearchType = "basic"
let currentSearchTerm: string = ""
let index: FlexSearch.Document<Item> | undefined = undefined
const p = new DOMParser()
const encoder = (str: string) => str.toLowerCase().split(/([^a-z]|[^\x00-\x7F])/)
let index = new FlexSearch.Document<Item>({
  charset: "latin:extra",
  encode: encoder,
  document: {
    id: "id",
    index: [
      {
        field: "title",
        tokenize: "forward",
      },
      {
        field: "content",
        tokenize: "forward",
      },
      {
        field: "tags",
        tokenize: "forward",
      },
    ],
  },
})

const p = new DOMParser()
const fetchContentCache: Map<FullSlug, Element[]> = new Map()
const contextWindowWords = 30
const numSearchResults = 8
@@ -168,7 +188,7 @@
      removeAllChildren(preview)
    }
    if (searchLayout) {
      searchLayout.style.visibility = "hidden"
      searchLayout.classList.remove("display-results")
    }

    searchType = "basic" // reset search type after closing
@@ -208,7 +228,7 @@

    // If search is active, then we will render the first result and display accordingly
    if (!container?.classList.contains("active")) return
    else if (e.key === "Enter") {
    if (e.key === "Enter") {
      // If result has focus, navigate to that one, otherwise pick first result
      if (results?.contains(document.activeElement)) {
        const active = document.activeElement as HTMLInputElement
@@ -230,9 +250,9 @@
          : (document.activeElement as HTMLInputElement | null)
        const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
        currentResult?.classList.remove("focus")
        await displayPreview(prevResult)
        prevResult?.focus()
        currentHover = prevResult
        if (prevResult) currentHover = prevResult
        await displayPreview(prevResult)
      }
    } else if (e.key === "ArrowDown" || e.key === "Tab") {
      e.preventDefault()
@@ -244,19 +264,9 @@
          : (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
        const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
        firstResult?.classList.remove("focus")
        await displayPreview(secondResult)
        secondResult?.focus()
        currentHover = secondResult
      } else {
        // If an element in results-container already has focus, focus next one
        const active = currentHover
          ? currentHover
          : (document.activeElement as HTMLInputElement | null)
        active?.classList.remove("focus")
        const nextResult = active?.nextElementSibling as HTMLInputElement | null
        await displayPreview(nextResult)
        nextResult?.focus()
        currentHover = nextResult
        if (secondResult) currentHover = secondResult
        await displayPreview(secondResult)
      }
    }
  }
@@ -300,38 +310,21 @@
    itemTile.href = resolveUrl(slug).toString()
    itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`

    const handler = (event: MouseEvent) => {
      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
      hideSearch()
    }

    async function onMouseEnter(ev: MouseEvent) {
      if (!ev.target) return
      currentHover?.classList.remove("focus")
      currentHover?.blur()
      const target = ev.target as HTMLInputElement
      await displayPreview(target)
      currentHover = target
      currentHover.classList.add("focus")
    }

    async function onMouseLeave(ev: MouseEvent) {
      if (!ev.target) return
      const target = ev.target as HTMLElement
      target.classList.remove("focus")
    }

    const events = [
      ["mouseenter", onMouseEnter],
      ["mouseleave", onMouseLeave],
      [
        "click",
        (event: MouseEvent) => {
          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
          hideSearch()
        },
      ],
    ] as const

    events.forEach(([event, handler]) => {
      itemTile.addEventListener(event, handler)
      window.addCleanup(() => itemTile.removeEventListener(event, handler))
    })
    itemTile.addEventListener("mouseenter", onMouseEnter)
    window.addCleanup(() => itemTile.removeEventListener("mouseenter", onMouseEnter))
    itemTile.addEventListener("click", handler)
    window.addCleanup(() => itemTile.removeEventListener("click", handler))

    return itemTile
  }
@@ -385,12 +378,11 @@
  async function displayPreview(el: HTMLElement | null) {
    if (!searchLayout || !enablePreview || !el || !preview) return
    const slug = el.id as FullSlug
    el.classList.add("focus")
    previewInner = document.createElement("div")
    previewInner.classList.add("preview-inner")
    const innerDiv = await fetchContent(slug).then((contents) =>
      contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
    )
    previewInner = document.createElement("div")
    previewInner.classList.add("preview-inner")
    previewInner.append(...innerDiv)
    preview.replaceChildren(previewInner)

@@ -398,13 +390,13 @@
    const highlights = [...preview.querySelectorAll(".highlight")].sort(
      (a, b) => b.innerHTML.length - a.innerHTML.length,
    )
    highlights[0]?.scrollIntoView()
    highlights[0]?.scrollIntoView({ block: "start" })
  }

  async function onType(e: HTMLElementEventMap["input"]) {
    if (!searchLayout || !index) return
    currentSearchTerm = (e.target as HTMLInputElement).value
    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
    searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"

    let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
@@ -444,8 +436,8 @@
  searchBar?.addEventListener("input", onType)
  window.addCleanup(() => searchBar?.removeEventListener("input", onType))

  index ??= await fillDocument(data)
  registerEscapeHandler(container, hideSearch)
  await fillDocument(data)
})

/**
@@ -454,37 +446,19 @@
 * @param data data to fill index with
 */
async function fillDocument(data: { [key: FullSlug]: ContentDetails }) {
  const index = new FlexSearch.Document<Item>({
    charset: "latin:extra",
    encode: encoder,
    document: {
      id: "id",
      index: [
        {
          field: "title",
          tokenize: "forward",
        },
        {
          field: "content",
          tokenize: "forward",
        },
        {
          field: "tags",
          tokenize: "forward",
        },
      ],
    },
  })
  let id = 0
  const promises: Array<Promise<unknown>> = []
  for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
    await index.addAsync(id++, {
      id,
      slug: slug as FullSlug,
      title: fileData.title,
      content: fileData.content,
      tags: fileData.tags,
    })
    promises.push(
      index.addAsync(id++, {
        id,
        slug: slug as FullSlug,
        title: fileData.title,
        content: fileData.content,
        tags: fileData.tags,
      }),
    )
  }

  return index
  return await Promise.all(promises)
}