github.com/argoproj/argo-cd@v1.8.7/ui/src/app/shared/components/monaco-editor.tsx (about)

     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      editor?: {
    13          options?: monacoEditor.editor.IEditorOptions;
    14          input: EditorInput;
    15          getApi?: (api: monacoEditor.editor.IEditor) => any;
    16      };
    17  }
    18  
    19  function IsEqualInput(first?: EditorInput, second?: EditorInput) {
    20      return first && second && first.text === second.text && (first.language || '') === (second.language || '');
    21  }
    22  
    23  const DEFAULT_LINE_HEIGHT = 18;
    24  
    25  const MonacoEditorLazy = React.lazy(() =>
    26      import('monaco-editor').then(monaco => {
    27          require('monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js');
    28  
    29          const component = (props: MonacoProps) => {
    30              const [height, setHeight] = React.useState(0);
    31  
    32              return (
    33                  <div
    34                      style={{height: `${Math.max(props.minHeight || 0, height)}px`}}
    35                      ref={el => {
    36                          if (el) {
    37                              const container = el as {
    38                                  editorApi?: monacoEditor.editor.IEditor;
    39                                  prevEditorInput?: EditorInput;
    40                              };
    41                              if (props.editor) {
    42                                  if (!container.editorApi) {
    43                                      container.editorApi = monaco.editor.create(el, props.editor.options);
    44                                  }
    45  
    46                                  const model = monaco.editor.createModel(props.editor.input.text, props.editor.input.language);
    47                                  const lineCount = model.getLineCount();
    48                                  setHeight(lineCount * DEFAULT_LINE_HEIGHT);
    49  
    50                                  if (!IsEqualInput(container.prevEditorInput, props.editor.input)) {
    51                                      container.prevEditorInput = props.editor.input;
    52                                      container.editorApi.setModel(model);
    53                                  }
    54                                  container.editorApi.updateOptions(props.editor.options);
    55                                  container.editorApi.layout();
    56                                  if (props.editor.getApi) {
    57                                      props.editor.getApi(container.editorApi);
    58                                  }
    59                              }
    60                          }
    61                      }}
    62                  />
    63              );
    64          };
    65  
    66          return {
    67              default: component
    68          };
    69      })
    70  );
    71  
    72  export const MonacoEditor = (props: MonacoProps) => (
    73      <React.Suspense fallback={<div>Loading...</div>}>
    74          <MonacoEditorLazy {...props} />
    75      </React.Suspense>
    76  );