@fc-components/monaco-editor 0.1.2 → 0.1.4

package/README.md

@@ -4,12 +4,14 @@
 import { PromQLMonacoEditor } from '@fc-components/monaco-editor';
 
 const App = () => {
+  const [value, setValue] = React.useState<string>();
+
   return (
     <PromQLMonacoEditor
-      theme='light'
-      size='middle'
-      placeholder='请输入PromQL查询语句'
-      variablesNames={['$job', '$instance']}
+      theme='light' // or 'dark'
+      size='middle' // 'small', 'middle', or 'large'
+      placeholder='Enter your PromQL query here...'
+      variablesNames={['$job', '$instance']} // Example variable names
       apiPrefix='/api/n9e/proxy/1/api/v1'
       request={(resource, options) => {
         const params = options?.body?.toString();
@@ -21,8 +23,11 @@ const App = () => {
           }),
         });
       }}
+      value={value}
+      enableAutocomplete={true} // Enable completion
+      durationVariablesCompletion={false} // Disable duration variables completion. eg. $__interval, $__range, $__rate_interval
       interpolateString={(query) => {
-        // Example interpolation function
+        // Interpolate variables in the query string
         return query.replace(/\$__interval/g, '10s');
       }}
       onShiftEnter={(value) => {
@@ -31,6 +36,10 @@ const App = () => {
       onBlur={(value) => {
         console.log('Editor lost focus, current value:', value);
       }}
+      onChange={(value) => {
+        console.log('Value changed:', value);
+        setValue(value);
+      }}
     />
   );
 };

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

@@ -872,7 +872,8 @@ var serviceUnavailable = 503;
 var CODE_MODE_SUGGESTIONS_INCOMPLETE_EVENT = 'codeModeSuggestionsIncomplete';
 var DataProvider = /*#__PURE__*/function () {
   function DataProvider(params) {
-    var _this = this;
+    var _this = this,
+      _params$durationVaria;
     this.lookbackInterval = 60 * 60 * 1000 * 12; // 12 hours
     this.variablesNames = [];
     this.httpMethod = 'GET';
@@ -1018,6 +1019,7 @@ var DataProvider = /*#__PURE__*/function () {
     if (params.variablesNames) {
       this.variablesNames = [].concat(params.variablesNames);
     }
+    this.durationVariablesCompletion = (_params$durationVaria = params.durationVariablesCompletion) != null ? _params$durationVaria : true;
     if (params.request) {
       this.customRequest = params.request;
     }
@@ -1542,7 +1544,14 @@ function _getAllFunctionsAndMetricNamesCompletions() {
   }));
   return _getAllFunctionsAndMetricNamesCompletions.apply(this, arguments);
 }
-var DURATION_COMPLETIONS = /*#__PURE__*/['$__interval', '$__range', '$__rate_interval', '1m', '5m', '10m', '30m', '1h', '1d'].map(function (text) {
+var DURATION_COMPLETIONS = /*#__PURE__*/['1m', '5m', '10m', '30m', '1h', '1d'].map(function (text) {
+  return {
+    type: 'DURATION',
+    label: text,
+    insertText: text
+  };
+});
+var DURATION_VARIABLES_COMPLETIONS = /*#__PURE__*/['$__interval', '$__range', '$__rate_interval'].map(function (text) {
   return {
     type: 'DURATION',
     label: text,
@@ -1770,6 +1779,9 @@ function _getLabelValuesForMetricCompletions() {
 function getCompletions(situation, dataProvider) {
   switch (situation.type) {
     case 'IN_DURATION':
+      if (dataProvider.durationVariablesCompletion) {
+        return Promise.resolve(DURATION_VARIABLES_COMPLETIONS.concat(DURATION_COMPLETIONS));
+      }
       return Promise.resolve(DURATION_COMPLETIONS);
     case 'IN_FUNCTION':
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
@@ -1947,7 +1959,6 @@ function isErrorBoundary(boundary) {
 
 var _excluded = ["error"];
 var PROMQL_LANG_ID = monacoPromql.promLanguageDefinition.id;
-var EDITOR_HEIGHT_OFFSET = 2;
 var SIZE_MAP = {
   small: {
     className: 'ant-input-sm',
@@ -1966,8 +1977,8 @@ var SIZE_MAP = {
   }
 };
 var themeMap = {
-  light: 'vs-light',
-  dark: 'vs-dark'
+  light: 'light',
+  dark: 'n9e-dark'
 };
 var getStyles = function getStyles(placeholder) {
   return {
@@ -2018,6 +2029,15 @@ function PromQLEditor(props) {
     };
   }, []);
   var handleEditorDidMount = function handleEditorDidMount(editor) {
+    monaco.editor.defineTheme('n9e-dark', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        focusBorder: '#00000000'
+      }
+    });
     var isEditorFocused = editor.createContextKey('isEditorFocused' + id, false);
     // we setup on-blur
     editor.onDidBlurEditorWidget(function () {
@@ -2027,18 +2047,19 @@ function PromQLEditor(props) {
     editor.onDidFocusEditorText(function () {
       isEditorFocused.set(true);
     });
-    var dataProvider = new DataProvider({
-      url: props.url,
-      lookbackInterval: props.lookbackInterval,
-      variablesNames: props.variablesNames,
-      request: props.request,
-      httpMethod: props.httpMethod,
-      apiPrefix: props.apiPrefix,
-      httpErrorHandler: props.httpErrorHandler
-    });
-    dataProviderRef.current = dataProvider;
-    dataProvider.start();
     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) {
@@ -2059,7 +2080,7 @@ function PromQLEditor(props) {
       var containerDiv = containerRef.current;
       if (containerDiv !== null) {
         var pixelHeight = editor.getContentHeight();
-        containerDiv.style.height = pixelHeight + EDITOR_HEIGHT_OFFSET + "px";
+        containerDiv.style.height = pixelHeight + "px";
         containerDiv.style.width = '100%';
         var pixelWidth = containerDiv.clientWidth;
         editor.layout({