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

…d remove word highlight onBlur
Its-treason · Mar 6, 2024 · 608a3a7 · 608a3a7
1 parent babdeab
commit 608a3a7
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 34 deletions.
diff --git a/packages/bruno-app/src/components/CodeEditor/Monaco/index.jsx b/packages/bruno-app/src/components/CodeEditor/Monaco/index.jsx
@@ -1,8 +1,9 @@
 import { Editor, useMonaco } from '@monaco-editor/react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { debounce } from 'lodash';
-import { addMonacoCommands, setMonacoVariables } from 'utils/monaco/monacoUtils';
+import { addMonacoCommands, addMonacoSingleLineActions, setMonacoVariables } from 'utils/monaco/monacoUtils';
 import { getAllVariables } from 'utils/collections';
+import { useTheme } from 'providers/Theme';
 
 const languages = {
   text: 'text',
@@ -26,56 +27,35 @@ export const MonacoEditor = ({
   onRun,
   onSave,
   readOnly,
-  theme,
   value,
   singleLine,
   withVariables = false,
   height = '60vh'
 }) => {
   const monaco = useMonaco();
+  const { displayedTheme } = useTheme();
 
   const debounceChanges = debounce((newValue) => {
     onChange(newValue);
   }, 300);
   const handleEditorChange = (value, event) => {
     debounceChanges(value);
   };
-  const finalTheme =
-    theme === 'system' ? (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark') : theme;
 
-  const onMount = (editor) => {
-    if (editor && monaco) {
-      addMonacoCommands({ monaco, editor, onChange, onSave, onRun });
-      if (singleLine) {
-        editor.onKeyDown((e) => {
-          if (e.keyCode === monaco.KeyCode.Enter) {
-            // We only prevent enter when the suggest model is not active
-            if (editor.getContribution('editor.contrib.suggestController').model.state == 0) {
-              e.preventDefault();
-            }
-          }
-        });
-
-        editor.onDidPaste((e) => {
-          // Remove all newlines for the singleline editor
-          if (e.range.endLineNumber > 1) {
-            let newContent = '';
-            let lineCount = editor.getModel().getLineCount();
-            for (let i = 0; i < lineCount; i++) {
-              newContent += editor.getModel().getLineContent(i + 1);
-            }
-            editor.getModel().setValue(newContent);
-          }
-        });
-      }
+  const onMount = (editor, monaco) => {
+    addMonacoCommands({ monaco, editor, onChange, onSave, onRun });
+    if (singleLine) {
+      addMonacoSingleLineActions(editor);
     }
   };
+
   const allVariables = getAllVariables(collection);
   useEffect(() => {
     if (allVariables && withVariables) {
       setMonacoVariables(monaco, allVariables, languages[mode] ?? 'plaintext');
     }
-  }, [allVariables, withVariables]);
+  }, [allVariables, withVariables, mode]);
+
   const singleLineOptions = singleLine
     ? {
         folding: false,
@@ -120,7 +100,7 @@ export const MonacoEditor = ({
       }}
       height={singleLine ? '22px' : height}
       className={!singleLine ? 'rounded-md border border-zinc-200 dark:border-zinc-700' : undefined}
-      theme={finalTheme === 'dark' ? 'bruno-dark' : 'bruno-light'}
+      theme={displayedTheme === 'dark' ? 'bruno-dark' : 'bruno-light'}
       language={languages[mode] ?? 'plaintext'}
       value={value}
       onMount={onMount}

diff --git a/packages/bruno-app/src/pages/ErrorBoundary/index.js b/packages/bruno-app/src/pages/ErrorBoundary/index.js
@@ -9,6 +9,11 @@ class ErrorBoundary extends React.Component {
   componentDidMount() {
     // Add a global error event listener to capture client-side errors
     window.onerror = (message, source, lineno, colno, error) => {
+      // This is caused by the monace editor during resizing
+      if (message === 'ResizeObserver loop limit exceeded') {
+        console.info('Ignoring "ResizeObserver loop limit exceeded" error');
+        return;
+      }
       console.error('Trigger onerror', { error, source, message, lineno, colno });
       this.setState({ hasError: true, error: error });
     };

diff --git a/packages/bruno-app/src/utils/monaco/monacoUtils.js b/packages/bruno-app/src/utils/monaco/monacoUtils.js
@@ -544,8 +544,34 @@ export const addMonacoCommands = ({ monaco, editor, onChange, onSave, onRun }) =
       editor.trigger('fold', 'editor.unfoldAll');
     })
   ];
-  editorActions.map((action) => {
-    editor.addAction(action);
+  editorActions.forEach((action) => editor.addAction(action));
+};
+
+export const addMonacoSingleLineActions = (editor) => {
+  editor.onKeyDown((e) => {
+    if (e.keyCode === monaco.KeyCode.Enter) {
+      // We only prevent enter when the suggest model is not active
+      if (editor.getContribution('editor.contrib.suggestController').model.state == 0) {
+        e.preventDefault();
+      }
+    }
+  });
+
+  editor.onDidPaste((e) => {
+    // Remove all newlines for the singleline editor
+    if (e.range.endLineNumber > 1) {
+      let newContent = '';
+      let lineCount = editor.getModel().getLineCount();
+      for (let i = 0; i < lineCount; i++) {
+        newContent += editor.getModel().getLineContent(i + 1);
+      }
+      editor.getModel().setValue(newContent);
+    }
+  });
+
+  // This will remove the highlighting of hovered words
+  editor.onDidBlurEditorText(() => {
+    editor.setPosition({ column: 1, lineNumber: 1 });
   });
 };