Update auto size code editor

src/components/EchartsEditor/EchartsEditor.tsx

@@ -1,6 +1,7 @@
 import { StandardEditorProps } from '@grafana/data';
 import { getTemplateSrv } from '@grafana/runtime';
 import { CodeEditor, CodeEditorSuggestionItem, CodeEditorSuggestionItemKind } from '@grafana/ui';
+import { AutosizeCodeEditor } from '@volkovlabs/components';
 import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
 import React from 'react';
 
@@ -81,7 +82,6 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
     if (item.id === Editor.THEME) {
       return {
         language: CodeLanguage.JSON,
-        height: context.options?.themeEditor.height,
       };
     }
 
@@ -91,7 +91,6 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
     if (item.id === Editor.VISUALCODE) {
       return {
         language: CodeLanguage.JAVASCRIPT,
-        height: context.options?.visualEditor.codeHeight,
         getSuggestions,
       };
     }
@@ -101,19 +100,17 @@ export const EchartsEditor: React.FC<Props> = ({ value, onChange, context, item
      */
     return {
       language: CodeLanguage.JAVASCRIPT,
-      height: context.options?.editor.height,
       getSuggestions,
     };
   };
 
   return (
     <div data-testid={TEST_IDS.editor.root}>
-      <CodeEditor
+      <AutosizeCodeEditor
         language={CodeLanguage.JAVASCRIPT}
         showLineNumbers={true}
         showMiniMap={value.length > 100}
         value={value}
-        height={context.options?.editor.height}
         onBlur={onChange}
         onSave={onChange}
         monacoOptions={monacoOptions}

src/constants/default.ts

@@ -104,8 +104,8 @@ return {
 export const DEFAULT_OPTIONS: PanelOptions = {
   getOption: GET_OPTION,
   renderer: Renderer.CANVAS,
-  themeEditor: { name: Theme.DEFAULT, config: '{}', height: 400 },
-  editor: { height: 600, format: Format.AUTO },
+  themeEditor: { name: Theme.DEFAULT, config: '{}' },
+  editor: { format: Format.AUTO },
   map: Map.NONE,
   baidu: {
     key: '',
@@ -123,6 +123,5 @@ export const DEFAULT_OPTIONS: PanelOptions = {
     dataset: [],
     series: [],
     code: VISUAL_EDITOR_CODE,
-    codeHeight: 600,
   },
 };

src/module.test.ts

@@ -47,7 +47,6 @@ describe('plugin', () => {
      * Inputs
      */
     expect(builder.addCustomEditor).toHaveBeenCalled();
-    expect(builder.addSliderInput).toHaveBeenCalled();
     expect(builder.addRadio).toHaveBeenCalled();
     expect(builder.addTextInput).toHaveBeenCalled();
   });
@@ -105,7 +104,6 @@ describe('plugin', () => {
 
       plugin['optionsSupplier'](builder);
 
-      expect(shownSliderInputPaths).toEqual(expect.arrayContaining(['themeEditor.height']));
       expect(shownEditorPaths).toEqual(expect.arrayContaining(['themeEditor.config']));
     });
   });

src/module.ts

@@ -143,17 +143,6 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
         category: ['Visual Editor'],
         showIf: isVisualEditor,
       })
-      .addSliderInput({
-        path: 'visualEditor.codeHeight',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.visualEditor.codeHeight,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Visual Editor'],
-        showIf: isVisualEditor,
-      })
       .addCustomEditor({
         id: Editor.VISUALCODE,
         path: 'visualEditor.code',
@@ -169,17 +158,6 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
      * Code Editor
      */
     builder
-      .addSliderInput({
-        path: 'editor.height',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.editor.height,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Code'],
-        showIf: isCodeEditor,
-      })
       .addRadio({
         path: 'editor.format',
         name: 'Formatting',
@@ -204,28 +182,16 @@ export const plugin = new PanelPlugin<PanelOptions>(EchartsPanel)
     /**
      * Theme
      */
-    builder
-      .addSliderInput({
-        path: 'themeEditor.height',
-        name: 'Height, px',
-        defaultValue: DEFAULT_OPTIONS.themeEditor.height,
-        settings: {
-          min: 100,
-          max: 2000,
-        },
-        category: ['Theme'],
-        showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
-      })
-      .addCustomEditor({
-        id: Editor.THEME,
-        path: 'themeEditor.config',
-        name: 'Configuration',
-        description: 'Custom Theme from the Theme Builder.',
-        defaultValue: DEFAULT_OPTIONS.themeEditor.config,
-        editor: EchartsEditor,
-        category: ['Theme'],
-        showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
-      });
+    builder.addCustomEditor({
+      id: Editor.THEME,
+      path: 'themeEditor.config',
+      name: 'Configuration',
+      description: 'Custom Theme from the Theme Builder.',
+      defaultValue: DEFAULT_OPTIONS.themeEditor.config,
+      editor: EchartsEditor,
+      category: ['Theme'],
+      showIf: (config) => config.themeEditor.name === Theme.CUSTOM,
+    });
 
     return builder;
   })

src/types/editor.ts

@@ -6,13 +6,6 @@ import { Format } from '../constants';
  * Editor Options
  */
 export interface EditorOptions {
-  /**
-   * Height
-   *
-   * @type {number}
-   */
-  height: number;
-
   /**
    * Format
    *

src/types/theme-editor.ts

@@ -11,13 +11,6 @@ export interface ThemeEditorOptions {
    */
   name: Theme;
 
-  /**
-   * Height
-   *
-   * @type {number}
-   */
-  height: number;
-
   /**
    * Config
    *

src/types/visual-editor.ts

@@ -150,13 +150,6 @@ export interface VisualEditorOptions {
    * @type {string}
    */
   code: string;
-
-  /**
-   * Code Height
-   *
-   * @type {number}
-   */
-  codeHeight: number;
 }
 
 /**