diff --git a/package.json b/package.json index d4ead21..cb33065 100644 --- a/package.json +++ b/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" diff --git a/src/components/Editor.js b/src/components/Editor.js index 8367f68..6e250a4 100644 --- a/src/components/Editor.js +++ b/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} /> diff --git a/src/components/EditorControls.js b/src/components/EditorControls.js index c393086..35a67f8 100644 --- a/src/components/EditorControls.js +++ b/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 (
@@ -85,6 +91,7 @@ export default function EditorControls({ setValue={setLanguage} ids={languages} /> + {readOnly && }
diff --git a/src/components/EditorTextArea.js b/src/components/EditorTextArea.js index 694e900..5400668 100644 --- a/src/components/EditorTextArea.js +++ b/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} diff --git a/yarn.lock b/yarn.lock index 830bc89..a211516 100644 --- a/yarn.lock +++ b/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"