From 7f03479807b8969f8db37e598f2316b089fdb027 Mon Sep 17 00:00:00 2001
From: R-J Lim <kgerbil@gmail.com>
Date: Sat, 6 Jan 2024 22:56:17 +0900
Subject: [PATCH] Filter out buggy CSS style keys that crash the app

---
 common/components/SettingsForm.tsx |  5 +++--
 common/util/util.ts                | 10 +++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/common/components/SettingsForm.tsx b/common/components/SettingsForm.tsx
index 192db909..f9a32bfb 100644
--- a/common/components/SettingsForm.tsx
+++ b/common/components/SettingsForm.tsx
@@ -23,7 +23,7 @@ import TextField from '@material-ui/core/TextField';
 import { Theme } from '@material-ui/core/styles';
 import { AutoPausePreference, PostMineAction } from '@project/common';
 import { AsbplayerSettings, KeyBindName, SubtitleListPreference } from '@project/common/settings';
-import { computeStyles, download } from '@project/common/util';
+import { computeStyles, download, isNumeric } from '@project/common/util';
 import { CustomStyle, validateSettings } from '@project/common/settings';
 import { useOutsideClickListener } from '@project/common/hooks';
 import TagsTextField from '@project/common/components/TagsTextField';
@@ -536,7 +536,8 @@ interface Props {
     onUnlockLocalFonts: () => void;
 }
 
-const cssStyles = Object.keys(document.body.style);
+// Filter out keys that look like '0', '1', ... as those are invalid
+const cssStyles = Object.keys(document.body.style).filter((s) => !isNumeric(s));
 
 export default function SettingsForm({
     anki,
diff --git a/common/util/util.ts b/common/util/util.ts
index ded2b021..7c30ef26 100755
--- a/common/util/util.ts
+++ b/common/util/util.ts
@@ -304,12 +304,20 @@ export function computeStyles({
             key = customStyle.key;
         }
 
-        styles[key] = customStyle.value;
+        if (!isNumeric(key)) {
+            // A bug has allowed style keys that look like '0', '1',... to make it into some users' settings
+            // Using such a style key with react crashes the app, so filter them out here
+            styles[key] = customStyle.value;
+        }
     }
 
     return styles;
 }
 
+export function isNumeric(str: string) {
+    return !isNaN(Number(str));
+}
+
 // https://stackoverflow.com/questions/63116039/camelcase-to-kebab-case
 function kebabize(str: string) {
     const kebabized = str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());