v2.1 fe

kafka-manager-console/src/component/editor/index.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as monaco from 'monaco-editor';
+
+import './index.less';
+
+export interface IEditorProps {
+  style?: React.CSSProperties;
+  options: monaco.editor.IStandaloneEditorConstructionOptions;
+  uri?: monaco.Uri;
+  autoUnmount?: boolean;
+  customMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: any) => any;
+  placeholder?: string;
+}
+
+export class EditorCom extends React.Component<IEditorProps> {
+  public ref: HTMLElement = null;
+  public editor: monaco.editor.IStandaloneCodeEditor;
+  public state = {
+    placeholder: this.props.placeholder ?? '',
+  };
+
+  public componentWillUnmount() {
+    if (this.props.autoUnmount === false) return;
+    const model = this.editor.getModel();
+    model.dispose();
+    this.editor.dispose();
+  }
+
+  public componentDidMount() {
+    const { customMount, options, uri } = this.props;
+    const { value, language } = options;
+    if (uri) {
+      options.model = monaco.editor.createModel(value, language, uri);
+    }
+
+    this.editor = monaco.editor.create(this.ref,
+      options,
+    );
+    if (customMount) customMount(this.editor, monaco);
+  }
+
+  public render() {
+    const { style } = this.props;
+    return (
+      <>
+        <div style={style} className="editor" ref={(id) => { this.ref = id; }} />
+      </>
+    );
+  }
+}