Add folding and behaviours for JSX

[mkslanc]

Issue #, if available:

Description of changes:

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Attention: Patch coverage is 95.79832% with 5 lines in your changes are missing coverage. Please review.

Project coverage is 86.63%. Comparing base (7dcfa41) to head (69c3fd9).
Report is 22 commits behind head on master.

Files	Patch %	Lines
src/edit_session/bracket_match.js	71.42%	2 Missing ⚠️
src/mode/folding/javascript.js	90.47%	2 Missing ⚠️
src/mode/folding/xml.js	85.71%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5479      +/-   ##
==========================================
+ Coverage   86.52%   86.63%   +0.10%     
==========================================
  Files         584      592       +8     
  Lines       42410    42812     +402     
  Branches     7060     7114      +54     
==========================================
+ Hits        36696    37090     +394     
- Misses       5714     5722       +8     

Flag	Coverage Δ
unittests	86.63% <95.79%> (+0.10%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nightwing]

This does not work for several cases

• return <> should become return <></>
• <div>|</div> enter should indent properly
• <div x={> should insert the closing }

[nightwing]

@mkslanc i think this should fix the issues with highlighting without adding much complexity, could you please take a look, and add tests for pairing in x=`${`; and x=<a href={>

[mkslanc]

@mkslanc i think this should fix the issues with highlighting without adding much complexity, could you please take a look, and add tests for pairing in x=`${`; and x=<a href={>

Thank you! Sure, will do

[akoreman]

Looks pretty good! I played around a bit with it and noticed one weird thing. In the video, the first time I insert <div> it doesn't auto-close and only the closing tag gets highlighted. If I do the same thing again below it, it does function as expected.

Screen.Recording.2024-04-12.at.13.48.46.mov

[nightwing]

@akoreman The issue here is that after } our tokenizer is unable to distinguish between

q=function a(){
}
<div></div>

case when < is supposed to be treated as less than operator and

function a(){
}
<div></div>

where it is compiled as jsx tag.

same issue is present for regular expressions too, but since tags are usually not written in that context i am not sure if we need to add extra state for this case.

[akoreman]

ah yeah that makes sense, in that case it should only occur in the scenario I used in the video which should not occur in valid JSX/TSX files anyway.