diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js index 88fe4ee014..03b60d1d79 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js @@ -69,6 +69,7 @@ const QueryUrl = ({ item, collection, handleRun }) => { onChange={(newValue) => onUrlChange(newValue)} onRun={handleRun} collection={collection} + highlightPathParams={true} item={item} />
diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js index 3b901fc25f..dbb46191b2 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/index.js +++ b/packages/bruno-app/src/components/SingleLineEditor/index.js @@ -131,8 +131,8 @@ class SingleLineEditor extends Component { addOverlay = (variables) => { this.variables = variables; - defineCodeMirrorBrunoVariablesMode(variables, 'text/plain'); - this.editor.setOption('mode', 'combinedmode'); + defineCodeMirrorBrunoVariablesMode(variables, 'text/plain', this.props.highlightPathParams); + this.editor.setOption('mode', 'brunovariables'); }; render() { diff --git a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js index 1632aa43ae..eb6a0cc7ae 100644 --- a/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js +++ b/packages/bruno-app/src/utils/codemirror/brunoVarInfo.js @@ -31,8 +31,8 @@ if (!SERVER_RENDERED) { if (str.startsWith('{{')) { variableName = str.replace('{{', '').replace('}}', '').trim(); variableValue = interpolate(get(options.variables, variableName), options.variables); - } else if (str.startsWith(':')) { - variableName = str.replace(':', '').trim(); + } else if (str.startsWith('/:')) { + variableName = str.replace('/:', '').trim(); variableValue = options.variables && options.variables.pathParams ? options.variables.pathParams[variableName] : undefined; } diff --git a/packages/bruno-app/src/utils/common/codemirror.js b/packages/bruno-app/src/utils/common/codemirror.js index ecd1974286..f4013a3668 100644 --- a/packages/bruno-app/src/utils/common/codemirror.js +++ b/packages/bruno-app/src/utils/common/codemirror.js @@ -12,8 +12,9 @@ const pathFoundInVariables = (path, obj) => { return value !== undefined; }; -export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => { - CodeMirror.defineMode('combinedmode', function (config, parserConfig) { +export const defineCodeMirrorBrunoVariablesMode = (_variables, mode, highlightPathParams) => { + CodeMirror.defineMode('brunovariables', function (config, parserConfig) { + const { pathParams = {}, ...variables } = _variables || {}; const variablesOverlay = { token: function (stream) { if (stream.match('{{', true)) { @@ -37,13 +38,13 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => { const urlPathParamsOverlay = { token: function (stream) { - if (stream.match(':', true)) { + if (stream.match('/:', true)) { let ch; let word = ''; while ((ch = stream.next()) != null) { if (ch === '/' || ch === '?' || ch === '&' || ch === '=') { stream.backUp(1); - const found = pathFoundInVariables(word, variables?.pathParams); + const found = pathFoundInVariables(word, pathParams); const status = found ? 'valid' : 'invalid'; const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`; return `variable-${status} ${randomClass}`; @@ -53,21 +54,24 @@ export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => { // If we've consumed all characters and the word is not empty, it might be a path parameter at the end of the URL. if (word) { - const found = pathFoundInVariables(word, variables?.pathParams); + const found = pathFoundInVariables(word, pathParams); const status = found ? 'valid' : 'invalid'; const randomClass = `random-${(Math.random() + 1).toString(36).substring(9)}`; return `variable-${status} ${randomClass}`; } } - stream.skipTo(':') || stream.skipToEnd(); + stream.skipTo('/:') || stream.skipToEnd(); return null; } }; - return CodeMirror.overlayMode( - CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay), - urlPathParamsOverlay - ); + let baseMode = CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay); + + if (highlightPathParams) { + return CodeMirror.overlayMode(baseMode, urlPathParamsOverlay); + } else { + return baseMode; + } }); };