check response type to show XML not surrounded by quotation marks and with highlighting

packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js

@@ -35,7 +35,7 @@ const EnvironmentSelector = ({ collection }) => {
           toast.success(`No Environments are active now`);
         }
       })
-      .catch((err) => console.log(err) && toast.error('An error occured while selecting the environment'));
+      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
   };
 
   return (
@@ -64,7 +64,7 @@ const EnvironmentSelector = ({ collection }) => {
             }}
           >
             <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className='ml-2'>No Environment</span>
+            <span className="ml-2">No Environment</span>
           </div>
           <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
             <div className="pr-2 text-gray-600">

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

@@ -6,14 +6,12 @@ import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 
 import StyledWrapper from './StyledWrapper';
 
-const QueryResult = ({ item, collection, value, width, disableRunEventListener }) => {
+const QueryResult = ({ item, collection, value, width, disableRunEventListener, mode }) => {
-  const {
+  const { storedTheme } = useTheme();
-    storedTheme
-  } = useTheme();
   const dispatch = useDispatch();
 
   const onRun = () => {
-    if(disableRunEventListener) {
+    if (disableRunEventListener) {
       return;
     }
     dispatch(sendRequest(item, collection.uid));
@@ -22,7 +20,7 @@ const QueryResult = ({ item, collection, value, width, disableRunEventListener }
   return (
     <StyledWrapper className="px-3 w-full" style={{ maxWidth: width }}>
       <div className="h-full">
-        <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value || ''} 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,7 @@ import React from 'react';
 import find from 'lodash/find';
 import classnames from 'classnames';
 import { safeStringifyJSON } from 'utils/common';
-import { useSelector, useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { updateResponsePaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryResult from './QueryResult';
 import Overlay from './Overlay';
@@ -36,18 +36,21 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const getTabPanel = (tab) => {
     switch (tab) {
       case 'response': {
-        return <QueryResult
+        return (
-          item={item}
+          <QueryResult
-          collection={collection}
+            item={item}
-          width={rightPaneWidth}
+            collection={collection}
-          value={response.data ? safeStringifyJSON(response.data, true) : ''}
+            width={rightPaneWidth}
-        />;
+            value={response.data ? (isJson(response.headers) ? safeStringifyJSON(response.data, true) : response.data) : ''}
+            mode={getContentType(response.headers)}
+          />
+        );
       }
       case 'headers': {
         return <ResponseHeaders headers={response.headers} />;
       }
       case 'timeline': {
-        return <Timeline request={item.requestSent} response={item.response}/>;
+        return <Timeline request={item.requestSent} response={item.response} />;
       }
       case 'tests': {
         return <TestResults results={item.testResults} assertionResults={item.assertionResults} />;
@@ -81,7 +84,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
 
   const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
   if (!focusedTab || !focusedTab.uid || !focusedTab.responsePaneTab) {
-    return <div className="pb-4 px-4">An error occured!</div>;
+    return <div className="pb-4 px-4">An error occurred!</div>;
   }
 
   const getTabClassname = (tabName) => {
@@ -90,6 +93,28 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
     });
   };
 
+  const getContentType = (headers) => {
+    if (headers && headers.length) {
+      let contentType = headers
+        .filter((header) => header[0].toLowerCase() === 'content-type')
+        .map((header) => {
+          return header[1];
+        });
+      if (contentType && contentType.length) {
+        if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?json/.test(contentType[0])) {
+          return 'application/ld+json';
+        } else if (typeof contentType[0] == 'string' && /^[\w\-]+\/([\w\-]+\+)?xml/.test(contentType[0])) {
+          return 'application/xml';
+        }
+      }
+    }
+    return '';
+  };
+
+  const isJson = (headers) => {
+    return getContentType(headers) === 'application/ld+json';
+  };
+
   return (
     <StyledWrapper className="flex flex-col h-full relative">
       <div className="flex items-center px-3 tabs" role="tablist">