From f140650b4ec851ee61ef5752ddb269aedc110e5f Mon Sep 17 00:00:00 2001
From: Athou <jeremiepanzer@gmail.com>
Date: Thu, 22 Jun 2023 22:15:45 +0200
Subject: [PATCH] monaco mobile support is poor, fallback to textarea

---
 .../src/components/code/CodeEditor.tsx        | 36 +++++++++++++++++++
 .../components/{ => code}/RichCodeEditor.tsx  |  0
 .../settings/CustomCodeSettings.tsx           | 20 ++++++-----
 3 files changed, 48 insertions(+), 8 deletions(-)
 create mode 100644 commafeed-client/src/components/code/CodeEditor.tsx
 rename commafeed-client/src/components/{ => code}/RichCodeEditor.tsx (100%)

diff --git a/commafeed-client/src/components/code/CodeEditor.tsx b/commafeed-client/src/components/code/CodeEditor.tsx
new file mode 100644
index 00000000..05eda806
--- /dev/null
+++ b/commafeed-client/src/components/code/CodeEditor.tsx
@@ -0,0 +1,36 @@
+import { Input, Textarea } from "@mantine/core"
+import RichCodeEditor from "components/code/RichCodeEditor"
+import { useMobile } from "hooks/useMobile"
+import { ReactNode } from "react"
+
+interface CodeEditorProps {
+    description?: ReactNode
+    language: "css" | "javascript"
+    value: string
+    onChange: (value: string | undefined) => void
+}
+
+export function CodeEditor(props: CodeEditorProps) {
+    const mobile = useMobile()
+
+    return mobile ? (
+        // monaco mobile support is poor, fallback to textarea
+        <Textarea
+            autosize
+            minRows={4}
+            maxRows={15}
+            description={props.description}
+            styles={{
+                input: {
+                    fontFamily: "monospace",
+                },
+            }}
+            value={props.value}
+            onChange={e => props.onChange(e.currentTarget.value)}
+        />
+    ) : (
+        <Input.Wrapper description={props.description}>
+            <RichCodeEditor height="30vh" language={props.language} value={props.value} onChange={props.onChange} />
+        </Input.Wrapper>
+    )
+}
diff --git a/commafeed-client/src/components/RichCodeEditor.tsx b/commafeed-client/src/components/code/RichCodeEditor.tsx
similarity index 100%
rename from commafeed-client/src/components/RichCodeEditor.tsx
rename to commafeed-client/src/components/code/RichCodeEditor.tsx
diff --git a/commafeed-client/src/components/settings/CustomCodeSettings.tsx b/commafeed-client/src/components/settings/CustomCodeSettings.tsx
index 8c6722ce..42a1d891 100644
--- a/commafeed-client/src/components/settings/CustomCodeSettings.tsx
+++ b/commafeed-client/src/components/settings/CustomCodeSettings.tsx
@@ -1,11 +1,11 @@
 import { Trans } from "@lingui/macro"
-import { Box, Button, Group, Input, Stack } from "@mantine/core"
+import { Box, Button, Group, Stack } from "@mantine/core"
 import { useForm } from "@mantine/form"
 import { client, errorToStrings } from "app/client"
 import { redirectToSelectedSource } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Alert } from "components/Alert"
-import RichCodeEditor from "components/RichCodeEditor"
+import { CodeEditor } from "components/code/CodeEditor"
 import { useEffect } from "react"
 import { useAsyncCallback } from "react-async-hook"
 import { TbDeviceFloppy } from "react-icons/tb"
@@ -56,13 +56,17 @@ export function CustomCodeSettings() {
 
             <form onSubmit={form.onSubmit(saveCustomCode.execute)}>
                 <Stack>
-                    <Input.Wrapper description={<Trans>Custom CSS rules that will be applied</Trans>}>
-                        <RichCodeEditor height="30vh" language="css" {...form.getInputProps("customCss")} />
-                    </Input.Wrapper>
+                    <CodeEditor
+                        description={<Trans>Custom CSS rules that will be applied</Trans>}
+                        language="css"
+                        {...form.getInputProps("customCss")}
+                    />
 
-                    <Input.Wrapper description={<Trans>Custom JS code that will be executed on page load</Trans>}>
-                        <RichCodeEditor height="30vh" language="javascript" {...form.getInputProps("customJs")} />
-                    </Input.Wrapper>
+                    <CodeEditor
+                        description={<Trans>Custom JS code that will be executed on page load</Trans>}
+                        language="javascript"
+                        {...form.getInputProps("customJs")}
+                    />
 
                     <Group>
                         <Button variant="default" onClick={() => dispatch(redirectToSelectedSource())}>