diff --git a/web/components/filter.tsx b/web/components/filter.tsx index b41a4c9..7eee85e 100644 --- a/web/components/filter.tsx +++ b/web/components/filter.tsx @@ -21,6 +21,8 @@ export function FilterList({ completer, vimMode, darkMode, + preFilter, + phrasePreprocessor, allowNew = false, helpText = "", completePrefix, @@ -32,6 +34,8 @@ export function FilterList({ label: string; onKeyPress?: (key: string, currentText: string) => void; onSelect: (option: FilterOption | undefined) => void; + preFilter?: (options: FilterOption[], phrase: string) => FilterOption[]; + phrasePreprocessor?: (phrase: string) => string; vimMode: boolean; darkMode: boolean; completer: (context: CompletionContext) => Promise; @@ -50,7 +54,13 @@ export function FilterList({ const selectedElementRef = useRef(null); function updateFilter(originalPhrase: string) { - const results = fuzzySearchAndSort(options, originalPhrase); + const prefilteredOptions = preFilter + ? preFilter(options, originalPhrase) + : options; + if (phrasePreprocessor) { + originalPhrase = phrasePreprocessor(originalPhrase); + } + const results = fuzzySearchAndSort(prefilteredOptions, originalPhrase); const foundExactMatch = !!results.find((result) => result.name === originalPhrase ); @@ -74,7 +84,6 @@ export function FilterList({ useEffect(() => { function closer() { - // console.log("Invoking closer"); onSelect(undefined); } diff --git a/web/components/fuse_search.ts b/web/components/fuse_search.ts index 65ca789..14dca55 100644 --- a/web/components/fuse_search.ts +++ b/web/components/fuse_search.ts @@ -13,6 +13,7 @@ export const fuzzySearchAndSort = ( if (!searchPhrase) { return arr.sort((a, b) => (a.orderId || 0) - (b.orderId || 0)); } + const enrichedArr: FuseOption[] = arr.map((item) => { return { ...item, @@ -31,9 +32,6 @@ export const fuzzySearchAndSort = ( }, { name: "displayName", weight: 0.3, - }, { - name: "tags", - weight: 0.1, }, { name: "aliases", weight: 0.7, diff --git a/web/components/page_navigator.tsx b/web/components/page_navigator.tsx index be52ca8..fa3926b 100644 --- a/web/components/page_navigator.tsx +++ b/web/components/page_navigator.tsx @@ -4,6 +4,8 @@ import { CompletionContext, CompletionResult } from "../deps.ts"; import { PageMeta } from "$sb/types.ts"; import { isFederationPath } from "$sb/lib/resolve.ts"; +const tagRegex = /#[^#\d\s\[\]]+\w+/g; + export function PageNavigator({ allPages, onNavigate, @@ -74,6 +76,26 @@ export function PageNavigator({ vimMode={vimMode} darkMode={darkMode} completer={completer} + phrasePreprocessor={(phrase) => { + phrase = phrase.replaceAll(tagRegex, "").trim(); + return phrase; + }} + preFilter={(options, phrase) => { + const allTags = phrase.match(tagRegex); + if (allTags) { + // Search phrase contains hash tags, let's pre-filter the results based on this + const filterTags = allTags.map((t) => t.slice(1)); + options = options.filter((pageMeta) => { + if (!pageMeta.tags) { + return false; + } + return filterTags.every((tag) => + pageMeta.tags.find((itemTag: string) => itemTag.startsWith(tag)) + ); + }); + } + return options; + }} allowNew={true} helpText="Press Enter to open the selected page, or Shift-Enter to create a new page with this exact name." newHint="Create page" diff --git a/website/Page Picker.md b/website/Page Picker.md index 7fec38b..3704f31 100644 --- a/website/Page Picker.md +++ b/website/Page Picker.md @@ -4,6 +4,8 @@ The page picker can be invoked by clicking the 📔 icon in the top bar, or by p The main input is the **filter phrase** and can be used to narrow down the list of page results. +If the filter phrase contains `#tags` the results will be filtered based on matching those tags. That means to quickly see a list of all `#template`s you can use `#template` as a filter phrase. + Pressing the `Enter` key will open/create the selected page. Pressing `Shift-Enter` will always open or the page _exactly matching_ the filter phrase. Therefore, if you intend to create a new page, simply type the name of the new page and hit `Shift-Enter`. # Result ordering