GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 20:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: editor is updated (#2464)

Browse Source
This commit is contained in:
Palash Gupta 2023-03-17 15:12:31 +05:30 committed by GitHub
parent 65c2a0bf6a
commit 91c3abae37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/Editor/index.tsx
View File

@ -1,6 +1,6 @@
import MEditor, { EditorProps } from '@monaco-editor/react'; import MEditor, { EditorProps } from '@monaco-editor/react';
import { useIsDarkMode } from 'hooks/useDarkMode'; import { useIsDarkMode } from 'hooks/useDarkMode';
import React from 'react'; import React, { useMemo } from 'react';
function Editor({ function Editor({
value, value,
@ -11,16 +11,24 @@ function Editor({
options, options,
}: MEditorProps): JSX.Element { }: MEditorProps): JSX.Element {
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();
const onChangeHandler = (newValue?: string): void => {
if (typeof newValue === 'string' && onChange) onChange(newValue);
};
const editorOptions = useMemo(
() => ({ fontSize: 16, automaticLayout: true, readOnly, ...options }),
[options, readOnly],
);
return ( return (
<MEditor <MEditor
theme={isDarkMode ? 'vs-dark' : 'vs-light'} theme={isDarkMode ? 'vs-dark' : 'vs-light'}
language={language} language={language}
value={value} value={value}
options={{ fontSize: 16, automaticLayout: true, readOnly, ...options }} options={editorOptions}
height={height} height={height}
onChange={(newValue): void => { onChange={onChangeHandler}
if (typeof newValue === 'string') onChange(newValue);
}}
/> />
); );
} }
@ -28,7 +36,7 @@ function Editor({
interface MEditorProps { interface MEditorProps {
value: string; value: string;
language?: string; language?: string;
onChange: (value: string) => void; onChange?: (value: string) => void;
readOnly?: boolean; readOnly?: boolean;
height?: string; height?: string;
options?: EditorProps['options']; options?: EditorProps['options'];
@ -39,6 +47,7 @@ Editor.defaultProps = {
readOnly: false, readOnly: false,
height: '40vh', height: '40vh',
options: {}, options: {},
onChange: (): void => {},
}; };
export default Editor; export default Editor;