TextPanel: Fix `CodeEditor` not appearing properly (#111937)

set width=100% on the CodeEditor
This commit is contained in:
Ashley Harrison 2025-10-02 14:57:00 +01:00 committed by GitHub
parent e9f44daa7e
commit d04d4782b7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 23 deletions

View File

@ -1,6 +1,5 @@
import { css, cx } from '@emotion/css';
import { useMemo } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
import {
@ -25,26 +24,17 @@ export const TextPanelEditor = ({ value, onChange, context }: StandardEditorProp
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}
showLineNumbers={false}
height="500px"
getSuggestions={getSuggestions}
/>
);
}}
</AutoSizer>
<CodeEditor
value={value}
onBlur={onChange}
onSave={onChange}
language={language}
width="100%"
showMiniMap={false}
showLineNumbers={false}
height="500px"
getSuggestions={getSuggestions}
/>
</div>
);
};
@ -52,8 +42,6 @@ export const TextPanelEditor = ({ value, onChange, context }: StandardEditorProp
const getStyles = (theme: GrafanaTheme2) => ({
editorBox: css({
label: 'editorBox',
border: `1px solid ${theme.colors.border.medium}`,
borderRadius: theme.shape.radius.default,
margin: theme.spacing(0.5, 0),
width: '100%',
}),