@fc-components/monaco-editor 0.1.6 → 0.1.8

package/dist/monaco-editor.esm.js

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import MonacoEditor from 'react-monaco-editor';
 import * as monaco from 'monaco-editor';
-import { languages, editor, KeyMod, KeyCode, Range, MarkerSeverity } from 'monaco-editor';
+import { languages, Range, editor, KeyMod, KeyCode, MarkerSeverity } from 'monaco-editor';
 import { promLanguageDefinition } from 'monaco-promql';
 import { parser, LabelMatchers, VectorSelector, PromQL, FunctionCallBody, StringLiteral, UnquotedLabelMatcher, BinaryExpr, NumberDurationLiteralInDurationContext, MatrixSelector, GroupingLabels, AggregateModifier, AggregateExpr, Identifier, LabelName, MatchOp, EqlSingle, EqlRegex, Neq, NeqRegex } from '@fc-components/lezer-metricsql';
 import { v4 } from 'uuid';
@@ -1990,7 +1990,6 @@ function PromQLEditor(props) {
     size = _props$size === void 0 ? 'middle' : _props$size,
     _props$theme = props.theme,
     theme = _props$theme === void 0 ? 'light' : _props$theme,
-    variablesNames = props.variablesNames,
     value = props.value,
     placeholder = props.placeholder,
     interpolateString = props.interpolateString,
@@ -2003,8 +2002,10 @@ function PromQLEditor(props) {
   var autocompleteDisposeFun = useRef(null);
   var containerRef = useRef(null);
   var dataProviderRef = useRef(null);
+  var editorRef = useRef(null);
   var styles = getStyles(placeholder);
   var handleEditorDidMount = function handleEditorDidMount(editor$1) {
+    editorRef.current = editor$1;
     editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -2023,35 +2024,7 @@ function PromQLEditor(props) {
     editor$1.onDidFocusEditorText(function () {
       isEditorFocused.set(true);
     });
-    if (enableAutocomplete) {
-      var 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();
-      var completionProvider = getCompletionProvider(monaco, dataProvider);
-      var filteringCompletionProvider = _extends({}, completionProvider, {
-        provideCompletionItems: function provideCompletionItems(model, position, context, token) {
-          var _editor$getModel;
-          if (((_editor$getModel = editor$1.getModel()) == null ? void 0 : _editor$getModel.id) !== model.id) {
-            return {
-              suggestions: []
-            };
-          }
-          return completionProvider.provideCompletionItems(model, position, context, token);
-        }
-      });
-      var _monaco$languages$reg = languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider),
-        dispose = _monaco$languages$reg.dispose;
-      autocompleteDisposeFun.current = dispose;
-    }
+    // set the height of the editor container
     var updateElementHeight = function updateElementHeight() {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
@@ -2076,26 +2049,6 @@ function PromQLEditor(props) {
     editor$1.addCommand(KeyMod.Shift | KeyCode.Enter, function () {
       onShiftEnter == null || onShiftEnter(editor$1.getValue());
     }, 'isEditorFocused' + id);
-    if (placeholder) {
-      var placeholderDecorators = [{
-        range: new Range(1, 1, 1, 1),
-        options: {
-          className: styles.placeholder,
-          isWholeLine: true
-        }
-      }];
-      var decorators = [];
-      var checkDecorators = function checkDecorators() {
-        var model = editor$1.getModel();
-        if (!model) {
-          return;
-        }
-        var newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
-        decorators = model.deltaDecorations(decorators, newDecorators);
-      };
-      checkDecorators();
-      editor$1.onDidChangeModelContent(checkDecorators);
-    }
     editor$1.onDidChangeModelContent(function () {
       var model = editor$1.getModel();
       if (model) {
@@ -2131,14 +2084,76 @@ function PromQLEditor(props) {
     languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
     return function () {
       autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
+      dataProviderRef.current = null;
     };
   }, []);
   useEffect(function () {
-    var dataProvider = dataProviderRef.current;
-    if (dataProvider) {
-      dataProvider.setVariablesNames(variablesNames || []);
+    var 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) {
+      var 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();
+      var completionProvider = getCompletionProvider(monaco, dataProvider);
+      var filteringCompletionProvider = _extends({}, completionProvider, {
+        provideCompletionItems: function provideCompletionItems(model, position, context, token) {
+          var _editor$getModel;
+          if (((_editor$getModel = editor.getModel()) == null ? void 0 : _editor$getModel.id) !== model.id) {
+            return {
+              suggestions: []
+            };
+          }
+          return completionProvider.provideCompletionItems(model, position, context, token);
+        }
+      });
+      var _monaco$languages$reg = languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider),
+        dispose = _monaco$languages$reg.dispose;
+      autocompleteDisposeFun.current = dispose;
+    }
+    // clean up previous placeholder decorations
+    var model = editor.getModel();
+    if (model) {
+      model.deltaDecorations(model.getAllDecorations().map(function (d) {
+        return d.id;
+      }), []);
+    }
+    if (placeholder) {
+      var placeholderDecorators = [{
+        range: new Range(1, 1, 1, 1),
+        options: {
+          className: styles.placeholder,
+          isWholeLine: true
+        }
+      }];
+      var decorators = [];
+      var checkDecorators = function checkDecorators() {
+        var model = editor.getModel();
+        if (!model) {
+          return;
+        }
+        var newDecorators = model.getValueLength() === 0 ? placeholderDecorators : [];
+        decorators = model.deltaDecorations(decorators, newDecorators);
+      };
+      checkDecorators();
+      editor.onDidChangeModelContent(checkDecorators);
     }
-  }, [JSON.stringify(variablesNames)]);
+  }, [enableAutocomplete, props.url, props.lookbackInterval, JSON.stringify(props.variablesNames), props.durationVariablesCompletion, props.httpMethod, props.apiPrefix, placeholder]);
   return React.createElement("div", {
     className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '')
   }, React.createElement("div", {
@@ -2181,7 +2196,8 @@ function PromQLEditor(props) {
         showWords: false
       },
       suggestFontSize: 12,
-      wordWrap: 'on'
+      wordWrap: 'on',
+      automaticLayout: true
     }
   })));
 }