add support for custom js code that will be executed on page load (#1032

)
Athou · May 5, 2023 · 3d1a1cd · 3d1a1cd
1 parent b1b5eeb
commit 3d1a1cd
Show file tree

Hide file tree

Showing 41 changed files with 430 additions and 218 deletions.
diff --git a/commafeed-client/index.html b/commafeed-client/index.html
@@ -11,5 +11,6 @@
 <body>
 <div id="root"></div>
 <script type="module" src="/src/main.tsx"></script>
+<script src="custom_js.js"></script>
 </body>
 </html>
diff --git a/commafeed-client/src/app/types.ts b/commafeed-client/src/app/types.ts
@@ -231,6 +231,7 @@ export interface Settings {
     showRead: boolean
     scrollMarks: boolean
     customCss?: string
+    customJs?: string
     scrollSpeed: number
     sharingSettings: SharingSettings
 }

diff --git a/...ent/src/components/settings/CustomCss.tsx → ...omponents/settings/CustomCodeSettings.tsx b/...ent/src/components/settings/CustomCss.tsx → ...omponents/settings/CustomCodeSettings.tsx
@@ -11,20 +11,24 @@ import { TbDeviceFloppy } from "react-icons/tb"
 
 interface FormData {
     customCss: string
+    customJs: string
 }
 
-export function CustomCss() {
+export function CustomCodeSettings() {
     const settings = useAppSelector(state => state.user.settings)
-    const customCss = settings?.customCss
     const dispatch = useAppDispatch()
 
     const form = useForm<FormData>()
     const { setValues } = form
 
-    const saveCustomCss = useAsyncCallback(
+    const saveCustomCode = useAsyncCallback(
         async (d: FormData) => {
             if (!settings) return
-            await client.user.saveSettings({ ...settings, customCss: d.customCss })
+            await client.user.saveSettings({
+                ...settings,
+                customCss: d.customCss,
+                customJs: d.customJs,
+            })
         },
         {
             onSuccess: () => {
@@ -34,25 +38,27 @@ export function CustomCss() {
     )
 
     useEffect(() => {
-        if (!customCss) return
+        if (!settings) return
         setValues({
-            customCss,
+            customCss: settings.customCss,
+            customJs: settings.customJs,
         })
-    }, [setValues, customCss])
+    }, [setValues, settings])
 
     return (
         <>
-            {saveCustomCss.error && (
+            {saveCustomCode.error && (
                 <Box mb="md">
-                    <Alert messages={errorToStrings(saveCustomCss.error)} />
+                    <Alert messages={errorToStrings(saveCustomCode.error)} />
                 </Box>
             )}
 
-            <form onSubmit={form.onSubmit(saveCustomCss.execute)}>
+            <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
                 <Stack>
                     <Textarea
                         autosize
                         minRows={4}
+                        maxRows={15}
                         {...form.getInputProps("customCss")}
                         description={<Trans>Custom CSS rules that will be applied</Trans>}
                         styles={{
@@ -62,11 +68,24 @@ export function CustomCss() {
                         }}
                     />
 
+                    <Textarea
+                        autosize
+                        minRows={4}
+                        maxRows={15}
+                        {...form.getInputProps("customJs")}
+                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
+                        styles={{
+                            input: {
+                                fontFamily: "monospace",
+                            },
+                        }}
+                    />
+
                     <Group>
                         <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>
                             <Trans>Cancel</Trans>
                         </Button>
-                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCss.loading}>
+                        <Button type="submit" leftIcon={<TbDeviceFloppy size={16} />} loading={saveCustomCode.loading}>
                             <Trans>Save</Trans>
                         </Button>
                     </Group>

diff --git a/commafeed-client/src/locales/ar/messages.po b/commafeed-client/src/locales/ar/messages.po
@@ -123,7 +123,7 @@ msgstr "ملحقات المستعرض"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr "السيطرة"
 msgid "Current password"
 msgstr "كلمة المرور الحالية"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/ca/messages.po b/commafeed-client/src/locales/ca/messages.po
@@ -123,7 +123,7 @@ msgstr "Extensions del navegador"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr ""
 msgid "Current password"
 msgstr "Contrasenya actual"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/cs/messages.po b/commafeed-client/src/locales/cs/messages.po
@@ -123,7 +123,7 @@ msgstr "Rozšíření prohlížeče"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr ""
 msgid "Current password"
 msgstr "Aktuální heslo"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/cy/messages.po b/commafeed-client/src/locales/cy/messages.po
@@ -123,7 +123,7 @@ msgstr "Estyniadau porwr"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr ""
 msgid "Current password"
 msgstr "Cyfrinair presennol"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/da/messages.po b/commafeed-client/src/locales/da/messages.po
@@ -123,7 +123,7 @@ msgstr "Browserudvidelser"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr ""
 msgid "Current password"
 msgstr "Nuværende adgangskode"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/de/messages.po b/commafeed-client/src/locales/de/messages.po
@@ -123,7 +123,7 @@ msgstr "Browsererweiterungen"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,12 +195,16 @@ msgstr "Strg"
 msgid "Current password"
 msgstr "Aktuelles Passwort"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom CSS rules that will be applied"
 msgstr ""
 
-#: src/components/settings/CustomCss.tsx
-msgid "Custom CSS rules that will be applied"
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr ""
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
 msgstr ""
 
 #: src/pages/admin/AdminUsersPage.tsx
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr ""
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx

diff --git a/commafeed-client/src/locales/en/messages.po b/commafeed-client/src/locales/en/messages.po
@@ -123,7 +123,7 @@ msgstr "Browser extentions"
 #: src/components/content/add/AddCategory.tsx
 #: src/components/content/add/ImportOpml.tsx
 #: src/components/header/MarkAllAsReadButton.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/admin/AdminUsersPage.tsx
@@ -195,14 +195,18 @@ msgstr "Ctrl"
 msgid "Current password"
 msgstr "Current password"
 
-#: src/pages/app/SettingsPage.tsx
-msgid "Custom CSS"
-msgstr "Custom CSS"
-
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 msgid "Custom CSS rules that will be applied"
 msgstr "Custom CSS rules that will be applied"
 
+#: src/components/settings/CustomCodeSettings.tsx
+msgid "Custom JS code that will be executed on page load"
+msgstr "Custom JS code that will be executed on page load"
+
+#: src/pages/app/SettingsPage.tsx
+msgid "Custom code"
+msgstr "Custom code"
+
 #: src/pages/admin/AdminUsersPage.tsx
 msgid "Date created"
 msgstr "Date created"
@@ -631,7 +635,7 @@ msgid "Right click"
 msgstr "Right click"
 
 #: src/components/admin/UserEdit.tsx
-#: src/components/settings/CustomCss.tsx
+#: src/components/settings/CustomCodeSettings.tsx
 #: src/components/settings/ProfileSettings.tsx
 #: src/pages/app/CategoryDetailsPage.tsx
 #: src/pages/app/FeedDetailsPage.tsx