@fc-components/monaco-editor 0.1.6 → 0.1.8

package/dist/monaco-editor.cjs.development.js

@@ -1996,7 +1996,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,
@@ -2009,8 +2008,10 @@ function PromQLEditor(props) {
   var autocompleteDisposeFun = React.useRef(null);
   var containerRef = React.useRef(null);
   var dataProviderRef = React.useRef(null);
+  var editorRef = React.useRef(null);
   var styles = getStyles(placeholder);
   var handleEditorDidMount = function handleEditorDidMount(editor) {
+    editorRef.current = editor;
     monaco.editor.defineTheme('n9e-dark', {
       base: 'vs-dark',
       inherit: true,
@@ -2029,35 +2030,7 @@ function PromQLEditor(props) {
     editor.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.getModel()) == null ? void 0 : _editor$getModel.id) !== model.id) {
-            return {
-              suggestions: []
-            };
-          }
-          return completionProvider.provideCompletionItems(model, position, context, token);
-        }
-      });
-      var _monaco$languages$reg = monaco.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) {
@@ -2082,26 +2055,6 @@ function PromQLEditor(props) {
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, function () {
       onShiftEnter == null || onShiftEnter(editor.getValue());
     }, 'isEditorFocused' + id);
-    if (placeholder) {
-      var placeholderDecorators = [{
-        range: new monaco.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);
-    }
     editor.onDidChangeModelContent(function () {
       var model = editor.getModel();
       if (model) {
@@ -2137,14 +2090,76 @@ function PromQLEditor(props) {
     monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
     return function () {
       autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
+      dataProviderRef.current = null;
     };
   }, []);
   React.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 = monaco.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 monaco.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__default.createElement("div", {
     className: 'ant-input' + (size ? " " + SIZE_MAP[size].className : '')
   }, React__default.createElement("div", {
@@ -2187,7 +2202,8 @@ function PromQLEditor(props) {
         showWords: false
       },
       suggestFontSize: 12,
-      wordWrap: 'on'
+      wordWrap: 'on',
+      automaticLayout: true
     }
   })));
 }