@fc-components/monaco-editor 0.1.26 → 0.2.1

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

@@ -7,6 +7,8 @@ export declare type Situation = {
     type: 'EMPTY';
 } | {
     type: 'IN_DURATION';
+} | {
+    type: 'IN_WITH_BODY';
 } | {
     type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
     metricName?: string;
@@ -22,5 +24,6 @@ export declare type Situation = {
     labelName: string;
     betweenQuotes: boolean;
     otherLabels: Label[];
+    valueStartPos: number;
 };
 export declare function getSituation(text: string, pos: number): Situation | null;

package/dist/promql/index.d.ts

@@ -17,7 +17,6 @@ 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.26",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/monaco-editor.esm.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@emotion/css": "11.13.4",
-    "@fc-components/lezer-metricsql": "0.0.1",
+    "@fc-components/lezer-metricsql": "^0.0.2",
     "@leeoniya/ufuzzy": "^1.0.18",
     "@lezer/common": "1.2.3",
     "@lezer/highlight": "1.2.1",

package/src/promql/__tests__/completions.test.ts

@@ -0,0 +1,72 @@
+import { getCompletions } from '../completion/completions';
+import type { Situation } from '../completion/situation';
+import type { DataProvider } from '../completion/DataProvider';
+
+// Minimal mock DataProvider that returns empty data
+function createMockDataProvider(overrides: Partial<DataProvider> = {}): DataProvider {
+  return {
+    getAllMetricNames: () => [],
+    metricNamesToMetrics: (names: string[]) => names.map((name) => ({ name, help: '', type: '' })),
+    fetchLabels: async () => [],
+    fetchSeries: async () => [],
+    fetchLabelValues: async () => [],
+    getVariablesNames: () => [],
+    durationVariablesCompletion: false,
+    ...overrides,
+  } as unknown as DataProvider;
+}
+
+describe('getCompletions', () => {
+  const mockDataProvider = createMockDataProvider();
+
+  describe('with keyword completion', () => {
+    it('includes "with" in EMPTY completions', async () => {
+      const situation: Situation = { type: 'EMPTY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+      expect(withCompletion!.insertText).toBe('with (');
+      expect(withCompletion!.detail).toContain('cte_name');
+    });
+
+    it('includes "with" in AT_ROOT completions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_WITH_BODY completions', async () => {
+      const situation: Situation = { type: 'IN_WITH_BODY' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+
+    it('includes "with" in IN_FUNCTION completions', async () => {
+      const situation: Situation = { type: 'IN_FUNCTION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const withCompletion = completions.find((c) => c.label === 'with');
+      expect(withCompletion).toBeDefined();
+    });
+  });
+
+  describe('Function completions', () => {
+    it('includes standard PromQL functions', async () => {
+      const situation: Situation = { type: 'AT_ROOT' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      const sumCompletion = completions.find((c) => c.label === 'sum');
+      expect(sumCompletion).toBeDefined();
+      expect(sumCompletion!.type).toBe('FUNCTION');
+    });
+  });
+
+  describe('Duration completions', () => {
+    it('returns duration values for IN_DURATION', async () => {
+      const situation: Situation = { type: 'IN_DURATION' };
+      const completions = await getCompletions(situation, mockDataProvider);
+      expect(completions.length).toBeGreaterThan(0);
+      expect(completions.every((c) => c.type === 'DURATION')).toBe(true);
+    });
+  });
+});

package/src/promql/__tests__/situation.test.ts

@@ -0,0 +1,85 @@
+import { getSituation } from '../completion/situation';
+
+describe('getSituation', () => {
+  describe('EMPTY', () => {
+    it('returns EMPTY for empty text', () => {
+      expect(getSituation('', 0)).toEqual({ type: 'EMPTY' });
+    });
+  });
+
+  describe('IN_WITH_BODY', () => {
+    it('returns IN_WITH_BODY when cursor is after with block', () => {
+      const text = 'with (cpu = sum(rate(foo[5m])))\ncpu';
+      // find the second occurrence of 'cpu' (after the with block)
+      const firstCpu = text.indexOf('cpu');
+      const pos = text.indexOf('cpu', firstCpu + 1);
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for simple with expression', () => {
+      const text = 'with (a = foo) a';
+      const pos = text.length; // cursor at end
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('returns IN_WITH_BODY for multi-CTE with expressions', () => {
+      const text = 'with (x = rate(foo[5m]), y = sum(bar))\nx + y';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'IN_WITH_BODY' });
+    });
+
+    it('does NOT return IN_WITH_BODY when cursor is before closing paren', () => {
+      const text = 'with (a = foo|) a';
+      const pipePos = text.indexOf('|');
+      const cleanText = text.slice(0, pipePos) + text.slice(pipePos + 1);
+      const result = getSituation(cleanText, pipePos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+
+    it('does NOT return IN_WITH_BODY for regular query starting with identifier containing "with"', () => {
+      const text = 'without_cpu';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result?.type).not.toBe('IN_WITH_BODY');
+    });
+  });
+
+  describe('AT_ROOT', () => {
+    it('returns AT_ROOT for simple metric name', () => {
+      const text = 'node_cpu_seconds_total';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+
+    it('returns AT_ROOT for function call', () => {
+      const text = 'rate(node_cpu_seconds_total[5m])';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      expect(result).toEqual({ type: 'AT_ROOT' });
+    });
+  });
+
+  describe('IN_FUNCTION', () => {
+    it('returns IN_FUNCTION inside function body', () => {
+      const text = 'sum()';
+      const pos = text.indexOf(')');
+      const result = getSituation(text, pos);
+      expect(result?.type).toBe('IN_FUNCTION');
+    });
+  });
+
+  describe('IN_DURATION', () => {
+    it('returns a situation for incomplete duration', () => {
+      // Cursor just after `[` but before `]` should trigger some situation
+      const text = 'foo[5';
+      const pos = text.length;
+      const result = getSituation(text, pos);
+      // Result depends on exact parse tree; not null for valid/incomplete input
+      expect(result).toBeDefined();
+    });
+  });
+});

package/src/promql/completion/completions.ts

@@ -58,9 +58,17 @@ const FUNCTION_COMPLETIONS: Completion[] = FUNCTIONS.map((f) => ({
 async function getAllFunctionsAndMetricNamesCompletions(dataProvider: DataProvider): Promise<Completion[]> {
   const metricNames = getAllMetricNamesCompletions(dataProvider);
 
-  return [...FUNCTION_COMPLETIONS, ...metricNames];
+  return [CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames];
 }
 
+const CTE_KEYWORD_COMPLETION: Completion = {
+  type: 'FUNCTION',
+  label: 'with',
+  insertText: 'with (',
+  detail: 'with (cte_name = expr, ...) expr',
+  documentation: 'Define Common Table Expressions (CTEs) for use in the query. MetricsQL extension.',
+};
+
 const DURATION_COMPLETIONS: Completion[] = ['1m', '5m', '10m', '30m', '1h', '1d'].map((text) => ({
   type: 'DURATION',
   label: text,
@@ -177,13 +185,14 @@ export function getCompletions(situation: Situation, dataProvider: DataProvider)
       return Promise.resolve(DURATION_COMPLETIONS);
     case 'IN_FUNCTION':
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
+    case 'IN_WITH_BODY':
     case 'AT_ROOT': {
       return getAllFunctionsAndMetricNamesCompletions(dataProvider);
     }
     case 'EMPTY': {
       const metricNames = getAllMetricNamesCompletions(dataProvider);
       const historyCompletions = getAllHistoryCompletions(dataProvider);
-      return Promise.resolve([...historyCompletions, ...FUNCTION_COMPLETIONS, ...metricNames]);
+      return Promise.resolve([...historyCompletions, CTE_KEYWORD_COMPLETION, ...FUNCTION_COMPLETIONS, ...metricNames]);
     }
     case 'IN_LABEL_SELECTOR_NO_LABEL_NAME':
       return getLabelNamesForSelectorCompletions(situation.metricName, situation.hasOperator, situation.otherLabels, dataProvider);

package/src/promql/completion/getCompletionProvider.ts

@@ -70,6 +70,20 @@ export function getCompletionProvider(monaco: Monaco, dataProvider: DataProvider
       // to stop it, we use a number-as-string sortkey,
       // so that monaco keeps the order we use
       const maxIndexDigits = items.length.toString().length;
+
+      // Determine the completion range based on situation type
+      let completionRange = range;
+      if (situation && situation.type === 'IN_LABEL_SELECTOR_WITH_LABEL_NAME' && situation.betweenQuotes) {
+        // For label values within quotes, replace from the start of the value to the current position
+        const valueStartPosition = model.getPositionAt(situation.valueStartPos);
+        completionRange = monaco.Range.lift({
+          startLineNumber: valueStartPosition.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: valueStartPosition.column,
+          endColumn: position.column,
+        });
+      }
+
       const suggestions: monacoTypes.languages.CompletionItem[] = items.map((item, index) => ({
         kind: getMonacoCompletionItemKind(item.type, monaco),
         label: item.label,
@@ -77,7 +91,7 @@ export function getCompletionProvider(monaco: Monaco, dataProvider: DataProvider
         detail: item.detail,
         documentation: item.documentation,
         sortText: index.toString().padStart(maxIndexDigits, '0'), // to force the order we have
-        range,
+        range: completionRange,
         command: item.triggerOnInsert
           ? {
               id: 'editor.action.triggerSuggest',

package/src/promql/completion/situation.ts

@@ -20,6 +20,8 @@ import {
   StringLiteral,
   UnquotedLabelMatcher,
   VectorSelector,
+  WithExpr,
+  WithAssignment,
 } from '@fc-components/lezer-metricsql';
 
 import { NeverCaseError } from '../util';
@@ -45,7 +47,9 @@ type NodeTypeId =
   | typeof EqlSingle
   | typeof Neq
   | typeof EqlRegex
-  | typeof NeqRegex;
+  | typeof NeqRegex
+  | typeof WithExpr
+  | typeof WithAssignment;
 
 type Path = Array<[Direction, NodeTypeId]>;
 
@@ -128,6 +132,9 @@ export type Situation =
   | {
       type: 'IN_DURATION';
     }
+  | {
+      type: 'IN_WITH_BODY';
+    }
   | {
       type: 'IN_LABEL_SELECTOR_NO_LABEL_NAME';
       metricName?: string;
@@ -145,6 +152,7 @@ export type Situation =
       labelName: string;
       betweenQuotes: boolean;
       otherLabels: Label[];
+      valueStartPos: number;
     };
 
 type Resolver = {
@@ -215,6 +223,18 @@ const RESOLVERS: Resolver[] = [
     path: [GroupingLabels],
     fun: resolveLabelsForGrouping,
   },
+  {
+    path: [WithExpr],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithExpr, PromQL],
+    fun: resolveWithExpr,
+  },
+  {
+    path: [WithAssignment, WithExpr],
+    fun: resolveWithExpr,
+  },
 ];
 
 const LABEL_OP_MAP = new Map<number, LabelOperator>([
@@ -335,6 +355,11 @@ function resolveLabelMatcher(node: SyntaxNode, text: string, _pos: number): Situ
   // - or an error node (like in `{job=^}`)
   const inStringNode = !node.type.isError;
 
+  // calculate where the value starts
+  // for string nodes, it's after the opening quote
+  // for error nodes, it's at the node start
+  const valueStartPos = inStringNode ? node.from + 1 : node.from;
+
   const parent = walk(node, [['parent', UnquotedLabelMatcher]]);
   if (parent === null) {
     return null;
@@ -370,6 +395,7 @@ function resolveLabelMatcher(node: SyntaxNode, text: string, _pos: number): Situ
       labelName,
       betweenQuotes: inStringNode,
       otherLabels,
+      valueStartPos,
     };
   }
 
@@ -381,6 +407,7 @@ function resolveLabelMatcher(node: SyntaxNode, text: string, _pos: number): Situ
     labelName,
     betweenQuotes: inStringNode,
     otherLabels,
+    valueStartPos,
   };
 }
 
@@ -422,6 +449,23 @@ function resolveInFunction(): Situation {
   };
 }
 
+function resolveWithExpr(node: SyntaxNode, text: string, pos: number): Situation | null {
+  // Find the containing WithExpr node (node may be a WithAssignment child)
+  let withExprNode: SyntaxNode | null = node.type.id === WithExpr ? node : node.parent;
+  while (withExprNode && withExprNode.type.id !== WithExpr) {
+    withExprNode = withExprNode.parent;
+  }
+  if (!withExprNode) return null;
+
+  // Only return IN_WITH_BODY when cursor is in the body expression (after the closing ')')
+  const children = getNodeChildren(withExprNode);
+  const closeParen = children.find((c) => getNodeText(c, text) === ')');
+  if (closeParen && pos > closeParen.to) {
+    return { type: 'IN_WITH_BODY' };
+  }
+  return null;
+}
+
 function resolveDurations(): Situation {
   return {
     type: 'IN_DURATION',
@@ -555,6 +599,27 @@ function getErrorNode(tree: Tree, pos: number): SyntaxNode | null {
   return null;
 }
 
+function findMatchingParen(text: string, openPos: number): number {
+  let depth = 0;
+  for (let i = openPos; i < text.length; i++) {
+    if (text[i] === '(') depth++;
+    if (text[i] === ')') {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function isInWithBody(text: string, pos: number): boolean {
+  const withMatch = text.match(/^with\s*\(/i);
+  if (!withMatch) return false;
+  const openParenPos = withMatch[0].length - 1;
+  const closeParenPos = findMatchingParen(text, openParenPos);
+  if (closeParenPos === -1) return false;
+  return pos > closeParenPos;
+}
+
 export function getSituation(text: string, pos: number): Situation | null {
   // there is a special-case when we are at the start of writing text,
   // so we handle that case first
@@ -565,6 +630,13 @@ export function getSituation(text: string, pos: number): Situation | null {
     };
   }
 
+  // text-based check for with body (fallback until grammar supports WithExpr)
+  if (isInWithBody(text, pos)) {
+    return {
+      type: 'IN_WITH_BODY',
+    };
+  }
+
   /**
      PromQL
      Expr

package/src/promql/index.tsx

@@ -30,7 +30,6 @@ interface PromQLEditorProps {
   onEnter?: (value: string) => void;
   onBlur?: (value: string) => void;
   editorDidMount?: (editor: monacoTypes.editor.IStandaloneCodeEditor) => void;
-  debugEscKey?: boolean;
 }
 
 const PROMQL_LANG_ID = promLanguageDefinition.id;
@@ -104,7 +103,6 @@ export default function PromQLEditor(props: PromQLEditorProps & DataProviderPara
     onEnter,
     onBlur,
     editorDidMount,
-    debugEscKey = false,
   } = props;
   const autocompleteDisposeFun = useRef<(() => void) | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -213,22 +211,6 @@ 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;

package/src/promql/promql.ts

@@ -243,6 +243,8 @@ for (let _i = 0, aggregations_1 = aggregations; _i < aggregations_1.length; _i++
 // PromQL vector matching + the by and without clauses
 // (https://prometheus.io/docs/prometheus/latest/querying/operators/#vector-matching)
 const vectorMatching = ['on', 'ignoring', 'group_right', 'group_left', 'by', 'without'];
+
+const cteKeywords = ['with'];
 // Produce a regex matching elements : (elt1|elt2|...)
 const vectorMatchingRegex =
   '(' +
@@ -257,7 +259,7 @@ const operators = ['+', '-', '*', '/', '%', '^', '==', '!=', '>', '<', '>=', '<=
 // (https://prometheus.io/docs/prometheus/latest/querying/basics/#offset-modifier)
 const offsetModifier = ['offset'];
 // Merging all the keywords in one list
-const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier);
+const keywords = aggregations.concat(functions).concat(aggregationsOverTime).concat(vectorMatching).concat(offsetModifier).concat(cteKeywords);
 // noinspection JSUnusedGlobalSymbols
 export const language = {
   ignoreCase: false,