@fc-components/monaco-editor 0.1.6 → 0.1.8

package/package.json

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

package/src/promql/index.tsx

@@ -70,24 +70,15 @@ 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,
-    editorDidMount,
-  } = 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);
+  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,
@@ -108,37 +99,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       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) {
@@ -168,34 +129,6 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       '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) {
@@ -232,15 +165,98 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
 
     return () => {
       autocompleteDisposeFun.current?.();
+      dataProviderRef.current = null;
     };
   }, []);
 
   useEffect(() => {
-    const dataProvider = dataProviderRef.current;
-    if (dataProvider) {
-      dataProvider.setVariablesNames(variablesNames || []);
+    const editor = editorRef.current;
+    if (!editor) return;
+
+    // clean up previous autocomplete provider
+    if (autocompleteDisposeFun.current) {
+      autocompleteDisposeFun.current();
+      autocompleteDisposeFun.current = null;
     }
-  }, [JSON.stringify(variablesNames)]);
+    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}` : '')}>
@@ -282,6 +298,7 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
             },
             suggestFontSize: 12,
             wordWrap: 'on',
+            automaticLayout: true,
           }}
         />
       </div>