Make monaco editor work offline

[Janpot]

Get rid of the @monaco-editor/react wrapper and write a custom React/Monaco integration.

Fixes #615

[render]

Your Render PR Server URL is https://toolpad-pr-619.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cavo8vsgqg4ftip1ccmg.

[mbrookes]

write a custom React/Monaco integration

🤯

[Janpot]

Having more issues in CI than expected, converting to draft again

challenges faced in this PR:

• monaco requires being able to load workers from url. It also imports CSS in its source files.
• There is no official microsoft react wrapper for monaco, despite its name @monaco-editor/react is a 3rd party wrapper.
• I'm using monaco-editor-webpack-plugin to build the workers. Next.js webpack setup supports loading workers now.
• I inlined the css parts from next-transpile-modules. Using next-transpile-modules directly has too many issues. It makes it so the javascript is compiled as well and the the SWC compiler in next.js seems to compile them incorrectly. babel is too slow. We only need the css extracted.
  • yet it's still causing memory issues in CI. upgrading to a medium+ resource class helped. Trying to optimize the setup.
• The react wrapper interface itself is similar to the @monaco-editor/react. We're going to use suspense to load the component instead.
• Works well locally, in dev mode. But the docker smoke test is still failing and I'm seeing weird artificts in render.com. getting rid of monaco-editor-webpack-plugin seems to have solved this.

[mbrookes]

Awesome work @Janpot !