From 0c055d4e5546dcb8ef967302e9dd17ec58b7e244 Mon Sep 17 00:00:00 2001
From: Kushagra Gour <chinchang457@gmail.com>
Date: Mon, 23 Jan 2017 03:17:22 +0530
Subject: [PATCH] add autocompletion for js,css,html. fixes #43

---
 src/index.html |  6 ++++++
 src/script.js  |  4 ++++
 src/style.css  | 17 +++++++++++++++--
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/index.html b/src/index.html
index aa72feb..eb7f3c7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,6 +4,7 @@
 		<title>Web Maker</title>
 		<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 		<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
+		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
 		<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
 		<link rel="stylesheet" href="lib/hint.min.css">
 		<link rel="stylesheet" href="lib/inlet.css">
@@ -367,6 +368,11 @@
 		<script src="lib/codemirror/addon/fold/comment-fold.js"></script>
 		<script src="lib/codemirror/addon/fold/brace-fold.js"></script>
 		<script src="lib/codemirror/addon/mode/loadmode.js"></script>
+		<script src="lib/codemirror/addon/hint/show-hint.js"></script>
+		<script src="lib/codemirror/addon/hint/javascript-hint.js"></script>
+		<script src="lib/codemirror/addon/hint/xml-hint.js"></script>
+		<script src="lib/codemirror/addon/hint/html-hint.js"></script>
+		<script src="lib/codemirror/addon/hint/css-hint.js"></script>
 
 		<script src="lib/codemirror/mode/xml/xml.js"></script>
 		<script src="lib/codemirror/mode/javascript/javascript.js"></script>
diff --git a/src/script.js b/src/script.js
index 8166b93..57be300 100644
--- a/src/script.js
+++ b/src/script.js
@@ -758,6 +758,10 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 				scope.setPreviewContent();
 			}, updateDelay);
 		});
+		cm.on('inputRead', function onChange(cm, input) {
+			if (input.text[0] === ';') { return; }
+			CodeMirror.commands.autocomplete(cm, null, { completeSingle: false })
+		});
 		return cm;
 	}
 
diff --git a/src/style.css b/src/style.css
index 0c6de6f..4610729 100644
--- a/src/style.css
+++ b/src/style.css
@@ -8,6 +8,7 @@
 :root {
 	--color-bg: #252637;
 	--color-sidebar: #3A2B63;
+	--code-font-size: 16px;
 }
 body {
 	margin: 0;
@@ -191,7 +192,7 @@ select, input[type="text"], textarea {
 .Codemirror {
 	width: 100%;
 	height: calc(100% - 25px); /* 25px for header */
-	font-size: 16px;
+	font-size: var(--code-font-size);
 }
 .layout-2 .is-minimized .Codemirror {
 	height: calc(100%);
@@ -215,7 +216,19 @@ select, input[type="text"], textarea {
 .CodeMirror-gutter-wrapper:hover .CodeMirror-guttermarker-subtle {
 	/*visibility: visible;*/
 }
-
+.CodeMirror-hints {
+	font-size: var(--code-font-size);
+	border: 0;
+	background: #1e1e2c;
+}
+.CodeMirror-hint {
+	color: #bbb;
+	padding: 2px 4px;
+}
+li.CodeMirror-hint-active {
+	background: #5b429d;
+	/*color: white;*/
+}
 #demo-frame {
 	border: 0;
 	width: 100%;