@fc-components/monaco-editor 0.1.24 → 0.1.26

package/dist/promql/completion/situation.d.ts

@@ -11,6 +11,7 @@ export declare type Situation = {
     type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
     metricName?: string;
     otherLabels: Label[];
+    hasOperator: boolean;
 } | {
     type: 'IN_GROUPING';
     metricName: string;

package/dist/promql/index.d.ts

@@ -17,6 +17,7 @@ interface PromQLEditorProps {
     onEnter?: (value: string) => void;
     onBlur?: (value: string) => void;
     editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+    debugEscKey?: boolean;
 }
 export default function PromQLEditor(props: PromQLEditorProps & DataProviderParams): React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.24",
+  "version": "0.1.26",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",

package/src/promql/completion/completions.ts

@@ -122,8 +122,8 @@ async function getLabelNamesForCompletions(
   }));
 }
 
-async function getLabelNamesForSelectorCompletions(metric: string | undefined, otherLabels: Label[], dataProvider: DataProvider): Promise<Completion[]> {
-  return getLabelNamesForCompletions(metric, '=', true, otherLabels, dataProvider);
+async function getLabelNamesForSelectorCompletions(metric: string | undefined, hasOperator: boolean, otherLabels: Label[], dataProvider: DataProvider): Promise<Completion[]> {
+  return getLabelNamesForCompletions(metric, hasOperator ? '' : '=', true, otherLabels, dataProvider);
 }
 
 async function getLabelNamesForByCompletions(metric: string | undefined, otherLabels: Label[], dataProvider: DataProvider): Promise<Completion[]> {
@@ -186,7 +186,7 @@ export function getCompletions(situation: Situation, dataProvider: DataProvider)
       return Promise.resolve([...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]);
     }
     case 'IN_LABEL_SELECTOR_NO_LABEL_NAME':
-      return getLabelNamesForSelectorCompletions(situation.metricName, situation.otherLabels, dataProvider);
+      return getLabelNamesForSelectorCompletions(situation.metricName, situation.hasOperator, situation.otherLabels, dataProvider);
     case 'IN_GROUPING':
       return getLabelNamesForByCompletions(situation.metricName, situation.otherLabels, dataProvider);
     case 'IN_LABEL_SELECTOR_WITH_LABEL_NAME':

package/src/promql/completion/situation.ts

@@ -132,6 +132,7 @@ export type Situation =
       type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
       metricName?: string;
       otherLabels: Label[];
+      hasOperator: boolean;
     }
   | {
       type: 'IN_GROUPING';
@@ -158,14 +159,38 @@ function isPathMatch(resolverPath: NodeTypeId[], cursorPath: number[]): boolean
 const ERROR_NODE_NAME: NodeTypeId = 0; // this is used as error-id
 
 const RESOLVERS: Resolver[] = [
+  {
+    path: [LabelName, UnquotedLabelMatcher],
+    fun: resolveLabelName,
+  },
+  {
+    path: [UnquotedLabelMatcher, LabelMatchers],
+    fun: resolveLabelName,
+  },
   {
     path: [LabelMatchers, VectorSelector],
     fun: resolveLabelKeysWithEquals,
   },
+  {
+    path: [LabelMatchers, VectorSelector, PromQL],
+    fun: resolveLabelKeysWithEquals,
+  },
   {
     path: [PromQL],
     fun: resolveTopLevel,
   },
+  {
+    path: [VectorSelector, PromQL],
+    fun: resolveTopLevel,
+  },
+  {
+    path: [Identifier, VectorSelector],
+    fun: resolveTopLevel,
+  },
+  {
+    path: [Identifier, VectorSelector, PromQL],
+    fun: resolveTopLevel,
+  },
   {
     path: [FunctionCallBody],
     fun: resolveInFunction,
@@ -180,7 +205,7 @@ const RESOLVERS: Resolver[] = [
   },
   {
     path: [ERROR_NODE_NAME, UnquotedLabelMatcher],
-    fun: resolveLabelMatcher,
+    fun: resolveErrorInLabelMatcher,
   },
   {
     path: [ERROR_NODE_NAME, NumberDurationLiteralInDurationContext, MatrixSelector],
@@ -359,6 +384,32 @@ function resolveLabelMatcher(node: SyntaxNode, text: string, _pos: number): Situ
   };
 }
 
+function resolveErrorInLabelMatcher(node: SyntaxNode, text: string, pos: number): Situation | null {
+  // 处理错误节点在 UnquotedLabelMatcher 中的情况
+  // 需要判断是删除值还是删除名称
+
+  const parent = walk(node, [['parent', UnquotedLabelMatcher]]);
+  if (parent === null) {
+    return null;
+  }
+
+  const labelNameNode = walk(parent, [['firstChild', LabelName]]);
+
+  // 情况1: 有完整的标签名 -> 提示 label value
+  if (labelNameNode !== null) {
+    // 检查是否有 MatchOp（=, =~, !=, !~）
+    const hasMatchOp = walk(labelNameNode, [['nextSibling', MatchOp]]) !== null;
+    if (hasMatchOp) {
+      // 这是值场景，使用 resolveLabelMatcher 的逻辑
+      return resolveLabelMatcher(node, text, pos);
+    }
+  }
+
+  // 情况2: 没有完整的标签名或没有 MatchOp -> 提示 label name
+  // 使用 resolveLabelName 的逻辑
+  return resolveLabelName(parent, text, pos);
+}
+
 function resolveTopLevel(): Situation {
   return {
     type: 'AT_ROOT',
@@ -377,6 +428,66 @@ function resolveDurations(): Situation {
   };
 }
 
+function resolveLabelName(node: SyntaxNode, text: string, pos: number): Situation | null {
+  let labelMatcherNode: SyntaxNode | null = node;
+
+  // 如果节点是错误节点，尝试找到其父节点 UnquotedLabelMatcher
+  if (node.type.isError) {
+    const parent = node.parent;
+    if (parent !== null && parent.type.id === UnquotedLabelMatcher) {
+      labelMatcherNode = parent;
+    } else {
+      return null;
+    }
+  } else if (node.type.id === LabelName) {
+    labelMatcherNode = walk(node, [['parent', UnquotedLabelMatcher]]);
+  }
+
+  if (labelMatcherNode === null || labelMatcherNode.type.id !== UnquotedLabelMatcher) {
+    return null;
+  }
+
+  const labelNameNode = walk(labelMatcherNode, [['firstChild', LabelName]]);
+  if (labelNameNode === null) {
+    return null;
+  }
+
+  if (pos > labelNameNode.to) {
+    return null;
+  }
+
+  const labelMatchersNode = walk(labelMatcherNode, [['parent', LabelMatchers]]);
+  if (labelMatchersNode === null) {
+    return null;
+  }
+
+  const currentLabelName = getNodeText(labelNameNode, text);
+  const allLabels = getLabels(labelMatchersNode, text);
+  const otherLabels = allLabels.filter((label) => label.name !== currentLabelName);
+  const hasOperator = walk(labelNameNode, [['nextSibling', MatchOp]]) !== null;
+
+  const metricNameNode = walk(labelMatchersNode, [
+    ['parent', VectorSelector],
+    ['firstChild', Identifier],
+  ]);
+
+  if (metricNameNode === null) {
+    return {
+      type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME',
+      otherLabels,
+      hasOperator,
+    };
+  }
+
+  const metricName = getNodeText(metricNameNode, text);
+  return {
+    type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME',
+    metricName,
+    otherLabels,
+    hasOperator,
+  };
+}
+
 function resolveLabelKeysWithEquals(node: SyntaxNode, text: string, pos: number): Situation | null {
   // next false positive:
   // `something{a="1"^}`
@@ -407,6 +518,7 @@ function resolveLabelKeysWithEquals(node: SyntaxNode, text: string, pos: number)
     return {
       type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME',
       otherLabels,
+      hasOperator: false,
     };
   }
 
@@ -416,6 +528,7 @@ function resolveLabelKeysWithEquals(node: SyntaxNode, text: string, pos: number)
     type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME',
     metricName,
     otherLabels,
+    hasOperator: false,
   };
 }
 
@@ -471,8 +584,10 @@ export function getSituation(text: string, pos: number): Situation | null {
   const currentNode = cur.node;
 
   const ids = [cur.type.id];
+  // const names = [cur.type.name];
   while (cur.parent()) {
     ids.push(cur.type.id);
+    // names.push(cur.type.name);
   }
 
   for (let resolver of RESOLVERS) {

package/src/promql/index.tsx

@@ -30,6 +30,7 @@ interface PromQLEditorProps {
   onEnter?: (value: string) => void;
   onBlur?: (value: string) => void;
   editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
+  debugEscKey?: boolean;
 }
 
 const PROMQL_LANG_ID = promLanguageDefinition.id;
@@ -103,11 +104,14 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     onEnter,
     onBlur,
     editorDidMount,
+    debugEscKey = false,
   } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const dataProviderRef = useRef<DataProvider | null>(null);
   const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
+  const previousContentRef = useRef<string>('');
+  const lastDeletionTriggerTimeRef = useRef<number>(0);
   const styles = getStyles(placeholder);
   const handleEditorDidMount = (editor: monacoTypes.editor.IStandaloneCodeEditor) => {
     editorRef.current = editor;
@@ -209,6 +213,27 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
       '!suggestWidgetVisible && isEditorFocused' + id,
     );
 
+    editor.addCommand(
+      monaco.KeyCode.Escape,
+      () => {
+        if (debugEscKey) {
+          const suggestWidgetVisible = (editor as any)?._contextKeyService?.getContextKeyValue?.('suggestWidgetVisible');
+          // eslint-disable-next-line no-console
+          console.log('[PromQLEditor][ESC]', {
+            suggestWidgetVisible,
+            valueLength: editor.getValue().length,
+          });
+        }
+        editor.trigger('keyboard', 'hideSuggestWidget', {});
+      },
+      'suggestWidgetVisible && isEditorFocused' + id,
+    );
+
+    // Initialize previous content tracking
+    previousContentRef.current = editor.getValue();
+    lastDeletionTriggerTimeRef.current = 0;
+    const DELETION_TRIGGER_DEBOUNCE_MS = 1000;
+
     editor.onDidChangeModelContent(() => {
       const model = editor.getModel();
       if (model) {
@@ -221,6 +246,23 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
         }));
 
         monaco.editor.setModelMarkers(model, 'owner', markers);
+
+        // Detect deletion and trigger completion
+        const previousContent = previousContentRef.current;
+        const isDeletion = query.length < previousContent.length;
+
+        if (isDeletion && enableAutocomplete) {
+          const now = Date.now();
+          if (now - lastDeletionTriggerTimeRef.current >= DELETION_TRIGGER_DEBOUNCE_MS) {
+            lastDeletionTriggerTimeRef.current = now;
+            // Trigger completion after deletion
+            setTimeout(() => {
+              editor.trigger('keyboard', 'editor.action.triggerSuggest', {});
+            }, 0);
+          }
+        }
+
+        previousContentRef.current = query;
       }
     });