feat(reader): support custom fonts (#161)

* query local font

* load font on focus

* use datalist to show font lists

* style is not supported

* fix: dropdown list flash

* preload fonts on mouse enter

* add placeholder

Author: pacexy

apps/reader/src/components/Form.tsx

@@ -26,6 +26,7 @@ export type TextFieldProps<T extends ElementType> = PolymorphicPropsWithoutRef<
     hideLabel?: boolean
     autoFocus?: boolean
     actions?: Action[]
+    datalist?: React.ReactNode[]
     onClear?: () => void
     // https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/#generic-forwardrefs
     mRef?: RefObject<HTMLInputElement> | null
@@ -39,13 +40,15 @@ export function TextField<T extends ElementType = 'input'>({
   hideLabel = false,
   autoFocus,
   actions = [],
+  datalist,
   onClear,
   mRef: outerRef,
   ...props
 }: TextFieldProps<T>) {
   const Component = as || 'input'
   const isInput = Component === 'input'
   const innerRef = useRef<HTMLInputElement>(null)
+  const datalistId = `${name}-datalist` // TODO: use `useId`
   const ref = outerRef || innerRef
   const mobile = useMobile()
   const t = useTranslation()
@@ -83,8 +86,10 @@ export function TextField<T extends ElementType = 'input'>({
             'typescale-body-medium text-on-surface-variant placeholder:text-outline/60 w-0 flex-1 bg-transparent py-1 px-1.5 !text-[13px]',
             isInput || 'scroll h-full resize-none',
           )}
+          {...(datalist && { list: datalistId })}
           {...props}
         />
+        {datalist && <datalist id={datalistId}>{datalist}</datalist>}
         {!!actions.length && (
           <div className="mx-1 flex gap-0.5">
             {actions.map(({ onClick, ...a }) => (

apps/reader/src/components/viewlets/TypographyView.tsx

@@ -15,19 +15,21 @@ import { keys } from '@flow/reader/utils'
 import { Select, TextField, TextFieldProps } from '../Form'
 import { PaneViewProps, PaneView, Pane } from '../base'
 
+// Define an interface for the Font object
+
 enum TypographyScope {
   Book,
   Global,
 }
 
-const typefaces = ['default', 'sans-serif', 'serif']
-
 export const TypographyView: React.FC<PaneViewProps> = (props) => {
   const { focusedBookTab } = useReaderSnapshot()
   const [settings, setSettings] = useSettings()
   const [scope, setScope] = useState(TypographyScope.Book)
   const t = useTranslation('typography')
 
+  const [localFonts, setLocalFonts] = useState<string[]>()
+
   const { fontFamily, fontSize, fontWeight, lineHeight, zoom, spread } =
     scope === TypographyScope.Book
       ? focusedBookTab?.book.configuration?.typography ?? defaultSettings
@@ -58,6 +60,22 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
     [scope, setSettings],
   )
 
+  const queryLocalFonts = useCallback(async () => {
+    if (localFonts) return
+    if (!('queryLocalFonts' in window)) {
+      console.error('queryLocalFonts is not available')
+      return
+    }
+
+    try {
+      const fonts = await window.queryLocalFonts()
+      const uniqueFonts = Array.from(new Set(fonts.map((f) => f.family)))
+      setLocalFonts(uniqueFonts)
+    } catch (error) {
+      console.error('Error querying local fonts:', error)
+    }
+  }, [localFonts])
+
   return (
     <PaneView {...props}>
       <div className="typescale-body-medium flex gap-2 px-5 pb-2 !text-[13px]">
@@ -96,19 +114,26 @@ export const TypographyView: React.FC<PaneViewProps> = (props) => {
             {t('page_view.double_page')}
           </option>
         </Select>
-        <Select
+        <TextField
+          as="input"
           name={t('font_family')}
           value={fontFamily}
+          placeholder="default"
+          // Tips: Datalist only appears on mouse click or keyboard input.
+          // Does not show when focused via Tab/focus() or triggered by click()
+          datalist={localFonts?.map((font) => (
+            <option key={font} value={font}>
+              {font}
+            </option>
+          ))}
+          onFocus={queryLocalFonts}
+          // Preload fonts to ensure `localFonts` is available on first mouse click.
+          // Without preloading, datalist dropdown will be empty for the first mouse click.
+          onMouseEnter={queryLocalFonts}
           onChange={(e) => {
             setTypography('fontFamily', e.target.value)
           }}
-        >
-          {typefaces.map((t) => (
-            <option key={t} value={t} style={{ fontFamily: t }}>
-              {t}
-            </option>
-          ))}
-        </Select>
+        />
         <NumberField
           name={t('font_size')}
           min={14}

apps/reader/web.d.ts apps/reader/src/web.d.tsapps/reader/web.d.ts renamed to apps/reader/src/web.d.ts

@@ -9,6 +9,14 @@ interface LaunchQueue {
   setConsumer(consumer: (launchParams: LaunchParams) => any): void
 }
 
+interface LocalFont {
+  family: string
+  fullName: string
+  postscriptName: string
+  style: string
+}
+
 interface Window {
   launchQueue: LaunchQueue
+  queryLocalFonts: () => Promise<LocalFont[]>
 }

apps/reader/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "experimentalDecorators": true
   },
-  "include": ["next-env.d.ts", "web.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }