Use ace editor json mode for grid configuration (#8361)

src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js

@@ -28,12 +28,15 @@ function dependencies() {
                 "./node_modules/ace-builds/src-min-noconflict/snippets/text.js",
                 "./node_modules/ace-builds/src-min-noconflict/snippets/javascript.js",
                 "./node_modules/ace-builds/src-min-noconflict/snippets/css.js",
+                "./node_modules/ace-builds/src-min-noconflict/snippets/json.js",
                 "./node_modules/ace-builds/src-min-noconflict/theme-chrome.js",
                 "./node_modules/ace-builds/src-min-noconflict/mode-razor.js",
                 "./node_modules/ace-builds/src-min-noconflict/mode-javascript.js",
                 "./node_modules/ace-builds/src-min-noconflict/mode-css.js",
                 "./node_modules/ace-builds/src-min-noconflict/worker-javascript.js",
-                "./node_modules/ace-builds/src-min-noconflict/worker-css.js"
+                "./node_modules/ace-builds/src-min-noconflict/worker-css.js",
+                "./node_modules/ace-builds/src-min-noconflict/mode-json.js",
+                "./node_modules/ace-builds/src-min-noconflict/worker-json.js"
             ],
             "base": "./node_modules/ace-builds"
         },

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.controller.js

@@ -1,10 +1,66 @@
-function EditConfigController($scope) {
+function EditConfigController($scope, angularHelper) {
 
     var vm = this;
-
+    
     vm.submit = submit;
     vm.close = close;
 
+    vm.aceOption = {
+        mode: "json",
+        theme: "chrome",
+        showPrintMargin: false,
+        advanced: {
+            fontSize: '14px',
+            enableSnippets: true,
+            enableBasicAutocompletion: true,
+            enableLiveAutocompletion: false
+        },
+        onLoad: function (_editor) {
+            vm.editor = _editor;
+
+            vm.configJson = Utilities.toJson($scope.model.config, true);
+
+            vm.editor.setValue(vm.configJson);
+
+            vm.editor.on("blur", blurAceEditor);
+        }
+    };
+
+    function blurAceEditor(event, _editor) {
+        const code = _editor.getValue();
+
+        //var form = angularHelper.getCurrentForm($scope);
+        var form = vm.gridConfigEditor;
+        var isValid = isValidJson(code);
+
+        if (isValid) {
+            $scope.model.config = Utilities.fromJson(code);
+
+            setValid(form);
+        }
+        else {
+            setInvalid(form);
+        }
+    }
+
+    function isValidJson(model) {
+        var flag = true;
+        try {
+            Utilities.fromJson(model)
+        } catch (err) {
+            flag = false;
+        }
+        return flag;
+    }
+
+    function setValid(form) {
+        form.$setValidity('json', true);
+    }
+
+    function setInvalid(form) {
+        form.$setValidity('json', false);
+    }
+
     function submit() {
         if ($scope.model && $scope.model.submit) {
             $scope.model.submit($scope.model);

src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html

@@ -16,16 +16,18 @@
                 <umb-box>
                     <umb-box-content>
 
-                        <ng-form name="gridConfigEditor">
+                        <ng-form name="vm.gridConfigEditor">
 
                             <h4>{{model.name}}</h4>
                             <p>Settings will only save if the entered json configuration is valid</p>
-                            <textarea name="configSource"
-                                validate-on="'blur'"
-                                rows="20" class="umb-property-editor umb-textarea"
-                                umb-raw-model="model.config"></textarea>
 
-                            <div class="alert alert-error" ng-show="gridConfigEditor.$invalid === true">
+                            <div data-element="code-editor"
+                                 auto-scale="85"
+                                 umb-ace-editor="vm.aceOption"
+                                 model="vm.configJson">
+                            </div>
+
+                            <div class="alert alert-error mt3" ng-show="vm.gridConfigEditor.$invalid === true">
                                 This configuration is not valid json, and will not be saved.
                             </div>