gutter fix

lib/ace/css/editor.css

@@ -6,6 +6,8 @@
     overflow: hidden;
     font-family: 'Monaco', 'Menlo', 'Droid Sans Mono', 'Courier New', monospace;
     font-size: 12px;
+    width: 100%;
+    height: 100%;
 }
 
 .ace_scroller {

lib/ace/serversidehighlighter.js

@@ -0,0 +1,91 @@
+if (typeof process !== "undefined") {
+    require("../../support/paths");
+    require("ace/test/mockdom");
+}
+
+var theme = require("ace/theme/tomorrow");
+var EditSession = require("ace/edit_session").EditSession;
+var Editor = require("ace/editor").Editor;
+var MockRenderer = require("ace/test/mockrenderer").MockRenderer;
+var TextLayer = require("ace/layer/text").Text;
+
+/** Ace highlighting but server side
+ */
+var ServerSideHighlighter = module.exports = function() {
+};
+
+(function () {
+    
+    /** Returns a mode from /ace/mode based on a filename
+     *
+     * @param {string} fileName name of the file without directory information
+     * @returns {mode} A mode that can highlight the given file, or TextMode if nothing matched
+     */
+    function getMode (fileName) {
+        var extension = fileName.match(/\.(\w+)$/)[1];
+        
+        switch (extension) {
+            case "js":
+                var JavascriptMode = require("ace/mode/javascript").Mode;
+                return new JavascriptMode();
+            default:
+                var TextMode = require("ace/mode/text").Mode;
+                return new TextMode();
+        }
+    }
+    
+    /** Transforms a given input code snippet into HTML using the given mode
+    *
+    * @param {string} input Code snippet
+    * @param {mode} mode Mode loaded from /ace/mode (use 'ServerSideHiglighter.getMode')
+    * @param {string} r Code snippet
+    * @returns {object} An object containing: html, css
+    */
+    function render (input, mode, theme) {
+        var session = new EditSession("");
+        session.setMode(mode);// || new JavaScriptMode());
+        
+        var editor = new Editor(new MockRenderer(), session);
+        var textLayer = new TextLayer(document.createElement("div"));
+        textLayer.setSession(session);
+        textLayer.config = {
+            characterWidth: 10,
+            lineHeight: 20
+        };
+        
+        session.setValue(input);
+                
+        var stringBuilder = [], length =  session.getLength();
+        var tokens = session.getTokens(0, length - 1);
+        
+        for(var ix = 0; ix < length; ix++) {
+            var lineTokens = tokens[ix].tokens;
+            stringBuilder.push("<span class='ace_gutter ace_gutter-cell'>" + (ix+1) + "</span>");
+            textLayer.$renderLine(stringBuilder, 0, lineTokens, true);
+            stringBuilder.push("<br>");
+        }
+        
+        // let's prepare the whole html
+        var html = "<div class=':cssClass'>\
+            <div class='ace_editor'>\
+                :code\
+            </div>\
+        </div>".replace(/:cssClass/, theme.cssClass).replace(/:code/, stringBuilder.join(""));
+                
+        return {
+            css: theme.cssText,
+            html: html
+        };
+    }
+        
+    this.getMode = getMode;
+    this.render = render;
+}).call(ServerSideHighlighter.prototype);
+
+//"/**\n\
+//         * juhu\n\
+//         * kinner \n\
+//         */\n\
+//        function a(b) {\n\
+//            return b;\n\
+//        }"

lib/ace/serversidehighlighter_test.js

@@ -0,0 +1,101 @@
+require("../../support/paths");
+
+var assert = require("assert");
+var ServerSideHighlighter = require("./serversidehighlighter");
+
+// Execution ORDER: test.setUpSuite, setUp, testFn, tearDown, test.tearDownSuite
+module.exports = {
+    timeout: 10000,
+    
+    dispatcher: null,
+    req: null,
+    res: null,
+    highlighter: null,
+    
+    setUpSuite: function (next) {
+        this.highlighter = new ServerSideHighlighter();
+        next();
+    },
+
+    setUp: function(next) {        
+        next();
+    },
+
+    tearDown: function(next) {
+        next();
+    },
+    
+    "test extension js": function(next) {
+        var JavascriptMode = require("ace/mode/javascript").Mode
+        assert.equal(this.highlighter.getMode("jan.js") instanceof JavascriptMode, true);
+        next();
+    },
+    
+    "test extension unknown": function(next) {
+        var TextMode = require("ace/mode/text").Mode
+        assert.equal(this.highlighter.getMode("jan.unknown") instanceof TextMode, true);
+        next();
+    },
+    
+    "test simple snippet": function(next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = this.highlighter.getMode("some.js");
+        
+        var isError = false, result;
+        try {
+            result = this.highlighter.render(snippet, mode, theme);
+        }
+        catch (e) {
+            console.log(e);
+            isError = true;
+        }
+        // todo: write something more meaningful
+        assert.equal(isError, false);
+        
+        next();
+    },
+    
+    "test css from theme is used": function(next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = this.highlighter.getMode("some.js");
+        
+        var isError = false, result;
+        result = this.highlighter.render(snippet, mode, theme);
+        
+        assert.equal(result.css, theme.cssText);
+        
+        next();
+    },
+    
+    "test theme classname should be in output html": function (next) {
+        var theme = require("ace/theme/tomorrow");
+        var snippet = "/** this is a function\n\
+*\n\
+*/\n\
+function hello (a, b, c) {\n\
+    console.log(a * b + c + 'sup?');\n\
+}";
+        var mode = this.highlighter.getMode("some.js");
+        
+        var isError = false, result;
+        result = this.highlighter.render(snippet, mode, theme);
+        
+        assert.equal(!!result.html.match(/<div class='ace-tomorrow'>/), true);
+        
+        next();
+    }
+};
+
+!module.parent && require("asyncjs").test.testcase(module.exports, "ServerSideHighlighter").exec();

lib/ace/theme/clouds.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssClass = "ace-clouds";
 exports.cssText = ".ace-clouds .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
@@ -251,4 +253,8 @@ exports.cssText = ".ace-clouds .ace_editor {\
      \
 }";
 
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
+
 });

lib/ace/theme/clouds_midnight.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssClass = "ace-clouds-midnight";
 exports.cssText = ".ace-clouds-midnight .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
@@ -252,4 +254,8 @@ background-color:#E92E2E;\
      \
 }";
 
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
+
 });

lib/ace/theme/cobalt.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssClass = "ace-cobalt";
 exports.cssText = ".ace-cobalt .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
@@ -254,4 +256,8 @@ background-color:#001221;\
      \
 }";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/crimson_editor.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-crimson-editor .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -195,4 +197,8 @@ exports.cssText = ".ace-crimson-editor .ace_editor {\
 
 exports.cssClass = "ace-crimson-editor";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/dawn.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-dawn .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -258,4 +260,8 @@ color:#5A525F;\
 
 exports.cssClass = "ace-dawn";
 
+
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
 });

lib/ace/theme/eclipse.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-eclipse .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -143,4 +145,8 @@ exports.cssText = ".ace-eclipse .ace_editor {\
 
 exports.cssClass = "ace-eclipse";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/idle_fingers.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-idle-fingers .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -255,4 +257,8 @@ background-color:#FFF980;   \
 
 exports.cssClass = "ace-idle-fingers";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/kr_theme.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-kr-theme .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -254,4 +256,8 @@ color:#706D5B;\
 
 exports.cssClass = "ace-kr-theme";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/merbivore.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-merbivore .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -246,4 +248,8 @@ background-color:#990000;\
 
 exports.cssClass = "ace-merbivore";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/merbivore_soft.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-merbivore-soft .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -246,4 +248,8 @@ background-color:#FE3838;\
 
 exports.cssClass = "ace-merbivore-soft";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/mono_industrial.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-mono-industrial .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -254,4 +256,8 @@ background-color:#151C19;\
 
 exports.cssClass = "ace-mono-industrial";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/monokai.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-monokai .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -254,4 +256,8 @@ background-color:#AE81FF;\
 
 exports.cssClass = "ace-monokai";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/pastel_on_dark.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-pastel-on-dark .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -195,4 +197,8 @@ color:#D2A8A1;\
 
 exports.cssClass = "ace-pastel-on-dark";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/solarized_dark.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-solarized-dark .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -253,4 +255,8 @@ color:#657B83;\
 
 exports.cssClass = "ace-solarized-dark";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/solarized_light.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-solarized-light .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -252,4 +254,8 @@ exports.cssText = ".ace-solarized-light .ace_editor {\
 
 exports.cssClass = "ace-solarized-light";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/textmate.js

@@ -37,6 +37,7 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
 
 exports.cssClass = "ace-tm";
 exports.cssText = ".ace-tm .ace_editor {\
@@ -206,4 +207,7 @@ exports.cssText = ".ace-tm .ace_editor {\
   color: rgb(255, 0, 0)\
 }";
 
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/tomorrow.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
     exports.cssText = ".ace-tomorrow .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -253,4 +255,8 @@ background-color:#8959A8;\
 }";
 
     exports.cssClass = "ace-tomorrow";
+
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/tomorrow_night.js

@@ -254,8 +254,9 @@ background-color:#B798BF;\
      \
 }";
 
-    // import CSS once
-    dom.importCssString(cssText);
-
     exports.cssClass = "ace-tomorrow-night";
+
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/tomorrow_night_blue.js

@@ -254,8 +254,9 @@ background-color:#EBBBFF;\
      \
 }";
 
-    // import CSS once
-    dom.importCssString(cssText);
-
     exports.cssClass = "ace-tomorrow-night-blue";
+
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/tomorrow_night_bright.js

@@ -254,8 +254,9 @@ background-color:#B798BF;\
      \
 }";
 
-    // import CSS once
-    dom.importCssString(cssText);
-
     exports.cssClass = "ace-tomorrow-night-bright";
+
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/tomorrow_night_eighties.js

@@ -254,8 +254,9 @@ background-color:#CC99CC;\
      \
 }";
 
-    // import CSS once
-    dom.importCssString(cssText);
-
     exports.cssClass = "ace-tomorrow-night-eighties";
+
+	if (dom && dom.importCssString) {
+		dom.importCssString(exports.cssText);
+	}
 });

lib/ace/theme/twilight.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssClass = "ace-twilight";
 exports.cssText = ".ace-twilight .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
@@ -255,4 +257,8 @@ color:#5F5A60;\
      \
 }";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/theme/vibrant_ink.js

@@ -37,6 +37,8 @@
 
 define(function(require, exports, module) {
 
+var dom = require("pilot/dom");
+
 exports.cssText = ".ace-vibrant-ink .ace_editor {\
   border: 2px solid rgb(159, 159, 159);\
 }\
@@ -255,4 +257,8 @@ color:#99CC99;\
 
 exports.cssClass = "ace-vibrant-ink";
 
+if (dom && dom.importCssString) {
+	dom.importCssString(exports.cssText);
+}
+
 });

lib/ace/virtual_renderer.js

@@ -819,8 +819,15 @@ var VirtualRenderer = function(container, theme) {
 
             // force re-measure of the gutter width
             if (_self.$size) {
-                _self.$size.width = 0;
+                var checkGutterInitialized = function () {
-                _self.onResize();
+					// if offset width larger than 0 than force resize
+					if (_self.$gutter.offsetWidth > 0) {
+						_self.onResize(true);
+					} else {
+						setTimeout(checkGutterInitialized, 50); // try again in 50 ms.
+					}
+				};
+                checkGutterInitialized();
             }
         }
     };