[jsx mode] Only recognize comments inside of tags

Issue #3745

mode/jsx/jsx.js

@@ -11,6 +11,9 @@
 })(function(CodeMirror) {
   "use strict"
 
+  // Depth means the amount of open braces in JS context, in XML
+  // context 0 means not in tag, 1 means in tag, and 2 means in tag
+  // and js block comment.
   function Context(state, mode, depth, prev) {
     this.state = state; this.mode = mode; this.depth = depth; this.prev = prev
   }
@@ -23,7 +26,7 @@
   }
 
   CodeMirror.defineMode("jsx", function(config) {
-    var xmlMode = CodeMirror.getMode(config, {name: "xml", allowMissing: true})
+    var xmlMode = CodeMirror.getMode(config, {name: "xml", allowMissing: true, multilineTagIndentPastTag: false})
     var jsMode = CodeMirror.getMode(config, "javascript")
 
     return {
@@ -38,8 +41,8 @@
       token: function(stream, state) {
         var cx = state.context
         if (cx.mode == xmlMode) {
-          if (cx.depth) { // Inside a JS /* */ comment
-            if (stream.match(/^.*?\*\//)) cx.depth = 0
+          if (cx.depth == 2) { // Inside a JS /* */ comment
+            if (stream.match(/^.*?\*\//)) cx.depth = 1
             else stream.skipToEnd()
             return "comment"
           } else if (stream.peek() == "{") {
@@ -47,21 +50,27 @@
             var tagName = cx.state.tagName
             cx.state.tagName = null
             state.context = new Context(CodeMirror.startState(jsMode, xmlMode.indent(cx.state, "")),
-                                        jsMode, 1, state.context)
+                                        jsMode, 0, state.context)
             cx.state.tagName = tagName
-            return jsMode.token(stream, state.context.state)
-          } else if (stream.match("//")) {
+            return this.token(stream, state)
+          } else if (cx.depth == 1 && stream.match("//")) {
             stream.skipToEnd()
             return "comment"
-          } else if (stream.match("/*")) {
-            cx.depth = 1
+          } else if (cx.depth == 1 && stream.match("/*")) {
+            cx.depth = 2
             return this.token(stream, state)
           } else { // FIXME skip attribute
-            var style = xmlMode.token(stream, cx.state), cur, stop
-            if (/\btag\b/.test(style) && !cx.state.context && /^\/?>$/.test(stream.current()))
-              state.context = state.context.prev
-            else if (!style && (stop = (cur = stream.current()).search(/\{|\/[*\/]/)) > -1)
+            var style = xmlMode.token(stream, cx.state), cur = stream.current(), stop
+            if (/\btag\b/.test(style)) {
+              if (/>$/.test(cur)) {
+                if (cx.state.context) cx.depth = 0
+                else state.context = state.context.prev
+              } else if (/^</.test(cur)) {
+                cx.depth = 1
+              }
+            } else if (!style && (stop = cur.indexOf("{")) > -1) {
               stream.backUp(cur.length - stop)
+            }
             return style
           }
         } else { // jsMode
@@ -69,7 +78,7 @@
             jsMode.skipExpression(cx.state)
             state.context = new Context(CodeMirror.startState(xmlMode, jsMode.indent(cx.state, "")),
                                         xmlMode, 0, state.context)
-            return xmlMode.token(stream, state.context.state)
+            return this.token(stream, state)
           } else {
             var style = jsMode.token(stream, cx.state)
             if (!style && cx.depth != null) {

mode/jsx/test.js

@@ -34,13 +34,22 @@
      "[variable x] [operator =] [string-2 `quasi${][bracket&tag <][tag foo][bracket&tag />][string-2 }quoted`]")
 
   MT("line_comment",
-     "([bracket&tag <][tag foo][bracket&tag >] [comment // hello]",
+     "([bracket&tag <][tag foo] [comment // hello]",
+     "   [bracket&tag ></][tag foo][bracket&tag >][operator ++])")
+
+  MT("line_comment_not_in_tag",
+     "([bracket&tag <][tag foo][bracket&tag >] // hello",
      "  [bracket&tag </][tag foo][bracket&tag >][operator ++])")
 
   MT("block_comment",
-     "([bracket&tag <][tag foo][bracket&tag >] [comment /* hello]",
-     "[comment     line 2]",
-     "[comment     line 3 */] [bracket&tag </][tag foo][bracket&tag >][operator ++])")
+     "([bracket&tag <][tag foo] [comment /* hello]",
+     "[comment    line 2]",
+     "[comment    line 3 */] [bracket&tag ></][tag foo][bracket&tag >][operator ++])")
+
+  MT("block_comment_not_in_tag",
+     "([bracket&tag <][tag foo][bracket&tag >]/* hello",
+     "    line 2",
+     "    line 3 */ [bracket&tag </][tag foo][bracket&tag >][operator ++])")
 
   MT("missing_attr",
      "([bracket&tag <][tag foo] [attribute selected][bracket&tag />][operator ++])")