Added bracket matching

* using CodeMirror addon matchBrackets
* highlights the matching bracket of a pair
* highlights brackets when cursor is inside a pair
* feature usable in source code editor

Bug: T261857
Change-Id: Ib01d9919a47bb29684b54501644b01936b57972a

Gruntfile.js

@@ -21,7 +21,8 @@ module.exports = function ( grunt ) {
 				'**/*.{css,less}',
 				'!resources/lib/**',
 				'!node_modules/**',
-				'!vendor/**'
+				'!vendor/**',
+				'resources/lib/codemirror-fixes.less'
 			]
 		},
 		banana: {

extension.json

@@ -14,6 +14,13 @@
 	"requires": {
 		"MediaWiki": ">= 1.34.0"
 	},
+	"config": {
+		"CodeMirrorEnableBracketMatching": {
+			"value": false,
+			"description": "Temporary feature flag for the matchbrackets addon.",
+			"public": true
+		}
+	},
 	"MessagesDirs": {
 		"CodeMirror": [
 			"i18n"
@@ -56,6 +63,14 @@
 				"lib/codemirror-fixes.less"
 			]
 		},
+		"ext.CodeMirror.addons": {
+			"scripts": [
+				"lib/codemirror/addon/edit/matchbrackets.js"
+			],
+			"dependencies": [
+				"ext.CodeMirror.lib"
+			]
+		},
 		"ext.CodeMirror.mode.mediawiki": {
 			"scripts": "mode/mediawiki/mediawiki.js",
 			"styles": "mode/mediawiki/mediawiki.css",
@@ -151,11 +166,13 @@
 	},
 	"Hooks": {
 		"BeforePageDisplay": "CodeMirrorHooks::onBeforePageDisplay",
-		"GetPreferences": "CodeMirrorHooks::onGetPreferences"
+		"GetPreferences": "CodeMirrorHooks::onGetPreferences",
+		"ResourceLoaderGetConfigVars": "CodeMirrorHooks::onResourceLoaderGetConfigVars"
 	},
 	"attributes": {
 		"CodeMirror": {
 			"PluginModules": [
+				"ext.CodeMirror.addons"
 			],
 			"TagModes": {
 				"pre": "mw-tag-pre",

includes/CodeMirrorHooks.php

@@ -1,5 +1,7 @@
 <?php
 
+use MediaWiki\MediaWikiServices;
+
 class CodeMirrorHooks {
 
 	/**
@@ -44,6 +46,17 @@ class CodeMirrorHooks {
 		}
 	}
 
+	/**
+	 * Hook handler for enabling bracket matching.
+	 *
+	 * @param array &$vars Array of variables to be added into the output of the startup module
+	 */
+	public static function onResourceLoaderGetConfigVars( array &$vars ) {
+		/** @var Config $config */
+		$config = MediaWikiServices::getInstance()->getMainConfig();
+		$vars['wgCodeMirrorEnableBracketMatching'] = $config->get( 'CodeMirrorEnableBracketMatching' );
+	}
+
 	/**
 	 * GetPreferences hook handler
 	 *

resources/ext.CodeMirror.js

@@ -125,7 +125,8 @@
 				},
 				inputStyle: 'contenteditable',
 				spellcheck: true,
-				viewportMargin: Infinity
+				viewportMargin: Infinity,
+				matchBrackets: mw.config.get( 'wgCodeMirrorEnableBracketMatching' )
 			} );
 			$codeMirror = $( codeMirror.getWrapperElement() );
 

resources/lib/codemirror-fixes.less

@@ -4,3 +4,14 @@
 	// See:  http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/
 	font-family: monospace, monospace;
 }
+
+div.CodeMirror span {
+	&.CodeMirror-matchingbracket {
+		color: #fff;
+		background-color: #54595d;
+	}
+
+	&.CodeMirror-nonmatchingbracket {
+		color: inherit;
+	}
+}

resources/lib/codemirror/addon/edit/matchbrackets.js

@@ -0,0 +1,235 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: http://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  var ie_lt8 = /MSIE \d/.test(navigator.userAgent) &&
+    (document.documentMode == null || document.documentMode < 8);
+
+  var Pos = CodeMirror.Pos;
+
+  var matching = {"(": ")>", ")": "(<", "[": "]>", "]": "[<", "{": "}>", "}": "{<"};
+
+	var brackets = {
+		'(': ')',
+		')': false,
+		'[': ']',
+		']': false,
+		'{': '}',
+		'}': false
+	};
+
+	function findSurroundingBrackets( cm, where ) {
+		// FIXME: This currently doesn't respect any limit!
+		var from, to, ch,
+			nestedBracketsToSkip = 0,
+			lineNo = where.line,
+			line = cm.getLine( lineNo ),
+			pos = where.ch;
+
+		// Search forward
+		while ( true ) {
+			if ( pos >= line.length ) {
+				lineNo++;
+				if ( lineNo > cm.lastLine() ) {
+					break;
+				}
+				line = cm.getLine( lineNo );
+				pos = 0;
+				// Continue early to make sure we don't read characters from empty lines
+				continue;
+			}
+
+			// FIXME: Is it possible to use native methods to find the next bracket?
+			ch = line.charAt( pos );
+			if ( ch in brackets ) {
+				// Found a closing bracket that's not part of a nested pair
+				if ( !brackets[ch] && nestedBracketsToSkip <= 0 ) {
+					to = { pos: Pos( lineNo, pos ), char: ch };
+					break;
+				}
+				nestedBracketsToSkip += brackets[ch] ? 1 : -1;
+			}
+
+			pos++;
+		}
+
+		nestedBracketsToSkip = 0;
+		lineNo = where.line;
+		line = cm.getLine( lineNo );
+		pos = where.ch;
+
+		// Search backwards
+		while ( true ) {
+			pos--;
+			if ( pos < 0 ) {
+				lineNo--;
+				if ( lineNo < cm.firstLine() ) {
+					break;
+				}
+				line = cm.getLine( lineNo );
+				pos = line.length;
+				// Continue early to make sure we don't read characters from empty lines
+				continue;
+			}
+
+			// FIXME: Is it possible to use native methods to find the previous bracket?
+			ch = line.charAt( pos );
+			if ( ch in brackets ) {
+				// Found an opening bracket that's not part of a nested pair
+				if ( brackets[ch] && nestedBracketsToSkip <= 0 ) {
+					from = { pos: Pos( lineNo, pos ), expectedToChar: brackets[ch] };
+					break;
+				}
+				nestedBracketsToSkip += brackets[ch] ? -1 : 1;
+			}
+		}
+
+		if ( from && to ) {
+			return {
+				from: from.pos,
+				to: to.pos,
+				match: from.expectedToChar === to.char
+			};
+		} else if ( from ) {
+			return { from: from.pos, match: false };
+		} else if ( to ) {
+			return { from: to.pos, match: false };
+		} else {
+			return null;
+		}
+	}
+
+  function findMatchingBracket(cm, where, config) {
+    var line = cm.getLineHandle(where.line), pos = where.ch - 1;
+    var afterCursor = config && config.afterCursor
+    if (afterCursor == null)
+      afterCursor = /(^| )cm-fat-cursor($| )/.test(cm.getWrapperElement().className)
+
+    // A cursor is defined as between two characters, but in in vim command mode
+    // (i.e. not insert mode), the cursor is visually represented as a
+    // highlighted box on top of the 2nd character. Otherwise, we allow matches
+    // from before or after the cursor.
+    var match = (!afterCursor && pos >= 0 && matching[line.text.charAt(pos)]) ||
+        matching[line.text.charAt(++pos)];
+    if (!match)  return findSurroundingBrackets( cm, where );
+    var dir = match.charAt(1) == ">" ? 1 : -1;
+    if (config && config.strict && (dir > 0) != (pos == where.ch)) return null;
+    var style = cm.getTokenTypeAt(Pos(where.line, pos + 1));
+
+    var found = scanForBracket(cm, Pos(where.line, pos + (dir > 0 ? 1 : 0)), dir, undefined /* style || null */, config);
+    if (found == null) return null;
+    return {from: Pos(where.line, pos), to: found && found.pos,
+            match: found && found.ch == match.charAt(0), forward: dir > 0};
+  }
+
+  // bracketRegex is used to specify which type of bracket to scan
+  // should be a regexp, e.g. /[[\]]/
+  //
+  // Note: If "where" is on an open bracket, then this bracket is ignored.
+  //
+  // Returns false when no bracket was found, null when it reached
+  // maxScanLines and gave up
+  function scanForBracket(cm, where, dir, style, config) {
+    var maxScanLen = (config && config.maxScanLineLength) || 10000;
+    var maxScanLines = (config && config.maxScanLines) || 1000;
+
+    var stack = [];
+    var re = config && config.bracketRegex ? config.bracketRegex : /[(){}[\]]/;
+    var lineEnd = dir > 0 ? Math.min(where.line + maxScanLines, cm.lastLine() + 1)
+                          : Math.max(cm.firstLine() - 1, where.line - maxScanLines);
+    for (var lineNo = where.line; lineNo != lineEnd; lineNo += dir) {
+      var line = cm.getLine(lineNo);
+      if (!line) continue;
+      var pos = dir > 0 ? 0 : line.length - 1, end = dir > 0 ? line.length : -1;
+      if (line.length > maxScanLen) continue;
+      if (lineNo == where.line) pos = where.ch - (dir < 0 ? 1 : 0);
+      for (; pos != end; pos += dir) {
+        var ch = line.charAt(pos);
+        if (re.test(ch) && (style === undefined || cm.getTokenTypeAt(Pos(lineNo, pos + 1)) == style)) {
+          var match = matching[ch];
+          if ((match.charAt(1) == ">") == (dir > 0)) stack.push(ch);
+          else if (!stack.length) return {pos: Pos(lineNo, pos), ch: ch};
+          else stack.pop();
+        }
+      }
+    }
+    return lineNo - dir == (dir > 0 ? cm.lastLine() : cm.firstLine()) ? false : null;
+  }
+
+  function matchBrackets(cm, autoclear, config) {
+    // Disable brace matching in long lines, since it'll cause hugely slow updates
+    var maxHighlightLen = cm.state.matchBrackets.maxHighlightLineLength || 1000;
+    var marks = [], ranges = cm.listSelections();
+    for (var i = 0; i < ranges.length; i++) {
+      var match = ranges[i].empty() && findMatchingBracket(cm, ranges[i].head, config);
+      if (match && cm.getLine(match.from.line).length <= maxHighlightLen) {
+        var style = match.match ? "CodeMirror-matchingbracket" : "CodeMirror-nonmatchingbracket";
+        marks.push(cm.markText(match.from, Pos(match.from.line, match.from.ch + 1), {className: style}));
+        if (match.to && cm.getLine(match.to.line).length <= maxHighlightLen)
+          marks.push(cm.markText(match.to, Pos(match.to.line, match.to.ch + 1), {className: style}));
+      }
+    }
+
+    if (marks.length) {
+      // Kludge to work around the IE bug from issue #1193, where text
+      // input stops going to the textare whever this fires.
+      if (ie_lt8 && cm.state.focused) cm.focus();
+
+      var clear = function() {
+        cm.operation(function() {
+          for (var i = 0; i < marks.length; i++) marks[i].clear();
+        });
+      };
+      if (autoclear) setTimeout(clear, 800);
+      else return clear;
+    }
+  }
+
+  function doMatchBrackets(cm) {
+    cm.operation(function() {
+      if (cm.state.matchBrackets.currentlyHighlighted) {
+        cm.state.matchBrackets.currentlyHighlighted();
+        cm.state.matchBrackets.currentlyHighlighted = null;
+      }
+      cm.state.matchBrackets.currentlyHighlighted = matchBrackets(cm, false, cm.state.matchBrackets);
+    });
+  }
+
+  CodeMirror.defineOption("matchBrackets", false, function(cm, val, old) {
+    if (old && old != CodeMirror.Init) {
+      cm.off("cursorActivity", doMatchBrackets);
+      if (cm.state.matchBrackets && cm.state.matchBrackets.currentlyHighlighted) {
+        cm.state.matchBrackets.currentlyHighlighted();
+        cm.state.matchBrackets.currentlyHighlighted = null;
+      }
+    }
+    if (val) {
+      cm.state.matchBrackets = typeof val == "object" ? val : {};
+      cm.on("cursorActivity", doMatchBrackets);
+    }
+  });
+
+  CodeMirror.defineExtension("matchBrackets", function() {matchBrackets(this, true);});
+  CodeMirror.defineExtension("findMatchingBracket", function(pos, config, oldConfig){
+    // Backwards-compatibility kludge
+    if (oldConfig || typeof config == "boolean") {
+      if (!oldConfig) {
+        config = config ? {strict: true} : null
+      } else {
+        oldConfig.strict = config
+        config = oldConfig
+      }
+    }
+    return findMatchingBracket(this, pos, config)
+  });
+  CodeMirror.defineExtension("scanForBracket", function(pos, dir, style, config){
+    return scanForBracket(this, pos, dir, style, config);
+  });
+});