JSX Mode: incorrectly highlights inner content

[rubencarvalho]

Describe the bug

JSX code is incorrectly highlighted (the element's inner content is being tokenised).

Expected Behavior

None of the words in the inner content of the elements should be highlighted.
GitHub's JSX syntax highlighting shows it best:

import * as React from "react";
export default () => {
  return (
    <div variant="p">
      When you launch an instance, the instance class that
      you specify determines the hardware of the host
      computer used for your instance. Each instance class
      offers different compute, memory, and storage
      capabilities. Choose an instance class based on the
      requirements of the application or software that you
      plan to run on your instance.
    </div>
  );
}

Reproduction Steps

1. Go to https://ace.c9.io/build/kitchen-sink.html
2. Set the mode to JSX
3. Delete the document's contents
4. Paste the following:

import * as React from "react";
export default () => {
  return (
    <div variant="p">
      When you launch an instance, the instance class that
      you specify determines the hardware of the host
      computer used for your instance. Each instance class
      offers different compute, memory, and storage
      capabilities. Choose an instance class based on the
      requirements of the application or software that you
      plan to run on your instance.
    </div>
  );
}

Possible Solution

Fix the JSX highlighting rules.

Additional Information/Context

No response

Ace Version / Browser / OS / Keyboard layout

Ace Version 1.32.3 (latest)

[InspiredGuy]

Hey, thank you for the report. This doesn't look nice indeed. You could try to substitute JSX mode for TSX while we look into it.

[InspiredGuy]

#5451 with a fix for this issue was merged and will be available in the next release.