Replace Ace Editor with Monaco Editor

[bennothommo]

Fixes #431.

This PR introduces the Monaco editor in replacement of the Ace Editor. At this stage for the PR, we are aiming for parity with the functionality previously provided by Ace, with the intention of increasing the functionality after this PR is merged.

Still to do:

• Support all prior configuration options.
• Re-implement all previous themes, or find suitable alternatives (see https://github.com/brijeshb42/monaco-themes)
• Ensure code editor works in all current core locations (settings areas, CMS editor, Builder plugin)
• Try and figure out how to remove the automated loading of the Codicon font, as it's being implemented in the widget's CSS assets.

Changes:

• Auto-completing tags preference is no longer available, as Monaco doesn't have this as an option.
• Autocompletion and code snippets preferences are no longer available, as these are more contextual and will be implemented based on what is being edited in the editor.
• Code folding is now a simple boolean.
• The Crimson Editor theme has been dropped - I couldn't find a complete replica of this theme, and it looks too similar to other themes in the list.

[what-the-diff]

• Added MixAssets::instance()->registerCallback(function ($mix) {
• $mix->registerPackage('module-backend.codeeditor', '~/modules/backend/formwidgets/codeeditor/assets/winter.mix.js');
  3.}). This is to register the code editor assets with Laravel mix so that they can be compiled into a single file for production use, and also allow us to add additional dependencies in future if needed (e.g., adding Ace as an external dependency).
  4.$this->addJs('...') was changed from build-min -> build because we want it unminified during development so that errors are easier to debug when using dev tools like Chrome's inspector or Firefox's debugger console etc.. The minified version will still be used on live sites though since this is what gets built by default via npm run prod which runs laravel mix behind the scenes and compiles all of our js files together into one big bundle called app.[hash].js where [hash] represents some random string generated based on changes made within those files - this ensures browsers don't cache old versions of these scripts unnecessarily after updates have been deployed, but only download new ones when necessary instead :)
• The class "layout-relative" was removed from the code editor preview.
• Added a new option to show/hide minimap in preferences page for Code Editor widget (default is true).
• Updated Ace build v1.2.3 using "src-noconflict".
• Added a new file to the code editor
• Updated some of the language files for markdown and scss
• The file was created
• A new object R is defined with the following properties: comments, brackets, autoClosingPairs and surroundingPairs
• Another object A is also defined with defaultToken as an empty string and tokenPostfix set to ".sql"
• Other properties of this object are ignoreCase (set to true), keywords (an array containing a list of SQL keywords) operators(another array containing a list of SQL operators), builtinFunctions(array containg names of functions in MySQL) etc...
• The code editor now supports PHP and INI syntax highlighting.
• A new CodeEditor form widget has been added to the backend, which can be used for editing files with a specific file extension (e.g., .php).
• The first diff is a new file that contains the configuration for Twig syntax highlighting.
• The second diff is a new file that contains the language definition of Twig, which includes keywords and tokenizer rules to be used by Monaco Editor when parsing code written in this language.
• Added support for YAML
• Added support for LESS
• Added a new file: modules/backend/formwidgets/codeeditor/assets/js
• Renamed the old code editor to .old and added a new one with some changes in it.
• Added a new form widget for code editor
• Updated the backend theme to use Vue 3 and added support for Monaco Editor in CodeEditor FormWidget
• Fixed some bugs with IconPicker, ColorPicker and FileUploader widgets (they were not working properly)
• Removed Workshop Theme from WinterCMS core as it is now available on GitHub: https://github.com/wintercms/workshop-theme

[LukeTowers]

@bennothommo what's the status of this?

[bennothommo]

When I last worked on this, I was having some dramas with the Markdown editor, since that also had to be converted to Monaco. I was hesitant to include another editor just for the Markdown editor, but if we can find a lean one, I'm happy to use that instead and keep Monaco for just the code editing (which it works amazingly with).

[LukeTowers]

What's the problem with the markdown editor? Does it currently use ace?

[bennothommo]

Yeah it uses Ace currently. I feel keeping Ace around and introducing Monaco for the code editor might be too much "bloat".

[LukeTowers]

I'm fine with having both if we can clearly identify all the locations we can remove Ace from as soon as we get a replacement for the usage of Ace in the markdown editor; that way at least it won't hold us up from getting the benefits of monaco and it'll be simple enough to remove Ace when we replace the markdown editor.

Any thoughts on that?