feat: show custom fonts in theme editor #923
Conversation
|
Warning: Component files have been updated but no migrations have been added. See https://github.com/yext/visual-editor/blob/main/packages/visual-editor/src/components/migrations/README.md for more information. |
asanehisa
requested review from
benlife5,
briantstephan,
colton-demetriou and
mkilpatrick
WalkthroughIntroduces runtime custom-font support by adding and exporting createDefaultThemeConfig(customFonts?: FontRegistry): ThemeConfig and deriving defaultThemeConfig from it. TemplateMetadata gains an optional customFonts?: FontRegistry. Editor now detects when the active themeConfig equals defaultThemeConfig and templateMetadata.customFonts is present, then calls createDefaultThemeConfig(customFonts) to produce finalThemeConfig and passes that to ThemeEditor and LayoutEditor. New tests were added to verify merging and overriding behavior of h1 font options. Sequence Diagram(s)sequenceDiagram
participant TemplateMetadata
participant Editor
participant DefaultThemeConfig as createDefaultThemeConfig()
participant ThemeEditor
participant LayoutEditor
TemplateMetadata->>Editor: mount/update (may include customFonts)
Editor->>Editor: compare themeConfig === defaultThemeConfig
alt templateMetadata.customFonts present AND themeConfig is defaultThemeConfig
Editor->>DefaultThemeConfig: createDefaultThemeConfig(customFonts)
DefaultThemeConfig-->>Editor: finalThemeConfig
Editor->>ThemeEditor: render(finalThemeConfig)
Editor->>LayoutEditor: render(finalThemeConfig)
else
Editor->>ThemeEditor: render(themeConfig)
Editor->>LayoutEditor: render(themeConfig)
end
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)packages/visual-editor/src/internal/types/templateMetadata.ts (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/visual-editor/src/internal/types/templateMetadata.ts (1)
1-23:customFontsfield wiring looks good; considerimport typeThe optional
customFonts?: FontRegistryaddition integrates cleanly intoTemplateMetadataand matches its usage inEditor.tsx.Since
FontRegistryis only used as a type here, you could switch to a type-only import to avoid any chance of it being treated as a runtime dependency:-import { FontRegistry } from "@yext/visual-editor"; +import type { FontRegistry } from "@yext/visual-editor";Not required, but slightly clearer and can help tree‑shaking.
packages/visual-editor/src/editor/Editor.tsx (1)
21-24: Custom-font application logic is sound but relies on reference equality and default presenceThe
finalThemeConfiglogic is a nice, minimal way to layer custom fonts without affecting callers that supply their own configs:let finalThemeConfig = themeConfig; // ... if (themeConfig === defaultThemeConfig && templateMetadata?.customFonts) { finalThemeConfig = createDefaultThemeConfig(templateMetadata?.customFonts); }A couple of edge cases to consider:
Reference equality with
defaultThemeConfig
This will only trigger when callers pass the exact exporteddefaultThemeConfigobject. If any caller clones or reconstructs the default config before passing it in, the condition will be false and custom fonts won’t be applied. If that’s acceptable given howEditoris used, this is fine; otherwise you may want a more robust check (e.g., treating an omittedthemeConfigas “default” too, or providing an explicit flag upstream).No override when
themeConfigisundefined
If there are contexts whereEditoris invoked without athemeConfigbuttemplateMetadata.customFontsis still set, you might want to treat that as “use the default theme, but with custom fonts”, e.g.:let finalThemeConfig = themeConfig; if (templateMetadata?.customFonts) { if (!themeConfig || themeConfig === defaultThemeConfig) { finalThemeConfig = createDefaultThemeConfig(templateMetadata.customFonts); } }This preserves custom configs but still enables custom fonts when no config is provided.
Passing
finalThemeConfigthrough to bothThemeEditorandLayoutEditoris otherwise consistent.Also applies to: 163-167, 179-190
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/visual-editor/src/components/testing/screenshots/StaticMapSection/[mobile] default props with coordinate - with api key.pngis excluded by!**/*.png,!packages/visual-editor/src/components/testing/screenshots/**
📒 Files selected for processing (5)
packages/visual-editor/src/components/DefaultThemeConfig.test.ts(1 hunks)packages/visual-editor/src/components/DefaultThemeConfig.ts(1 hunks)packages/visual-editor/src/components/index.ts(1 hunks)packages/visual-editor/src/editor/Editor.tsx(4 hunks)packages/visual-editor/src/internal/types/templateMetadata.ts(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/visual-editor/src/internal/types/templateMetadata.ts (1)
packages/visual-editor/src/utils/index.ts (1)
FontRegistry(48-48)
packages/visual-editor/src/components/DefaultThemeConfig.test.ts (2)
packages/visual-editor/src/components/DefaultThemeConfig.ts (1)
createDefaultThemeConfig(11-368)packages/visual-editor/src/components/index.ts (1)
createDefaultThemeConfig(26-26)
🔇 Additional comments (2)
packages/visual-editor/src/components/index.ts (1)
24-27: Re-export ofcreateDefaultThemeConfiglooks correctAdding
createDefaultThemeConfignext todefaultThemeConfigcleanly exposes the new API without changing existing exports. LGTM.packages/visual-editor/src/components/DefaultThemeConfig.ts (1)
27-368: OverallcreateDefaultThemeConfigstructure looks consistent with existing theme schemaBeyond the merge-order issue above, the rest of
createDefaultThemeConfiglooks well-factored:
- Font options and weight options are derived once from the combined registry and reused across headings, body, buttons, and links.
- Defaults for palette, typography, spacing, and other styles are explicit and align with the previous static config shape.
defaultThemeConfigbeing defined ascreateDefaultThemeConfig()keeps behavior unchanged for consumers that don’t use custom fonts.Once the merge-order fix is applied, this should be a solid drop-in replacement for the prior static config.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/visual-editor/src/components/DefaultThemeConfig.ts (1)
27-370: Config factory preserves existing defaults; consider DRYing typography blocks laterEmbedding the existing theme structure in
createDefaultThemeConfigkeeps palette/layout defaults and all typography defaults (H1–H6, body, button, link) unchanged while enabling custom font injection via the sharedfontOptions/fontWeightOptions. The duplication across heading/body/button/link sections is substantial but pre‑existing; if this file continues to evolve, you might eventually want a small helper to generate those repeated font config blocks to reduce maintenance overhead, though it’s not required for this PR.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/visual-editor/src/components/DefaultThemeConfig.test.ts(1 hunks)packages/visual-editor/src/components/DefaultThemeConfig.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/visual-editor/src/components/DefaultThemeConfig.test.ts
🧰 Additional context used
🧬 Code graph analysis (1)
packages/visual-editor/src/components/DefaultThemeConfig.ts (4)
packages/visual-editor/src/components/index.ts (2)
createDefaultThemeConfig(26-26)defaultThemeConfig(25-25)packages/visual-editor/src/utils/index.ts (5)
FontRegistry(48-48)ThemeConfig(41-41)defaultFonts(45-45)constructFontSelectOptions(44-44)ThemeOptions(36-36)packages/visual-editor/src/utils/visualEditorFonts.ts (3)
FontRegistry(7-7)defaultFonts(25-25)constructFontSelectOptions(27-37)packages/visual-editor/src/utils/themeConfigOptions.ts (1)
ThemeOptions(367-383)
🔇 Additional comments (1)
packages/visual-editor/src/components/DefaultThemeConfig.ts (1)
11-25: Font merge order and weight options closure look correctMerging
fontsas{ ...defaultFonts, ...customFonts }ensures custom entries override defaults on name collisions while keeping all base fonts available, which matches the intended behavior and tests. ThefontWeightOptionshelper correctly closes over the mergedfontsand exposes a zero‑arg function per CSS variable, so consumers usingoptionsas a thunk will see weights for both default and custom fonts without further changes.
3 participants
Ben:
Tested via FontApiServer srv deployed to dev + VLE dev mode
Confirmed that a custom font that I uploaded (Chillax) appeared in the font dropdown and was selectable.
