Add auto-complete to the P5 widget

[citelao]

This (super preliminary) draft change adds IntelliSense/autocomplete to the editor!

To best handle this change, I switched the editor from CodeMirror to Monaco (the base of VS Code), since Monaco handles autocomplete much better (and by default!). This required a lot of other changes---updating the Webpack versions significantly, etc.

There's a ton of work left--- the editor is mis-sized (fixed!) and does not support undo/redo yet (supports undo now!). See the TODOs!

But wow, it's so cool!

Example

You can mess with it at https://ben.stolovitz.com/p5.js-widget/!

Previous screenshots

Before style changes:

Notes

• A lot of dependencies could probably be dev-dependencies, except for @types/p5 since that is used for the auto-complete (yeah, ew).
• I don't like that I had to move index.html etc to static/.
• I haven't tested if my changes to the webpack config load (autoprefixer still runs? e.g.).
• We have to set font and font size in JS; we should probably expose properties to the host so folks can provide their own font stacks and sizes.
• The final bundle is much larger: over 3Mb, just for main. Monaco is a big editor; this may be a reason not to completely remove CodeMirror.
  • https://github.com/microsoft/monaco-editor-webpack-plugin/issues/97
  • https://github.com/microsoft/monaco-editor/issues/2730

TODO

• [x] Complete porting syntax highlighting
• [ ] Allow custom syntax highlighting themes
• [ ] Allow custom d.ts files
• [x] Ensure default min-height is good
• [x] Fix logo
• [x] Remove CodeMirror code
• [ ] Move dependencies to devDependencies
• [x] Add GH Pages site
• [x] Add full-screen test page
• [ ] Fix padding around editor
• [ ] Fix padding around line numbers
• [ ] Allow % for preview width
• [ ] [Nice to have] Allow resizing preview pane