@fc-components/monaco-editor 0.1.1 → 0.1.2

package/dist/promql/index.d.ts

@@ -5,6 +5,7 @@ interface PromQLEditorProps {
     theme?: 'light' | 'dark';
     value?: string;
     placeholder?: string;
+    enableAutocomplete?: boolean;
     interpolateString?: (query: string) => string;
     onChange?: (value: string) => void;
     onShiftEnter?: (value: string) => void;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@fc-components/monaco-editor",
-  "version": "0.1.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.2",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/index.tsx

@@ -18,6 +18,7 @@ interface PromQLEditorProps {
   theme?: 'light' | 'dark';
   value?: string;
   placeholder?: string;
+  enableAutocomplete?: boolean;
   interpolateString?: (query: string) => string;
   onChange?: (value: string) => void;
   onShiftEnter?: (value: string) => void;
@@ -68,7 +69,7 @@ const getStyles = (placeholder?: string) => {
 
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams) {
   const id = uuidv4();
-  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, onChange, onShiftEnter, onBlur } = props;
+  const { size = 'middle', theme = 'light', variablesNames, value, placeholder, interpolateString, enableAutocomplete = true, onChange, onShiftEnter, onBlur } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
@@ -118,21 +119,23 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     dataProviderRef.current = dataProvider;
     dataProvider.start();
 
-    const completionProvider = getCompletionProvider(monaco, dataProvider);
+    if (enableAutocomplete) {
+      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 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);
+      const { dispose } = monaco.languages.registerCompletionItemProvider(PROMQL_LANG_ID, filteringCompletionProvider);
 
-    autocompleteDisposeFun.current = dispose;
+      autocompleteDisposeFun.current = dispose;
+    }
 
     const updateElementHeight = () => {
       const containerDiv = containerRef.current;
@@ -158,7 +161,6 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     editor.addCommand(
       monaco.KeyMod.Shift | monaco.KeyCode.Enter,
       () => {
-        console.log(22222);
         onShiftEnter?.(editor.getValue());
       },
       'isEditorFocused' + id,

package/src/promql/util.ts

@@ -25,5 +25,5 @@ export function makeSelector(metricName: string, labels?: Label[], labelName?: s
     return `${label.name}${label.op}"${escapeLabelValueInExactSelector(label.value)}"`;
   });
 
-  return `{${allLabelTexts.join(',')}}`;
+  return `${metricName}{${allLabelTexts.join(',')}}`;
 }