set readonly on mobile devices

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}