I’m working on a design tool that includes a CM6-powered code editor. I’ve configured the editor to essentially only allow editing of the inside of a React render function. For example:
<>
<button>Click me</button>
<input value="hello" />
</>
However, I’d like to take it a step further and remove the need for a wrapping React fragment, so that code can be written like this:
<button>Click me</button>
<input value="hello" />
As you might expect, this confuses the javascript jsx parser, which in turn breaks syntax highlighting and autocompletion.
What would be the best way to approach this problem? Is it possible to have “hidden” code that is not shown in the editor? Or is the best option for me to write my own custom JSX parsing extension?