feat: filter the available fonts by the current language script

Author: aradzie

packages/keybr-textinput-ui/lib/TypingSettings.tsx

@@ -1,4 +1,4 @@
-import { useKeyboard } from "@keybr/keyboard";
+import { keyboardProps, useKeyboard } from "@keybr/keyboard";
 import { Tasks } from "@keybr/lang";
 import { Settings, useSettings } from "@keybr/settings";
 import {
@@ -82,10 +82,7 @@ function ExampleText() {
   return (
     <div className={styles.exampleText}>
       <AnimatedText
-        settings={{
-          ...toTextDisplaySettings(settings),
-          language: keyboard.layout.language,
-        }}
+        settings={toTextDisplaySettings(settings)}
         text={keyboard.getExampleText()}
       />
     </div>
@@ -189,18 +186,20 @@ function SpaceSkipsWordsProp() {
 
 function FontProp() {
   const { settings, updateSettings } = useSettings();
+  const fonts = Font.select(settings.get(keyboardProps.layout).language);
+  const font = Font.find(fonts, settings.get(textDisplayProps.font));
   return (
     <FieldList>
       <Field size={10}>
         <FormattedMessage id="settings.font.label" defaultMessage="Font:" />
       </Field>
       <Field>
         <OptionList
-          options={Font.ALL.map((item) => ({
+          options={fonts.map((item) => ({
             value: item.id,
             name: <span style={item.cssProperties}>{item.name}</span>,
           }))}
-          value={settings.get(textDisplayProps.font).id}
+          value={font.id}
           onSelect={(id) => {
             updateSettings(
               settings.set(textDisplayProps.font, Font.ALL.get(id)),

packages/keybr-textinput/lib/font.test.ts

@@ -0,0 +1,14 @@
+import { test } from "node:test";
+import { Language } from "@keybr/keyboard";
+import { assert } from "chai";
+import { Font } from "./font.ts";
+
+test("select fonts for each language", () => {
+  for (const language of Language.ALL) {
+    const fonts = Font.select(language);
+    assert.isTrue(fonts.size > 0);
+    for (const font of Font.ALL) {
+      assert.isNotNull(Font.find(fonts, font));
+    }
+  }
+});

packages/keybr-textinput/lib/font.ts

@@ -1,5 +1,11 @@
+import { type Language } from "@keybr/keyboard";
 import { Enum, type EnumItem } from "@keybr/lang";
-import { type FontFace, FONTS_FACES, UBUNTU_MONO } from "@keybr/themes";
+import {
+  type FontFace,
+  FONTS_FACES,
+  type Script,
+  UBUNTU_MONO,
+} from "@keybr/themes";
 import { type CSSProperties } from "react";
 
 export class Font implements EnumItem {
@@ -13,13 +19,25 @@ export class Font implements EnumItem {
     );
   }
 
+  static select(language: Language) {
+    return new Enum(
+      ...Font.ALL.filter((font) => font.scripts.includes(language.script)),
+    );
+  }
+
+  static find(fonts: Enum<Font>, font: Font) {
+    return fonts.has(font) ? font : fonts.at(0);
+  }
+
   readonly id: string;
   readonly name: string;
+  readonly scripts: readonly Script[];
   readonly cssProperties: CSSProperties;
 
   private constructor(fontFace: FontFace) {
     this.id = `${fontFace.family}-${fontFace.weight}-${fontFace.style}`;
     this.name = fontFace.name;
+    this.scripts = fontFace.scripts;
     this.cssProperties = Object.freeze({ ...fontFace.cssProperties });
     Object.freeze(this);
   }

packages/keybr-textinput/lib/settings.ts

@@ -30,11 +30,11 @@ export type TextInputSettings = {
   readonly spaceSkipsWords: boolean;
 };
 
-export const textInputSettings: TextInputSettings = {
+export const textInputSettings = {
   stopOnError: true,
   forgiveErrors: true,
   spaceSkipsWords: true,
-};
+} as const satisfies TextInputSettings;
 
 export const textInputProps = {
   stopOnError: booleanProp("textInput.stopOnError", true),
@@ -76,13 +76,13 @@ export enum WhitespaceStyle {
   Bullet = 3,
 }
 
-export const textDisplaySettings: TextDisplaySettings = {
+export const textDisplaySettings = {
   font: Font.default,
   caretShapeStyle: CaretShapeStyle.Underline,
   caretMovementStyle: CaretMovementStyle.Smooth,
   whitespaceStyle: WhitespaceStyle.Bullet,
   language: Language.EN,
-};
+} as const satisfies TextDisplaySettings;
 
 export const textDisplayProps = {
   font: itemProp("textDisplay.font", Font.ALL, Font.default),
@@ -104,11 +104,16 @@ export const textDisplayProps = {
 } as const;
 
 export function toTextDisplaySettings(settings: Settings): TextDisplaySettings {
+  const font = settings.get(textDisplayProps.font);
+  const caretShapeStyle = settings.get(textDisplayProps.caretShapeStyle);
+  const caretMovementStyle = settings.get(textDisplayProps.caretMovementStyle);
+  const whitespaceStyle = settings.get(textDisplayProps.whitespaceStyle);
+  const language = settings.get(keyboardProps.layout).language;
   return {
-    font: settings.get(textDisplayProps.font),
-    caretShapeStyle: settings.get(textDisplayProps.caretShapeStyle),
-    caretMovementStyle: settings.get(textDisplayProps.caretMovementStyle),
-    whitespaceStyle: settings.get(textDisplayProps.whitespaceStyle),
-    language: settings.get(keyboardProps.layout).language,
+    font: Font.find(Font.select(language), font),
+    caretShapeStyle,
+    caretMovementStyle,
+    whitespaceStyle,
+    language,
   };
 }

packages/keybr-themes/lib/fonts/index.ts

@@ -115,10 +115,6 @@ export const FONTS_FACES: readonly FontFace[] = [
   NUNITO_I,
   NUNITO_B,
   NUNITO_BI,
-  OPEN_DYSLEXIC,
-  OPEN_DYSLEXIC_I,
-  OPEN_DYSLEXIC_B,
-  OPEN_DYSLEXIC_BI,
   OPEN_SANS,
   OPEN_SANS_I,
   OPEN_SANS_B,
@@ -167,6 +163,10 @@ export const FONTS_FACES: readonly FontFace[] = [
   CURSIVE_I,
   CURSIVE_B,
   CURSIVE_BI,
+  OPEN_DYSLEXIC,
+  OPEN_DYSLEXIC_I,
+  OPEN_DYSLEXIC_B,
+  OPEN_DYSLEXIC_BI,
 ];
 
 function fontName(family: string, weight: FontWeight, style: FontStyle): string {