Replace Ace Editor with Monaco Editor

modules/backend/ServiceProvider.php

@@ -7,6 +7,7 @@
 use Backend\Classes\WidgetManager;
 use System\Classes\MailManager;
 use System\Classes\CombineAssets;
+use System\Classes\MixAssets;
 use System\Classes\SettingsManager;
 use Winter\Storm\Support\ModuleServiceProvider;
 
@@ -104,6 +105,10 @@ protected function registerAssetBundles()
                 $combiner->registerBundle('~/modules/backend/formwidgets/richeditor/assets/js/build.js');
             }
         });
+
+        MixAssets::instance()->registerCallback(function ($mix) {
+            $mix->registerPackage('module-backend.codeeditor', '~/modules/backend/formwidgets/codeeditor/assets/winter.mix.js');
+        });
     }
 
     /*

modules/backend/assets/js/preferences/preferences.js

@@ -1,71 +1,115 @@
-$(document).ready(function() {
+((Snowboard) => {
+    class Preferences extends Snowboard.Singleton {
+        construct() {
+            this.widget = null;
+        }
 
-    var editorEl = $('#editorpreferencesCodeeditor'),
-        editor = editorEl.codeEditor('getEditorObject'),
-        session = editor.getSession(),
-        renderer = editor.renderer
+        listens() {
+            return {
+                'backend.widget.initialised': 'onWidgetInitialised',
+            };
+        }
 
-    editorEl.height($('#editorSettingsForm').height() - 23)
+        onWidgetInitialised(element, widget) {
+            if (element === document.getElementById('editorpreferencesCodeeditor')) {
+                this.widget = widget;
+                this.enablePreferences();
+            }
+        }
 
-    $('#Form-field-Preference-editor_theme').on('change', function() {
-        editorEl.codeEditor('setTheme', $(this).val())
-    })
+        enablePreferences() {
+            const checkboxes = {
+                show_gutter: 'showGutter',
+                highlight_active_line: 'highlightActiveLine',
+                use_hard_tabs: '!useSoftTabs',
+                display_indent_guides: 'displayIndentGuides',
+                show_invisibles: 'showInvisibles',
+                show_print_margin: 'showPrintMargin',
+                show_minimap: 'showMinimap',
+            };
+
+            Object.entries(checkboxes).forEach(([key, value]) => {
+                document.getElementById(`Form-field-Preference-editor_${key}`).addEventListener('change', (event) => {
+                    this.widget.setConfig(
+                        value.replace(/^!/, ''),
+                        /^!/.test(value) ? !event.target.checked : event.target.checked
+                    );
+                });
+            });
+        }
+    }
 
-    $('#Form-field-Preference-editor_font_size').on('change', function() {
-        editor.setFontSize(parseInt($(this).val()))
-    })
+    Snowboard.addPlugin('backend.preferences', Preferences);
+})(window.Snowboard);
 
-    $('#Form-field-Preference-editor_word_wrap').on('change', function() {
-        editorEl.codeEditor('setWordWrap', $(this).val())
-    })
+// $(document).ready(function() {
 
-    $('#Form-field-Preference-editor_code_folding').on('change', function() {
-        session.setFoldStyle($(this).val())
-    })
+//     var editorEl = $('#editorpreferencesCodeeditor'),
+//         editor = editorEl.codeEditor('getEditorObject'),
+//         session = editor.getSession(),
+//         renderer = editor.renderer
 
-    $('#Form-field-Preference-editor_autocompletion').on('change', function() {
-        editor.setOption('enableBasicAutocompletion', false)
-        editor.setOption('enableLiveAutocompletion', false)
+//     editorEl.height($('#editorSettingsForm').height() - 23)
 
-        var val = $(this).val()
-        if (val == 'basic') {
-            editor.setOption('enableBasicAutocompletion', true)
-        }
-        else if (val == 'live') {
-            editor.setOption('enableLiveAutocompletion', true)
-        }
-    })
+//     $('#Form-field-Preference-editor_theme').on('change', function() {
+//         editorEl.codeEditor('setTheme', $(this).val())
+//     })
+
+//     $('#Form-field-Preference-editor_font_size').on('change', function() {
+//         editor.setFontSize(parseInt($(this).val()))
+//     })
+
+//     $('#Form-field-Preference-editor_word_wrap').on('change', function() {
+//         editorEl.codeEditor('setWordWrap', $(this).val())
+//     })
+
+//     $('#Form-field-Preference-editor_code_folding').on('change', function() {
+//         session.setFoldStyle($(this).val())
+//     })
+
+//     $('#Form-field-Preference-editor_autocompletion').on('change', function() {
+//         editor.setOption('enableBasicAutocompletion', false)
+//         editor.setOption('enableLiveAutocompletion', false)
+
+//         var val = $(this).val()
+//         if (val == 'basic') {
+//             editor.setOption('enableBasicAutocompletion', true)
+//         }
+//         else if (val == 'live') {
+//             editor.setOption('enableLiveAutocompletion', true)
+//         }
+//     })
+
+//     $('#Form-field-Preference-editor_tab_size').on('change', function() {
+//         session.setTabSize($(this).val())
+//     })
 
-    $('#Form-field-Preference-editor_tab_size').on('change', function() {
-        session.setTabSize($(this).val())
-    })
+//     $('#Form-field-Preference-editor_show_invisibles').on('change', function() {
+//         editor.setShowInvisibles($(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_show_invisibles').on('change', function() {
-        editor.setShowInvisibles($(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_enable_snippets').on('change', function() {
+//         editor.setOption('enableSnippets', $(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_enable_snippets').on('change', function() {
-        editor.setOption('enableSnippets', $(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_display_indent_guides').on('change', function() {
+//         editor.setDisplayIndentGuides($(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_display_indent_guides').on('change', function() {
-        editor.setDisplayIndentGuides($(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_show_print_margin').on('change', function() {
+//         editor.setShowPrintMargin($(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_show_print_margin').on('change', function() {
-        editor.setShowPrintMargin($(this).is(':checked'))
-    })
-
-    $('#Form-field-Preference-editor_highlight_active_line').on('change', function() {
-        editor.setHighlightActiveLine($(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_highlight_active_line').on('change', function() {
+//         editor.setHighlightActiveLine($(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_use_hard_tabs').on('change', function() {
-        session.setUseSoftTabs(!$(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_use_hard_tabs').on('change', function() {
+//         session.setUseSoftTabs(!$(this).is(':checked'))
+//     })
 
-    $('#Form-field-Preference-editor_show_gutter').on('change', function() {
-        renderer.setShowGutter($(this).is(':checked'))
-    })
+//     $('#Form-field-Preference-editor_show_gutter').on('change', function() {
+//         renderer.setShowGutter($(this).is(':checked'))
+//     })
 
-})
+// })

modules/backend/assets/ui/js/index.js

@@ -1,11 +1,14 @@
 import BackendAjaxHandler from './ajax/Handler';
+import BackendUiWidgetHandler from './ui/WidgetHandler';
 
 if (window.Snowboard === undefined) {
     throw new Error('Snowboard must be loaded in order to use the Backend UI.');
 }
 
 ((Snowboard) => {
     Snowboard.addPlugin('backend.ajax.handler', BackendAjaxHandler);
+    Snowboard.addPlugin('backend.ui.widgetHandler', BackendUiWidgetHandler);
+
     // Add the pre-filter immediately
     Snowboard['backend.ajax.handler']().addPrefilter();
 

modules/backend/assets/ui/js/ui/WidgetHandler.js

@@ -0,0 +1,70 @@
+/**
+ * Backend widget handler.
+ *
+ * Handles the creation and disposal of widgets in the Backend. Widgets should include this as
+ * a dependency in order to be loaded and initialised after the handler, in order to correctly
+ * register.
+ *
+ * @copyright 2021 Winter.
+ * @author Ben Thomson <[email protected]>
+ */
+export default class WidgetHandler extends Snowboard.Singleton {
+    construct() {
+        this.registeredWidgets = [];
+    }
+
+    listens() {
+        return {
+            ready: 'onReady',
+            ajaxUpdate: 'onAjaxUpdate',
+        };
+    }
+
+    register(control, widget, callback) {
+        this.registeredWidgets.push({
+            control,
+            widget,
+            callback,
+        });
+    }
+
+    unregister(control) {
+        this.registeredWidgets = this.registeredWidgets.filter((widget) => widget.control !== control);
+    }
+
+    onReady() {
+        this.initialiseWidgets(document.body);
+    }
+
+    onAjaxUpdate(element) {
+        this.initialiseWidgets(element);
+    }
+
+    initialiseWidgets(element) {
+        this.registeredWidgets.forEach((widget) => {
+            const instances = element.querySelectorAll(`[data-control="${widget.control}"]`);
+
+            if (instances.length) {
+                instances.forEach((instance) => {
+                    // Prevent double-widget initialisation
+                    if (instance.dataset.widgetInitialised) {
+                        return;
+                    }
+
+                    const widgetInstance = this.snowboard[widget.widget](instance);
+                    instance.dataset.widget = widgetInstance;
+                    instance.dataset.widgetInitialised = true;
+                    this.snowboard.globalEvent('backend.widget.initialised', instance, widgetInstance);
+
+                    instance.getWidget = function getWidget() {
+                        return this.dataset.widget;
+                    };
+
+                    if (typeof widget.callback === 'function') {
+                        widget.callback(widgetInstance, instance);
+                    }
+                });
+            }
+        });
+    }
+}

modules/backend/controllers/Preferences.php

@@ -34,7 +34,7 @@ public function __construct()
         parent::__construct();
 
         $this->addCss('/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css', 'core');
-        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/js/build-min.js', 'core');
+        $this->addJs('/modules/backend/formwidgets/codeeditor/assets/js/build/codeeditor.bundle.js', 'core');
         $this->addJs('/modules/backend/assets/js/preferences/preferences.js', 'core');
 
         BackendMenu::setContext('Winter.System', 'system', 'mysettings');

modules/backend/controllers/preferences/_field_editor_preview.php

@@ -1,22 +1,25 @@
 <div
       id="editorpreferencesCodeeditor"
-      class="field-codeeditor size-large layout-relative"
+      class="field-codeeditor size-large"
       data-control="codeeditor"
       data-font-size="<?= $model->editor_font_size ?>"
       data-word-wrap="<?= $model->editor_word_wrap ?>"
       data-code-folding="<?= $model->editor_code_folding ?>"
       data-tab-size="<?= $model->editor_tab_size ?>"
       data-theme="<?= $model->editor_theme ?>"
-      data-show-invisibles="<?= $model->editor_show_invisibles ?>"
-      data-highlight-active-line="<?= $model->editor_highlight_active_line ?>"
-      data-use-soft-tabs="<?= !$model->editor_use_hard_tabs ?>"
+      data-show-invisibles="<?= $model->editor_show_invisibles ? 'true' : 'false' ?>"
+      data-highlight-active-line="<?= $model->editor_highlight_active_line ? 'true' : 'false' ?>"
+      data-use-soft-tabs="<?= !$model->editor_use_hard_tabs ? 'true' : 'false' ?>"
       data-autocompletion="<?= $model->editor_autocompletion ?>"
       data-enable-snippets="<?= $model->editor_enable_snippets ?>"
-      data-display-indent-guides="<?= $model->editor_display_indent_guides ?>"
-      data-show-print-margin="<?= $model->editor_show_print_margin ?>"
+      data-display-indent-guides="<?= $model->editor_display_indent_guides ? 'true' : 'false' ?>"
+      data-show-print-margin="<?= $model->editor_show_print_margin ? 'true' : 'false' ?>"
       data-show-gutter="<?= $model->editor_show_gutter ? 'true' : 'false' ?>"
+      data-show-minimap="<?= $model->editor_show_minimap ? 'true' : 'false' ?>"
       data-language="css"
       data-margin="0"
-      data-vendor-path="<?= Url::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
-      <textarea name="editorpreferences_codeeditor"><?= e($this->makePartial('example_code')) ?></textarea>
+      data-vendor-path="<?= Url::asset('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/"
+>
+      <div class="editor-container"></div>
+      <input type="hidden" name="editorpreferences_codeeditor" data-value-bag value="<?= e($this->makePartial('example_code')) ?>">
 </div>

modules/backend/formwidgets/CodeEditor.php

@@ -102,6 +102,11 @@ class CodeEditor extends FormWidgetBase
      */
     public $showPrintMargin = false;
 
+    /**
+     * @var boolean Show minimap (code preview) on the right of the editor
+     */
+    public $showMinimap = true;
+
     //
     // Object properties
     //
@@ -176,6 +181,7 @@ public function prepareVars()
         $this->vars['enableSnippets'] = $this->enableSnippets;
         $this->vars['displayIndentGuides'] = $this->displayIndentGuides;
         $this->vars['showPrintMargin'] = $this->showPrintMargin;
+        $this->vars['showMinimap'] = $this->showMinimap;
 
         // Double encode when escaping
         $this->vars['value'] = htmlentities($this->getLoadValue(), ENT_QUOTES, 'UTF-8', true);
@@ -188,7 +194,7 @@ public function prepareVars()
     protected function loadAssets()
     {
         $this->addCss('css/codeeditor.css', 'core');
-        $this->addJs('js/build-min.js', 'core');
+        $this->addJs('js/build/codeeditor.bundle.js', 'core');
     }
 
     /**