@fc-components/monaco-editor 0.1.4 → 0.1.5

package/dist/promql/index.d.ts

@@ -12,5 +12,5 @@ interface PromQLEditorProps {
     onShiftEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
 }
-export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams): React.JSX.Element;
-export {};
+declare const _default: React.ForwardRefExoticComponent<PromQLEditorProps & DataProviderParams & React.RefAttributes<unknown>>;
+export default _default;

package/package.json

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

package/src/promql/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
 import { promLanguageDefinition } from 'monaco-promql';
@@ -67,36 +67,16 @@ const getStyles = (placeholder?: string) => {
   };
 };
 
-export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
+export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataProviderParams, ref) {
   const id = uuidv4();
   const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur } = 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);
-
-  useEffect(() => {
-    // 注册 PromQL 语言
-    const { aliases, extensions, mimetypes } = promLanguageDefinition;
-    monaco.languages.register({
-      id: PROMQL_LANG_ID,
-      aliases,
-      extensions,
-      mimetypes,
-    });
-
-    // 设置语法高亮
-    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language as any);
-
-    // 设置语言配置
-    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration as any);
-
-    return () => {
-      autocompleteDisposeFun.current?.();
-    };
-  }, []);
-
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
+    editorRef.current = editor;
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -228,6 +208,33 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     }
   }, [JSON.stringify(variablesNames)]);
 
+  useEffect(() => {
+    // 注册 PromQL 语言
+    const { aliases, extensions, mimetypes } = promLanguageDefinition;
+    monaco.languages.register({
+      id: PROMQL_LANG_ID,
+      aliases,
+      extensions,
+      mimetypes,
+    });
+
+    // 设置语法高亮
+    monaco.languages.setMonarchTokensProvider(PROMQL_LANG_ID, language as any);
+
+    // 设置语言配置
+    monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration as any);
+
+    return () => {
+      autocompleteDisposeFun.current?.();
+    };
+  }, []);
+
+  useImperativeHandle(ref, () => ({
+    getEditor: () => {
+      return editorRef.current;
+    },
+  }));
+
   return (
     <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
       <div ref={containerRef}>
@@ -273,4 +280,4 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       </div>
     </div>
   );
-}
+});