use ace editor in panel edit (#10245)

public/app/core/components/code_editor/code_editor.ts

@@ -38,6 +38,8 @@ import 'brace/mode/sql';
 import 'brace/snippets/sql';
 import 'brace/mode/markdown';
 import 'brace/snippets/markdown';
+import 'brace/mode/json';
+import 'brace/snippets/json';
 
 const DEFAULT_THEME_DARK = "ace/theme/grafana-dark";
 const DEFAULT_THEME_LIGHT = "ace/theme/textmate";

public/app/partials/edit_json.html

@@ -11,7 +11,7 @@
 
 	<div class="tabbed-view-body">
 		<div class="gf-form">
-			<textarea class="gf-form-input" ng-model="json" rows="20" spellcheck="false"></textarea>
+			<code-editor content="json" data-mode="json" data-max-lines=40 ></code-editor>
 		</div>
 
 		<div class="gf-form-button-row">