argo-cd

1
import * as React from 'react';
2

3
import * as monacoEditor from 'monaco-editor';
4

5
export interface EditorInput {
6
    text: string;
7
    language?: string;
8
}
9

10
export interface MonacoProps {
11
    minHeight?: number;
12
    vScrollBar: boolean;
13
    editor?: {
14
        options?: monacoEditor.editor.IEditorOptions;
15
        input: EditorInput;
16
        getApi?: (api: monacoEditor.editor.IEditor) => any;
17
    };
18
}
19

20
function IsEqualInput(first?: EditorInput, second?: EditorInput) {
21
    return first && second && first.text === second.text && (first.language || '') === (second.language || '');
22
}
23

24
const DEFAULT_LINE_HEIGHT = 18;
25

26
const MonacoEditorLazy = React.lazy(() =>
27
    import('monaco-editor').then(monaco => {
28
        const Component = (props: MonacoProps) => {
29
            const [height, setHeight] = React.useState(0);
30

31
            return (
32
                <div
33
                    style={{
34
                        height: `${Math.max(props.minHeight || 0, height + 100)}px`,
35
                        overflowY: 'hidden'
36
                    }}
37
                    ref={el => {
38
                        if (el) {
39
                            const container = el as {
40
                                editorApi?: monacoEditor.editor.IEditor;
41
                                prevEditorInput?: EditorInput;
42
                            };
43
                            if (props.editor) {
44
                                if (!container.editorApi) {
45
                                    const editor = monaco.editor.create(el, {
46
                                        ...props.editor.options,
47
                                        scrollBeyondLastLine: props.vScrollBar,
48
                                        scrollbar: {
49
                                            handleMouseWheel: false,
50
                                            vertical: props.vScrollBar ? 'visible' : 'hidden'
51
                                        }
52
                                    });
53

54
                                    container.editorApi = editor;
55
                                }
56

57
                                const model = monaco.editor.createModel(props.editor.input.text, props.editor.input.language);
58
                                const lineCount = model.getLineCount();
59
                                setHeight(lineCount * DEFAULT_LINE_HEIGHT);
60

61
                                if (!IsEqualInput(container.prevEditorInput, props.editor.input)) {
62
                                    container.prevEditorInput = props.editor.input;
63
                                    container.editorApi.setModel(model);
64
                                }
65
                                container.editorApi.updateOptions(props.editor.options);
66
                                container.editorApi.layout();
67
                                if (props.editor.getApi) {
68
                                    props.editor.getApi(container.editorApi);
69
                                }
70
                            }
71
                        }
72
                    }}
73
                />
74
            );
75
        };
76

77
        return {
78
            default: Component
79
        };
80
    })
81
);
82

83
export const MonacoEditor = (props: MonacoProps) => (
84
    <React.Suspense fallback={<div>Loading...</div>}>
85
        <MonacoEditorLazy {...props} />
86
    </React.Suspense>
87
);
88