Merge pull request #1996 from adamjimenez/jump-to-matching-tag

Jump To Matching Tag

lib/ace/editor.js

@@ -2000,25 +2000,158 @@ var Editor = function(renderer, session) {
     };
 
     /**
-     * Moves the cursor's row and column to the next matching bracket.
+     * Moves the cursor's row and column to the next matching bracket or HTML tag.
      *
      **/
     this.jumpToMatching = function(select) {
         var cursor = this.getCursorPosition();
+        var iterator = new TokenIterator(this.session, cursor.row, cursor.column);
+        var prevToken = iterator.getCurrentToken();
+        var token = prevToken;
 
-        var range = this.session.getBracketRange(cursor);
+        if (!token)
+            token = iterator.stepForward();
+
+        if (!token)
+            return;
+
+        //get next closing tag or bracket
+        var matchType;
+        var found = false;
+        var depth = {};
+        var i = cursor.column - token.start;
+        var bracketType;
+        var brackets = {
+            ")": "(",
+            "(": "(",
+            "]": "[",
+            "[": "[",
+            "{": "{",
+            "}": "{"
+        };
+        
+        do {
+            if (token.value.match(/[{}()\[\]]/g)) {
+                for (; i<token.value.length && !found; i++) {
+                    if (!brackets[token.value[i]]) {
+                        continue;
+                    }
+
+                    bracketType = brackets[token.value[i]]+'.'+token.type.replace("rparen", "lparen");
+
+                    if (isNaN(depth[bracketType])) {
+                        depth[bracketType] = 0;
+                    }
+
+                    switch (token.value[i]) {
+                        case '(':
+                        case '[':
+                        case '{':
+                            depth[bracketType]++;
+                        break;
+                        case ')':
+                        case ']':
+                        case '}':
+                            depth[bracketType]--;
+                            
+                            if (depth[bracketType]===-1) {
+                                matchType = 'bracket';
+                                found = true;
+                            }
+                        break;
+                    }
+                }
+            } else if (token && token.type.indexOf('tag-name') !== -1) {
+                if (isNaN(depth[token.value])) {
+                    depth[token.value] = 0;
+                }
+                
+                if (prevToken.value === '<') {
+                    depth[token.value]++;
+                } else if (prevToken.value === '</') {
+                    depth[token.value]--;
+                }
+                
+                if (depth[token.value] === -1) {
+                    matchType = 'tag';
+                    found = true;
+                }
+            }
+
+            if (!found) {
+                prevToken = token;
+                token = iterator.stepForward();
+                i = 0;
+            }
+        } while (token && !found);
+
+        //no match found
+        if (!matchType) {
+            return;
+        }
+
+        var range;
+        if (matchType==='bracket') {
+            range = this.session.getBracketRange(cursor);
             if (!range) {
-            range = this.find({
+                range = new Range(
-                needle: /[{}()\[\]]/g,
+                    iterator.getCurrentTokenRow(), 
-                preventScroll:true,
+                    iterator.getCurrentTokenColumn()+i-1,
-                start: {row: cursor.row, column: cursor.column - 1}
+                    iterator.getCurrentTokenRow(), 
-            });
+                    iterator.getCurrentTokenColumn()+i-1
+                );
                 if (!range)
                     return;
                 var pos = range.start;
-            if (pos.row == cursor.row && Math.abs(pos.column - cursor.column) < 2)
+                if (pos.row === cursor.row && Math.abs(pos.column - cursor.column) < 2)
                     range = this.session.getBracketRange(pos);
             }
+        } else if(matchType==='tag') {
+            if (token && token.type.indexOf('tag-name') !== -1)
+                var tag = token.value;
+            else
+                return;
+
+            var range = new Range(
+                iterator.getCurrentTokenRow(), 
+                iterator.getCurrentTokenColumn()-2, 
+                iterator.getCurrentTokenRow(), 
+                iterator.getCurrentTokenColumn()-2
+            );
+
+            //find matching tag
+            if (range.compare(cursor.row, cursor.column) === 0) {
+                found = false;
+                do {
+                    token = prevToken;
+                    prevToken = iterator.stepBackward();
+                    
+                    if (prevToken) {
+                        if (prevToken.type.indexOf('tag-close') !== -1) {
+                            range.setEnd(iterator.getCurrentTokenRow(), iterator.getCurrentTokenColumn()+1);
+                        }
+
+                        if (token.value === tag && token.type.indexOf('tag-name') !== -1) {
+                            if (prevToken.value === '<') {
+                                depth[tag]++;
+                            } else if ( prevToken.value === '</') {
+                                depth[tag]--;
+                            }
+                            
+                            if (depth[tag]===0)
+                                found = true;
+                        }
+                    }
+                } while (prevToken && !found);
+            }
+
+            //we found it
+            if (token && token.type.indexOf('tag-name')) {
+                var pos = range.start;
+                if (pos.row == cursor.row && Math.abs(pos.column - cursor.column) < 2)
+                    pos = range.end;
+            }
+        }
 
         pos = range && range.cursor || pos;
         if (pos) {