fix(#279): fixed codemirror crashes resulting in white screen

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -3,10 +3,12 @@ import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
+import { getContentType, safeStringifyJSON, safeParseXML } from 'utils/common';
+import { getCodeMirrorModeBasedOnContentType } from 'utils/common/codemirror';
 
 import StyledWrapper from './StyledWrapper';
 
-const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
+const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => {
   const { storedTheme } = useTheme();
   const dispatch = useDispatch();
 
@@ -17,17 +19,50 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener,
     dispatch(sendRequest(item, collection.uid));
   };
 
+  const contentType = getContentType(headers);
+  const mode = getCodeMirrorModeBasedOnContentType(contentType);
+
+  const formatResponse = (data, mode) => {
+    if (!data) {
+      return '';
+    }
+
+    if (mode.includes('json')) {
+      return safeStringifyJSON(data, true);
+    }
+
+    if (mode.includes('xml')) {
+      let parsed = safeParseXML(data, { collapseContent: true });
+
+      if (typeof parsed === 'string') {
+        return parsed;
+      }
+
+      return safeStringifyJSON(parsed, true);
+    }
+
+    if (['text', 'html'].includes(mode)) {
+      if (typeof data === 'string') {
+        return data;
+      }
+
+      return safeStringifyJSON(data);
+    }
+
+    // final fallback
+    if (typeof data === 'string') {
+      return data;
+    }
+
+    return safeStringifyJSON(data);
+  };
+
+  const value = formatResponse(data, mode);
+
   return (
     <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
       <div className="h-full">
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          onRun={onRun}
-          value={value || ''}
-          mode={mode}
-          readOnly
-        />
+        <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />
       </div>
     </StyledWrapper>
   );

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

@@ -2,7 +2,6 @@ import React from 'react';
 import find from 'lodash/find';
 import classnames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
-import { getContentType, formatResponse } from 'utils/common';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryResult from './QueryResult';
 import Overlay from './Overlay';
@@ -41,8 +40,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             item={item}
             collection={collection}
             width={rightPaneWidth}
-            value={response.data ? formatResponse(response) : ''}
-            mode={getContentType(response.headers)}
+            data={response.data}
+            headers={response.headers}
           />
         );
       }

packages/bruno-app/src/components/RunnerResults/ResponsePane/index.js

@@ -33,7 +33,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
             collection={collection}
             width={rightPaneWidth}
             disableRunEventListener={true}
-            value={responseReceived && responseReceived.data ? safeStringifyJSON(responseReceived.data, true) : ''}
+            data={responseReceived.data}
+            headers={responseReceived.headers}
           />
         );
       }