Adds simple editing

veasy · Feb 1, 2016 · 7a5c10e · 7a5c10e
1 parent 54132a6
commit 7a5c10e
Show file tree

Hide file tree

Showing 5 changed files with 1,741 additions and 5 deletions.
diff --git a/app/web/css/styles.css b/app/web/css/styles.css
@@ -8,6 +8,12 @@ body {
 }
 
 #editor {
+	padding: 12px;
 	background: #3c3c3c;
 	color: #EEE;
+}
+
+#preview {
+	padding: 12px;
+	background: #FFF;
 }
diff --git a/app/web/index.html b/app/web/index.html
@@ -11,7 +11,7 @@
 	<script type="text/javascript" src="lib/socket.io/socket.io.min.js"></script>
 	<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
 	<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
-	<script type="text/javascript" src="lib/markdown/markdown.min.js"></script>
+	<script type="text/javascript" src="lib/markdown/markdown.js"></script>
 
 	<script type="text/javascript" src="js/colmark.js"></script>
 </head>
@@ -22,7 +22,8 @@ <h1>Collaborative Markdown Editor</h1>
 		</div>
 		<div id="content">
 			<div id="editor" class="col-md-6" contenteditable="true">
-				#Hello World This is an example document.
+#Hello World
+This is an example document.
 			</div>
 			<div id="preview" class="col-md-6"></div>
 		</div>

diff --git a/app/web/js/colmark.js b/app/web/js/colmark.js
@@ -8,12 +8,17 @@ angular.module('colmark', [])
 
 		function Editor(input, preview) {
 			this.update = function () {
-				preview.innerHTML = markdown.toHTML(input.value);
+				preview.innerHTML = markdown.toHTML(input.innerHTML.replace(/&nbsp;/,"").replace(/<br>/ig,"\n").replace(/(<([^>]+)>)/ig,""));
 			};
 			this.update();
 		}
-		new Editor($("#editor"), $("#preview"));
+		var byId = function (id) { return document.getElementById(id); };
+		var editor = new Editor(byId("editor"), byId("preview"));
 
 		console.log("init");
+
+		document.getElementById("editor").addEventListener("input", function() {
+			editor.update();
+		}, false);
 	});
 });