@fc-components/monaco-editor 0.1.4 → 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;
 }
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams): React.JSX.Element;
 export {};

package/package.json

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

package/src/promql/index.tsx

@@ -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;
@@ -69,33 +70,23 @@ const getStyles = (placeholder?: string) => {
 
 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 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) => {
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
@@ -219,8 +210,31 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         monaco.editor.setModelMarkers(model, 'owner', markers);
       }
     });
+
+    editorDidMount?.(editor);
   };
 
+  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?.();
+    };
+  }, []);
+
   useEffect(() => {
     const dataProvider = dataProviderRef.current;
     if (dataProvider) {