refactor: upload font and set default font#2386
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
e62f1de to
91bc364
Compare
|
Could you fix merge issues and address the Graphite comments? Thanks |
c7a383b to
56dd0e9
Compare
| /** | ||
| * Sets up file watcher for the font config file | ||
| */ | ||
| private setupFontConfigFileWatcher(): void { |
There was a problem hiding this comment.
I don't understand the need for this watcher. We should actually remove the watcher and event bus entirely and listen for editorEngine.sandbox.files changing in reaction or in observer
There was a problem hiding this comment.
Actually, I wrote this earlier while testing with memfs. It works independently of the cache system, so we can ensure it always has the latest update from the server.
But maybe we dont need it now.
| this.fontConfigFileWatcher = sandbox.fileEventBus.subscribe('*', async (event) => { | ||
| const normalizedFontConfigPath = normalizePath(this.fontConfigPath); | ||
| const affectsFont = event.paths.some( | ||
| (path) => normalizePath(path) === normalizedFontConfigPath, |
There was a problem hiding this comment.
Isn't this checking for if the path is exactly the config path? Not if the font files changes?
There was a problem hiding this comment.
This checks whether the font config file has changed.
The event.paths array contains the list of files that were modified.
| setIsLoading(false); | ||
| } | ||
| }; | ||
| console.log('fontManager.defaultFont', fontManager.defaultFont); |
There was a problem hiding this comment.
Remove or disable debug logging (console.log) before production release.
| console.log('fontManager.defaultFont', fontManager.defaultFont); |
| @@ -0,0 +1,300 @@ | |||
| import type { ParseResult } from '@babel/parser'; | |||
There was a problem hiding this comment.
please name these with the same format we've been using
| export const parseRepoUrl = (repoUrl: string): { owner: string; repo: string } => { | ||
| const match = repoUrl.match(/github\.com\/([^/]+)\/([^/]+)(?:\.git)?/); | ||
| if (!match || !match[1] || !match[2]) { | ||
| const match = /github\.com\/([^/]+)\/([^/]+)(?:\.git)?/.exec(repoUrl); |
| @@ -0,0 +1,143 @@ | |||
| # Font Management | |||
|
|
|||
| This directory contains a modular, maintainable system for managing fonts in the Onlook editor. The original monolithic `FontManager` has been refactored into focused, testable classes, each handling a specific concern of font management. | |||
There was a problem hiding this comment.
I would remove this. Documents like these have a very short lifetime and the code itself should be self-documenting
| </TooltipPortal> | ||
| </Tooltip> | ||
|
|
||
| <span |
There was a problem hiding this comment.
Removed Tooltip wrapper. Consider adding a title attribute on the span for accessibility if the font name is truncated.
Description
Related Issues
Type of Change
Testing
Screenshots (if applicable)
Screen.Recording.2025-07-15.at.17.39.52.mp4
Screen.Recording.2025-07-15.at.17.32.33.mp4
Screen.Recording.2025-07-15.at.17.31.55.mov
Additional Notes
Important
Refactor font management to support custom font uploads and default font settings, integrating with Tailwind CSS and enhancing AST manipulation utilities.
FontManager,FontUploadManager,FontSearchManager, andLayoutManagerfor handling font operations.font-config-manager.tsand integrates with Tailwind CSS intailwind-config.ts.ast-generators.ts,ast-manipulators.ts, andfont-extractors.tsfor AST manipulation and font extraction.convertRawFont()andcleanComma()inutils.ts.Font,RawFont,FontConfig, andFontUploadFileinterfaces inmodels/src/font/index.ts.RouterTypeandRouterConfiginmodels/src/next/index.ts.constants.tsto changeFONT_FOLDERandFONT_CONFIGpaths.sandbox/index.tsto detect router type and manage file indexing.This description was created by
for 9f3a44f. You can customize this summary. It will automatically update as commits are pushed.