add rich editor for custom code

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
-                        autosize
-                        minRows={4}
-                        maxRows={15}
-                        {...form.getInputProps("customCss")}
-                        description={<Trans>Custom CSS rules that will be applied</Trans>}
-                        styles={{
-                            input: {
-                                fontFamily: "monospace",
-                            },
-                        }}
-                    />
+                    <Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
+                        <Editor
+                            height="30vh"
+                            defaultLanguage="css"
+                            theme={editorTheme}
+                            options={{ minimap: { enabled: false } }}
+                            {...form.getInputProps("customCss")}
+                        />
+                    </Input.Wrapper>
 
-                    <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",
-                            },
-                        }}
-                    />
+                    <Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
+                        <Editor
+                            height="30vh"
+                            defaultLanguage="javascript"
+                            theme={editorTheme}
+                            options={{ minimap: { enabled: false } }}
+                            {...form.getInputProps("customJs")}
+                        />
+                    </Input.Wrapper>
 
                     <Group>
                         <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>