close menu when click outside

src/components/EditorControls.js

@@ -4,6 +4,7 @@ import { gzip } from 'pako';
 import history from 'history/browser';
 import copy from 'copy-to-clipboard';
 
+import { MenuButton, Button } from './Menu';
 import { languageIds } from '../highlighting';
 import themes from '../style/themes';
 
@@ -91,62 +92,6 @@ const Section = styled.div`
   align-items: center;
 `;
 
-const Button = styled.div`
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 .25em;
-  color: inherit;
-  text-decoration: none;
-
-  :hover {
-    background: ${props => props.theme.highlight};
-  }
-`;
-
-const Menu = styled.ul`
-  position: absolute;
-  top: 2em;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  background-color: ${props => props.theme.highlight};
-
-  > li {
-    padding: .15em .5em;
-  }
-
-  > li:hover {
-    background-color: ${props => props.theme.secondary};
-  }
-`;
-
-const MenuButton = ({ label, ids, value, setValue }) => {
-  const [open, setOpen] = useState(false);
-
-  function toggleOpen() {
-    setOpen(!open);
-  }
-
-  function select(e, id) {
-    e.stopPropagation();
-    setOpen(false);
-    setValue(id);
-  }
-
-  return (
-    <Button onClick={toggleOpen}>
-      [{label}: {value}]
-      {open && (
-        <Menu>  
-          {ids.map(id => <li key={id} onClick={e => select(e, id)}>{id}</li>)}
-        </Menu>
-      )}
-    </Button>
-  )
-}
-
 function langaugeToContentType(language) {
   if (language === 'json') {
     return 'application/json';

src/components/Menu.js

@@ -0,0 +1,68 @@
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+export const Button = styled.div`
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 .25em;
+  color: inherit;
+  text-decoration: none;
+
+  :hover {
+    background: ${props => props.theme.highlight};
+  }
+`;
+
+const Menu = styled.ul`
+  position: absolute;
+  top: 2em;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: ${props => props.theme.highlight};
+
+  > li {
+    padding: .15em .5em;
+  }
+
+  > li:hover {
+    background-color: ${props => props.theme.secondary};
+  }
+`;
+
+export const MenuButton = ({ label, ids, value, setValue }) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const listener = (e) => setOpen(false);
+    window.addEventListener('click', listener);
+    return () => window.removeEventListener('click', listener);
+  }, [open, setOpen]);
+
+  function toggleOpen() {
+    setOpen(!open);
+  }
+
+  function select(e, id) {
+    e.stopPropagation();
+    setOpen(false);
+    setValue(id);
+  }
+
+  return (
+    <Button onClick={toggleOpen}>
+      [{label}: {value}]
+      {open && (
+        <Menu>  
+          {ids.map(id => <li key={id} onClick={e => select(e, id)}>{id}</li>)}
+        </Menu>
+      )}
+    </Button>
+  )
+}

src/highlighting.js

@@ -36,7 +36,6 @@ export const languageIds = [
   'markup',
   'css',
   'clike',
-  'javascript',
   'bash',
   'diff',
   'docker',