set readonly on mobile devices

package.json

@@ -13,6 +13,7 @@
     "local-storage": "^2.0.0",
     "pako": "^2.0.3",
     "react": "^17.0.2",
+    "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "styled-components": "^5.2.1"

src/components/Editor.js

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { ThemeProvider, createGlobalStyle } from 'styled-components';
+import { isMobile } from 'react-device-detect';
 import ls from 'local-storage';
 
 import EditorControls from './EditorControls';
@@ -13,7 +14,8 @@ export default function Editor({
   setActualContent,
   contentType,
 }) {
-  const [language, setLanguage] = useState('plain');
+  const [language, setLanguage] = useState(isMobile);
+  const [readOnly, setReadOnly] = useState(true);
 
   const [theme, setTheme] = usePreference(
     'theme',
@@ -48,6 +50,8 @@ export default function Editor({
           setForcedContent={setForcedContent}
           language={language}
           setLanguage={setLanguage}
+          readOnly={readOnly}
+          setReadOnly={setReadOnly}
           theme={theme}
           setTheme={setTheme}
           zoom={zoom}
@@ -59,6 +63,7 @@ export default function Editor({
           theme={themes[theme]}
           language={language}
           fontSize={fontSize}
+          readOnly={readOnly}
         />
       </ThemeProvider>
     </>

src/components/EditorControls.js

@@ -14,6 +14,8 @@ export default function EditorControls({
   setForcedContent,
   language,
   setLanguage,
+  readOnly,
+  setReadOnly,
   theme,
   setTheme,
   zoom,
@@ -72,6 +74,10 @@ export default function EditorControls({
     document.title = 'paste';
   }
 
+  function unsetReadOnly() {
+    setReadOnly(false);
+  }
+
   return (
     <Header>
       <Section>
@@ -85,6 +91,7 @@ export default function EditorControls({
           setValue={setLanguage}
           ids={languages}
         />
+        {readOnly && <Button onClick={unsetReadOnly}>[edit]</Button>}
       </Section>
       <Section>
         <Button onClick={() => zoom(1)}>[+ </Button>

src/components/EditorTextArea.js

@@ -11,6 +11,7 @@ export default function EditorTextArea({
   theme,
   language,
   fontSize,
+  readOnly,
 }) {
   const [editor, setEditor] = useState();
   const [monaco, setMonaco] = useState();
@@ -70,6 +71,7 @@ export default function EditorTextArea({
           wordWrap: true,
           renderLineHighlight: 'none',
           renderValidationDecorations: false,
+          readOnly,
         }}
         beforeMount={beforeMount}
         onMount={onMount}

yarn.lock

@@ -7026,6 +7026,13 @@ react-dev-utils@^12.0.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+react-device-detect@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.1.2.tgz#60abb6fa361ec4cc839469a0c4c3e9b8ea17d6b5"
+  integrity sha512-N42xttwez3ECgu4KpOL2ICesdfoz8NCBfmc1rH9FRYSjH7NmMyANPSrQ3EvAtJyj/6TzJNhrANSO38iXjCB2Ug==
+  dependencies:
+    ua-parser-js "^0.7.30"
+
 react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
@@ -8185,6 +8192,11 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
+ua-parser-js@^0.7.30:
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
+
 unbox-primitive@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"