Select code editor component and finalize UX

[wesbillman]

We are currently using Codemirror for our editor.

In the past we have used Monaco, which was great and maybe the best option for us, but had some layout/resizing issues that need to be solved.

Another great option is Ace editor.

A good example experience we should use as inspiration is the Rust Playground. The layout and resizing is seamless and I really like the way the output window appears after a request is sent.

• Evaluate and select a text editor component
• Integrate and implement necessary features
  • Json Schema Validation
  • Syntax highlighting
  • Light/Dark mode switching
  • etc.
• Layout
  • Show output only if there is something to show
  • Make output resizeable

[deniseli]

• Let's stick with codemirror6. It's a close race between that and monaco, but codemirror, esp v6, is way lighter weight and plays better with a modern js ecosystem. I messed around with fixing a few bugs to test out the dev experience and it's solid enough.
• Core features seem pretty solid already. Main issues outstanding are:
  • It doesn't feel like a real editor. e.g. tab doesn't work. I'll pick that up next.
  • There are quite a few bugs around how we maintain the content of the request editor. I started fixing the localStorage one, but fixing that just exposes other state management bugs that are even more obvious, so I'm setting that change aside to fix it all in the redesign.
• Layout was fixed in the PR above (fix: clean up codemirror panel resizing #2472)