Is it possible to hide code?

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?

You can use replacing decorations to hide parts of the document.

1 Like

That makes sense, what I’m trying to do is similar to code folding. Thank you!