Improve language selection

src/components/EditorControls.js

@@ -5,7 +5,7 @@ import history from 'history/browser';
 import copy from 'copy-to-clipboard';
 
 import { MenuButton, Button } from './Menu';
-import { languageIds } from '../util/highlighting';
+import { languages } from '../util/highlighting';
 import themes from '../style/themes';
 import { postUrl } from '../util/constants';
 
@@ -81,7 +81,7 @@ export default function EditorControls({
           label="language"
           value={language}
           setValue={setLanguage}
-          ids={languageIds}
+          ids={languages}
         />
       </Section>
       <Section>

src/components/Menu.js

@@ -31,8 +31,29 @@ const Menu = styled.ul`
   max-height: calc(100vh - 2em);
   overflow: auto;
 
+  > li.title {
+    text-align: center;
+    padding: 0.7em 0 0.3em 0;
+    cursor: initial;
+    font-weight: bold;
+  }
+
+  > li.title:hover {
+    background-color: inherit;
+  }
+
+  > li.selected {
+    ::before {
+      content: '*';
+      font-weight: bold;
+    }
+
+    padding-left: calc(1em - 1ch);
+    font-weight: bold;
+  }
+
   > li {
-    padding: 0.15em 0.5em;
+    padding: 0em 1em 0.05em 1em;
   }
 
   > li:hover {
@@ -63,19 +84,37 @@ export const MenuButton = ({ label, ids, value, setValue }) => {
     setValue(id);
   }
 
+  function make(ids) {
+    return ids.map(id => (
+      <li
+        key={id}
+        className={id === value ? 'selected' : undefined}
+        onClick={e => select(e, id)}
+      >
+        {id}
+      </li>
+    ));
+  }
+
+  let items;
+  if (Array.isArray(ids)) {
+    items = make(ids);
+  } else {
+    items = Object.entries(ids).map(([title, values]) =>
+      [
+        <li className="title" key={title} onClick={e => e.stopPropagation()}>
+          [{title}]
+        </li>,
+      ]
+        .concat(make(values))
+        .flat()
+    );
+  }
+
   return (
     <Button onClick={toggleOpen}>
       [<span>{label}: </span>
-      {value}]
-      {open && (
-        <Menu>
-          {ids.map(id => (
-            <li key={id} onClick={e => select(e, id)}>
-              {id}
-            </li>
-          ))}
-        </Menu>
-      )}
+      {value}]{open && <Menu>{items}</Menu>}
     </Button>
   );
 };