diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index 8fa03f4c..6cb0188e 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -30,7 +30,6 @@ const StyledWrapper = styled.div` .cm-variable-valid{color: green} .cm-variable-invalid{color: red} - .cm-matchhighlight {background-color: yellow} `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js index 57c46945..d7f986a6 100644 --- a/packages/bruno-app/src/components/CodeEditor/index.js +++ b/packages/bruno-app/src/components/CodeEditor/index.js @@ -6,6 +6,9 @@ */ import React from 'react'; +import isEqual from 'lodash/isEqual'; +import { getEnvironmentVariables } from 'utils/collections'; +import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror'; import StyledWrapper from './StyledWrapper'; let CodeMirror; @@ -15,7 +18,7 @@ if (!SERVER_RENDERED) { CodeMirror = require('codemirror'); } -export default class QueryEditor extends React.Component { +export default class CodeEditor extends React.Component { constructor(props) { super(props); @@ -23,6 +26,7 @@ export default class QueryEditor extends React.Component { // editor is updated, which can later be used to protect the editor from // unnecessary updates during the update lifecycle. this.cachedValue = props.value || ''; + this.variables = {}; } componentDidMount() { @@ -31,7 +35,6 @@ export default class QueryEditor extends React.Component { lineNumbers: true, lineWrapping: true, tabSize: 2, - highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, mode: this.props.mode || 'application/ld+json', keyMap: 'sublime', autoCloseBrackets: true, @@ -93,7 +96,10 @@ export default class QueryEditor extends React.Component { } if(this.editor) { - this.addOverlay(); + let variables = getEnvironmentVariables(this.props.collection); + if (!isEqual(variables, this.variables)) { + this.addOverlay(); + } } if (this.props.theme !== prevProps.theme && this.editor) { @@ -122,37 +128,11 @@ export default class QueryEditor extends React.Component { } addOverlay = () => { - var variables = { - "host": "", - "token": "" - }; const mode = this.props.mode || 'application/ld+json'; - - CodeMirror.defineMode("brunovariables", function(config, parserConfig) { - let variablesOverlay = { - token: function(stream, state) { - if (stream.match("{{", true)) { - let ch; - let word = ""; - while ((ch = stream.next()) != null) { - if (ch == "}" && stream.next() == "}") { - stream.eat("}"); - if (word in variables) { - return "variable-valid"; - } else { - return "variable-invalid"; - } - } - word += ch; - } - } - while (stream.next() != null && !stream.match("{{", false)) {} - return null; - } - }; - return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay); - }); + let variables = getEnvironmentVariables(this.props.collection); + this.variables = variables; + defineCodeMirrorBrunoVariablesMode(variables, mode); this.editor.setOption('mode', 'brunovariables'); } diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js index 39ccb0f9..a9f3b4b5 100644 --- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js +++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js @@ -67,6 +67,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog switch (tab) { case 'query': { return { + let variables = getEnvironmentVariables(this.props.collection); + this.variables = variables; + console.log(variables); + + defineCodeMirrorBrunoVariablesMode(variables, "text/plain"); + this.editor.setOption('mode', 'brunovariables'); + } + render() { return ( { return ( - + ); } diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js index fa6ba6a1..1ef44409 100644 --- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js +++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js @@ -17,7 +17,7 @@ const QueryResult = ({ item, collection, value, width }) => { return (
- +
); diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js index fc84d7f5..e6cfc7fb 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js @@ -27,7 +27,6 @@ const StyledWrapper = styled.div` .cm-variable-valid{color: green} .cm-variable-invalid{color: red} - .cm-matchhighlight {background-color: yellow} `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js index 495519cd..e59246da 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/index.js +++ b/packages/bruno-app/src/components/SingleLineEditor/index.js @@ -1,10 +1,16 @@ import React, { Component } from 'react'; -import CodeMirror from 'codemirror'; -import each from 'lodash/each'; import isEqual from 'lodash/isEqual'; -import { findEnvironmentInCollection } from 'utils/collections'; +import { getEnvironmentVariables } from 'utils/collections'; +import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror'; import StyledWrapper from './StyledWrapper'; +let CodeMirror; +const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true; + +if (!SERVER_RENDERED) { + CodeMirror = require('codemirror'); +} + class SingleLineEditor extends Component { constructor(props) { super(props); @@ -35,7 +41,7 @@ class SingleLineEditor extends Component { } componentDidUpdate(prevProps) { - let variables = this.getEnvironmentVariables(); + let variables = getEnvironmentVariables(this.props.collection); if (!isEqual(variables, this.variables)) { this.addOverlay(); } @@ -45,52 +51,11 @@ class SingleLineEditor extends Component { this.editor.getWrapperElement().remove(); } - getEnvironmentVariables = () => { - let variables = {}; - const collection = this.props.collection; - if (collection) { - const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid); - if (environment) { - each(environment.variables, (variable) => { - if(variable.name && variable.value && variable.enabled) { - variables[variable.name] = variable.value; - } - }); - } - } - - return variables; - } - addOverlay = () => { - let variables = this.getEnvironmentVariables(); + let variables = getEnvironmentVariables(this.props.collection); this.variables = variables; - - CodeMirror.defineMode("brunovariables", function(config, parserConfig) { - let variablesOverlay = { - token: function(stream, state) { - if (stream.match("{{", true)) { - let ch; - let word = ""; - while ((ch = stream.next()) != null) { - if (ch == "}" && stream.next() == "}") { - stream.eat("}"); - if (word in variables) { - return "variable-valid"; - } else { - return "variable-invalid"; - } - } - word += ch; - } - } - while (stream.next() != null && !stream.match("{{", false)) {} - return null; - } - }; - return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/plain"), variablesOverlay); - }); + defineCodeMirrorBrunoVariablesMode(variables, "text/plain"); this.editor.setOption('mode', 'brunovariables'); } diff --git a/packages/bruno-app/src/pageComponents/Index/index.js b/packages/bruno-app/src/pageComponents/Index/index.js index 015cfadc..d7e5d101 100644 --- a/packages/bruno-app/src/pageComponents/Index/index.js +++ b/packages/bruno-app/src/pageComponents/Index/index.js @@ -18,15 +18,12 @@ if (!SERVER_RENDERED) { require('codemirror/addon/fold/foldgutter'); require('codemirror/addon/mode/overlay'); require('codemirror/addon/hint/show-hint'); - require('codemirror/addon/scroll/annotatescrollbar'); require('codemirror/keymap/sublime'); require('codemirror/addon/comment/comment'); require('codemirror/addon/edit/closebrackets'); require('codemirror/addon/search/search'); require('codemirror/addon/search/searchcursor'); require('codemirror/addon/search/jump-to-line'); - require('codemirror/addon/search/matchesonscrollbar'); - require('codemirror/addon/search/match-highlighter'); require('codemirror/addon/dialog/dialog'); require('codemirror-graphql/hint'); diff --git a/packages/bruno-app/src/utils/collections/index.js b/packages/bruno-app/src/utils/collections/index.js index d9923e82..3498458c 100644 --- a/packages/bruno-app/src/utils/collections/index.js +++ b/packages/bruno-app/src/utils/collections/index.js @@ -549,3 +549,19 @@ export const getDefaultRequestPaneTab = (item) => { return 'query'; } }; + +export const getEnvironmentVariables = (collection) => { + let variables = {}; + if (collection) { + const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid); + if (environment) { + each(environment.variables, (variable) => { + if(variable.name && variable.value && variable.enabled) { + variables[variable.name] = variable.value; + } + }); + } + } + + return variables; +} diff --git a/packages/bruno-app/src/utils/common/codemirror.js b/packages/bruno-app/src/utils/common/codemirror.js new file mode 100644 index 00000000..cc54dcb6 --- /dev/null +++ b/packages/bruno-app/src/utils/common/codemirror.js @@ -0,0 +1,35 @@ + +let CodeMirror; +const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true; + +if (!SERVER_RENDERED) { + CodeMirror = require('codemirror'); +} + +export const defineCodeMirrorBrunoVariablesMode = (variables, mode) => { + CodeMirror.defineMode("brunovariables", function(config, parserConfig) { + let variablesOverlay = { + token: function(stream, state) { + if (stream.match("{{", true)) { + let ch; + let word = ""; + while ((ch = stream.next()) != null) { + if (ch == "}" && stream.next() == "}") { + stream.eat("}"); + if (word in variables) { + return "variable-valid"; + } else { + return "variable-invalid"; + } + } + word += ch; + } + } + while (stream.next() != null && !stream.match("{{", false)) {} + return null; + } + }; + + return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay); + }); +}; \ No newline at end of file