Monospaced text area

derjust · November 28, 2020, 12:09am

Hi!
Is there any way to make a textarea, created by

addTextInput({...
      settings: {
        useTextarea: true
      }
})

to use mono-spaced text?

In a panel-plugin I have a text area that allows the user to enter (usually) data-like content; think JSON or XML.
It would be awesome to have some syntax highlighting codemirror-style, but for starters using mono-spaced text would be nice.

I do not see how to apply custom CSS to the TSettings & the generated HTML has no distinct classes or IDs (probably intentional) to style it.

Thanks
Sebastian

marcusolsson · December 2, 2020, 3:29pm

I’m not aware of any standard editor that does this. I’ve seen other plugins use the Monaco text editor to build custom editors though. You can see one example here:

github.com

gapitio/gapit-htmlgraphics-panel/blob/master/src/PanelOptionCode.tsx

import React from 'react';
import { StandardEditorProps } from '@grafana/data';
import { TextPanelEditor } from 'TextPanelEditor';
import { EditorLanguageType, EditorCodeType } from 'types';

interface Settings {
  language: EditorLanguageType;
}

interface Props extends StandardEditorProps<EditorCodeType, Settings> {}

export const PanelOptionCode: React.FC<Props> = ({ value, item, onChange }) => {
  return <TextPanelEditor language={item.settings?.language} value={value} onChange={code => onChange(code)} />;
};

Topic		Replies	Views
Help with getting started with the code-editor Grafana Plugin Development	3	818	July 12, 2018
Creating custom input types using OptionsUIBuilder Grafana Plugin Development plugins	2	645	January 28, 2022
React plugin - How to add custom editor tab Grafana Plugin Development plugins	1	620	December 16, 2020
Dynamically extend editors in PanelPlugin plugins	1	389	December 29, 2020
Api break since version Grafana 7.3 Grafana Plugin Development api	3	339	January 29, 2022

Monospaced text area

Related topics