WebEditor: integrated editor

app/assets/javascripts/application.js

@@ -18,4 +18,5 @@
 //= require chosen-jquery
 //= require raphael
 //= require branch-graph
+//= require ace-src-noconflict/ace.js
 //= require_tree .

app/assets/stylesheets/main.scss

@@ -182,3 +182,9 @@ $hover: #D9EDF7;
  *
  */
 @import "highlight/dark.scss";
+
+/**
+ * File Editor styles
+ *
+ */
+@import "sections/editor.scss";

app/assets/stylesheets/sections/editor.scss

@@ -0,0 +1,14 @@
+.file-editor {
+  
+  #editor{
+    height: 500px;
+    width: 90%;
+    position: relative;
+    margin-bottom: 20px;
+  }
+  textarea{
+    display: block;
+    width: 40%;
+    margin: 10px 0 10px 0;
+  }
+}

app/views/tree/edit.html.haml

@@ -1,10 +1,19 @@
-.file_holder
-  Edit file: 
+.file-editor
+  .file_name
+    File: 
   %span.file_name
     = @tree.path.force_encoding('utf-8')
     %br
     = form_tag(project_tree_path(@project, @id), :method => :put) do
-      %textarea
+      #editor
         = @tree.data
       = hidden_field_tag 'last_commit', @last_commit
+      = hidden_field_tag 'content'
+      
+      = text_area_tag 'text_commit'
       = submit_tag "Save"
+
+:javascript
+  var editor = ace.edit("editor");
+  editor.setTheme("ace/theme/twilight");
+  editor.getSession().setMode("ace/mode/javascript");