fix(usebruno#1450): Improvements for the monaco editor

Its-treason · Mar 3, 2024 · fb72978 · fb72978
1 parent eebd214
commit fb72978
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 13 deletions.
diff --git a/packages/bruno-app/src/components/CodeEditor/Codemirror/SingleLineEditor/index.js b/packages/bruno-app/src/components/CodeEditor/Codemirror/SingleLineEditor/index.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import isEqual from 'lodash/isEqual';
 import { getAllVariables } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
+import { defineCodeMirrorBrunoVariablesMode } from 'utils/common/codemirror';
 
 let CodeMirror;
 const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
@@ -164,7 +165,7 @@ class SingleLineEditor extends Component {
     let variables = getAllVariables(this.props.collection);
     this.variables = variables;
 
-    // defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
+    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
     this.editor.setOption('mode', 'brunovariables');
   };
 

diff --git a/packages/bruno-app/src/components/CodeEditor/Monaco/index.jsx b/packages/bruno-app/src/components/CodeEditor/Monaco/index.jsx
@@ -71,7 +71,7 @@ export const MonacoEditor = ({
   const allVariables = getAllVariables(collection);
   useEffect(() => {
     if (allVariables && withVariables) {
-      setMonacoVariables(monaco, allVariables, 'javascript');
+      setMonacoVariables(monaco, allVariables, languages[mode] ?? 'plaintext');
     }
   }, [allVariables, withVariables]);
   const singleLineOptions = singleLine
@@ -99,7 +99,6 @@ export const MonacoEditor = ({
       options={{
         fontSize: font,
         readOnly: readOnly,
-        minimap: { enabled: !singleLine },
         wordWrap: 'off',
         wrappingIndent: 'indent',
         autoIndent: 'keep',
@@ -114,10 +113,10 @@ export const MonacoEditor = ({
         renderLineHighlight: 'none',
         ...singleLineOptions
       }}
-      height={singleLine ? '20px' : height}
+      height={singleLine ? '21px' : height}
       className="rounded-md h-full w-full flex border border-zinc-200 dark:border-zinc-700"
       theme={finalTheme === 'dark' ? 'bruno-dark' : 'bruno-light'}
-      language={withVariables ? 'javascript' : languages[mode]}
+      language={languages[mode] ?? 'plaintext'}
       value={cachedValue}
       onMount={onMount}
       onChange={!readOnly ? handleEditorChange : () => {}}

diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js
@@ -96,6 +96,7 @@ const QueryParams = ({ item, collection }) => {
                         value={param.value}
                         theme={storedTheme}
                         onSave={onSave}
+                        withVariables
                         onChange={(newValue) =>
                           handleParamChange(
                             {

diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -61,7 +61,7 @@ const RequestTab = ({ tab, collection }) => {
 
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
   const theme = storedTheme === 'dark' ? darkTheme : lightTheme;
-  const color = useMemo(() => theme.request.methods[method], [method]);
+  const color = useMemo(() => theme.request.methods[method.toLowerCase()], [method]);
   return (
     <StyledWrapper className="flex items-center justify-between tab-container px-1">
       {showConfirmClose && (

diff --git a/packages/bruno-app/src/components/RequestTabs/index.js b/packages/bruno-app/src/components/RequestTabs/index.js
@@ -10,9 +10,9 @@ import CollectionToolBar from './CollectionToolBar';
 import RequestTab from './RequestTab';
 import StyledWrapper from './StyledWrapper';
 import ConfirmRequestClose from './RequestTab/ConfirmRequestClose/index';
-import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections/index';
+import { deleteRequestDraft } from 'providers/ReduxStore/slices/collections';
 import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import { findItemInCollection } from 'utils/collections/index';
+import { findItemInCollection } from 'utils/collections';
 
 const RequestTabs = () => {
   const dispatch = useDispatch();

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultMode/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultMode/index.js
@@ -1,5 +1,4 @@
 import { getContentType, safeParseXML, safeStringifyJSON } from 'utils/common';
-import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 import React, { useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import StyledWrapper from 'components/ResponsePane/QueryResult/QueryResultMode/StyledWrapper';

diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultViewer/index.js
@@ -64,6 +64,7 @@ const QueryResultPreview = ({
           onRun={onRun}
           value={formattedData}
           mode={mode}
+          height={'100%'}
           readOnly
         />
       );
@@ -78,6 +79,7 @@ const QueryResultPreview = ({
           onRun={onRun}
           value={atob(dataBuffer)}
           mode={mode}
+          height={'100%'}
           readOnly
         />
       );

diff --git a/packages/bruno-app/src/utils/monaco/monacoUtils.js b/packages/bruno-app/src/utils/monaco/monacoUtils.js
@@ -286,7 +286,7 @@ export const setCustomLanguage = (monaco) => {
 
 let oldHoverProvider = null;
 
-export const setMonacoVariables = (monaco, variables, mode = 'javascript', isQuery) => {
+export const setMonacoVariables = (monaco, variables, mode = '*') => {
   const allVariables = Object.entries(variables ?? {});
   monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     diagnosticCodesToIgnore: [1109, 2580, 2451, 80005, 1375, 1378]
@@ -320,13 +320,12 @@ export const setMonacoVariables = (monaco, variables, mode = 'javascript', isQue
       ]
     }
   });
-  const newHoverProvider = monaco.languages.registerHoverProvider('javascript', {
+  const newHoverProvider = monaco.languages.registerHoverProvider(mode, {
     provideHover: (model, position) => {
       // Rebuild the hoverProvider to avoid memory leaks
       const word = getWordAtPosition(model, position);
       const variable = allVariables.find(([key, _]) => key === word);
       if (variable) {
-        console.log('hey look what i found !!!', variable[0]);
         return {
           range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
           contents: [{ value: `**${variable[0]}**` }, { value: variable[1] }]

diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
@@ -18,14 +18,14 @@ const lastOpenedCollections = new LastOpenedCollections();
 const contentSecurityPolicy = [
   "default-src 'self'",
   "script-src * 'unsafe-inline' 'unsafe-eval'",
+  'worker-src blob:',
   "connect-src * 'unsafe-inline'",
   "font-src 'self' https:",
   // this has been commented out to make oauth2 work
   // "form-action 'none'",
   "img-src 'self' blob: data: https:",
   "style-src 'self' 'unsafe-inline' https:"
 ];
-
 setContentSecurityPolicy(contentSecurityPolicy.join(';') + ';');
 
 const menu = Menu.buildFromTemplate(menuTemplate);