feat: docs refactor

packages/bruno-app/src/components/Documentation/MarkdownBody.js

@@ -1,28 +0,0 @@
-import StyledMarkdownBodyWrapper from './StyledMarkdownBodyWrapper';
-
-const MarkdownBody = (props) => {
-  const handleOnDoubleClick = () => {
-    switch (event.detail) {
-      case 2: {
-        props.OnDoubleClick();
-        break;
-      }
-      case 1:
-      default: {
-        break;
-      }
-    }
-  };
-
-  return (
-    <StyledMarkdownBodyWrapper theme={props.theme}>
-      <div
-        className="markdown-body"
-        dangerouslySetInnerHTML={{ __html: props.children }}
-        onClick={handleOnDoubleClick}
-      />
-    </StyledMarkdownBodyWrapper>
-  );
-};
-
-export default MarkdownBody;

packages/bruno-app/src/components/Documentation/StyledContentWrapper.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-const StyledContentWrapper = styled.div`
-  height: calc(100vh - 280px);
-  margin-right: 5px;
-  margin-left: 5px;
-  margin-bottom: -4em;
-
-  background-color: ${(props) => props.theme.rightPane.bg};
-
-  .text-end {
-    text-align: end;
-  }
-
-  ::-webkit-scrollbar {
-    width: 0px;
-  }
-
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-`;
-
-export default StyledContentWrapper;

packages/bruno-app/src/components/Documentation/StyledMarkdownBodyWrapper.js

@@ -1,80 +0,0 @@
-import styled from 'styled-components';
-
-const StyledMarkdownBodyWrapper = styled.div`
-  height: inherit;
-  .markdown-body {
-    overflow-y: auto;
-    background-color: ${(props) => props.theme.rightPane.bg};
-    border: 1px solid ${(props) => props.theme.rightPane.border};
-    color: ${(props) => props.theme.text};
-    box-sizing: border-box;
-    height: 100%;
-    margin: 0 auto;
-    padding: 1em;
-    font-size: 0.875rem;
-  }
-
-  .markdown-body h1 {
-    margin: 0.67em 0;
-    font-weight: var(--base-text-weight-semibold, 600);
-    padding-bottom: 0.3em;
-    font-size: 1.3;
-    border-bottom: 1px solid var(--color-border-muted);
-  }
-
-  .markdown-body h2 {
-    font-weight: var(--base-text-weight-semibold, 600);
-    padding-bottom: 0.3em;
-    font-size: 1.2;
-    border-bottom: 1px solid var(--color-border-muted);
-  }
-
-  .markdown-body h3 {
-    font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 1.1em;
-  }
-
-  .markdown-body h4 {
-    font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 1em;
-  }
-
-  .markdown-body h5 {
-    font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 0.95em;
-  }
-
-  .markdown-body h6 {
-    font-weight: var(--base-text-weight-semibold, 600);
-    font-size: 0.9em;
-    color: var(--color-fg-muted);
-  }
-
-  .markdown-body hr {
-    box-sizing: content-box;
-    overflow: hidden;
-    background: transparent;
-    border-bottom: 1px solid var(--color-border-muted);
-    height: 1px;
-    padding: 0;
-    margin: 24px 0;
-    background-color: var(--color-border-default);
-    border: 0;
-  }
-
-  .markdown-body ul {
-    list-style-type: disc;
-  }
-
-  .markdown-body ol {
-    list-style-type: decimal;
-  }
-
-  @media (max-width: 767px) {
-    .markdown-body {
-      padding: 15px;
-    }
-  }
-`;
-
-export default StyledMarkdownBodyWrapper;

packages/bruno-app/src/components/Documentation/StyledWrapper.js

@@ -1,7 +1,18 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  width: inherit;
+  div.CodeMirror {
+    /* todo: find a better way */
+    height: calc(100vh - 240px);
+
+    .CodeMirror-scroll {
+      padding-bottom: 0px;
+    }
+  }
+  .editing-mode {
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.text.yellow};
+  }
 `;
 
 export default StyledWrapper;

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

@@ -1,20 +1,17 @@
-import TextareaEditor from 'components/TextareaEditor/index';
 import 'github-markdown-css/github-markdown.css';
 import get from 'lodash/get';
-import MarkdownIt from 'markdown-it';
 import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
 import { useTheme } from 'providers/Theme/index';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import MarkdownBody from './MarkdownBody';
+import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledContentWrapper from './StyledContentWrapper';
+import Markdown from 'components/MarkDown';
+import CodeEditor from 'components/CodeEditor';
 import StyledWrapper from './StyledWrapper';
 
-const md = new MarkdownIt();
-
 const Documentation = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const themeContext = useTheme();
+  const { storedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
   const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
 
@@ -22,42 +19,40 @@ const Documentation = ({ item, collection }) => {
     setIsEditing((prev) => !prev);
   };
 
-  const handleChange = (e) => {
+  const onEdit = (value) => {
     dispatch(
       updateRequestDocs({
         itemUid: item.uid,
         collectionUid: collection.uid,
-        docs: e.target.value
+        docs: value
       })
     );
   };
 
-  const htmlFromMarkdown = md.render(docs);
+  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
   if (!item) {
     return null;
   }
 
   return (
-    <StyledWrapper theme={themeContext.theme}>
+    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div
+      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
-        className="inline-block m-1 mb-0"
+        {isEditing ? 'Preview' : 'Edit'}
-        style={{ backgroundColor: themeContext.theme.rightPane.bg, width: '-webkit-fill-available' }}
-      >
-        <button className="text-end float-right mr-6 text-blue-400" onClick={toggleViewMode}>
-          {isEditing ? 'Preview' : 'Edit'}
-        </button>
       </div>
 
-      <StyledContentWrapper theme={themeContext.theme}>
+      {isEditing ? (
-        {isEditing ? (
+        <CodeEditor
-          <TextareaEditor className="w-full h-full" onChange={handleChange} value={docs || ''} />
+          collection={collection}
-        ) : (
+          theme={storedTheme}
-          <MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
+          value={docs || ''}
-            {htmlFromMarkdown}
+          onEdit={onEdit}
-          </MarkdownBody>
+          onSave={onSave}
-        )}
+          mode="application/text"
-      </StyledContentWrapper>
+        />
+      ) : (
+        <Markdown onDoubleClick={toggleViewMode} content={docs} />
+      )}
     </StyledWrapper>
   );
 };

packages/bruno-app/src/components/MarkDown/StyledWrapper.js

@@ -0,0 +1,83 @@
+import styled from 'styled-components';
+
+const StyledMarkdownBodyWrapper = styled.div`
+  background: transparent;
+  height: inherit;
+  .markdown-body {
+    background: transparent;
+    overflow-y: auto;
+    color: ${(props) => props.theme.text};
+    box-sizing: border-box;
+    height: 100%;
+    margin: 0 auto;
+    padding-top: 0.5rem;
+    font-size: 0.875rem;
+
+    h1 {
+      margin: 0.67em 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.3;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h2 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      padding-bottom: 0.3em;
+      font-size: 1.2;
+      border-bottom: 1px solid var(--color-border-muted);
+    }
+
+    h3 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1.1em;
+    }
+
+    h4 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 1em;
+    }
+
+    h5 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.95em;
+    }
+
+    h6 {
+      font-weight: var(--base-text-weight-semibold, 600);
+      font-size: 0.9em;
+      color: var(--color-fg-muted);
+    }
+
+    hr {
+      box-sizing: content-box;
+      overflow: hidden;
+      border-bottom: 1px solid var(--color-border-muted);
+      height: 1px;
+      padding: 0;
+      margin: 24px 0;
+      background-color: var(--color-border-default);
+      border: 0;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    pre {
+      background: ${(props) => props.theme.sidebar.bg};
+    }
+  }
+
+  @media (max-width: 767px) {
+    .markdown-body {
+      padding: 15px;
+    }
+  }
+`;
+
+export default StyledMarkdownBodyWrapper;

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

@@ -0,0 +1,32 @@
+import MarkdownIt from 'markdown-it';
+import StyledWrapper from './StyledWrapper';
+
+const md = new MarkdownIt();
+
+const Markdown = ({ onDoubleClick, content }) => {
+  const handleOnDoubleClick = (event) => {
+    switch (event.detail) {
+      case 2: {
+        onDoubleClick();
+        break;
+      }
+      case 1:
+      default: {
+        break;
+      }
+    }
+  };
+  const htmlFromMarkdown = md.render(content || '');
+
+  return (
+    <StyledWrapper>
+      <div
+        className="markdown-body"
+        dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}
+        onClick={handleOnDoubleClick}
+      />
+    </StyledWrapper>
+  );
+};
+
+export default Markdown;

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

@@ -117,7 +117,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
         ) : null}
       </div>
       <section
-        className={`flex w-full ${['script', 'vars', 'auth'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}
+        className={`flex w-full ${
+          ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
+        }`}
       >
         {getTabPanel(focusedTab.requestPaneTab)}
       </section>

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

@@ -115,7 +115,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (
-    <StyledWrapper className="px-3 w-full h-full" style={{ maxWidth: width }}>
+    <StyledWrapper className="w-full h-full" style={{ maxWidth: width }}>
       <div className="flex justify-end gap-2 text-xs" role="tablist">
         {getTabs()}
       </div>

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

@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';
 
 const ResponseHeaders = ({ headers }) => {
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <table>
         <thead>
           <tr>

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

@@ -15,7 +15,7 @@ const TestResults = ({ results, assertionResults }) => {
   const failedAssertions = assertionResults.filter((result) => result.status === 'fail');
 
   return (
-    <StyledWrapper className="flex flex-col px-3">
+    <StyledWrapper className="flex flex-col">
       <div className="pb-2 font-medium test-summary">
         Tests ({results.length}/{results.length}), Passed: {passedTests.length}, Failed: {failedTests.length}
       </div>

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

@@ -20,7 +20,7 @@ const Timeline = ({ request, response }) => {
   let requestData = safeStringifyJSON(request.data);
 
   return (
-    <StyledWrapper className="px-3 pb-4 w-full">
+    <StyledWrapper className="pb-4 w-full">
       <div>
         <pre className="line request font-bold">
           <span className="arrow">{'>'}</span> {request.method} {request.url}

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

@@ -94,7 +94,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center px-3 tabs" role="tablist">
+      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
         <div className={getTabClassname('response')} role="tab" onClick={() => selectTab('response')}>
           Response
         </div>
@@ -115,7 +115,9 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           </div>
         ) : null}
       </div>
-      <section className={`flex flex-grow relative ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}>
+      <section
+        className={`flex flex-grow relative pl-3 pr-4 ${focusedTab.responsePaneTab === 'response' ? '' : 'mt-4'}`}
+      >
         {isLoading ? <Overlay item={item} collection={collection} /> : null}
         {getTabPanel(focusedTab.responsePaneTab)}
       </section>

packages/bruno-app/src/components/TextareaEditor/StyledTextarea.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-const StyledTextarea = styled.textarea`
-  height: inherit;
-  background: ${(props) => props.theme.bg};
-  color: ${(props) => props.theme.text};
-  border: solid 1px ${(props) => props.theme.modal.input.border};
-  padding: 1em;
-  resize: none;
-
-  &:focus,
-  &:active,
-  &:focus-within,
-  &:focus-visible,
-  &:target {
-    border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-    outline: ${(props) => props.theme.modal.input.focusBorder} !important;
-  }
-`;
-
-export default StyledTextarea;

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

@@ -1,7 +0,0 @@
-import StyledTextarea from './StyledTextarea';
-
-const TextareaEditor = (props) => {
-  return <StyledTextarea {...props} />;
-};
-
-export default TextareaEditor;

packages/bruno-app/src/themes/dark.js

@@ -233,11 +233,6 @@ const darkTheme = {
 
   plainGrid: {
     hoverBg: '#3D3D3D'
-  },
-
-  rightPane: {
-    bg: '#1e1e1e',
-    border: '#4f4f4f'
   }
 };
 

packages/bruno-app/src/themes/light.js

@@ -237,11 +237,6 @@ const lightTheme = {
 
   plainGrid: {
     hoverBg: '#f4f4f4'
-  },
-
-  rightPane: {
-    bg: '#fff',
-    border: '#e1e1e1'
   }
 };