possible easy solution for splitting neighbouring JSX/HTML elements?

[ZeChArtiahSaher]

Stacked up JSX Elements in React/TS example:

_ - cursor on the next character

function Element() {
  return (
    <Button a b c d> ... </Button>
    _<Button a b c d> ... </Button>
  )
}

Instead of getting something like this on the first try:

<Button a b c d> ... </Button>
_<Button 
  a 
  b 
  c 
  d> ... </Button>

It first rolls up:

<Button a b c d> ... </Button>_<Button a b c d> ... </Button>

And then does the split:

<Button a b c d> ... </Button>_<Button 
  a 
  b 
  c 
  d> ... </Button>

Also the placement of the cursor doesn't seem to affect the outcome much.

Edit: Interestingly enough when joining, it does those two moves at once. 1. gets rid of the newline separating the two tags and merges the attributes onto one line.

So my assumption is: somehow with stacked tsx/xml/html tags (separated by a newline) the newline that precedes the target node gets removed in both split/join cases

[Wansmer]

This only happens in tsx, in html and jsx it works as expected. This is because for some unknown reason the tsx parser detects the beginning of the tag on the previous line. You can see this by using :InspectTree<Cr>.

This behavior is independent of treesj. I too hope that the developer of the parser for tsx will fix this, as it was fixed in the parser for javascript/jsx.

[ZeChArtiahSaher]

Ty, will a look at the parser repo at some point!