diff --git a/scripts/build.mjs b/scripts/build.mjs index 2b429d0..a533e77 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -77,7 +77,7 @@ const config = { constModules: { globals: { "bunny-build-info": { - version: `"1.1.10-1"`, + version: `"1.1.10-2"`, }, }, }, diff --git a/src/core/ui/settings/pages/Fonts/FontCard.tsx b/src/core/ui/settings/pages/Fonts/FontCard.tsx index bc350b8..5e90895 100644 --- a/src/core/ui/settings/pages/Fonts/FontCard.tsx +++ b/src/core/ui/settings/pages/Fonts/FontCard.tsx @@ -8,7 +8,13 @@ import { BundleUpdaterManager } from "@lib/api/native/modules"; import { lazyDestructure } from "@lib/utils/lazy"; import { findByProps } from "@metro"; import { NavigationNative, tokens } from "@metro/common"; -import { Button, Card, IconButton, Stack, Text } from "@metro/common/components"; +import { + Button, + Card, + IconButton, + Stack, + Text, +} from "@metro/common/components"; import * as Skia from "@shopify/react-native-skia"; import { TextStyleSheet } from "@ui/styles"; import { useMemo } from "react"; @@ -18,101 +24,100 @@ import FontEditor from "./FontEditor"; const { useToken } = lazyDestructure(() => findByProps("useToken")); -function FontPreview({ font }: { font: FontDefinition; }) { - const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL); - const { fontFamily: fontFamilyList, fontSize } = TextStyleSheet["text-md/medium"]; - const fontFamily = fontFamilyList!.split(/,/g)[0]; +function FontPreview({ font }: { font: FontDefinition }) { + const TEXT_NORMAL = useToken(tokens.colors.TEXT_NORMAL); + const { fontFamily: fontFamilyList, fontSize } = + TextStyleSheet["text-md/medium"]; + const fontFamily = fontFamilyList!.split(/,/g)[0]; - const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface(); + const typeface = Skia.useFont(font.main[fontFamily])?.getTypeface(); - const paragraph = useMemo(() => { - if (!typeface) return null; + const paragraph = useMemo(() => { + if (!typeface) return null; - const fMgr = SkiaApi.TypefaceFontProvider.Make(); - fMgr.registerFont(typeface, fontFamily); + const fMgr = SkiaApi.TypefaceFontProvider.Make(); + fMgr.registerFont(typeface, fontFamily); + return SkiaApi.ParagraphBuilder.Make({}, fMgr) + .pushStyle({ + color: SkiaApi.Color(TEXT_NORMAL), + fontFamilies: [fontFamily], + fontSize, + }) + .addText( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + ) + .pop() + .build(); + }, [typeface]); - return SkiaApi.ParagraphBuilder.Make({}, fMgr) - .pushStyle({ - color: SkiaApi.Color(TEXT_NORMAL), - fontFamilies: [fontFamily], - fontSize, - }) - .addText("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.") - .pop() - .build(); - }, [typeface]); - - return ( - // This does not work, actually :woeis: - - {typeface - ? - - - : - - Loading... - - } + return ( + // This does not work, actually :woeis: + + {typeface ? ( + + + + ) : ( + + + Loading... + - ); + )} + + ); } export default function FontCard({ item: font }: CardWrapper) { - useProxy(fonts); + useProxy(fonts); - const navigation = NavigationNative.useNavigation(); - const selected = fonts.__selected === font.name; + const navigation = NavigationNative.useNavigation(); + const selected = fonts.__selected === font.name; - return ( - - - - - - {font.name} - - {/* TODO: Text wrapping doesn't work well */} - {/* - {font.description} - */} - - - - { - navigation.push("BUNNY_CUSTOM_PAGE", { - title: "Edit Font", - render: () => - }); - }} - size="sm" - variant="secondary" - disabled={selected} - icon={findAssetId("WrenchIcon")} - /> -