fonts: purge custom fonts when reseting fonts config (#1906)

apps/readest-app/src/app/reader/components/settings/FontDropDown.tsx

@@ -41,7 +41,11 @@ const FontItem: React.FC<FontItemProps> = ({ index, style, data }) => {
             <MdCheck className='text-base-content' size={iconSize16} />
           )}
         </span>
-        <span style={{ fontFamily: onGetFontFamily(option.option, family) }}>
+        <span
+          className='line-clamp-1 overflow-visible break-all leading-loose'
+          style={{ fontFamily: onGetFontFamily(option.option, family) }}
+          title={option.label || option.option}
+        >
           {option.label || option.option}
         </span>
       </div>
@@ -100,7 +104,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
       >
         <div className='flex items-center gap-x-1'>
           <span
-            className='text-ellipsis'
+            className='line-clamp-1 overflow-visible break-all leading-loose'
             style={{
               fontFamily: onGetFontFamily(selectedOption.option, family ?? ''),
             }}

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -89,10 +89,16 @@ const FontFace = ({
 
 const FontPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
   const _ = useTranslation();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
   const { getView, getViewSettings } = useReaderStore();
   const { fontPanelView, setFontPanelView } = useSettingsStore();
-  const { fonts: allCustomFonts, getFontFamilies } = useCustomFontStore();
+  const {
+    fonts: allCustomFonts,
+    getAllFonts,
+    getFontFamilies,
+    removeFont,
+    saveCustomFonts,
+  } = useCustomFontStore();
   const viewSettings = getViewSettings(bookKey)!;
   const view = getView(bookKey)!;
   const iconSize18 = useResponsiveSize(18);
@@ -159,6 +165,12 @@ const FontPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
       monospaceFont: setMonospaceFont,
       fontWeight: setFontWeight,
     });
+    getAllFonts().forEach((font) => {
+      if (removeFont(font.id)) {
+        appService!.fs.removeFile(font.path, 'Fonts');
+      }
+    });
+    saveCustomFonts(envConfig);
   };
 
   const handleManageCustomFonts = () => {
@@ -172,7 +184,7 @@ const FontPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset
   useEffect(() => {
     onRegisterReset(handleReset);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [appService]);
 
   useEffect(() => {
     setCJKFonts((prev) => {

apps/readest-app/src/utils/font.ts

@@ -20,6 +20,8 @@ function parseMacintoshString(dataView: DataView, offset: number, length: number
   return chars.join('');
 }
 
+const NO_STYLE_LANGUAGE_IDS = new Set([0x0404, 0x0804, 0x0c04, 0x1004, 19, 33]);
+
 function getLanguagePriority(platformID: number, languageID: number, userLanguage: string): number {
   let priority = 0;
 
@@ -160,10 +162,14 @@ export const parseFontName = (fontData: ArrayBuffer, filename: string) => {
     }
     fontFamilyNames.sort((a, b) => b.priority - a.priority);
     fontStyleNames.sort((a, b) => b.priority - a.priority);
+    const fontStyleName = fontStyleNames[0];
     const familyName = fontFamilyNames[0]!.name;
-    const styleName = fontStyleNames.length > 0 ? fontStyleNames[0]!.name : '';
+    const styleName = fontStyleName?.name || '';
     return {
-      name: styleName ? `${familyName} ${styleName}` : familyName,
+      name:
+        fontStyleName && !NO_STYLE_LANGUAGE_IDS.has(fontStyleName.languageID)
+          ? `${familyName} ${styleName}`
+          : familyName,
       family: familyName,
       style: styleName,
     };