refactor: using FlexSearch in font panel (#1749)

spartan-vutrannguyen · web-flow · commit ae11fe2f566b · 2025-04-08T00:56:53.000-04:00
* using flex search in font
diff --git a/apps/studio/package.json b/apps/studio/package.json
@@ -59,6 +59,7 @@
         "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
         "fix-path": "^4.0.0",
+        "flexsearch": "^0.8.151",
         "freestyle-sandboxes": "^0.0.36",
         "i18next": "^24.2.2",
         "istextorbinary": "^9.5.0",
@@ -95,11 +96,12 @@
         "@onlook/typescript": "*",
         "@playwright/test": "^1.42.1",
         "@tailwindcss/typography": "^0.5.15",
-        "@types/babel__traverse": "^7.20.6",
         "@types/babel-generator": "^6.25.8",
+        "@types/babel__traverse": "^7.20.6",
         "@types/bun": "^1.1.6",
         "@types/css-tree": "^2.3.8",
         "@types/download": "^8.0.5",
+        "@types/flexsearch": "^0.7.42",
         "@types/istextorbinary": "^2.3.4",
         "@types/js-string-escape": "^1.0.3",
         "@types/lodash": "^4.17.7",
diff --git a/apps/studio/src/lib/editor/engine/font/index.ts b/apps/studio/src/lib/editor/engine/font/index.ts
@@ -6,6 +6,8 @@ import type { ProjectsManager } from '@/lib/projects';
 import type { Font } from '@onlook/models/assets';
 import type { FontFile } from '@/routes/editor/LayersPanel/BrandTab/FontPanel/FontFiles';
 import WebFont from 'webfontloader';
+import FlexSearch from 'flexsearch';
+import type { Document } from 'flexsearch';
 
 interface RawFont {
     id: string;
@@ -30,12 +32,36 @@ export class FontManager {
     private _currentFontIndex = 0;
     private _batchSize = 20;
     private _isFetching = false;
+    private _fontSearchIndex: Document;
 
     constructor(
         private editorEngine: EditorEngine,
         private projectsManager: ProjectsManager,
     ) {
         makeAutoObservable(this);
+
+        // Initialize FlexSearch index
+        this._fontSearchIndex = new FlexSearch.Document({
+            document: {
+                id: 'id',
+                index: ['family'],
+                store: true,
+            },
+            tokenize: 'forward',
+        });
+
+        // Add all font families to the search index
+        this._allFontFamilies.forEach((font) => {
+            this._fontSearchIndex.add(font.id, {
+                id: font.id,
+                family: font.family,
+                subsets: font.subsets,
+                variable: font.variable,
+                weights: font.weights,
+                styles: font.styles,
+            });
+        });
+
         this.loadInitialFonts();
 
         // Watch for project changes and set up watcher when a project is selected
@@ -258,28 +284,33 @@ export class FontManager {
 
     async searchFonts(query: string): Promise<Font[]> {
         if (!query) {
-            return [];
-        }
-
-        const searchResults = this._allFontFamilies
-            .filter(
-                (font) =>
-                    font.family.toLowerCase().includes(query.toLowerCase()) &&
-                    !this._fonts.some((f) => f.family === font.family),
-            )
-            .map((font) => this.convertFont(font));
-
-        if (searchResults.length === 0) {
             this._searchResults = [];
             return [];
         }
 
         try {
-            await this.loadFontBatch(searchResults);
-            this._searchResults = searchResults;
-            return searchResults;
+            // Search using FlexSearch
+            const searchResults = await this._fontSearchIndex.search(query, {
+                limit: 20,
+                suggest: true,
+                enrich: true,
+            });
+
+            const fonts = Object.values(searchResults)
+                .flatMap((result) => result.result)
+                .map((font) => this.convertFont(font.doc))
+                .filter((font) => !this._fonts.some((f) => f.family === font.family));
+
+            if (fonts.length === 0) {
+                this._searchResults = [];
+                return [];
+            }
+
+            await this.loadFontBatch(fonts);
+            this._searchResults = fonts;
+            return fonts;
         } catch (error) {
-            console.error('Error loading search results:', error);
+            console.error('Error searching fonts:', error);
             return [];
         }
     }
diff --git a/bun.lock b/bun.lock
@@ -46,6 +46,7 @@
         "embla-carousel-wheel-gestures": "^8.0.1",
         "fflate": "^0.8.2",
         "fix-path": "^4.0.0",
+        "flexsearch": "^0.8.151",
         "freestyle-sandboxes": "^0.0.36",
         "i18next": "^24.2.2",
         "istextorbinary": "^9.5.0",
@@ -87,6 +88,7 @@
         "@types/bun": "^1.1.6",
         "@types/css-tree": "^2.3.8",
         "@types/download": "^8.0.5",
+        "@types/flexsearch": "^0.7.42",
         "@types/istextorbinary": "^2.3.4",
         "@types/js-string-escape": "^1.0.3",
         "@types/lodash": "^4.17.7",
@@ -1003,6 +1005,8 @@
 
     "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
 
+    "@types/flexsearch": ["@types/flexsearch@0.7.42", "", { "dependencies": { "flexsearch": "*" } }, "sha512-FdKaw3dPgcCvqU9w8SGgqx8PrxFF2EKySRhEj1nc45HNe/2cBLff3pF52C67hzeUbNhq49t7XRIIibBd41vcIg=="],
+
     "@types/fs-extra": ["@types/fs-extra@9.0.13", "", { "dependencies": { "@types/node": "*" } }, "sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA=="],
 
     "@types/got": ["@types/got@9.6.12", "", { "dependencies": { "@types/node": "*", "@types/tough-cookie": "*", "form-data": "^2.5.0" } }, "sha512-X4pj/HGHbXVLqTpKjA2ahI4rV/nNBc9mGO2I/0CgAra+F2dKgMXnENv2SRpemScBzBAI4vMelIVYViQxlSE6xA=="],
@@ -1687,6 +1691,8 @@
 
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
+    "flexsearch": ["flexsearch@0.8.151", "", {}, "sha512-bMI/vDndsaldfmOLKGk5HMYSiXhX1sBiD/ENZKAnsQJaqC/yk51aTy0+Ny2hYcu+Utazy3s8NZA/zbh2o88ctQ=="],
+
     "follow-redirects": ["follow-redirects@1.15.9", "", {}, "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="],
 
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
