Better fuzzy matching in cmd palette

This commit is contained in:
Gregory Schier
2024-10-12 07:39:00 -07:00
parent d754e7233d
commit 6fb94384b9
3 changed files with 20 additions and 21 deletions

21
package-lock.json generated
View File

@@ -6924,6 +6924,12 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/fuzzbunny": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fuzzbunny/-/fuzzbunny-1.0.1.tgz",
"integrity": "sha512-afCIda+Ox6xw3I+b4nhbdXBRZJQQhJAH2kKlxVcybuJTFe1LUn2V7jD0+AGB/ssgyDSOrs8y+CIycv+PsTfVkA==",
"license": "MIT"
},
"node_modules/gauge": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
@@ -10954,19 +10960,6 @@
"react-dom": "*"
}
},
"node_modules/react-virtuoso": {
"version": "4.10.4",
"resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.10.4.tgz",
"integrity": "sha512-G/gprhTbK+lzMxoo/iStcZxVEGph/cIhc3WANEpt92RuMw+LiCZOmBfKoeoZOHlm/iyftTrDJhGaTCpxyucnkQ==",
"license": "MIT",
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": ">=16 || >=17 || >= 18",
"react-dom": ">=16 || >=17 || >= 18"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -13825,6 +13818,7 @@
"focus-trap-react": "^10.2.3",
"format-graphql": "^1.5.0",
"framer-motion": "^11.5.4",
"fuzzbunny": "^1.0.1",
"jotai": "^2.9.3",
"lucide-react": "^0.439.0",
"mime": "^4.0.4",
@@ -13838,7 +13832,6 @@
"react-pdf": "^9.1.0",
"react-router-dom": "^6.26.2",
"react-use": "^17.5.1",
"react-virtuoso": "^4.10.4",
"slugify": "^1.6.6",
"uuid": "^10.0.0",
"xml-formatter": "^3.6.3"

View File

@@ -1,5 +1,5 @@
import classNames from 'classnames';
import { search } from 'fast-fuzzy';
import { fuzzyFilter } from 'fuzzbunny';
import type { KeyboardEvent, ReactNode } from 'react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useActiveCookieJar } from '../hooks/useActiveCookieJar';
@@ -328,15 +328,21 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
const { filteredGroups, filteredAllItems } = useMemo(() => {
const result = command
? search(command, allItems, {
threshold: 0.5,
keySelector: (v) => ('searchText' in v ? v.searchText : v.label),
})
? fuzzyFilter(
allItems.map((i) => ({
...i,
filterBy: 'searchText' in i ? i.searchText : i.label,
})),
command,
{ fields: ['filterBy'] },
).map((v) => v.item)
: allItems;
const filteredGroups = groups
.map((g) => {
g.items = result.filter((i) => g.items.includes(i)).slice(0, MAX_PER_GROUP);
g.items = result
.filter((i) => g.items.find((i2) => i2.key === i.key))
.slice(0, MAX_PER_GROUP);
return g;
})
.filter((g) => g.items.length > 0);

View File

@@ -35,10 +35,10 @@
"codemirror-json-schema": "^0.6.1",
"date-fns": "^3.6.0",
"eventemitter3": "^5.0.1",
"fast-fuzzy": "^1.12.0",
"focus-trap-react": "^10.2.3",
"format-graphql": "^1.5.0",
"framer-motion": "^11.5.4",
"fuzzbunny": "^1.0.1",
"jotai": "^2.9.3",
"lucide-react": "^0.439.0",
"mime": "^4.0.4",