fix: Reset fontsize when the fontsize of the html element is changed. (#348)

src/hooks/Theme.js

@@ -9,7 +9,7 @@ import { THEME_DARK, THEME_LIGHT } from "../config";
  * @param {*} param0
  * @returns
  */
-export default function Theme({ children, options, styles }) {
+export default function Theme({ children, options = {}, styles = {} }) {
   const { darkMode } = useDarkMode();
   const [systemMode, setSystemMode] = useState(THEME_LIGHT);
 
@@ -27,17 +27,6 @@ export default function Theme({ children, options, styles }) {
   }, []);
 
   const theme = useMemo(() => {
-    let htmlFontSize = 16;
-    try {
-      const s = window.getComputedStyle(document.body.parentNode).fontSize;
-      const fontSize = parseInt(s.replace("px", ""));
-      if (fontSize > 0 && fontSize < 1000) {
-        htmlFontSize = fontSize;
-      }
-    } catch (err) {
-      //
-    }
-
     const isDarkMode =
       darkMode === "dark" || (darkMode === "auto" && systemMode === THEME_DARK);
 
@@ -46,7 +35,7 @@ export default function Theme({ children, options, styles }) {
         mode: isDarkMode ? THEME_DARK : THEME_LIGHT,
       },
       typography: {
-        htmlFontSize,
+        htmlFontSize: document.documentElement.style.fontSize ? "16px" : 16,
       },
       ...options,
     });

src/libs/shadowDomManager.js

@@ -92,22 +92,18 @@ export default class ShadowDomManager {
     if (this._className) {
       host.className = this._className;
     }
-    host.style.display = "none";
-    document.body.parentElement.appendChild(host);
-    this.#hostElement = host;
 
-    const shadowContainer = host.attachShadow({ mode: "closed" });
-    const emotionRoot = document.createElement("style");
+    document.body.appendChild(host);
+    this.#hostElement = host;
+    const shadowContainer = host.attachShadow({ mode: "open" });
     const appRoot = document.createElement("div");
     appRoot.className = `${this._id}_wrapper`;
-
-    shadowContainer.appendChild(emotionRoot);
     shadowContainer.appendChild(appRoot);
 
     const cache = createCache({
       key: this._id,
       prepend: true,
-      container: emotionRoot,
+      container: shadowContainer,
     });
 
     const enhancedProps = {

src/libs/tranbox.js

@@ -31,36 +31,28 @@ export class TransboxManager {
       this.#container = document.createElement("div");
       this.#container.id = APP_CONSTS.boxID;
       this.#container.className = "notranslate";
-      this.#container.style.cssText =
-        "font-size: 0; width: 0; height: 0; border: 0; padding: 0; margin: 0;";
-      document.body.parentElement.appendChild(this.#container);
 
-      this.#shadowContainer = this.#container.attachShadow({ mode: "closed" });
-      const emotionRoot = document.createElement("style");
+      document.body.appendChild(this.#container);
+      this.#shadowContainer = this.#container.attachShadow({ mode: "open" });
       const shadowRootElement = document.createElement("div");
-      shadowRootElement.className = `${APP_CONSTS.boxID}_warpper notranslate`;
-      this.#shadowContainer.appendChild(emotionRoot);
+      shadowRootElement.className = `${APP_CONSTS.boxID}_wrapper notranslate`;
       this.#shadowContainer.appendChild(shadowRootElement);
+
       const cache = createCache({
         key: APP_CONSTS.boxID,
         prepend: true,
-        container: emotionRoot,
+        container: this.#shadowContainer,
       });
 
       this.#reactRoot = ReactDOM.createRoot(shadowRootElement);
-      this.CacheProvider = ({ children }) => (
-        <CacheProvider value={cache}>{children}</CacheProvider>
+      this.#reactRoot.render(
+        <React.StrictMode>
+          <CacheProvider value={cache}>
+            <Slection {...this.#props} />
+          </CacheProvider>
+        </React.StrictMode>
       );
     }
-
-    const AppProvider = this.CacheProvider;
-    this.#reactRoot.render(
-      <React.StrictMode>
-        <AppProvider>
-          <Slection {...this.#props} />
-        </AppProvider>
-      </React.StrictMode>
-    );
   }
 
   disable() {
@@ -72,7 +64,6 @@ export class TransboxManager {
     this.#container = null;
     this.#reactRoot = null;
     this.#shadowContainer = null;
-    this.CacheProvider = null;
   }
 
   toggle() {