add rich editor for custom code

commafeed-client/package-lock.json

@@ -20,6 +20,7 @@
         "@mantine/notifications": "^6.0.11",
         "@mantine/spotlight": "^6.0.11",
         "@mantine/styles": "^6.0.11",
+        "@monaco-editor/react": "^4.5.1",
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "dayjs": "^1.11.7",
@@ -3049,6 +3050,30 @@
         "moo": "^0.5.1"
       }
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
+      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz",
+      "integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.3.3"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -8999,6 +9024,12 @@
         "ufo": "^1.1.2"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.39.0.tgz",
+      "integrity": "sha512-zhbZ2Nx93tLR8aJmL2zI1mhJpsl87HMebNBM6R8z4pLfs8pj604pIVIVwyF1TivcfNtIPpMXL+nb3DsBmE/x6Q==",
+      "peer": true
+    },
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
@@ -11010,6 +11041,11 @@
       "resolved": "https://registry.npmjs.org/stampit/-/stampit-4.3.2.tgz",
       "integrity": "sha512-pE2org1+ZWQBnIxRPrBM2gVupkuDD0TTNIo1H6GdT/vO82NXli2z8lRE8cu/nBIHrcOCXFBAHpb9ZldrB2/qOA=="
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
+    },
     "node_modules/std-env": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.3.tgz",

commafeed-client/package.json

@@ -26,6 +26,7 @@
     "@mantine/notifications": "^6.0.11",
     "@mantine/spotlight": "^6.0.11",
     "@mantine/styles": "^6.0.11",
+    "@monaco-editor/react": "^4.5.1",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "dayjs": "^1.11.7",

commafeed-client/src/components/settings/CustomCodeSettings.tsx

@@ -1,6 +1,7 @@
 import { Trans } from "@lingui/macro"
-import { Box, Button, Group, Stack, Textarea } from "@mantine/core"
+import { Box, Button, Group, Input, Stack, useMantineTheme } from "@mantine/core"
 import { useForm } from "@mantine/form"
+import { Editor } from "@monaco-editor/react"
 import { client, errorToStrings } from "app/client"
 import { redirectToSelectedSource } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
@@ -16,8 +17,11 @@ interface FormData {
 
 export function CustomCodeSettings() {
     const settings = useAppSelector(state => state.user.settings)
+    const theme = useMantineTheme()
     const dispatch = useAppDispatch()
 
+    const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light"
+
     const form = useForm<FormData>()
     const { setValues } = form
 
@@ -55,31 +59,25 @@ export function CustomCodeSettings() {
 
             <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
                 <Stack>
-                    <Textarea
+                    <Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
-                        autosize
+                        <Editor
-                        minRows={4}
+                            height="30vh"
-                        maxRows={15}
+                            defaultLanguage="css"
+                            theme={editorTheme}
+                            options={{ minimap: { enabled: false } }}
                             {...form.getInputProps("customCss")}
-                        description={<Trans>Custom CSS rules that will be applied</Trans>}
-                        styles={{
-                            input: {
-                                fontFamily: "monospace",
-                            },
-                        }}
                         />
+                    </Input.Wrapper>
 
-                    <Textarea
+                    <Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
-                        autosize
+                        <Editor
-                        minRows={4}
+                            height="30vh"
-                        maxRows={15}
+                            defaultLanguage="javascript"
+                            theme={editorTheme}
+                            options={{ minimap: { enabled: false } }}
                             {...form.getInputProps("customJs")}
-                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
-                        styles={{
-                            input: {
-                                fontFamily: "monospace",
-                            },
-                        }}
                         />
+                    </Input.Wrapper>
 
                     <Group>
                         <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>