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