add support for overwrite/insert mode

css/tm.css

@@ -27,10 +27,14 @@
 }
 
 .cursor {
-  width: 2px;
-  background: black;
+  border-left: 2px solid black;
 }
 
+.cursor.overwrite {
+  border-left: 0px;
+  border-bottom: 1px solid black;
+}
+        
 .line .invisible {
   color: rgb(191, 191, 191);
 }

src/ace/Editor.js

@@ -150,7 +150,7 @@ ace.Editor = function(renderer, doc) {
 
     this.onCursorChange = function() {
         this.$highlightBrackets();
-        this.renderer.updateCursor(this.getCursorPosition());
+        this.renderer.updateCursor(this.getCursorPosition(), this.$overwrite);
 
         if (!this.$blockScrolling) {
             this.renderer.scrollCursorIntoView();
@@ -295,6 +295,15 @@ ace.Editor = function(renderer, doc) {
         if (!this.selection.isEmpty()) {
             var cursor = this.doc.remove(this.getSelectionRange());
             this.clearSelection();
+        } else if (this.$overwrite){
+            var range = {
+                start: cursor,
+                end: {
+                  row: cursor.row,
+                  column: cursor.column + text.length
+                }
+            };
+            this.doc.remove(range);
         }
 
         var lineState = this.bgTokenizer.getState(cursor.row-1);
@@ -329,6 +338,25 @@ ace.Editor = function(renderer, doc) {
         this.renderer.scrollCursorIntoView();
     };
 
+    this.$overwrite = false;
+    this.setOverwrite = function(overwrite) {
+        if (this.$overwrite == overwrite) return;
+
+        this.$overwrite = overwrite;
+
+        this.$blockScrolling = true;
+        this.onCursorChange();
+        this.$blockScrolling = false;
+    };
+
+    this.getOverwrite = function() {
+        return this.$overwrite;
+    };
+
+    this.toggleOverwrite = function() {
+        this.setOverwrite(!this.$overwrite);
+    };
+
     this.$selectionStyle = "line";
     this.setSelectionStyle = function(style) {
         if (this.$selectionStyle == style) return;

src/ace/KeyBinding.js

@@ -43,6 +43,7 @@ ace.KeyBinding = function(element, editor) {
         38 : "Up",
         39 : "Right",
         40 : "Down",
+        45 : "Insert",
         46 : "Delete",
         91 : "Meta"
     };
@@ -79,6 +80,10 @@ ace.KeyBinding = function(element, editor) {
         this.editor.find(needle);
     };
 
+    this["Insert"] = function() {
+        this.editor.toggleOverwrite();
+    };
+
     this["Control-Alt-Up"] = function() {
         this.editor.copyLinesUp();
     };

src/ace/VirtualRenderer.js

@@ -169,8 +169,8 @@ ace.VirtualRenderer = function(container) {
         this.markerLayer.removeMarker(markerId);
     };
 
-    this.updateCursor = function(position) {
-        this.cursorLayer.setCursor(this.$documentToScreenPosition(position));
+    this.updateCursor = function(position, overwrite) {
+        this.cursorLayer.setCursor(this.$documentToScreenPosition(position), overwrite);
         this.cursorLayer.update(this.layerConfig);
     };
 

src/ace/layer/Cursor.js

@@ -13,11 +13,16 @@ ace.layer.Cursor = function(parentEl) {
 
 (function() {
 
-    this.setCursor = function(position) {
+    this.setCursor = function(position, overwrite) {
         this.position = {
             row : position.row,
             column : position.column
         };
+        if (overwrite) {
+            ace.addCssClass(this.cursor, "overwrite");
+        } else {
+            ace.removeCssClass(this.cursor, "overwrite");
+        }
     };
 
     this.hideCursor = function() {
@@ -74,6 +79,7 @@ ace.layer.Cursor = function(parentEl) {
         this.cursor.style.left = cursorLeft + "px";
         this.cursor.style.top = (cursorTop - (config.firstRow * config.lineHeight))
                 + "px";
+        this.cursor.style.width = config.characterWidth + "px";
         this.cursor.style.height = config.lineHeight + "px";
 
         if (this.isVisible) {