TextPanel: Adds proper editor for markdown and html (#25618)

public/app/features/dashboard/components/PanelEditor/PanelOptionsEditor.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import {
+  DataFrame,
+  InterpolateFunction,
   PanelOptionsEditorItem,
   PanelPlugin,
-  DataFrame,
   StandardEditorContext,
-  InterpolateFunction,
 } from '@grafana/data';
 import { get as lodashGet, set as lodashSet } from 'lodash';
 import { Field, Label } from '@grafana/ui';
@@ -37,9 +37,10 @@ export const PanelOptionsEditor: React.FC<PanelOptionsEditorProps<any>> = ({
     onChange(newOptions);
   };
 
-  const context: StandardEditorContext = {
+  const context: StandardEditorContext<any> = {
     data: data ?? [],
     replaceVariables,
+    options,
   };
 
   return (

public/app/plugins/panel/text/TextPanelEditor.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useMemo } from 'react';
+import { css, cx } from 'emotion';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { CodeEditor, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
+
+import { TextOptions } from './types';
+
+export const TextPanelEditor: FC<StandardEditorProps<string, any, TextOptions>> = ({ value, onChange, context }) => {
+  const language = useMemo(() => context.options?.mode ?? 'markdown', [context]);
+  const theme = useTheme();
+  const styles = getStyles(theme);
+  return (
+    <div className={cx(styles.editorBox)}>
+      <AutoSizer disableHeight>
+        {({ width }) => {
+          if (width === 0) {
+            return null;
+          }
+
+          return (
+            <CodeEditor
+              value={value}
+              onBlur={onChange}
+              onSave={onChange}
+              language={language}
+              width={width}
+              showMiniMap={false}
+              height="200px"
+            />
+          );
+        }}
+      </AutoSizer>
+    </div>
+  );
+};
+
+const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+  editorBox: css`
+    label: editorBox;
+    border: ${theme.border.width.sm} solid ${theme.colors.border2};
+    border-radius: ${theme.border.radius.sm};
+    margin: ${theme.spacing.xs} 0;
+    width: 100%;
+  `,
+}));

public/app/plugins/panel/text/module.tsx

@@ -3,6 +3,7 @@ import { PanelPlugin } from '@grafana/data';
 import { TextPanel } from './TextPanel';
 import { TextOptions } from './types';
 import { textPanelMigrationHandler } from './textPanelMigrationHandler';
+import { TextPanelEditor } from './TextPanelEditor';
 
 export const plugin = new PanelPlugin<TextOptions>(TextPanel)
   .setPanelOptions(builder => {
@@ -19,18 +20,16 @@ export const plugin = new PanelPlugin<TextOptions>(TextPanel)
         },
         defaultValue: 'markdown',
       })
-      .addTextInput({
+      .addCustomEditor({
+        id: 'content',
         path: 'content',
         name: 'Content',
         description: 'Content of the panel',
-        settings: {
-          useTextarea: true,
-          rows: 5,
-        },
         defaultValue: `# Title
 
 For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)
          `,
+        editor: TextPanelEditor,
       });
   })
   .setMigrationHandler(textPanelMigrationHandler);