fix: fonts config file (#2960)

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-text-control.ts

@@ -72,7 +72,10 @@ export const useTextControl = () => {
 
     const handleFontFamilyChange = (fontFamily: Font) => {
         editorEngine.style.updateFontFamily('fontFamily', fontFamily);
-        editorEngine.frames.reloadAllViews();
+        // Reload all views after a delay to ensure the font is applied
+        setTimeout(async () => {
+            await editorEngine.frames.reloadAllViews();
+        }, 500);
     };
 
     const handleFontSizeChange = (fontSize: number) => {

apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/font-panel/font-family.tsx

@@ -7,9 +7,7 @@ import {
     DropdownMenuTrigger,
 } from '@onlook/ui/dropdown-menu';
 import { Icons } from '@onlook/ui/icons';
-import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@onlook/ui/tooltip';
 import { cn } from '@onlook/ui/utils';
-import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { camelCase } from 'lodash';
 import { useState } from 'react';
 

apps/web/client/src/components/store/editor/ast/README.md

@@ -48,7 +48,7 @@ We can do that when parsing through the AST using this algorithm:
 Applying the algorithm to our case we will get this:
 1. Parse through the files, getting this map:
 
-```
+```json
 {
     "parent": ["parent.jsx", "start and end location", "Parent"],
     "instance": ["parent.jsx", "start and end location", "Child"],

apps/web/client/src/components/store/editor/font/font-config-manager.ts

@@ -188,11 +188,9 @@ export const readFontConfigFile = async (fontConfigPath: string, editorEngine: E
     | undefined
 > => {
     const codeEditor = editorEngine.fileSystem;
-    const fileExists = await codeEditor.fileExists(fontConfigPath);
-    if (!fileExists) {
-        console.warn('Font config file does not exist', fontConfigPath);
-        return;
-    }
+    
+    // Ensure the font config file exists, create it if it doesn't
+    await ensureFontConfigFileExists(fontConfigPath, editorEngine);
 
     const file = await codeEditor.readFile(fontConfigPath);
     if (!file || typeof file !== 'string') {
@@ -213,14 +211,49 @@ export const readFontConfigFile = async (fontConfigPath: string, editorEngine: E
     };
 }
 
+/**
+ * Creates a default font configuration file template
+ */
+const createDefaultFontConfigTemplate = (): string => {
+    return `// This file contains font configurations for your application.
+// Fonts added through Onlook will be automatically exported from this file.
+//
+// Example Google Font:
+// import { Inter } from 'next/font/google';
+// 
+// export const inter = Inter({
+//   subsets: ['latin'],
+//   weight: ['400', '700'],
+//   style: ['normal'],
+//   variable: '--font-inter',
+//   display: 'swap'
+// });
+//
+// Example Local Font:
+// import localFont from 'next/font/local';
+//
+// export const customFont = localFont({
+//   src: [
+//     { path: './fonts/custom-regular.woff2', weight: '400', style: 'normal' },
+//     { path: './fonts/custom-bold.woff2', weight: '700', style: 'normal' }
+//   ],
+//   variable: '--font-custom',
+//   display: 'swap',
+//   fallback: ['system-ui', 'sans-serif'],
+//   preload: true
+// });
+`;
+}
+
 /**
  * Ensures the font configuration file exists
  */
 export const ensureFontConfigFileExists = async (fontConfigPath: string, editorEngine: EditorEngine): Promise<void> => {
     const codeEditor = editorEngine.fileSystem;
     const fontConfigExists = await codeEditor.fileExists(fontConfigPath);
     if (!fontConfigExists) {
-        await codeEditor.writeFile(fontConfigPath, '');
+        const template = createDefaultFontConfigTemplate();
+        await codeEditor.writeFile(fontConfigPath, template);
     }
 }
 

apps/web/client/src/components/store/editor/font/index.ts

@@ -161,11 +161,15 @@ export class FontManager {
             this._defaultFont = font.id;
             const codeDiff = await updateDefaultFontInRootLayout(font, this.editorEngine);
 
-            if (codeDiff) {
-                await this.editorEngine.fileSystem.writeFile(codeDiff.path, codeDiff.generated);
-                return true;
+            if (!codeDiff) {
+                return false;
             }
-            return false;
+            await this.editorEngine.fileSystem.writeFile(codeDiff.path, codeDiff.generated);
+            // Reload all views after a delay to ensure the font is applied
+            setTimeout(async () => {
+                await this.editorEngine.frames.reloadAllViews();
+            }, 500);
+            return true;
         } catch (error) {
             console.error('Error setting default font:', error);
             return false;