added note type picker component

public/javascripts/dialogs/attributes.js

@@ -54,7 +54,7 @@ const attributesDialog = (function() {
         e.preventDefault();
     });
 
-    ko.applyBindings(attributesModel);
+    ko.applyBindings(attributesModel, document.getElementById('attributes-dialog'));
 
     return {
         showDialog

public/javascripts/note_editor.js

@@ -131,8 +131,6 @@ const noteEditor = (function() {
 
         noteTitleEl.val(currentNote.detail.note_title);
 
-        console.log("Type: " + currentNote.detail.type);
-
         if (currentNote.detail.type === 'text') {
             // temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49
             editor.setData(currentNote.detail.note_text ? currentNote.detail.note_text : "<p></p>");

public/javascripts/note_type.js

@@ -0,0 +1,87 @@
+"use strict";
+
+const noteType = (function() {
+    const noteTypeModel = new NoteTypeModel();
+
+    function NoteTypeModel() {
+        const self = this;
+
+        this.type = ko.observable('text');
+        this.mime = ko.observable('');
+
+        this.codeMimeTypes = ko.observableArray([
+            { mime: 'text/x-csrc', title: 'C' },
+            { mime: 'text/x-c++src', title: 'C++' },
+            { mime: 'text/x-csharp', title: 'C#' },
+            { mime: 'text/x-clojure', title: 'Clojure' },
+            { mime: 'text/css', title: 'CSS' },
+            { mime: 'text/x-dockerfile', title: 'Dockerfile' },
+            { mime: 'text/x-erlang', title: 'Erlang' },
+            { mime: 'text/x-feature', title: 'Gherkin' },
+            { mime: 'text/x-go', title: 'Go' },
+            { mime: 'text/x-groovy', title: 'Groovy' },
+            { mime: 'text/x-haskell', title: 'Haskell' },
+            { mime: 'message/http', title: 'HTTP' },
+            { mime: 'text/x-java', title: 'Java' },
+            { mime: 'text/javascript', title: 'JavaScript' },
+            { mime: 'text/x-kotlin', title: 'Kotlin' },
+            { mime: 'text/x-lua', title: 'Lua' },
+            { mime: 'text/x-markdown', title: 'Markdown' },
+            { mime: 'text/x-objectivec', title: 'Objective C' },
+            { mime: 'text/x-pascal', title: 'Pascal' },
+            { mime: 'text/x-perl', title: 'Perl' },
+            { mime: 'text/x-php', title: 'PHP' },
+            { mime: 'text/x-python', title: 'Python' },
+            { mime: 'text/x-ruby', title: 'Ruby' },
+            { mime: 'text/x-rustsrc', title: 'Rust' },
+            { mime: 'text/x-scala', title: 'Scala' },
+            { mime: 'text/x-sh', title: 'Shell' },
+            { mime: 'text/x-sql', title: 'SQL' },
+            { mime: 'text/x-swift', title: 'Swift' },
+            { mime: 'text/xml', title: 'XML' },
+            { mime: 'text/x-yaml', title: 'YAML' }
+        ]);
+
+        this.typeString = function() {
+            const type = self.type();
+            const mime = self.mime();
+
+            if (type === 'text') {
+                return 'Text';
+            }
+            else if (type === 'code') {
+                if (!mime) {
+                    return 'Code';
+                }
+                else {
+                    const found = self.codeMimeTypes().find(x => x.mime === mime);
+
+                    return found ? found.title : mime;
+                }
+            }
+            else {
+                throwError('Unrecognized type: ' + type);
+            }
+        };
+
+        this.selectText = function() {
+            self.type('text');
+            self.mime('');
+        };
+
+        this.selectCode = function() {
+            self.type('code');
+            self.mime('');
+        };
+
+        this.selectCodeMime = function(el) {
+            self.type('code');
+            self.mime(el.mime);
+        };
+    }
+
+    ko.applyBindings(noteTypeModel, document.getElementById('note-type'));
+
+    return {
+    };
+})();