Upgrade codemirror and lezer to the latest version (#10841)

* bump codemirror to v0.20.x and lezer to v.0.16.x

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

* bump codemirror to v6 and lezer to v1

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

* stop treating warning as error for UI

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
This commit is contained in:
Augustin Husson 2022-06-13 17:55:06 +02:00 committed by GitHub
parent 5bd761fbfc
commit 5d1756c822
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 4853 additions and 4613 deletions

View file

@ -45,7 +45,7 @@ ui-install:
.PHONY: ui-build
ui-build:
cd $(UI_PATH) && npm run build
cd $(UI_PATH) && CI="" npm run build
.PHONY: ui-build-module
ui-build-module:

View file

@ -12,7 +12,7 @@ module.exports = {
},
},
moduleNameMapper: {
'lezer-promql': '<rootDir>/../../node_modules/@prometheus-io/lezer-promql/dist/index.es.js'
'lezer-promql': '<rootDir>/../../node_modules/@prometheus-io/lezer-promql/dist/index.cjs'
},
transformIgnorePatterns: ["<rootDir>/../../node_modules/(?!@prometheus-io/lezer-promql)/"]
};

View file

@ -33,26 +33,25 @@
"lru-cache": "^6.0.0"
},
"devDependencies": {
"@codemirror/autocomplete": "^0.19.15",
"@codemirror/highlight": "^0.19.8",
"@codemirror/language": "^0.19.10",
"@codemirror/lint": "^0.19.6",
"@codemirror/state": "^0.19.9",
"@codemirror/view": "^0.19.48",
"@lezer/common": "^0.15.12",
"@lezer/lr": "^0.15.8",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@types/lru-cache": "^5.1.1",
"isomorphic-fetch": "^3.0.0",
"nock": "^13.2.4"
},
"peerDependencies": {
"@codemirror/autocomplete": "^0.19.15",
"@codemirror/highlight": "^0.19.8",
"@codemirror/language": "^0.19.10",
"@codemirror/lint": "^0.19.6",
"@codemirror/state": "^0.19.9",
"@codemirror/view": "^0.19.48",
"@lezer/common": "^0.15.12"
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@lezer/common": "^1.0.0"
},
"prettier": {
"singleQuote": true,

View file

@ -734,7 +734,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 0,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -745,7 +745,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -756,7 +756,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 4,
to: 4,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -767,7 +767,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 4,
to: 6,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -778,7 +778,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 9,
to: 9,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -789,7 +789,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, snippets),
from: 25,
to: 33,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -800,7 +800,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, binOpModifierTerms, numberTerms, snippets),
from: 14,
to: 19,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -811,7 +811,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(functionIdentifierTerms, aggregateOpTerms, binOpModifierTerms, numberTerms, snippets),
from: 40,
to: 41,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -822,7 +822,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 8,
to: 8,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -833,7 +833,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 8,
to: 11,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -844,7 +844,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 18,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -855,7 +855,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -866,7 +866,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 1,
to: 1,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -877,7 +877,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 15,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -888,7 +888,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 1,
to: 4,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -899,7 +899,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 23,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -910,7 +910,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 12,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -921,7 +921,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms),
from: 6,
to: 7,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -932,7 +932,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms),
from: 19,
to: 21,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -943,7 +943,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(aggregateOpModifierTerms, binOpTerms, [{ label: 'offset' }]),
from: 4,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -954,7 +954,7 @@ describe('autocomplete promQL test', () => {
options: binOpTerms,
from: 12,
to: 13,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -965,7 +965,7 @@ describe('autocomplete promQL test', () => {
options: binOpTerms,
from: 12,
to: 13,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -976,7 +976,7 @@ describe('autocomplete promQL test', () => {
options: matchOpTerms,
from: 11,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -987,7 +987,7 @@ describe('autocomplete promQL test', () => {
options: matchOpTerms,
from: 21,
to: 22,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -998,7 +998,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 28,
to: 28,
span: undefined,
validFor: undefined,
},
},
{
@ -1009,7 +1009,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 46,
to: 46,
span: undefined,
validFor: undefined,
},
},
{
@ -1020,7 +1020,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 20,
to: 23,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1031,7 +1031,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 12,
to: 16,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1042,7 +1042,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 34,
to: 37,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1053,7 +1053,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 14,
to: 16,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1064,7 +1064,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(binOpTerms, [{ label: 'offset' }]),
from: 38,
to: 41,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1075,7 +1075,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1086,7 +1086,7 @@ describe('autocomplete promQL test', () => {
options: [],
from: 0,
to: 12,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1097,7 +1097,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 4,
to: 4,
span: undefined,
validFor: undefined,
},
},
{
@ -1108,7 +1108,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 6,
to: 6,
span: undefined,
validFor: undefined,
},
},
{
@ -1119,7 +1119,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 26,
to: 26,
span: undefined,
validFor: undefined,
},
},
{
@ -1130,7 +1130,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 28,
to: 28,
span: undefined,
validFor: undefined,
},
},
{
@ -1141,7 +1141,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 7,
to: 7,
span: undefined,
validFor: undefined,
},
},
{
@ -1152,7 +1152,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 9,
to: 9,
span: undefined,
validFor: undefined,
},
},
{
@ -1163,7 +1163,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 29,
to: 29,
span: undefined,
validFor: undefined,
},
},
{
@ -1174,7 +1174,7 @@ describe('autocomplete promQL test', () => {
options: durationTerms,
from: 31,
to: 31,
span: undefined,
validFor: undefined,
},
},
{
@ -1185,7 +1185,7 @@ describe('autocomplete promQL test', () => {
options: atModifierTerms,
from: 4,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1197,7 +1197,7 @@ describe('autocomplete promQL test', () => {
options: ([] as Completion[]).concat(mockedMetricsTerms, functionIdentifierTerms, aggregateOpTerms, numberTerms, snippets),
from: 0,
to: 5,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1226,7 +1226,7 @@ describe('autocomplete promQL test', () => {
],
from: 20,
to: 20,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1243,7 +1243,7 @@ describe('autocomplete promQL test', () => {
],
from: 25,
to: 25,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
{
@ -1274,7 +1274,7 @@ describe('autocomplete promQL test', () => {
),
from: 0,
to: 3,
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
},
},
];

View file

@ -140,7 +140,7 @@ function arrayToCompletionResult(data: Completion[], from: number, to: number, i
from: from,
to: to,
options: options,
span: span ? /^[a-zA-Z0-9_:]+$/ : undefined,
validFor: span ? /^[a-zA-Z0-9_:]+$/ : undefined,
} as CompletionResult;
}

View file

@ -18,7 +18,7 @@ import { Matcher } from '../types';
function createMatcher(labelMatcher: SyntaxNode, state: EditorState): Matcher {
const matcher = new Matcher(0, '', '');
const cursor = labelMatcher.cursor;
const cursor = labelMatcher.cursor();
if (!cursor.next()) {
// weird case, that would mean the labelMatcher doesn't have any child.
return matcher;

View file

@ -16,7 +16,7 @@ import { SyntaxNode } from '@lezer/common';
// walkBackward will iterate other the tree from the leaf to the root until it founds the given `exit` node.
// It returns null if the exit is not found.
export function walkBackward(node: SyntaxNode, exit: number): SyntaxNode | null {
const cursor = node.cursor;
const cursor = node.cursor();
let cursorIsMoving = true;
while (cursorIsMoving && cursor.type.id !== exit) {
cursorIsMoving = cursor.parent();
@ -29,7 +29,7 @@ export function walkBackward(node: SyntaxNode, exit: number): SyntaxNode | null
// Otherwise if it's not possible to reach the last id/name of the path, it will return `null`
// Note: the way followed during the iteration of the tree to find the given path, is only from the root to the leaf.
export function walkThrough(node: SyntaxNode, ...path: (number | string)[]): SyntaxNode | null {
const cursor = node.cursor;
const cursor = node.cursor();
let i = 0;
let cursorIsMoving = true;
path.unshift(cursor.type.id);
@ -50,7 +50,7 @@ export function walkThrough(node: SyntaxNode, ...path: (number | string)[]): Syn
}
export function containsAtLeastOneChild(node: SyntaxNode, ...child: (number | string)[]): boolean {
const cursor = node.cursor;
const cursor = node.cursor();
if (!cursor.next()) {
// let's try to move directly to the children level and
// return false immediately if the current node doesn't have any child
@ -64,7 +64,7 @@ export function containsAtLeastOneChild(node: SyntaxNode, ...child: (number | st
}
export function containsChild(node: SyntaxNode, ...child: (number | string)[]): boolean {
const cursor = node.cursor;
const cursor = node.cursor();
if (!cursor.next()) {
// let's try to move directly to the children level and
// return false immediately if the current node doesn't have any child

View file

@ -12,7 +12,6 @@
// limitations under the License.
import { parser } from '@prometheus-io/lezer-promql';
import { styleTags, tags } from '@codemirror/highlight';
import { Extension } from '@codemirror/state';
import { CompleteConfiguration, CompleteStrategy, newCompleteStrategy } from './complete';
import { LintStrategy, newLintStrategy, promQLLinter } from './lint';
@ -28,26 +27,6 @@ export function promQLLanguage(top: LanguageType): LRLanguage {
return LRLanguage.define({
parser: parser.configure({
top: top,
props: [
styleTags({
LineComment: tags.comment,
LabelName: tags.labelName,
StringLiteral: tags.string,
NumberLiteral: tags.number,
Duration: tags.number,
'Abs Absent AbsentOverTime Acos Acosh Asin Asinh Atan Atanh AvgOverTime Ceil Changes Clamp ClampMax ClampMin Cos Cosh CountOverTime DaysInMonth DayOfMonth DayOfWeek DayOfYear Deg Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month Pi PredictLinear PresentOverTime QuantileOverTime Rad Rate Resets Round Scalar Sgn Sin Sinh Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Tan Tanh Time Timestamp Vector Year':
tags.function(tags.variableName),
'Avg Bottomk Count Count_values Group Max Min Quantile Stddev Stdvar Sum Topk': tags.operatorKeyword,
'By Without Bool On Ignoring GroupLeft GroupRight Offset Start End': tags.modifier,
'And Unless Or': tags.logicOperator,
'Sub Add Mul Mod Div Atan2 Eql Neq Lte Lss Gte Gtr EqlRegex EqlSingle NeqRegex Pow At': tags.operator,
UnaryOp: tags.arithmeticOperator,
'( )': tags.paren,
'[ ]': tags.squareBracket,
'{ }': tags.brace,
'⚠': tags.invalid,
}),
],
}),
languageData: {
closeBrackets: { brackets: ['(', '[', '{', "'", '"', '`'] },

View file

@ -30,10 +30,12 @@
"test": "NODE_OPTIONS=--experimental-vm-modules jest"
},
"devDependencies": {
"@lezer/generator": "^0.15.4",
"@lezer/lr": "^0.15.8"
"@lezer/generator": "^1.0.0",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0"
},
"peerDependencies": {
"@lezer/lr": "^0.15.8"
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0"
}
}

View file

@ -0,0 +1,33 @@
// Copyright 2022 The Prometheus Authors
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import {styleTags, tags} from "@lezer/highlight";
export const promQLHighLight = styleTags({
LineComment: tags.comment,
LabelName: tags.labelName,
StringLiteral: tags.string,
NumberLiteral: tags.number,
Duration: tags.number,
'Abs Absent AbsentOverTime Acos Acosh Asin Asinh Atan Atanh AvgOverTime Ceil Changes Clamp ClampMax ClampMin Cos Cosh CountOverTime DaysInMonth DayOfMonth DayOfWeek DayOfYear Deg Delta Deriv Exp Floor HistogramQuantile HoltWinters Hour Idelta Increase Irate LabelReplace LabelJoin LastOverTime Ln Log10 Log2 MaxOverTime MinOverTime Minute Month Pi PredictLinear PresentOverTime QuantileOverTime Rad Rate Resets Round Scalar Sgn Sin Sinh Sort SortDesc Sqrt StddevOverTime StdvarOverTime SumOverTime Tan Tanh Time Timestamp Vector Year':
tags.function(tags.variableName),
'Avg Bottomk Count Count_values Group Max Min Quantile Stddev Stdvar Sum Topk': tags.operatorKeyword,
'By Without Bool On Ignoring GroupLeft GroupRight Offset Start End': tags.modifier,
'And Unless Or': tags.logicOperator,
'Sub Add Mul Mod Div Atan2 Eql Neq Lte Lss Gte Gtr EqlRegex EqlSingle NeqRegex Pow At': tags.operator,
UnaryOp: tags.arithmeticOperator,
'( )': tags.paren,
'[ ]': tags.squareBracket,
'{ }': tags.brace,
'⚠': tags.invalid,
})

View file

@ -357,6 +357,8 @@ NumberLiteral {
End
}
@external propSource promQLHighLight from "./highlight"
// FunctionIdentifier definitions
Abs { condFn<"abs"> }
Absent { condFn<"absent"> }

9208
web/ui/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -3,22 +3,20 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@codemirror/autocomplete": "^0.19.9",
"@codemirror/closebrackets": "^0.19.0",
"@codemirror/commands": "^0.19.5",
"@codemirror/comment": "^0.19.0",
"@codemirror/highlight": "^0.19.6",
"@codemirror/history": "^0.19.2",
"@codemirror/language": "^0.19.7",
"@codemirror/lint": "^0.19.3",
"@codemirror/matchbrackets": "^0.19.3",
"@codemirror/search": "^0.19.3",
"@codemirror/state": "^0.19.6",
"@codemirror/view": "^0.19.27",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@forevolve/bootstrap-dark": "^1.0.0",
"@fortawesome/fontawesome-svg-core": "6.1.1",
"@fortawesome/free-solid-svg-icons": "6.1.1",
"@fortawesome/react-fontawesome": "0.1.17",
"@lezer/lr": "^1.0.0",
"@lezer/highlight": "^1.0.0",
"@lezer/common": "^1.0.0",
"@nexucis/fuzzy": "^0.4.0",
"@nexucis/kvsearch": "^0.7.0",
"@prometheus-io/codemirror-promql": "0.19.0",

View file

@ -1,5 +1,6 @@
import { HighlightStyle, tags } from '@codemirror/highlight';
import { EditorView } from '@codemirror/view';
import { HighlightStyle } from '@codemirror/language';
import { tags } from '@lezer/highlight';
export const baseTheme = EditorView.theme({
'&.cm-editor': {

View file

@ -3,15 +3,18 @@ import { Button, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'
import { EditorView, highlightSpecialChars, keymap, ViewUpdate, placeholder } from '@codemirror/view';
import { EditorState, Prec, Compartment } from '@codemirror/state';
import { indentOnInput, syntaxTree } from '@codemirror/language';
import { history, historyKeymap } from '@codemirror/history';
import { defaultKeymap, insertNewlineAndIndent } from '@codemirror/commands';
import { bracketMatching } from '@codemirror/matchbrackets';
import { closeBrackets, closeBracketsKeymap } from '@codemirror/closebrackets';
import { bracketMatching, indentOnInput, syntaxHighlighting, syntaxTree } from '@codemirror/language';
import { defaultKeymap, history, historyKeymap, insertNewlineAndIndent } from '@codemirror/commands';
import { highlightSelectionMatches } from '@codemirror/search';
import { commentKeymap } from '@codemirror/comment';
import { lintKeymap } from '@codemirror/lint';
import { autocompletion, completionKeymap, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
import {
autocompletion,
completionKeymap,
CompletionContext,
CompletionResult,
closeBrackets,
closeBracketsKeymap,
} from '@codemirror/autocomplete';
import { baseTheme, lightTheme, darkTheme, promqlHighlighter } from './CMTheme';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -67,7 +70,7 @@ export class HistoryCompleteStrategy implements CompleteStrategy {
apply: q,
info: q.length < 80 ? undefined : q,
})),
span: /^[a-zA-Z0-9_:]+$/,
validFor: /^[a-zA-Z0-9_:]+$/,
};
if (res !== null) {
@ -110,7 +113,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
),
});
const dynamicConfig = [
enableHighlighting ? promqlHighlighter : [],
enableHighlighting ? syntaxHighlighting(promqlHighlighter) : [],
promqlExtension.asExtension(),
theme === 'dark' ? darkTheme : lightTheme,
];
@ -136,14 +139,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
autocompletion(),
highlightSelectionMatches(),
EditorView.lineWrapping,
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...historyKeymap,
...commentKeymap,
...completionKeymap,
...lintKeymap,
]),
keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, ...completionKeymap, ...lintKeymap]),
placeholder('Expression (press Shift+Enter for newlines)'),
dynamicConfigCompartment.of(dynamicConfig),
// This keymap is added without precedence so that closing the autocomplete dropdown
@ -157,7 +153,7 @@ const ExpressionInput: FC<CMExpressionInputProps> = ({
},
},
]),
Prec.override(
Prec.highest(
keymap.of([
{
key: 'Enter',