Problem with indent patterns


#1

Hi,

I’m maintaining the ReactJS grammar plugin for Atom. As Atom now has auto indent on paste on by default. I decided to try to implement the correct indent rules for React/JSX. As JSX is pretty close to XML I have been able to use the XML grammars indention rules as a starting point, but then I ran into a problem with self closing tags. As JSX tags tend to be long and filled with multiple arguments, developers split the attributes into multiple rows.

function () {
  return (
    <div>
      <img
          src="http://example.com/1"
          style={{..}} />
      <img
          src="http://example.com/2"
          style={{..}} />
      <img
          src="http://example.com/3"
          style={{..}} />
    </div>
  )
}

My current rules indent it in this way

  function () {
    return (
      <div>
        <img
          src="http://example.com/1"
          style={{..}} />
          <img
            src="http://example.com/2"
            style={{..}} />
            <img
              src="http://example.com/3"
              style={{..}} />
            </div>
          )
        }

My increase rule is

((^|=|return)\s*<(([^!\/?])(?!.+?([\/]>|<\/.+?>))|\s*$))

And decrease rule is

^\s*<\/[^>]+>

As the attributes can basically contain any characters I have no way to safely define a increase rule that would cover the multiline self closing tag.

Question goes:
Is there any way to define something like “decreaseIndentOnNextLinePattern” and make it match the end (/>) of a self closing tag?