@fc-components/monaco-editor 0.1.5 → 0.1.7

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

@@ -1990,13 +1990,12 @@ var getStyles = function getStyles(placeholder) {
     })
   };
 };
-var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
+function PromQLEditor(props) {
   var id = uuid.v4();
   var _props$size = props.size,
     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,
@@ -2004,7 +2003,8 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
     enableAutocomplete = _props$enableAutocomp === void 0 ? true : _props$enableAutocomp,
     onChange = props.onChange,
     onShiftEnter = props.onShiftEnter,
-    onBlur = props.onBlur;
+    onBlur = props.onBlur,
+    editorDidMount = props.editorDidMount;
   var autocompleteDisposeFun = React.useRef(null);
   var containerRef = React.useRef(null);
   var dataProviderRef = React.useRef(null);
@@ -2030,35 +2030,7 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
     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) {
@@ -2083,26 +2055,6 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
     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) {
@@ -2119,13 +2071,8 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
         monaco.editor.setModelMarkers(model, 'owner', markers);
       }
     });
+    editorDidMount == null || editorDidMount(editor);
   };
-  React.useEffect(function () {
-    var dataProvider = dataProviderRef.current;
-    if (dataProvider) {
-      dataProvider.setVariablesNames(variablesNames || []);
-    }
-  }, [JSON.stringify(variablesNames)]);
   React.useEffect(function () {
     // 注册 PromQL 语言
     var aliases = monacoPromql.promLanguageDefinition.aliases,
@@ -2143,15 +2090,76 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
     monaco.languages.setLanguageConfiguration(PROMQL_LANG_ID, languageConfiguration);
     return function () {
       autocompleteDisposeFun.current == null || autocompleteDisposeFun.current();
+      dataProviderRef.current = null;
     };
   }, []);
-  React.useImperativeHandle(ref, function () {
-    return {
-      getEditor: function getEditor() {
-        return editorRef.current;
-      }
-    };
-  });
+  React.useEffect(function () {
+    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);
+    }
+  }, [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", {
@@ -2197,7 +2205,7 @@ var index = /*#__PURE__*/React.forwardRef(function PromQLEditor(props, ref) {
       wordWrap: 'on'
     }
   })));
-});
+}
 
-exports.PromQLMonacoEditor = index;
+exports.PromQLMonacoEditor = PromQLEditor;
 //# sourceMappingURL=monaco-editor.cjs.development.js.map