fix indexing causing main thread freeze, various polish

Jacky Zhao

2023-07-04 ab9da02c60c962128820e6874e6f07c98bc3dda7

 quartz/components/scripts/search.inline.ts

@@ -1,6 +1,6 @@
import { Document } from "flexsearch"
import { ContentDetails } from "../../plugins/emitters/contentIndex"
import { registerEscapeHandler } from "./handler"
import { registerEscapeHandler, relative, removeAllChildren } from "./util"

interface Item {
  slug: string,
@@ -9,19 +9,10 @@
}
let index: Document<Item> | undefined = undefined

function relative(from: string, to: string) {
  const pieces = [location.protocol, '//', location.host, location.pathname]
  const url = pieces.join('').slice(0, -from.length) + to
  return url
}

function removeAllChildren(node: HTMLElement) {
  node.innerHTML = ``
}

const contextWindowWords = 30
function highlight(searchTerm: string, text: string, trim?: boolean) {
  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "")
  // try to highlight longest tokens first
  const tokenizedTerms = searchTerm.split(/\s+/).filter(t => t !== "").sort((a, b) => b.length - a.length)
  let tokenizedText = text
    .split(/\s+/)
    .filter(t => t !== "")
@@ -52,7 +43,7 @@
    // see if this tok is prefixed by any search terms 
    for (const searchTok of tokenizedTerms) {
      if (tok.toLowerCase().includes(searchTok.toLowerCase())) {
        const regex = new RegExp(searchTok, "gi")
        const regex = new RegExp(searchTok.toLowerCase(), "gi")
        return tok.replace(regex, `<span class="highlight">$&</span>`)
      }
    }
@@ -91,7 +82,7 @@
    })

    for (const [slug, fileData] of Object.entries<ContentDetails>(data)) {
      index.add({
      await index.addAsync(slug, {
        slug,
        title: fileData.title,
        content: fileData.content
@@ -179,7 +170,6 @@
    displayResults(finalResults)
  }


  document.removeEventListener("keydown", shortcutHandler)
  document.addEventListener("keydown", shortcutHandler)
  searchIcon?.removeEventListener("click", showSearch)