Improve commenting of JSX

I detected some problems with jsx comments.

Uncomment doesn’t work

If I comment one line and then uncomment it, some curlybraces are being leaved behind.

before after should be

Indentation spaces shouldn’t be included on the comment

before after should be

Inner component is not commented if indentation spaces are not selected

If you select a component like in the next screenshot the comment shortcut doesn’t work

Use normal javascript comments instead of jsx when the code is inside parenthesis ()

before after should be

The javascript that Im using for this examples

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

[RiseOoi]

Will this be of any use?

https://programmingliftoff.com/enable-jsx-commenting-sublime-text-3/

[dortamiguel]

Looks Like vscode handle jsx comments very good, maybe it can be useful for some inspiration.