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());