finish cjk support

lib/ace/css/editor.css

@@ -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 {

lib/ace/edit_session.js

@@ -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++){
+		for (var i=0; i<line.length; i++) {
-			var c = line[i];
+			var c = line.charCodeAt(i);
-			if(remaining > 0){
+			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++){
+		for(var i=0; i<line.length; i++) {
-			var c = line[i];
+			var c = line.charCodeAt(i);
-			if(remaining > 0){
+    		        
+			if (remaining > 0) {
 				docColumn += 1;
-				if(c == '\t'){
+    			// tab
-					remaining -= tabSize;
+				if (c == 9) {
-				} else if(/[^\x00-\xff]/.exec(c)){
+    			    if (remaining >= tabSize) {
-					remaining -= 2;
+					    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;
     };
 

lib/ace/layer/text.js

@@ -266,6 +266,8 @@ var Text = function(parentEl) {
             var spaceReplace = " ";
         }
 
+        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>");

lib/ace/virtual_renderer.js

@@ -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;" +
+    this.content.className = "ace_content";
-        "-moz-box-sizing:border-box;-webkit-box-sizing:border-box";
     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;
+        console.log("show composition")
-		var scroll = this.scroller;
+		if (!this.$composition) {
-		var top = (parseInt(cur.style.top) || 0) + (parseInt(scroll.style.top) || 0);
+    	    this.$composition = document.createElement("div");
-		var left = (parseInt(cur.style.left) || 0) + (parseInt(scroll.style.left) || 0);
+            this.$composition.className = "ace_composition";
-
+            this.content.appendChild(this.$composition);
-		var edit = document.getElementById("editor").lastChild;
+		}
-		edit.style.color = '#66ff33';
+    	
-		edit.style.top = (top - 1) + "px";
+        this.$composition.innerHTML = " ";
-		edit.style.left = (left + 3) + "px";
+        
-		edit.style.background = "transparent";
+        var pos = this.$cursorLayer.getPixelPosition();
-		edit.style.border = "none";
+    	var style = this.$composition.style;
-		edit.style.resize = "none";
+		style.top = pos.top + "px";
-		edit.style.outline = "none";
+		style.left = (pos.left + this.$padding) + "px";
-		edit.style.width = "10000px";
+    	style.height = this.lineHeight + "px";
-		edit.style.height = "10000px";
+    	//style.width = this.characterWidth + "px";
-		edit.style.fontSize = "12px";
+    	
-		
 		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 = '';
+        if (!this.$composition)
-		edit.style.top = "-10000px";
+            return;
-		edit.style.left = "-10000px";
+            
+    	var style = this.$composition.style;
+		style.top = "-10000px";
+		style.left = "-10000px";
     };
 
     this.setTheme = function(theme) {