Feature/monaco #1450

bpoulaindev · 2024-01-25T17:24:11Z

Description

Integration of the Monaco Editor (same one that's powering Visual Studio Code)
This integration will provide a more user-friendly code editor for all of those used to Vs Code or IntelliJ.
It will also help us enhance the coding experience and make it easier to add our own custom commands later on.

Major benefits :

Autocompletion with the whole javascript ecosystem
Code tooltips for javascript AND bru, req and res commands
Horizontal scrolling for long lines
Links opening directly in the browser
Multiple themes (although i only selected 2 atm)
Better code search

Veed.Create.Edit.mp4

Closing issue #1339

Contribution Checklist:

The pull request only addresses one issue or adds one feature.
The pull request does not introduce any breaking changes
I have added screenshots or gifs to help explain the change if applicable.
I have read the contribution guidelines.
Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

…hortcuts and add style

Merging changes from 1.5.1

…s, a little bit of styling

…ce all existing CodeEditors

…ultiple IDE instances

…linting

…lement bru commands autocompletion

…mmands

…itignore

…aphql

bpoulaindev · 2024-01-27T10:55:30Z

Please don't merge it now, it's almost ready.
I added a tooltip to see variables in the URL but I'm currently experiencing re-renders and so there are duplicated values in the tooltip

martinsefcik · 2024-01-27T23:17:43Z

I played a bit with this, but I still see a quite a lot of issues there:

is it possible to press enter in single line editor and create new lines

Recording.2024-01-27.235635.mp4
variable names are not colored (red/green) based on defined/undefined
if I move cursor over variable name then value is not displayed in tooltip but instead tooltip with info I can open url in browser with ctrl+click, do we need urls clickable in single line editor (e.g. in request url) or even in multiline editor ?
background color of request url text field is the same as the rest of this area with method, save and run button (it does not look same for me as it is on your video, I'm not sure why)
this minimap on right side is displayed also in single editor, probably in bruno it is not needed even for multi line editor
styling of whole editor is not good it is not clear where the editor area exactly is

martinsefcik · 2024-01-27T18:43:04Z

packages/bruno-app/src/providers/App/index.js


 export const AppContext = React.createContext();

 export const AppProvider = (props) => {
  useTelemetry();
  useIpcEvents();
-
+  // useCollectionNextAction();


Remove if not needed

martinsefcik · 2024-01-27T23:26:42Z

packages/bruno-app/src/components/SingleLineEditor/index.js

@@ -165,7 +164,7 @@ class SingleLineEditor extends Component {
    let variables = getAllVariables(this.props.collection);
    this.variables = variables;

-    defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');
+    // defineCodeMirrorBrunoVariablesMode(variables, 'text/plain');


Remove if not needed

martinsefcik · 2024-01-27T23:28:37Z

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -41,26 +41,28 @@ const Script = ({ item, collection }) => {
  return (
    <StyledWrapper className="w-full flex flex-col">
      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <CodeEditor
+        <h3 className="title text-xs mb-2">Pre Request</h3>


Changed to h3, but the same Pre request title is also at least on request Vars tab. So would leave it as it was or change it everywhere to look the same.

martinsefcik · 2024-01-27T23:28:54Z

packages/bruno-app/src/components/RequestPane/Script/index.js

-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <CodeEditor
+      <div className="flex-1 pb-6 mt-2">
+        <h3 className="mb-2 title text-xs">Post Response</h3>


Changed to h3, but the same Post response title is also at least on request Vars tab. So would leave it as it was or change it everywhere to look the same.

martinsefcik · 2024-01-27T23:31:14Z

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -5,22 +5,14 @@
 *  LICENSE file in the root directory of this source tree.
 */

-import React from 'react';
+/* import React from 'react';


Remove code (in whole file) if not needed instead of putting it in the comments.

martinsefcik · 2024-01-27T23:32:31Z

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -18,6 +17,7 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import StyledWrapper from './StyledWrapper';
 import Documentation from 'components/Documentation/index';
 import GraphQLSchemaActions from '../GraphQLSchemaActions/index';
+import { MonacoEditor } from 'components/MonacoEditor';

 const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {


I guess handleGqlClickReference could be removed if not needed anymore.

bpoulaindev · 2024-01-28T00:19:31Z

Thanks for your feedback @martinsefcik , yes indeed i still have some fixes to do regarding the {{..}} syntax, i got it to work, my only issue is with the tooltip. I solved the single line issue and the background color, the border is a bit more difficult, i wanted to do it with pure tailwind classes but we're still in tailwind v2, we don't have child selectors enabled.

… variables in json not working, tooltip infinite re render

bpoulaindev · 2024-01-31T08:21:27Z

Well i fixed a lot of stuff there but there are two things i can't make function properly :

Json with {{variable}}
variable in query url with http://prefix

bpoulaindev · 2024-02-12T15:42:04Z

Great news, i managed to add dynamic tokenizer with custom colors, depending on the variable's status (see examples below) :

…change

…ch between 2 IDEs

bpoulaindev · 2024-02-22T17:19:23Z

@helloanoop i added the changes you required, we can now switch between Monaco and Codemirror (codemirror is on by default)

…or logging

…d remove word highlight onBlur

- Better styling for singleline editor - Multiline singleline editor - Improved hover Ref: usebruno#1450

Baptiste POULAIN and others added 12 commits December 14, 2023 17:22

feature(react-codemirror): add basic CodeEditor2, need to implement s…

136993e

…hortcuts and add style

Merge branch 'main' into feature/react-codemirror

af54e96

Merging changes from 1.5.1

feature(react-codemirror): use react component, reuse custom shortcut…

7a6de1f

…s, a little bit of styling

feature(react-codemirror): styling on search component, need to repla…

a7e82ed

…ce all existing CodeEditors

feature(react_codemirror): performance issue, probably from running m…

250e7be

…ultiple IDE instances

feature(react-codemirror): fixed performance issue, need to add linting

7b56920

feature(react_codemirror): stabilized debounce, not satisfied by the …

985dbc7

…linting

feature(monaco): added monaco editor, stable integration, need to imp…

0ceaedb

…lement bru commands autocompletion

feature(monaco): cleanup monaco utils & commands, autocomplete bru co…

5db2274

…mmands

feature(monaco): autocomplete bru, req & res + code tooltips

2431211

feature(monaco): merge changes from main

3904cc4

feature(monaco): update package lock

0c5f892

bpoulaindev mentioned this pull request Jan 26, 2024

[Feature request]: migrate to react-codemirror #1212

Open

bpoulaindev added 2 commits January 26, 2024 11:17

feature(monaco): bring back previous package_lock, add bun.lockb to g…

ce10945

…itignore

feature(monaco): remove codemirror, monaco for single line, enable gr…

e9591f5

…aphql

martinsefcik reviewed Jan 27, 2024

View reviewed changes

feature(monaco): fixe line return in single line, add bg-transparent,…

a92d1a4

… variables in json not working, tooltip infinite re render

bpoulaindev marked this pull request as draft January 31, 2024 08:26

sanjai0py mentioned this pull request Feb 2, 2024

{Feature} Code generator doesn't keep it's formatting when pasting into word #1492

Open

feat(monaco): fix duplicated suggestions through hoverProvider

83d2832

bpoulaindev added 4 commits February 12, 2024 16:42

feat(monaco): dynamic tokenizer, custom colors for environment variables

b458927

feat(monaco): very painful merge

7a937ac

feat(monaco): updated lock file

eb1b74e

feature(monaco): fix editor colors, fix hoverProvider refresh on env …

bfe9840

…change

bpoulaindev marked this pull request as ready for review February 19, 2024 15:34

bpoulaindev added 3 commits February 22, 2024 15:55

feature(monaco_beta): retrieve changes, monaco alongside codemirror

a6bb706

feature(monaco_beta): editor tab in preferences, codemirror by default

74b1fd5

feature(monaco): merge changes from beta, bring back codemirror, swit…

3bcab4f

…ch between 2 IDEs

Its-treason added a commit to Its-treason/bruno that referenced this pull request Mar 3, 2024

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

fb72978

Its-treason added a commit to Its-treason/bruno that referenced this pull request Mar 5, 2024

fix(usebruno#1450): Improvements for the monaco editor and better err…

2924c94

…or logging

Its-treason added a commit to Its-treason/bruno that referenced this pull request Mar 5, 2024

fix(usebruno#1450): Better hover for variables in Monaco editor

babdeab

Its-treason added a commit to Its-treason/bruno that referenced this pull request Mar 6, 2024

fix(usebruno#1450): Monaco editor refactoring, ignore Resize error an…

608a3a7

…d remove word highlight onBlur

Its-treason added a commit to Its-treason/bruno that referenced this pull request Mar 7, 2024

fix(usebruno#1450): Monaco editor refactoring

1999c29

Its-treason added a commit to Its-treason/bruno that referenced this pull request May 11, 2024

feat: Improve Manoco editor implementation

86f0e3f

- Better styling for singleline editor - Multiline singleline editor - Improved hover Ref: usebruno#1450

helloanoop assigned lohxt1 Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/monaco #1450

Feature/monaco #1450

bpoulaindev commented Jan 25, 2024

bpoulaindev commented Jan 27, 2024

martinsefcik commented Jan 27, 2024

martinsefcik Jan 27, 2024

martinsefcik Jan 27, 2024

martinsefcik Jan 27, 2024

martinsefcik Jan 27, 2024

martinsefcik Jan 27, 2024 •

edited

Loading

martinsefcik Jan 27, 2024

bpoulaindev commented Jan 28, 2024

bpoulaindev commented Jan 31, 2024

bpoulaindev commented Feb 12, 2024

bpoulaindev commented Feb 22, 2024 •

edited

Loading

Feature/monaco #1450

Are you sure you want to change the base?

Feature/monaco #1450

Conversation

bpoulaindev commented Jan 25, 2024

Description

Contribution Checklist:

Publishing to New Package Managers

bpoulaindev commented Jan 27, 2024

martinsefcik commented Jan 27, 2024

martinsefcik Jan 27, 2024

Choose a reason for hiding this comment

martinsefcik Jan 27, 2024

Choose a reason for hiding this comment

martinsefcik Jan 27, 2024

Choose a reason for hiding this comment

martinsefcik Jan 27, 2024

Choose a reason for hiding this comment

martinsefcik Jan 27, 2024 • edited Loading

Choose a reason for hiding this comment

martinsefcik Jan 27, 2024

Choose a reason for hiding this comment

bpoulaindev commented Jan 28, 2024

bpoulaindev commented Jan 31, 2024

bpoulaindev commented Feb 12, 2024

bpoulaindev commented Feb 22, 2024 • edited Loading

martinsefcik Jan 27, 2024 •

edited

Loading

bpoulaindev commented Feb 22, 2024 •

edited

Loading