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

+.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

-.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");

vendor/assets/javascripts/ace-src-noconflict/mode-c9search.js

+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+ace.define('ace/mode/c9search', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text', 'ace/tokenizer', 'ace/mode/c9search_highlight_rules', 'ace/mode/matching_brace_outdent', 'ace/mode/folding/c9search'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextMode = require("./text").Mode;
+var Tokenizer = require("../tokenizer").Tokenizer;
+var C9SearchHighlightRules = require("./c9search_highlight_rules").C9SearchHighlightRules;
+var MatchingBraceOutdent = require("./matching_brace_outdent").MatchingBraceOutdent;
+var C9StyleFoldMode = require("./folding/c9search").FoldMode;
+
+var Mode = function() {
+    this.$tokenizer = new Tokenizer(new C9SearchHighlightRules().getRules(), "i");
+    this.$outdent = new MatchingBraceOutdent();
+    this.foldingRules = new C9StyleFoldMode();
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+    
+    this.getNextLineIndent = function(state, line, tab) {
+        var indent = this.$getIndent(line);
+        return indent;
+    };
+
+    this.checkOutdent = function(state, line, input) {
+        return this.$outdent.checkOutdent(line, input);
+    };
+
+    this.autoOutdent = function(state, doc, row) {
+        this.$outdent.autoOutdent(doc, row);
+    };
+
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+
+});
+
+ace.define('ace/mode/c9search_highlight_rules', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text_highlight_rules'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+
+var C9SearchHighlightRules = function() {
+
+    // regexp must not have capturing parentheses. Use (?:) instead.
+    // regexps are ordered -> the first match is used
+    this.$rules = {
+        "start" : [
+            {
+                token : ["c9searchresults.constant.numeric", "c9searchresults.text", "c9searchresults.text"],
+                regex : "(^\\s+[0-9]+)(:\\s*)(.+)"
+            },
+            {
+                token : ["string", "text"], // single line
+                regex : "(.+)(:$)"
+            }
+        ]
+    };
+};
+
+oop.inherits(C9SearchHighlightRules, TextHighlightRules);
+
+exports.C9SearchHighlightRules = C9SearchHighlightRules;
+
+});
+
+ace.define('ace/mode/matching_brace_outdent', ['require', 'exports', 'module' , 'ace/range'], function(require, exports, module) {
+
+
+var Range = require("../range").Range;
+
+var MatchingBraceOutdent = function() {};
+
+(function() {
+
+    this.checkOutdent = function(line, input) {
+        if (! /^\s+$/.test(line))
+            return false;
+
+        return /^\s*\}/.test(input);
+    };
+
+    this.autoOutdent = function(doc, row) {
+        var line = doc.getLine(row);
+        var match = line.match(/^(\s*\})/);
+
+        if (!match) return 0;
+
+        var column = match[1].length;
+        var openBracePos = doc.findMatchingBracket({row: row, column: column});
+
+        if (!openBracePos || openBracePos.row == row) return 0;
+
+        var indent = this.$getIndent(doc.getLine(openBracePos.row));
+        doc.replace(new Range(row, 0, row, column-1), indent);
+    };
+
+    this.$getIndent = function(line) {
+        var match = line.match(/^(\s+)/);
+        if (match) {
+            return match[1];
+        }
+
+        return "";
+    };
+
+}).call(MatchingBraceOutdent.prototype);
+
+exports.MatchingBraceOutdent = MatchingBraceOutdent;
+});
+
+
+ace.define('ace/mode/folding/c9search', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/range', 'ace/mode/folding/fold_mode'], function(require, exports, module) {
+
+
+var oop = require("../../lib/oop");
+var Range = require("../../range").Range;
+var BaseFoldMode = require("./fold_mode").FoldMode;
+
+var FoldMode = exports.FoldMode = function() {};
+oop.inherits(FoldMode, BaseFoldMode);
+
+(function() {
+
+    this.foldingStartMarker = /^(\S.*\:|Searching for.*)$/;
+    this.foldingStopMarker = /^(\s+|Found.*)$/;
+    
+    this.getFoldWidgetRange = function(session, foldStyle, row) {
+        var lines = session.doc.getAllLines(row);
+        var line = lines[row];
+        var level1 = /^(Found.*|Searching for.*)$/;
+        var level2 = /^(\S.*\:|\s*)$/;
+        var re = level1.test(line) ? level1 : level2;
+
+        if (this.foldingStartMarker.test(line)) {            
+            for (var i = row + 1, l = session.getLength(); i < l; i++) {
+                if (re.test(lines[i]))
+                    break;
+            }
+
+            return new Range(row, line.length, i, 0);
+        }
+
+        if (this.foldingStopMarker.test(line)) {
+            for (var i = row - 1; i >= 0; i--) {
+                line = lines[i];
+                if (re.test(line))
+                    break;
+            }
+
+            return new Range(i, line.length, row, 0);
+        }
+    };
+    
+}).call(FoldMode.prototype);
+
+});
+
+ace.define('ace/mode/folding/fold_mode', ['require', 'exports', 'module' , 'ace/range'], function(require, exports, module) {
+
+
+var Range = require("../../range").Range;
+
+var FoldMode = exports.FoldMode = function() {};
+
+(function() {
+
+    this.foldingStartMarker = null;
+    this.foldingStopMarker = null;
+
+    // must return "" if there's no fold, to enable caching
+    this.getFoldWidget = function(session, foldStyle, row) {
+        var line = session.getLine(row);
+        if (this.foldingStartMarker.test(line))
+            return "start";
+        if (foldStyle == "markbeginend"
+                && this.foldingStopMarker
+                && this.foldingStopMarker.test(line))
+            return "end";
+        return "";
+    };
+
+    this.getFoldWidgetRange = function(session, foldStyle, row) {
+        return null;
+    };
+
+    this.indentationBlock = function(session, row, column) {
+        var re = /\S/;
+        var line = session.getLine(row);
+        var startLevel = line.search(re);
+        if (startLevel == -1)
+            return;
+
+        var startColumn = column || line.length;
+        var maxRow = session.getLength();
+        var startRow = row;
+        var endRow = row;
+
+        while (++row < maxRow) {
+            var level = session.getLine(row).search(re);
+
+            if (level == -1)
+                continue;
+
+            if (level <= startLevel)
+                break;
+
+            endRow = row;
+        }
+
+        if (endRow > startRow) {
+            var endColumn = session.getLine(endRow).length;
+            return new Range(startRow, startColumn, endRow, endColumn);
+        }
+    };
+
+    this.openingBracketBlock = function(session, bracket, row, column, typeRe) {
+        var start = {row: row, column: column + 1};
+        var end = session.$findClosingBracket(bracket, start, typeRe);
+        if (!end)
+            return;
+
+        var fw = session.foldWidgets[end.row];
+        if (fw == null)
+            fw = this.getFoldWidget(session, end.row);
+
+        if (fw == "start" && end.row > start.row) {
+            end.row --;
+            end.column = session.getLine(end.row).length;
+        }
+        return Range.fromPoints(start, end);
+    };
+
+}).call(FoldMode.prototype);
+
+});

vendor/assets/javascripts/ace-src-noconflict/mode-diff.js

+/* ***** BEGIN LICENSE BLOCK *****
+ * Distributed under the BSD license:
+ *
+ * Copyright (c) 2010, Ajax.org B.V.
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *     * Redistributions of source code must retain the above copyright
+ *       notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above copyright
+ *       notice, this list of conditions and the following disclaimer in the
+ *       documentation and/or other materials provided with the distribution.
+ *     * Neither the name of Ajax.org B.V. nor the
+ *       names of its contributors may be used to endorse or promote products
+ *       derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+ace.define('ace/mode/diff', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text', 'ace/tokenizer', 'ace/mode/diff_highlight_rules', 'ace/mode/folding/diff'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextMode = require("./text").Mode;
+var Tokenizer = require("../tokenizer").Tokenizer;
+var HighlightRules = require("./diff_highlight_rules").DiffHighlightRules;
+var FoldMode = require("./folding/diff").FoldMode;
+
+var Mode = function() {
+    this.$tokenizer = new Tokenizer(new HighlightRules().getRules(), "i");
+    this.foldingRules = new FoldMode(["diff", "index", "\\+{3}", "@@|\\*{5}"], "i");
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+
+});
+
+ace.define('ace/mode/diff_highlight_rules', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text_highlight_rules'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+
+var DiffHighlightRules = function() {
+    // regexp must not have capturing parentheses. Use (?:) instead.
+    // regexps are ordered -> the first match is used
+
+    this.$rules = {
+        "start" : [{
+                "regex": "^(?:\\*{15}|={67}|-{3}|\\+{3})$",
+                "token": "punctuation.definition.separator.diff",
+                "name": "keyword"
+            }, { //diff.range.unified
+                "regex": "^(@@)(\\s*.+?\\s*)(@@)(.*)$",
+                "token": [
+                    "constant",
+                    "constant.numeric",
+                    "constant",
+                    "comment.doc.tag"
+                ]
+            }, { //diff.range.normal
+                "regex": "^(\\d+)([,\\d]+)(a|d|c)(\\d+)([,\\d]+)(.*)$",
+                "token": [
+                    "constant.numeric",
+                    "punctuation.definition.range.diff",
+                    "constant.function",
+                    "constant.numeric",
+                    "punctuation.definition.range.diff",
+                    "invalid"
+                ],
+                "name": "meta."
+            }, {
+                "regex": "^(?:(\\-{3}|\\+{3}|\\*{3})( .+))$",
+                "token": [
+                    "constant.numeric",
+                    "meta.tag"
+                ]
+            }, { // added
+                "regex": "^([!+>])(.*?)(\\s*)$",
+                "token": [
+                    "support.constant",
+                    "text",
+                    "invalid"
+                ],
+            }, { // removed
+                "regex": "^([<\\-])(.*?)(\\s*)$",
+                "token": [
+                    "support.function",
+                    "string",
+                    "invalid"
+                ],
+            }, {
+                "regex": "^(diff)(\\s+--\\w+)?(.+?)( .+)?$",
+                "token": ["variable", "variable", "keyword", "variable"]
+            }, {
+                "regex": "^Index.+$",
+                "token": "variable"
+            }, {
+                "regex": "^(.*?)(\\s*)$",
+                "token": ["invisible", "invalid"]
+            }
+        ]
+    };
+};
+
+oop.inherits(DiffHighlightRules, TextHighlightRules);
+
+exports.DiffHighlightRules = DiffHighlightRules;
+});
+
+ace.define('ace/mode/folding/diff', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/folding/fold_mode', 'ace/range'], function(require, exports, module) {
+
+
+var oop = require("../../lib/oop");
+var BaseFoldMode = require("./fold_mode").FoldMode;
+var Range = require("../../range").Range;
+
+var FoldMode = exports.FoldMode = function(levels, flag) {
+	this.regExpList = levels;
+	this.flag = flag;
+	this.foldingStartMarker = RegExp("^(" + levels.join("|") + ")", this.flag);
+};
+oop.inherits(FoldMode, BaseFoldMode);
+
+(function() {
+    this.getFoldWidgetRange = function(session, foldStyle, row) {
+        var line = session.getLine(row);
+        var start = {row: row, column: line.length};
+
+        var regList = this.regExpList;
+        for (var i = 1; i <= regList.length; i++) {
+            var re = RegExp("^(" + regList.slice(0, i).join("|") + ")", this.flag);
+            if (re.test(line))
+                break;
+        }
+
+        for (var l = session.getLength(); ++row < l; ) {
+            line = session.getLine(row);
+            if (re.test(line))
+                break;
+        }
+        if (row == start.row + 1)
+            return;
+        return  Range.fromPoints(start, {row: row - 1, column: line.length});
+    };
+
+}).call(FoldMode.prototype);
+
+});
+
+ace.define('ace/mode/folding/fold_mode', ['require', 'exports', 'module' , 'ace/range'], function(require, exports, module) {
+
+
+var Range = require("../../range").Range;
+
+var FoldMode = exports.FoldMode = function() {};
+
+(function() {
+
+    this.foldingStartMarker = null;
+    this.foldingStopMarker = null;
+
+    // must return "" if there's no fold, to enable caching
+    this.getFoldWidget = function(session, foldStyle, row) {
+        var line = session.getLine(row);
+        if (this.foldingStartMarker.test(line))
+            return "start";
+        if (foldStyle == "markbeginend"
+                && this.foldingStopMarker
+                && this.foldingStopMarker.test(line))
+            return "end";
+        return "";
+    };
+
+    this.getFoldWidgetRange = function(session, foldStyle, row) {
+        return null;
+    };
+
+    this.indentationBlock = function(session, row, column) {
+        var re = /\S/;
+        var line = session.getLine(row);
+        var startLevel = line.search(re);
+        if (startLevel == -1)
+            return;
+
+        var startColumn = column || line.length;
+        var maxRow = session.getLength();
+        var startRow = row;
+        var endRow = row;
+
+        while (++row < maxRow) {
+            var level = session.getLine(row).search(re);
+
+            if (level == -1)
+                continue;
+
+            if (level <= startLevel)
+                break;
+
+            endRow = row;
+        }
+
+        if (endRow > startRow) {
+            var endColumn = session.getLine(endRow).length;
+            return new Range(startRow, startColumn, endRow, endColumn);
+        }
+    };
+
+    this.openingBracketBlock = function(session, bracket, row, column, typeRe) {
+        var start = {row: row, column: column + 1};
+        var end = session.$findClosingBracket(bracket, start, typeRe);
+        if (!end)
+            return;
+
+        var fw = session.foldWidgets[end.row];
+        if (fw == null)
+            fw = this.getFoldWidget(session, end.row);
+
+        if (fw == "start" && end.row > start.row) {
+            end.row --;
+            end.column = session.getLine(end.row).length;
+        }
+        return Range.fromPoints(start, end);
+    };
+
+}).call(FoldMode.prototype);
+
+});

vendor/assets/javascripts/ace-src-noconflict/mode-latex.js

+ace.define('ace/mode/latex', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text', 'ace/tokenizer', 'ace/mode/latex_highlight_rules', 'ace/range'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextMode = require("./text").Mode;
+var Tokenizer = require("../tokenizer").Tokenizer;
+var LatexHighlightRules = require("./latex_highlight_rules").LatexHighlightRules;
+var Range = require("../range").Range;
+
+var Mode = function()
+{
+    this.$tokenizer = new Tokenizer(new LatexHighlightRules().getRules());
+};
+oop.inherits(Mode, TextMode);
+
+(function() {
+    this.toggleCommentLines = function(state, doc, startRow, endRow) {
+        // This code is adapted from ruby.js
+        var outdent = true;
+        
+        // LaTeX comments begin with % and go to the end of the line
+        var commentRegEx = /^(\s*)\%/;
+
+        for (var i = startRow; i <= endRow; i++) {
+            if (!commentRegEx.test(doc.getLine(i))) {
+                outdent = false;
+                break;
+            }
+        }
+
+        if (outdent) {
+            var deleteRange = new Range(0, 0, 0, 0);
+            for (var i = startRow; i <= endRow; i++) {
+                var line = doc.getLine(i);
+                var m = line.match(commentRegEx);
+                deleteRange.start.row = i;
+                deleteRange.end.row = i;
+                deleteRange.end.column = m[0].length;
+                doc.replace(deleteRange, m[1]);
+            }
+        }
+        else {
+            doc.indentRows(startRow, endRow, "%");
+        }
+    };
+    
+    // There is no universally accepted way of indenting a tex document
+    // so just maintain the indentation of the previous line
+    this.getNextLineIndent = function(state, line, tab) {
+        return this.$getIndent(line);
+    };
+    
+}).call(Mode.prototype);
+
+exports.Mode = Mode;
+
+});
+ace.define('ace/mode/latex_highlight_rules', ['require', 'exports', 'module' , 'ace/lib/oop', 'ace/mode/text_highlight_rules'], function(require, exports, module) {
+
+
+var oop = require("../lib/oop");
+var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
+
+var LatexHighlightRules = function() {   
+    this.$rules = {
+        "start" : [{
+            // A tex command e.g. \foo
+            token : "keyword",
+            regex : "\\\\(?:[^a-zA-Z]|[a-zA-Z]+)",
+        }, {
+            // Curly and square braces
+            token : "lparen",
+            regex : "[[({]"
+        }, {
+            // Curly and square braces
+            token : "rparen",
+            regex : "[\\])}]"
+        }, {
+            // Inline math between two $ symbols
+            token : "string",
+            regex : "\\$(?:(?:\\\\.)|(?:[^\\$\\\\]))*?\\$"
+        }, {
+            // A comment. Tex comments start with % and go to 
+            // the end of the line
+            token : "comment",
+            regex : "%.*$"
+        }]
+    };
+};
+
+oop.inherits(LatexHighlightRules, TextHighlightRules);
+
+exports.LatexHighlightRules = LatexHighlightRules;
+
+});