zoom controls

src/components/Editor.js

@@ -16,6 +16,14 @@ export default function Editor({ content, setContent, contentType }) {
       return 'dark';
     }
   });
+  const [fontSize, setFontSize] = useState(() => {
+    const preference = ls.get('fontsize');
+    if (preference && preference >= 10 && preference <= 22) {
+      return preference;
+    } else {
+      return 16;
+    }
+  });
 
   useEffect(() => {
     if (theme === 'dark') {
@@ -23,7 +31,15 @@ export default function Editor({ content, setContent, contentType }) {
     } else {
       ls.set('theme', theme);
     }
-  }, [theme])
+  }, [theme]);
+
+  useEffect(() => {
+    if (fontSize === 16) {
+      ls.remove('fontsize');
+    } else {
+      ls.set('fontsize', fontSize);
+    }
+  }, [fontSize]);
 
   useEffect(() => {
     if (contentType) {
@@ -31,10 +47,22 @@ export default function Editor({ content, setContent, contentType }) {
     }
   }, [contentType]);
 
+  function zoom(delta) {
+    const result = fontSize + delta;
+    if (result && result >= 10 && result <= 22) {
+      setFontSize(result);
+    }
+  }
+
   return <>
     <ThemeProvider theme={themes[theme]}>
-      <EditorControls code={content} setCode={setContent} language={language} setLanguage={setLanguage} theme={theme} setTheme={setTheme} />
-      <EditorTextArea code={content} setCode={setContent} language={language} />
+      <EditorControls
+        code={content} setCode={setContent}
+        language={language} setLanguage={setLanguage}
+        theme={theme} setTheme={setTheme}
+        zoom={zoom}
+      />
+      <EditorTextArea code={content} setCode={setContent} language={language} fontSize={fontSize} />
     </ThemeProvider>
   </>
 }

src/components/EditorControls.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { gzip } from 'pako';
 import history from 'history/browser';
@@ -8,7 +8,7 @@ import { MenuButton, Button } from './Menu';
 import { languageIds } from '../highlighting';
 import themes from '../style/themes';
 
-export default function EditorControls({ code, setCode, language, setLanguage, theme, setTheme }) {
+export default function EditorControls({ code, setCode, language, setLanguage, theme, setTheme, zoom }) {
   const [saving, setSaving] = useState(false);
   const [recentlySaved, setRecentlySaved] = useState(false);
 
@@ -16,22 +16,7 @@ export default function EditorControls({ code, setCode, language, setLanguage, t
     setRecentlySaved(false);
   }, [code, language])
 
-  useEffect(() => {
-    const listener = (e) => {
-      if ((e.ctrlKey || e.metaKey)) {
-        if (e.key === 's' || e.key === 'S') {
-          e.preventDefault();
-          save();
-        }
-      }
-    }
-    
-    window.addEventListener('keydown', listener);
-    return () => window.removeEventListener('keydown', listener);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  function save() {
+  const save = useCallback(() => {
     if (!code || recentlySaved) {
       return;
     }
@@ -45,7 +30,26 @@ export default function EditorControls({ code, setCode, language, setLanguage, t
       copy(window.location.href);
       document.title = 'paste | ' + pasteId;
     });
-  }
+  }, [code, language, recentlySaved]);
+
+  useEffect(() => {
+    const listener = (e) => {
+      if ((e.ctrlKey || e.metaKey)) {
+        if (e.key === 's' || e.key === 'S') {
+          e.preventDefault();
+          save();
+        }
+
+        if (e.key === '=' || e.key === '-') {
+          e.preventDefault();
+          zoom(e.key === '=' ? 1 : -1);
+        }
+      }
+    }
+    
+    window.addEventListener('keydown', listener);
+    return () => window.removeEventListener('keydown', listener);
+  }, [save, zoom]);
 
   function reset() {
     setCode('');
@@ -69,6 +73,8 @@ export default function EditorControls({ code, setCode, language, setLanguage, t
         <MenuButton label="language" value={language} setValue={setLanguage} ids={languageIds} />
       </Section>
       <Section>
+        <Button onClick={() => zoom(1)}>[+ </Button>
+          <Button onClick={() => zoom(-1)}> -]</Button>
         <MenuButton label="theme" value={theme} setValue={setTheme} ids={Object.keys(themes)} />
         <Button as="a" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about]</Button>
       </Section>
@@ -85,6 +91,7 @@ const Header = styled.header`
   background: ${props => props.theme.secondary};
   display: flex;
   justify-content: space-between;
+  user-select: none;
 `;
 
 const Section = styled.div`

src/components/EditorTextArea.js

@@ -3,7 +3,7 @@ import ReactEditor from 'react-simple-code-editor';
 import EditorPrismStyle from './EditorPrismStyle';
 import { getHighlighter } from '../highlighting';
 
-export default function EditorTextArea({ code, setCode, language }) {
+export default function EditorTextArea({ code, setCode, language, fontSize }) {
   const highlight = getHighlighter(language);
 
   function highlightWithLineNumbers(input, grammar) {
@@ -21,6 +21,7 @@ export default function EditorTextArea({ code, setCode, language }) {
         highlight={highlightWithLineNumbers}
         placeholder={'Type some code...'}
         padding={10}
+        size={fontSize}
         textareaId='code-area'
       />
     </EditorPrismStyle>
@@ -29,9 +30,9 @@ export default function EditorTextArea({ code, setCode, language }) {
 
 const StyledReactEditor = styled(ReactEditor)`
   counter-reset: line;
-  font-size: 16px;
+  font-size: ${props => props.size}px;
   outline: 0;
-  min-height: calc(100vh - 2em);
+  min-height: calc(100vh - 2rem);
 
   #code-area {
     outline: none;