Replace code editor (algenty/grafana-flowcharting#235)

Author: ae3e

dist/module.js

@@ -21,7 +21,7 @@
       {"name": "Panel", "path": "img/panel.png"}
     ],
     "version": "0.3.1",
-    "updated": "2020-10-13"
+    "updated": "2020-11-04"
   },
 
   "dependencies": {

dist/module.js.map

@@ -19,8 +19,6 @@
   "dependencies": {
     "deepmerge": "^4.2.2",
     "plotly.js": "1.52.1",
-    "@monaco-editor/react": "^3.6.3",
-    "react-chart-editor": "0.41.0",
     "react-plotly.js": "2.4.0"
   },
   "resolutions": {

dist/plugin.json

@@ -1,22 +1,23 @@
 //Code from https://github.com/gapitio/gapit-htmlgraphics-panel
 import React from 'react';
 import { StandardEditorProps } from '@grafana/data';
-import { TextPanelEditor } from 'TextPanelEditor';
-import { EditorLanguageType, EditorCodeType } from 'types';
+import {CodeEditor} from '@grafana/ui'
 
-interface Settings {
-  language: EditorLanguageType;
-}
-
-interface Props extends StandardEditorProps<EditorCodeType, Settings> {}
+interface Props extends StandardEditorProps<string,any,any> {}
 
 export const PanelOptionCode: React.FC<Props> = ({ value, item, onChange }) => {
     if(typeof value!=="string"){
         value=JSON.stringify(value, null, 2)
     }
-  return <TextPanelEditor language={item.settings?.language} value={value} onChange={code => {
-    if(item.settings?.language==='json' && code){
-        code=JSON.parse(code);
-    }  
-    onChange(code)}} />;
+  return <CodeEditor
+    language={item.settings?.language}
+    value={value}
+    height="200px"
+    onBlur={code => {
+      if(item.settings?.language==='json' && code){
+          code=JSON.parse(code);
+      }  
+      onChange(code)}
+    }
+    />;
 };