client: apply grouping to the MIME type list

src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js

@@ -19,9 +19,24 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
 
     async optionsLoaded(options) {
         this.$mimeTypes.empty();
+        let index = -1;
+        let prevInitial = "";
 
         for (const mimeType of mimeTypesService.getMimeTypes()) {
             const id = "code-mime-type-" + (idCtr++);
+            index++;
+
+            // Append a heading to group items by the first letter, excepting for the
+            // first item ("Plain Text"). Note: this code assumes the items are already
+            // in alphabetical ordered.
+            if (index > 0) {
+                const initial = mimeType.title.charAt(0).toUpperCase();
+
+                if (initial !== prevInitial) {
+                    this.$mimeTypes.append($("<h5>").text(initial));
+                    prevInitial = initial;
+                }
+            }
 
             this.$mimeTypes.append($("<li>")
                 .append($('<input type="checkbox" class="form-check-input">')