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!

[Mamatha1718]

Hi @citelao , I would like to know this details from p5.js-widget tool in this repo there is no discussions tab so i am asking in this feature auto-complete pull request.
I am eager to know some doubts about p5.js-widget tool. This tool work on below features or not using simple embed code <script src ="sketch.js " autosave />
showcode
code editable
instance mode
auto sound
different sketches in one page with different features.
Your answers are very helpfull to me.
Thank you in advance.

[citelao]

@Mamatha1718 I am not the right person to ask; you should open an issue if you're confused about the documentation.

[Mamatha1718]

@Mamatha1718 I am not the right person to ask; you should open an issue if you're confused about the documentation.

@citelao ,Thank for your clarification