dom reference
This commit is contained in:
parent
0f3655132b
commit
9c67add1d5
21 changed files with 229 additions and 0 deletions
91
lib/ace/serversidehighlighter.js
Normal file
91
lib/ace/serversidehighlighter.js
Normal file
|
|
@ -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\
|
||||||
|
// }"
|
||||||
101
lib/ace/serversidehighlighter_test.js
Normal file
101
lib/ace/serversidehighlighter_test.js
Normal file
|
|
@ -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();
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssClass = "ace-clouds";
|
exports.cssClass = "ace-clouds";
|
||||||
exports.cssText = ".ace-clouds .ace_editor {\
|
exports.cssText = ".ace-clouds .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssClass = "ace-clouds-midnight";
|
exports.cssClass = "ace-clouds-midnight";
|
||||||
exports.cssText = ".ace-clouds-midnight .ace_editor {\
|
exports.cssText = ".ace-clouds-midnight .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssClass = "ace-cobalt";
|
exports.cssClass = "ace-cobalt";
|
||||||
exports.cssText = ".ace-cobalt .ace_editor {\
|
exports.cssText = ".ace-cobalt .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-crimson-editor .ace_editor {\
|
exports.cssText = ".ace-crimson-editor .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-dawn .ace_editor {\
|
exports.cssText = ".ace-dawn .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-eclipse .ace_editor {\
|
exports.cssText = ".ace-eclipse .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-idle-fingers .ace_editor {\
|
exports.cssText = ".ace-idle-fingers .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-kr-theme .ace_editor {\
|
exports.cssText = ".ace-kr-theme .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-merbivore .ace_editor {\
|
exports.cssText = ".ace-merbivore .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-merbivore-soft .ace_editor {\
|
exports.cssText = ".ace-merbivore-soft .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-mono-industrial .ace_editor {\
|
exports.cssText = ".ace-mono-industrial .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-monokai .ace_editor {\
|
exports.cssText = ".ace-monokai .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-pastel-on-dark .ace_editor {\
|
exports.cssText = ".ace-pastel-on-dark .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-solarized-dark .ace_editor {\
|
exports.cssText = ".ace-solarized-dark .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-solarized-light .ace_editor {\
|
exports.cssText = ".ace-solarized-light .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssClass = "ace-tm";
|
exports.cssClass = "ace-tm";
|
||||||
exports.cssText = ".ace-tm .ace_editor {\
|
exports.cssText = ".ace-tm .ace_editor {\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-tomorrow .ace_editor {\
|
exports.cssText = ".ace-tomorrow .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssClass = "ace-twilight";
|
exports.cssClass = "ace-twilight";
|
||||||
exports.cssText = ".ace-twilight .ace_editor {\
|
exports.cssText = ".ace-twilight .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
|
|
||||||
define(function(require, exports, module) {
|
define(function(require, exports, module) {
|
||||||
|
|
||||||
|
var dom = require("pilot/dom");
|
||||||
|
|
||||||
exports.cssText = ".ace-vibrant-ink .ace_editor {\
|
exports.cssText = ".ace-vibrant-ink .ace_editor {\
|
||||||
border: 2px solid rgb(159, 159, 159);\
|
border: 2px solid rgb(159, 159, 159);\
|
||||||
}\
|
}\
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue