jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1858 from robru/invisible_granularity

Browse source 
Increase granularity of invisible character classes.
This commit is contained in:
Zef Hemel 2014-03-16 15:35:19 +01:00
commit 0bc7f518ad
2 changed files with 20 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
lib/ace/layer/text.js
View file

@ -126,7 +126,7 @@ var Text = function(parentEl) {
var tabStr = this.$tabStrings = [0]; var tabStr = this.$tabStrings = [0];
for (var i = 1; i < tabSize + 1; i++) { for (var i = 1; i < tabSize + 1; i++) {
if (this.showInvisibles) { if (this.showInvisibles) {
tabStr.push("<span class='ace_invisible'>" tabStr.push("<span class='ace_invisible ace_invisible_tab'>"
+ this.TAB_CHAR + this.TAB_CHAR
+ lang.stringRepeat("\xa0", i - 1) + lang.stringRepeat("\xa0", i - 1)
+ "</span>"); + "</span>");
@ -137,8 +137,12 @@ var Text = function(parentEl) {
if (this.displayIndentGuides) { if (this.displayIndentGuides) {
this.$indentGuideRe = /\s\S| \t|\t |\s$/; this.$indentGuideRe = /\s\S| \t|\t |\s$/;
var className = "ace_indent-guide"; var className = "ace_indent-guide";
var spaceClass = "";
var tabClass = "";
if (this.showInvisibles) { if (this.showInvisibles) {
className += " ace_invisible"; className += " ace_invisible";
spaceClass = " ace_invisible_space";
tabClass = " ace_invisible_tab";
var spaceContent = lang.stringRepeat(this.SPACE_CHAR, this.tabSize); var spaceContent = lang.stringRepeat(this.SPACE_CHAR, this.tabSize);
var tabContent = this.TAB_CHAR + lang.stringRepeat("\xa0", this.tabSize - 1); var tabContent = this.TAB_CHAR + lang.stringRepeat("\xa0", this.tabSize - 1);
} else{ } else{
@ -146,8 +150,8 @@ var Text = function(parentEl) {
var tabContent = spaceContent; var tabContent = spaceContent;
} }
this.$tabStrings[" "] = "<span class='" + className + "'>" + spaceContent + "</span>"; this.$tabStrings[" "] = "<span class='" + className + spaceClass + "'>" + spaceContent + "</span>";
this.$tabStrings["\t"] = "<span class='" + className + "'>" + tabContent + "</span>"; this.$tabStrings["\t"] = "<span class='" + className + tabClass + "'>" + tabContent + "</span>";
} }
}; };
@ -321,7 +325,7 @@ var Text = function(parentEl) {
var replaceFunc = function(c, a, b, tabIdx, idx4) { var replaceFunc = function(c, a, b, tabIdx, idx4) {
if (a) { if (a) {
return self.showInvisibles ? return self.showInvisibles ?
"<span class='ace_invisible'>" + lang.stringRepeat(self.SPACE_CHAR, c.length) + "</span>" : "<span class='ace_invisible ace_invisible_space'>" + lang.stringRepeat(self.SPACE_CHAR, c.length) + "</span>" :
lang.stringRepeat("\xa0", c.length); lang.stringRepeat("\xa0", c.length);
} else if (c == "&") { } else if (c == "&") {
return "&#38;"; return "&#38;";
@ -333,14 +337,14 @@ var Text = function(parentEl) {
return self.$tabStrings[tabSize]; return self.$tabStrings[tabSize];
} else if (c == "\u3000") { } else if (c == "\u3000") {
// U+3000 is both invisible AND full-width, so must be handled uniquely // U+3000 is both invisible AND full-width, so must be handled uniquely
var classToUse = self.showInvisibles ? "ace_cjk ace_invisible" : "ace_cjk"; var classToUse = self.showInvisibles ? "ace_cjk ace_invisible ace_invisible_space" : "ace_cjk";
var space = self.showInvisibles ? self.SPACE_CHAR : ""; var space = self.showInvisibles ? self.SPACE_CHAR : "";
screenColumn += 1; screenColumn += 1;
return "<span class='" + classToUse + "' style='width:" + return "<span class='" + classToUse + "' style='width:" +
(self.config.characterWidth * 2) + (self.config.characterWidth * 2) +
"px'>" + space + "</span>"; "px'>" + space + "</span>";
} else if (b) { } else if (b) {
return "<span class='ace_invisible ace_invalid'>" + self.SPACE_CHAR + "</span>"; return "<span class='ace_invisible ace_invisible_space ace_invalid'>" + self.SPACE_CHAR + "</span>";
} else { } else {
screenColumn += 1; screenColumn += 1;
return "<span class='ace_cjk' style='width:" + return "<span class='ace_cjk' style='width:" +
@ -477,7 +481,7 @@ var Text = function(parentEl) {
row = foldLine.end.row row = foldLine.end.row
stringBuilder.push( stringBuilder.push(
"<span class='ace_invisible'>", "<span class='ace_invisible ace_invisible_eol'>",
row == this.session.getLength() - 1 ? this.EOF_CHAR : this.EOL_CHAR, row == this.session.getLength() - 1 ? this.EOF_CHAR : this.EOL_CHAR,
"</span>" "</span>"
); );

18
lib/ace/layer/text_test.js
View file

@ -81,14 +81,14 @@ module.exports = {
this.textLayer.$renderLine(stringBuilder, 0, true); this.textLayer.$renderLine(stringBuilder, 0, true);
assert.equal( assert.equal(
stringBuilder.join(""), stringBuilder.join(""),
"<span class='ace_cjk ace_invisible' style='width:20px'>" + this.textLayer.SPACE_CHAR + "</span>" "<span class='ace_cjk ace_invisible ace_invisible_space' style='width:20px'>" + this.textLayer.SPACE_CHAR + "</span>"
+ "<span class='ace_invisible'>\xB6</span>" + "<span class='ace_invisible ace_invisible_eol'>\xB6</span>"
); );
}, },
"test rendering of indent guides" : function() { "test rendering of indent guides" : function() {
var textLayer = this.textLayer var textLayer = this.textLayer
var EOL = "<span class='ace_invisible'>" + textLayer.EOL_CHAR + "</span>"; var EOL = "<span class='ace_invisible ace_invisible_eol'>" + textLayer.EOL_CHAR + "</span>";
var SPACE = function(i) {return Array(i+1).join("\xa0")} var SPACE = function(i) {return Array(i+1).join("\xa0")}
var DOT = function(i) {return Array(i+1).join(textLayer.SPACE_CHAR)} var DOT = function(i) {return Array(i+1).join(textLayer.SPACE_CHAR)}
var TAB = function(i) {return textLayer.TAB_CHAR + SPACE(i-1)} var TAB = function(i) {return textLayer.TAB_CHAR + SPACE(i-1)}
@ -108,13 +108,13 @@ module.exports = {
]); ]);
this.textLayer.setShowInvisibles(true); this.textLayer.setShowInvisibles(true);
testRender([ testRender([
"<span class='ace_indent-guide ace_invisible'>" + DOT(4) + "</span><span class='ace_invisible'>" + DOT(2) + "</span>" + EOL, "<span class='ace_indent-guide ace_invisible ace_invisible_space'>" + DOT(4) + "</span><span class='ace_invisible ace_invisible_space'>" + DOT(2) + "</span>" + EOL,
"<span class='ace_indent-guide ace_invisible'>" + TAB(4) + "</span><span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL, "<span class='ace_indent-guide ace_invisible ace_invisible_tab'>" + TAB(4) + "</span><span class='ace_invisible ace_invisible_tab'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL,
]); ]);
this.textLayer.setDisplayIndentGuides(false); this.textLayer.setDisplayIndentGuides(false);
testRender([ testRender([
"<span class='ace_invisible'>" + DOT(6) + "</span>" + EOL, "<span class='ace_invisible ace_invisible_space'>" + DOT(6) + "</span>" + EOL,
"<span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_invisible'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL "<span class='ace_invisible ace_invisible_tab'>" + TAB(4) + "</span><span class='ace_invisible ace_invisible_tab'>" + TAB(4) + "</span><span class='ace_identifier'>f</span>" + EOL
]); ]);
} }
}; };