Add monaco editor and remove old one

[LuisDuarte1]

This PR removes the old editor, in favor of the Monaco editor. Monaco is the editor that powers VSCode, has many shortcuts that everybody is used to, and has some usability features that make the UX more pleasant.

[limwa]

Hey, thanks for your PR! I'll be testing this over the coming weeks (I'm a bit busy at the moment) to clarify some of my main concerns:

• Usability on mobile
• Bundle size
• General UI/UX

I'll then let you know if this will be integrated as it is or if further changes are required! Thank you once again!

[limwa]

I'll also be creating a new deployment at https://jmm-monaco-editor.up.railway.app/ with the changes in this PR. I'll post a message once this is done!

[limwa]

Deployed to https://jmm-monaco-editor.up.railway.app/

[LuisDuarte1]

Usability on mobile

I've noticed that tab switching doesn't work anymore on mobile 😅 probably due to some Monaco shenanigans, however, the editor itself is usable on mobile just more difficult to take advantage of Monaco's full features ^^

Bundle size

Compared with the main version the bundle increases from ~+-500KB to 1.25MB (with Gzip enabled) (a 2.5x increase) however, I've noticed that the monaco-editor bundle is not getting cached because for some reason it's getting fetched with a Pragma: no-cache header at least on Firefox. I can look at it later.

General UI/UX

In general, it maintains all UI/UX features from the old version with the bonus that you have powerful shortcuts, and the command palette and feel more at home if you are a VSCode user ^^.

[limwa]

One thing that I immediately noticed is that the theme is different. I know that the themes used in shiki are compatible with VS Code. Any way to bring them back?

[LuisDuarte1]

One thing that I immediately noticed is that the theme is different. I know that the themes used in Shiki are compatible with VS Code. Any way to bring them back?

Do you mean the editor theme itself or the code highlighting colors? The Monaco editor comes with two default themes vs-dark and light but you can add new ones manually.

It's possible to integrate back Shiki with @shikijs/monaco. I don't know if it's worth it considering the bundle size because the Monaco one is sufficiently good in my opinion, wdyt?