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.
  • Excluding features not reducing bundle size microsoft/monaco-editor-webpack-plugin#97
  • Smallest possible bundle size for Markdown microsoft/monaco-editor#2730

TODO

• Complete porting syntax highlighting
• Allow custom syntax highlighting themes
• Allow custom d.ts files
• Ensure default min-height is good
• Fix logo
• Remove CodeMirror code
• Move dependencies to devDependencies
• Add GH Pages site
• 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

[citelao]

Remove obsolete phantomjs

[citelao]

Remove this!