Merge pull request #5085 from oriondesign2015/main

Escape special characters in Monaco tokens and fix black screen in application

Author: ArtemHoruzhenko

redisinsight/ui/src/utils/monaco/monacoRedisMonarchTokensProvider.ts

@@ -5,15 +5,17 @@ import { IRedisCommand } from 'uiSrc/constants'
 
 const STRING_DOUBLE = 'string.double'
 
+const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
 export const getRedisMonarchTokensProvider = (
   commands: IRedisCommand[],
 ): monacoEditor.languages.IMonarchLanguage => {
   const commandRedisCommands = [...commands]
   const searchCommands = remove(commandRedisCommands, ({ token }) =>
     token?.startsWith(ModuleCommandPrefix.RediSearch),
   )
-  const COMMON_COMMANDS_REGEX = `^\\s*(\\d+\\s+)?(${commandRedisCommands.map(({ token }) => token).join('|')})\\b`
-  const SEARCH_COMMANDS_REGEX = `^\\s*(\\d+\\s+)?(${searchCommands.map(({ token }) => token).join('|')})\\b`
+  const COMMON_COMMANDS_REGEX = `^\\s*(\\d+\\s+)?(${commandRedisCommands.map(({ token }) => escapeRegex(token || '')).join('|')})\\b`
+  const SEARCH_COMMANDS_REGEX = `^\\s*(\\d+\\s+)?(${searchCommands.map(({ token }) => escapeRegex(token || '')).join('|')})\\b`
 
   return {
     defaultToken: '',

redisinsight/ui/src/utils/monaco/monarchTokens/redisearchTokensTemplates.ts

@@ -3,6 +3,9 @@ import { curryRight } from 'lodash'
 import { Maybe } from 'uiSrc/utils'
 import { IRedisCommand } from 'uiSrc/constants'
 
+// Escape special regex characters in tokens
+const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
 const appendToken = (token: string, name: Maybe<string>) =>
   name ? `${token}.${name}` : token
 export const generateQuery = (
@@ -17,7 +20,7 @@ export const generateQuery = (
   ): languages.IMonarchLanguageRule =>
     args?.length
       ? [
-          `(${args?.map(({ token }) => token).join('|')})\\b`,
+          `(${args?.map(({ token }) => escapeRegex(token || '')).join('|')})\\b`,
           { token: 'function', next: appendTokenName(tokenName) },
         ]
       : [/_/, '']

redisinsight/ui/src/utils/monaco/redisearch/utils.ts

@@ -5,6 +5,8 @@ import { generateQuery } from 'uiSrc/utils/monaco/monarchTokens/redisearchTokens
 import { ICommandTokenType, IRedisCommand } from 'uiSrc/constants'
 import { DefinedArgumentName } from 'uiSrc/pages/workbench/constants'
 
+const escapeRegex = (str: string) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
 export const generateKeywords = (commands: IRedisCommand[]) =>
   commands.map(({ name }) => name)
 export const generateTokens = (
@@ -153,7 +155,7 @@ export const getBlockTokens = (
 
     if (tokensWithNextExpression.length) {
       result.push([
-        `(${tokensWithNextExpression.map(({ token }) => token).join('|')})\\b`,
+        `(${tokensWithNextExpression.map(({ token }) => escapeRegex(token || '')).join('|')})\\b`,
         {
           token: `argument.block.${lvl}.${name}`,
           next: '@query',
@@ -163,7 +165,7 @@ export const getBlockTokens = (
 
     if (restTokens.length) {
       result.push([
-        `(${restTokens.map(({ token }) => token).join('|')})\\b`,
+        `(${restTokens.map(({ token }) => escapeRegex(token || '')).join('|')})\\b`,
         { token: `argument.block.${lvl}.${name}`, next: '@root' },
       ])
     }