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>
   );
 };

src/util/highlighting.js

@@ -1,4 +1,7 @@
-import { highlight, languages } from 'prismjs/components/prism-core';
+import {
+  highlight,
+  languages as prismLanguages,
+} from 'prismjs/components/prism-core';
 
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-css';
@@ -21,47 +24,43 @@ import 'prismjs/components/prism-log';
 import 'prismjs/components/prism-markdown';
 import 'prismjs/components/prism-php';
 import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-properties';
 import 'prismjs/components/prism-protobuf';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
 import 'prismjs/components/prism-ruby';
 import 'prismjs/components/prism-rust';
 import 'prismjs/components/prism-sql';
 import 'prismjs/components/prism-toml';
 import 'prismjs/components/prism-yaml';
 
-export const languageIds = [
-  'plain',
-  'markup',
-  'css',
+export const languages = {
+  config: ['yaml', 'json', 'toml', 'properties'],
+  logs: ['log', 'javastacktrace'],
+  code: [
+    'java',
+    'javascript',
+    'typescript',
+    'python',
+    'kotlin',
     'clike',
     'bash',
-  'diff',
-  'docker',
-  'go',
-  'groovy',
-  'haskell',
-  'java',
-  'javastacktrace',
-  'javascript',
-  'json',
-  'kotlin',
-  'log',
-  'markdown',
-  'php',
-  'protobuf',
-  'python',
-  'jsx',
-  'typescript',
     'ruby',
     'rust',
     'sql',
-  'toml',
-  'yaml',
-];
+    'go',
+    'groovy',
+    'haskell',
+  ],
+  web: ['markup', 'css', 'php', 'jsx', 'tsx'],
+  misc: ['plain', 'docker', 'diff', 'markdown', 'protobuf'],
+};
+
+export const languageIds = Object.values(languages).flat(1);
 
 export function getHighlighter(language) {
-  const grammar = languages[language] || {};
+  const grammar = prismLanguages[language] || {};
   return input => highlight(input, grammar);
 }