1 files changed, 47 insertions, 43 deletions

diff --git a/packages/prosody-ui/src/fonts/FontChanger.tsx b/packages/prosody-ui/src/fonts/FontChanger.tsx
index 15c932e..9ae9c84 100644
--- a/packages/prosody-ui/src/fonts/FontChanger.tsx
+++ b/packages/prosody-ui/src/fonts/FontChanger.tsx
@@ -1,64 +1,68 @@
 import React, { useEffect, useState, type ReactNode } from "react";
 import fontIcon from "../assets/icons/font.svg";
-import { getScriptPredictor } from "glotscript";
+import { getScriptPredictor, type ISO_15924_CODE } from "@sortug/langlib";
 import ThaiFontLoader from "./Thai";
+import HanFontLoader from "./Hani";
+import LatnFontLoader from "./Latn";
+import JpanFontLoader from "./Jpan";
 
-function FontChanger({ text }: { text: string }) {
-  const [script, setScript] = useState<string | null>(null);
+function findFontCount(lang: ISO_15924_CODE): number {
+  if (lang === "Thai") return 7;
+  if (lang === "Jpan") return 6;
+  // TODO get more latin fonts
+  if (lang === "Latn") return 1;
+  if ((lang as any) === "IPA") return 6;
+  if (lang.startsWith("Han")) return 23;
+  return 0;
+}
+
+function FontChanger({
+  text,
+  script,
+  children,
+}: {
+  text: string;
+  script?: ISO_15924_CODE;
+  lang?: string;
+  children: ReactNode;
+}) {
+  const [script2, setScript] = useState<ISO_15924_CODE | null>(script || null);
   useEffect(() => {
+    if (script) return;
     const predictor = getScriptPredictor();
     const res = predictor(text);
     console.log("script predicted", res);
-    setScript(res[0]);
+    const rescript: ISO_15924_CODE | null = res[0];
+    if (!rescript) {
+      console.error("script undetected", text);
+      return;
+    }
+    setScript(rescript);
+    setFontCount(findFontCount(rescript));
   }, [text]);
-  useEffect(() => {
-    if (script === "Hani") setFontCount(12);
-    else if (script === "Thai") setFontCount(6);
-    else if (script === "Jpan") setFontCount(5);
-    // else if (script === "Latn") setFontCount(6)
-  }, [script]);
+
   const [fontIdx, setFont] = useState(0);
   const [fontCount, setFontCount] = useState(0);
   function changeFont() {
     if (fontIdx === fontCount) setFont(0);
     else setFont((prev) => prev + 1);
   }
+  if (!script2)
+    return <div className="error">Couldn't detect script of {text}</div>;
   return (
-    <div
-      className={`font-changer font-${script}-${fontIdx}`}
-      lang={script || ""}
-    >
-      <img
-        className="font-icon cp"
-        style={{ width: 25 }}
-        onClick={changeFont}
-        src={fontIcon}
-      />
-      {script === "Thai" ? <ThaiFontLoader text={text} /> : null}
+    <div className={`font-changer font-${script}-${fontIdx}`}>
+      <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
+      {script2 === "Thai" ? (
+        <ThaiFontLoader>{children}</ThaiFontLoader>
+      ) : script2.startsWith("Han") ? (
+        <HanFontLoader>{children}</HanFontLoader>
+      ) : script2 === "Jpan" ? (
+        <JpanFontLoader>{children}</JpanFontLoader>
+      ) : script2 === "Latn" ? (
+        <LatnFontLoader>{children}</LatnFontLoader>
+      ) : null}
     </div>
   );
 }
-// function FontChanger({
-//   lang,
-//   children,
-// }: {
-//   lang: string;
-//   children: ReactNode;
-// }) {
-//   useEffect(() => {}, []);
-//   const [script, setScript] = useState("Latn");
-//   const [fontIdx, setFont] = useState(0);
-//   const fontCount = 6;
-//   function changeFont() {
-//     if (fontIdx === fontCount) setFont(0);
-//     else setFont((prev) => prev + 1);
-//   }
-//   return (
-//     <div className="font-changer" lang={script}>
-//       <img className="font-icon cp" onClick={changeFont} src={fontIcon} />
-//       {children}
-//     </div>
-//   );
-// }
 
 export default FontChanger;