Feature request: Monaco Editor integration option?

Tell us how you think we can improve Sandpack

Packages affected

• sandpack-client
• sandpack-react

What is this feature?

• An option to use VS Code’s Monaco editor. Codesandbox website uses Monaco, so it would be nice to have a similar experience when cross over between the sandpack version and the codesanbox website (when you click the codesandbox logo in sandpack at the bottom right)

How would your idea work?

• Ideally the API and setup would not be too different from using the existing @codesanbox/sandpack-react package.
• TODO: need to dig into monaco-react package & report API differences & ease of integration

Thoughts regarding monaco-editor

VS Code’s team’s monaco code editor has lots of nice conveniences built right out of the box for a nice text editing experience that code mirror doesn’t have out of the box & require downloading multiple code-mirror add on packages & composing them together

• hover annotations
• peek definition (this can potentially be used to peek content of other files that are already in the sandpack sandbox of the user.
• option clicking editor brings context menu
• command palete
• find all references

https://user-images.githubusercontent.com/6743796/149833470-197826fb-e235-46de-952e-442a1fe0782e.mp4

Demo link (thanks to @aboveyunhai from this Github Discussion #237 )

• https://playground-brainstorm-git-monaco-editor-react-4ed6d5-anubra266.vercel.app/

Questions

Hi @danilowoz,

1. Has the team thought about monaco integration in the past?
   • I’m probably mixing context & the technical tradeoffs that were made to avoiding getting trapped in the same rabbit holes
2. What area of the codebase would I need to look at to help enable this feature if I were to start a new feature branch?
3. What level of difficulty or size would you rate this task for a new contributor in this codebase?

Thanks 🙏

References

• monaco-react by @suren-atoyan
• code mirror discussion on running a typescript language server in the browser
• @typescript/vfs - A map based TypeScript Virtual File System
  • Run typeScript in the browser
  • Run virtual TypeScript environments where files on disk aren’t the source of truth

[danilowoz]

Hey all, thanks for raising this issue!

Although I wasn’t here when this decision of CodeMirror over Monaco was made, I think I can understand some of the reasons and highlight them here:

• Mobile support: Monaco doesn’t have great mobile support, and this is crucial for Sandpack to deliver a uniform experience throughout all types of devices;
• Final bundle size: CodeMirror provides an easy way to load only the modules/extensions we want to, which gives us the possibility to lazy-loading and code-splitting the CodeEditor component. Meanwhile, Monaco is a heavy package, and that’s why CodeSandbox.io/CodeSandbox Embeds also defaults to CodeMirror in the mobile version (due to the previous reason too);
• Extensibility: TBH, I haven’t had many experiences with Monaco before, but I can tell what I’ve heard, and Monaco makes it hard to customize and extend some configuration - and Monaco provides a great API to extensions, which pretty much solved many of our problems;

Plus, Sandpack is designed to be extensible and provide a basic (but powerful) development experience, so the initial goal was never to support any language server by default but to provide ways (API, documentation, support) for the application consumer (you) implement it by yourself.

Typescript integration So what’s the point of the #237 discussion? We want to empower Sandpack users to use their favorite tools and working environment, but by doing it as an “extension” and not as a built-in solution. Similar to the approach we took with Prettier and Eslint, we would like to introduce more guides/recipes of how to do it by yourself and customize it in your favor, based on your needs.

Still want to use Monaco? In fact, you can easily switch from CodeMirror to Monaco at your end, as Sandpack exposes all the APIs needed to implement it. Here is an example using Monaco in Sandpack:

• Sandbox: https://codesandbox.io/s/sandpack-monaco-integration-citxd?file=/src/App.tsx
• Preview: https://citxd.csb.app/

Hope it makes clear this whole situation around the LSP and the editor options. Any further questions, I’m more than happy to answer them, otherwise, I’d close this issue. 😀

[cliffordfajardo]

Thanks for the awesome responses with added context! 🙏 going to close this issue

If anyone else stumbles on this thread, found another good read on monaco vs codemirror technical blog post

• https://blog.replit.com/code-editors
• https://github.com/codesandbox/sandpack/discussions/237