@fc-components/monaco-editor 0.1.5 → 0.1.7

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.7",
   "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,9 +68,9 @@ 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', 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);
@@ -77,6 +78,7 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
   const styles = getStyles(placeholder);
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
     editorRef.current = editor;
+
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -97,37 +99,7 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
       isEditorFocused.set(true);
     });
 
-    if (enableAutocomplete) {
-      const dataProvider = new DataProvider({
-        url: props.url,
-        lookbackInterval: props.lookbackInterval,
-        variablesNames: props.variablesNames,
-        durationVariablesCompletion: props.durationVariablesCompletion,
-        request: props.request,
-        httpMethod: props.httpMethod,
-        apiPrefix: props.apiPrefix,
-        httpErrorHandler: props.httpErrorHandler,
-      });
-      dataProviderRef.current = dataProvider;
-      dataProvider.start();
-
-      const completionProvider = getCompletionProvider(monaco, dataProvider);
-
-      const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
-        ...completionProvider,
-        provideCompletionItems: (model, position, context, token) => {
-          if (editor.getModel()?.id !== model.id) {
-            return { suggestions: [] };
-          }
-          return completionProvider.provideCompletionItems(model, position, context, token);
-        },
-      };
-
-      const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
-
-      autocompleteDisposeFun.current = dispose;
-    }
-
+    // set the height of the editor container
     const updateElementHeight = () => {
       const containerDiv = containerRef.current;
       if (containerDiv !== null) {
@@ -157,34 +129,6 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
       'isEditorFocused' + id,
     );
 
-    if (placeholder) {
-      const placeholderDecorators = [
-        {
-          range: new monaco.Range(1, 1, 1, 1),
-          options: {
-            className: styles.placeholder,
-            isWholeLine: true,
-          },
-        },
-      ];
-
-      let decorators: string[] = [];
-
-      const checkDecorators: () => void = () => {
-        const model = editor.getModel();
-
-        if (!model) {
-          return;
-        }
-
-        const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
-        decorators = model.deltaDecorations(decorators, newDecorators);
-      };
-
-      checkDecorators();
-      editor.onDidChangeModelContent(checkDecorators);
-    }
-
     editor.onDidChangeModelContent(() => {
       const model = editor.getModel();
       if (model) {
@@ -199,14 +143,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 语言
@@ -226,14 +165,98 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
 
     return () => {
       autocompleteDisposeFun.current?.();
+      dataProviderRef.current = null;
     };
   }, []);
 
-  useImperativeHandle(ref, () => ({
-    getEditor: () => {
-      return editorRef.current;
-    },
-  }));
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // clean up previous autocomplete provider
+    if (autocompleteDisposeFun.current) {
+      autocompleteDisposeFun.current();
+      autocompleteDisposeFun.current = null;
+    }
+    dataProviderRef.current = null;
+
+    // If autocomplete is enabled, set up a new autocomplete provider
+    if (enableAutocomplete) {
+      const dataProvider = new DataProvider({
+        url: props.url,
+        lookbackInterval: props.lookbackInterval,
+        variablesNames: props.variablesNames,
+        durationVariablesCompletion: props.durationVariablesCompletion,
+        request: props.request,
+        httpMethod: props.httpMethod,
+        apiPrefix: props.apiPrefix,
+        httpErrorHandler: props.httpErrorHandler,
+      });
+      dataProviderRef.current = dataProvider;
+      dataProvider.start();
+
+      const completionProvider = getCompletionProvider(monaco, dataProvider);
+
+      const filteringCompletionProvider: monacoTypes.languages.CompletionItemProvider = {
+        ...completionProvider,
+        provideCompletionItems: (model, position, context, token) => {
+          if (editor.getModel()?.id !== model.id) {
+            return { suggestions: [] };
+          }
+          return completionProvider.provideCompletionItems(model, position, context, token);
+        },
+      };
+
+      const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
+      autocompleteDisposeFun.current = dispose;
+    }
+
+    // clean up previous placeholder decorations
+    const model = editor.getModel();
+    if (model) {
+      model.deltaDecorations(
+        model.getAllDecorations().map((d) => d.id),
+        [],
+      );
+    }
+
+    if (placeholder) {
+      const placeholderDecorators = [
+        {
+          range: new monaco.Range(1, 1, 1, 1),
+          options: {
+            className: styles.placeholder,
+            isWholeLine: true,
+          },
+        },
+      ];
+
+      let decorators: string[] = [];
+
+      const checkDecorators: () => void = () => {
+        const model = editor.getModel();
+
+        if (!model) {
+          return;
+        }
+
+        const newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
+        decorators = model.deltaDecorations(decorators, newDecorators);
+      };
+
+      checkDecorators();
+      editor.onDidChangeModelContent(checkDecorators);
+    }
+  }, [
+    enableAutocomplete,
+    props.url,
+    props.lookbackInterval,
+    JSON.stringify(props.variablesNames),
+    props.durationVariablesCompletion,
+    props.httpMethod,
+    props.apiPrefix,
+    placeholder,
+  ]);
 
   return (
     <div className={'ant-input' + (size ? ` ${SIZE_MAP[size].className}` : '')}>
@@ -280,4 +303,4 @@ export default forwardRef(function PromQLEditor(props: PromQLEditorProps & DataP
       </div>
     </div>
   );
-});
+}