Introducing Ace as the source editor

diff --git a/editor.css b/editor.css
index 18dfc16..667db19 100644 (file)
--- a/editor.css
+++ b/editor.css
@@ -60,6 +60,11 @@ body {
     float:right;\r
 }\r
 \r
+#rng-sourceEditor-editor {\r
+    width: 940px;\r
+    height: 500px;\r
+}\r
+\r
 .rng {\r
     float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */\r
     border-color: white;\r

diff --git a/modules/sourceEditor.js b/modules/sourceEditor.js
index 787bfb9..5a62eaf 100644 (file)
--- a/modules/sourceEditor.js
+++ b/modules/sourceEditor.js
@@ -3,10 +3,16 @@ rng.modules.sourceEditor = function(sandbox) {
     var view = $(sandbox.getTemplate('main')());\r
     var isDirty = false;\r
     \r
+    var editor = ace.edit(view.find('#rng-sourceEditor-editor')[0]);\r
+    editor.setTheme("ace/theme/chrome");\r
+    editor.getSession().setMode("ace/mode/xml");\r
     $('textarea', view).on('keyup', function() {\r
         isDirty = true;\r
     });\r
     \r
+    editor.getSession().on('change', function() {\r
+        isDirty = true;\r
+    })\r
     return {\r
         start: function() {\r
             sandbox.publish('ready');\r
@@ -15,11 +21,12 @@ rng.modules.sourceEditor = function(sandbox) {
             return view;\r
         },\r
         setDocument: function(document) {\r
-            $('textarea', view).val(document);\r
+            editor.setValue(document);\r
+            editor.gotoLine(0)\r
             isDirty = false;\r
         },\r
         getDocument: function() {\r
-            return $('textarea', view).val();\r
+            return editor.getValue();\r
         },\r
         isDirty: function() {\r
             return isDirty;\r