As we found our choice didn't allow real time editing, we needed to start again to look for a package. We found 2 choices: Monaco Editor (used by Visual Studio) and CodeMirror.
PS. Highlightjs could do the work but it's via an unofficial package highlighted-code.
| Monaco | CodeMirror | |
|---|---|---|
| Editing and highlighting in real time | ✅ | ✅ |
| Language support (javascript) | ✅ | ✅ |
| Extendible | ✅ | ✅ |
| Autocomplete, IntelliSense | ✅advanced | ✅basic |
| Themes and customization | ✅ | ⛔ few available |
| License | ✅MIT | ✅MIT |
| Documentation | ✅ | ✅ |
| Currently maintained | ✅ | ✅ |
| Community usage | 1.4M/week | 1.3M/week |
| Compatibility with Vite bundler | ✅ | ✅ |
| Bundle size | ⛔3277 kb | ✅ 474 kb |
| PoC GitHub | Monaco | CodeMirror |
| PoC netlify | Monaco | CodeMirror |
Monaco Themes: https://editor.bitwiser.in/ | https://github.com/brijeshb42/monaco-themes CodeMirror Themes: https://github.com/dennis84/codemirror-themes | https://github.com/codemirror/theme-one-dark | https://codemirror.net/examples/styling/
CodeMirror setup: https://davidmyers.dev/blog/how-to-build-a-code-editor-with-codemirror-6-and-typescript/introduction Monaco setup: vitejs/vite#1791 (comment) | https://github.com/microsoft/monaco-editor/tree/main/samples/browser-esm-vite-react (extra)
Monaco vs CodeMirror: https://news.ycombinator.com/item?id=30673759
This summary is based from my manual research and not automatically generated from an AI tool like chatGPT.