codemirror: Migrate SiteAdminPingsPage to use CodeMirror
Created by: fkling
Migrating this Monaco callsite seems low risk because it is a read-only JSON view. The main Monaco feature used here appears to be code folding, which CodeMirror also provides.
Overall I've identified the following features/characteristics:
- Read-only
- Syntax highlighting for JSON
- Code folding for JSON
- Fixed editor height
- Indentation guides
There is no "default" extension for indentation guides, so this feature was not migrated. However, if this is strongly desired it's possible to build a custom extension for that.
Since this it the first Monaco migration outside of Notebooks and the search query input I also added a couple of default extensions meant to be shared by other CodeMirror instances in the future. Specifically I added a syntax highlighting theme to use our existing colors and tried to approximate Monaco's theme.
Note: I'm deliberately using v0.20.0 of @codemirror/lang-json because using the latest version would require updating the other @codemirror/* packages. Those seem to cause some focus issue with our main search query input and the menu though.
Before:
https://user-images.githubusercontent.com/179026/176692714-810938e2-ff65-43e4-9989-5bf1191c8994.mp4
After (note that the video was recorded before I applied the font styles, so the font (size) is a bit larger in the video):
https://user-images.githubusercontent.com/179026/176692758-a40c0d10-c68e-4880-bf96-87615d0ca402.mp4
Test plan
Manual inspection, including light/dark mode toggle.
App preview:
Check out the client app preview documentation to learn more.