@fc-components/monaco-editor 0.1.5 → 0.1.6

package/dist/promql/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type * as monacoTypes from 'monaco-editor/esm/vs/editor/editor.api';
 import type { DataProviderParams } from './types';
 interface PromQLEditorProps {
     size?: 'small' | 'middle' | 'large';
@@ -11,6 +12,7 @@ interface PromQLEditorProps {
     onChange?: (value: string) => void;
     onShiftEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
+    editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<PromQLEditorProps & DataProviderParams & React.RefAttributes<unknown>>;
-export default _default;
+export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams): React.JSX.Element;
+export {};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
+import React, { useEffect, useRef } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { promLanguageDefinition } from 'monaco-promql';
@@ -24,6 +24,7 @@ interface PromQLEditorProps {
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => void;
   onBlur?: (value: string) => void;
+  editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
 }
 
 const PROMQL_LANG_ID = promLanguageDefinition.id;
@@ -67,16 +68,26 @@ const getStyles = (placeholder?: string) => {
   };
 };
 
-export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataProviderParams, ref) {
+export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
-  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur } = props;
+  const {
+    size = 'middle',
+    theme = 'light',
+    variablesNames,
+    value,
+    placeholder,
+    interpolateString,
+    enableAutocomplete = true,
+    onChange,
+    onShiftEnter,
+    onBlur,
+    editorDidMount,
+  } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
-  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
   const styles = getStyles(placeholder);
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
-    editorRef.current = editor;
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -199,14 +210,9 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
         monaco.editor.setModelMarkers(model, 'owner', markers);
       }
     });
-  };
 
-  useEffect(() => {
-    const dataProvider = dataProviderRef.current;
-    if (dataProvider) {
-      dataProvider.setVariablesNames(variablesNames || []);
-    }
-  }, [JSON.stringify(variablesNames)]);
+    editorDidMount?.(editor);
+  };
 
   useEffect(() => {
     // 注册 PromQL 语言
@@ -229,11 +235,12 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
     };
   }, []);
 
-  useImperativeHandle(ref, () => ({
-    getEditor: () => {
-      return editorRef.current;
-    },
-  }));
+  useEffect(() => {
+    const dataProvider = dataProviderRef.current;
+    if (dataProvider) {
+      dataProvider.setVariablesNames(variablesNames || []);
+    }
+  }, [JSON.stringify(variablesNames)]);
 
   return (
     <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
@@ -280,4 +287,4 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
       </div>
     </div>
   );
-});
+}