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
     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
 .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 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
     $('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
     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
             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
             isDirty = false;\r
         },\r
         getDocument: function() {\r

-            return $('textarea', view).val();\r
+            return editor.getValue();\r

         },\r
         isDirty: function() {\r
             return isDirty;\r
         },\r
         isDirty: function() {\r
             return isDirty;\r