finish cjk support

This commit is contained in:
Fabian Jakobs 2011-01-25 21:37:56 +01:00
commit 149c7c3ff5
4 changed files with 97 additions and 53 deletions

View file

@ -12,6 +12,20 @@
overflow-y: hidden;
}
.ace_content {
position: absolute;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.ace_composition {
position: absolute;
background: #555;
color: #DDD;
z-index: 4;
}
.ace_gutter {
position: absolute;
overflow-x: hidden;
@ -51,8 +65,14 @@
color: black;
}
.ace_cjk {
display: inline-block;
text-align: center;
}
.ace_cursor-layer {
cursor: text;
pointer-events: none;
}
.ace_cursor {

View file

@ -241,8 +241,7 @@ var EditSession = function(text, mode) {
};
this.tokenRe = /^[\w\d]+/g;
this.nonTokenRe = /^[^\w\d|\x00-\xff]+/g;
this.nonTokenRe = /^(?:[^\w\d|[\u3040-\u309F]|[\u30A0-\u30FF]|[\u4E00-\u9FFF\uF900-\uFAFF\u3400-\u4DBF])+/g
this.getWordRange = function(row, column) {
var line = this.getLine(row);
@ -635,18 +634,27 @@ var EditSession = function(text, mode) {
var remaining = docColumn;
var line = this.getLine(row);
for(var i=0; i<line.length; i++){
var c = line[i];
if(remaining > 0){
for (var i=0; i<line.length; i++) {
var c = line.charCodeAt(i);
if (remaining > 0) {
remaining -= 1;
if(c == '\t'){
// tab
if (c == 9) {
screenColumn += tabSize;
} else if(/[^\x00-\xff]/.exec(c)){
screenColumn += 2;
}
// CJK characters
else if (
c >= 0x3040 && c <= 0x309F || // Hiragana
c >= 0x30A0 && c <= 0x30FF || // Katakana
c >= 0x4E00 && c <= 0x9FFF || // Single CJK ideographs
c >= 0xF900 && c <= 0xFAFF ||
c >= 0x3400 && c <= 0x4DBF
) {
screenColumn += 2;
} else {
screenColumn += 1;
}
}else{
} else {
break;
}
}
@ -661,22 +669,42 @@ var EditSession = function(text, mode) {
var remaining = screenColumn;
var line = this.getLine(row);
for(var i=0; i<line.length; i++){
var c = line[i];
if(remaining > 0){
for(var i=0; i<line.length; i++) {
var c = line.charCodeAt(i);
if (remaining > 0) {
docColumn += 1;
if(c == '\t'){
remaining -= tabSize;
} else if(/[^\x00-\xff]/.exec(c)){
remaining -= 2;
// tab
if (c == 9) {
if (remaining >= tabSize) {
remaining -= tabSize;
} else {
remaining = 0;
docColumn -= 1;
}
}
// CJK characters
else if (
c >= 0x3040 && c <= 0x309F || // Hiragana
c >= 0x30A0 && c <= 0x30FF || // Katakana
c >= 0x4E00 && c <= 0x9FFF || // Single CJK ideographs
c >= 0xF900 && c <= 0xFAFF ||
c >= 0x3400 && c <= 0x4DBF
) {
if (remaining >= 2) {
remaining -= 2;
} else {
remaining = 0;
docColumn -= 1;
}
} else {
remaining -= 1;
}
}else{
} else {
break;
}
}
return docColumn;
};

View file

@ -266,6 +266,8 @@ var Text = function(parentEl) {
var spaceReplace = "&nbsp;";
}
var characterWidth = this.config.characterWidth;
for ( var i = 0; i < tokens.length; i++) {
var token = tokens[i];
@ -273,19 +275,11 @@ var Text = function(parentEl) {
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(spaceRe, spaceReplace)
.replace(/\t/g, this.$tabString);
.replace(/\t/g, this.$tabString)
.replace(/[\u3040-\u309F]|[\u30A0-\u30FF]|[\u4E00-\u9FFF\uF900-\uFAFF\u3400-\u4DBF]/g, function(c) {
return "<span class='ace_cjk' style='width:" + (characterWidth * 2) + "px'>" + c + "</span>"
});
var buffer = '';
for (var j=0;j<output.length;j++){
var w = output.charAt(j);
if(/[^\x00-\xff]/.exec(w)){
buffer = buffer + "<span style='width: "+ this.config.characterWidth * 2 +"px; display: inline-block; text-align: center;'>" + w + "</span>";
}else{
buffer = buffer + w;
}
}
output = buffer;
if (!this.$textToken[token.type]) {
var classes = "ace_" + token.type.replace(/\./g, " ace_");
stringBuilder.push("<span class='", classes, "'>", output, "</span>");

View file

@ -67,8 +67,7 @@ var VirtualRenderer = function(container, theme) {
this.container.appendChild(this.scroller);
this.content = document.createElement("div");
this.content.style.cssText = "position:absolute;box-sizing:border-box;" +
"-moz-box-sizing:border-box;-webkit-box-sizing:border-box";
this.content.className = "ace_content";
this.scroller.appendChild(this.content);
this.$gutterLayer = new GutterLayer(this.$gutter);
@ -591,35 +590,38 @@ var VirtualRenderer = function(container, theme) {
};
this.showComposition = function(position) {
var cur = this.$cursorLayer.element.firstChild;
var scroll = this.scroller;
var top = (parseInt(cur.style.top) || 0) + (parseInt(scroll.style.top) || 0);
var left = (parseInt(cur.style.left) || 0) + (parseInt(scroll.style.left) || 0);
var edit = document.getElementById("editor").lastChild;
edit.style.color = '#66ff33';
edit.style.top = (top - 1) + "px";
edit.style.left = (left + 3) + "px";
edit.style.background = "transparent";
edit.style.border = "none";
edit.style.resize = "none";
edit.style.outline = "none";
edit.style.width = "10000px";
edit.style.height = "10000px";
edit.style.fontSize = "12px";
console.log("show composition")
if (!this.$composition) {
this.$composition = document.createElement("div");
this.$composition.className = "ace_composition";
this.content.appendChild(this.$composition);
}
this.$composition.innerHTML = "&nbsp;";
var pos = this.$cursorLayer.getPixelPosition();
var style = this.$composition.style;
style.top = pos.top + "px";
style.left = (pos.left + this.$padding) + "px";
style.height = this.lineHeight + "px";
//style.width = this.characterWidth + "px";
this.hideCursor();
};
this.setCompositionText = function(text) {
this.$composition.innerText = this.$composition.textContent = text;
};
this.hideComposition = function() {
this.showCursor();
var edit = document.getElementById("editor").lastChild;
edit.className = '';
edit.style.top = "-10000px";
edit.style.left = "-10000px";
if (!this.$composition)
return;
var style = this.$composition.style;
style.top = "-10000px";
style.left = "-10000px";
};
this.setTheme = function(theme) {