feat: midi display on editor if focused and add all autocomplete for CSS

main.js

 var audioButton = false;
 var midiButton = false;
 var activateButton;
+var dataMidi;
 var editor;
 
 /**
@@ -10,8 +11,9 @@ function loadEditor() {
 	editor = ace.edit("editor");
 	editor.setTheme("ace/theme/tomorrow_night");
 	editor.session.setMode("ace/mode/css");
-	editor.setOptions({
-		enableBasicAutocompletion: [{
+	const langTools = ace.require('ace/ext/language_tools');
+	
+	const cssTemplate = {
 		getCompletions: (editor, session, pos, prefix, callback) => {
 			// note, won't fire if caret is at a word that does not have these letters
 			callback(null, [
@@ -42,10 +44,14 @@ function loadEditor() {
 				{ value: '[note:35,0,1]', score: 1, meta: 'MIDI Note B between 0 and 1.' },
 			]);
 		},
-		}],
+	};
+	langTools.addCompleter(cssTemplate);
+	editor.setOptions({
+		enableBasicAutocompletion: true,
 		enableSnippets: true,
 		enableLiveAutocompletion: true
 	});
+
 	chrome.storage.sync.get(['css'], function (result) {
 		editor.setValue(result.css)
 	});
@@ -121,7 +127,17 @@ function onMessage({ type, data }) {
 			break;
 		}
 		case 'midiEvent': {
+			if (dataMidi != data) {
 				$('#midiEvent').text(data);
+				if (editor.isFocused()) {
+					editor.session.insert(editor.getCursorPosition(), data)
+				}
+				dataMidi = data;
+			}
+			break;
+		}
+		case 'midiDevices': {
+			$('#midiDevices').text(data);
 			break;
 		}
 	}