Highlight matching HTML tag

fixes #1308

lib/ace/editor.js

@@ -48,6 +48,7 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
 var CommandManager = require("./commands/command_manager").CommandManager;
 var defaultCommands = require("./commands/default_commands").commands;
 var config = require("./config");
+var TokenIterator = require("./token_iterator").TokenIterator;
 
 /**
  * The main entry point into the Ace functionality.
@@ -534,6 +535,83 @@ var Editor = function(renderer, session) {
                 self.session.$bracketHighlight = self.session.addMarker(range, "ace_bracket", "text");
         }, 50);
     };
+    
+    this.$highlightTags = function() {
+        var session = this.session;
+
+        if (session.$tagHighlight) {
+            session.removeMarker(session.$tagHighlight);
+            session.$tagHighlight = null;
+        }
+
+        if (this.$highlightTagPending) {
+            return;
+        }
+
+        // perform highlight async to not block the browser during navigation
+        var self = this;
+        this.$highlightTagPending = true;
+        setTimeout(function() {
+            self.$highlightTagPending = false;
+            
+            var pos = editor.getCursorPosition();
+            var iterator = new TokenIterator(self.session, pos.row, pos.column);
+            var token = iterator.getCurrentToken();
+            
+            if( !token || token.type.indexOf('tag-name') === -1 ){
+                return;
+            }
+
+            var tag = token.value;
+            var depth = 0;
+            var prevToken = iterator.stepBackward();
+            
+            if (prevToken.value == '<'){
+                //find closing tag
+                do {
+                    prevToken = token;
+                    token = iterator.stepForward();
+                    
+                    if (token && token.value === tag && token.type.indexOf('tag-name') !== -1) {
+                        if (prevToken.value==='<'){
+                            depth++;
+                        } else if (prevToken.value==='</'){
+                            depth--;
+                        }
+                    }
+                    
+                } while (token && depth>=0);
+            }else{
+                //find opening tag
+                do {
+                    token = prevToken;
+                    prevToken = iterator.stepBackward();
+                    
+                    if(token && token.value === tag && token.type.indexOf('tag-name') !== -1) {
+                        if (prevToken.value==='<') {
+                            depth++;
+                        } else if( prevToken.value==='</') {
+                            depth--;
+                        }
+                    }
+                } while (prevToken && depth<=0);
+                
+                //select tag again
+                iterator.stepForward();
+            }
+            
+            if (!token) {
+                return;
+            }
+
+            var row = iterator.getCurrentTokenRow();
+            var column = iterator.getCurrentTokenColumn();
+            var range = new Range(row, column, row, column+token.value.length);
+
+            if (range)
+                self.session.$tagHighlight = self.session.addMarker(range, "ace_bracket", "text");
+        }, 50);
+    };
 
     /**
      *