From 33cd30315a4d7330b457af26d6b0c180e1897f10 Mon Sep 17 00:00:00 2001
From: "Donus(ADA)" <pongpayak@rentspree.com>
Date: Mon, 9 Oct 2023 13:28:20 +0700
Subject: [PATCH] refactor: move textarea styled-component to the
 DocumentEditor component file

---
 .../Documentation/DocumentEditor.js           |  5 ---
 .../Documentation/DocumentationEditor.js      | 33 +++++++++++++++++++
 .../Documentation/StyledContentWrapper.js     | 26 ---------------
 .../src/components/Documentation/index.js     |  4 +--
 4 files changed, 35 insertions(+), 33 deletions(-)
 delete mode 100644 packages/bruno-app/src/components/Documentation/DocumentEditor.js
 create mode 100644 packages/bruno-app/src/components/Documentation/DocumentationEditor.js

diff --git a/packages/bruno-app/src/components/Documentation/DocumentEditor.js b/packages/bruno-app/src/components/Documentation/DocumentEditor.js
deleted file mode 100644
index 6e795ced2..000000000
--- a/packages/bruno-app/src/components/Documentation/DocumentEditor.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Editor = (props) => {
-  return <textarea {...props} />;
-};
-
-export default Editor;
diff --git a/packages/bruno-app/src/components/Documentation/DocumentationEditor.js b/packages/bruno-app/src/components/Documentation/DocumentationEditor.js
new file mode 100644
index 000000000..7890b8f92
--- /dev/null
+++ b/packages/bruno-app/src/components/Documentation/DocumentationEditor.js
@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+const StyledEditor = 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;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+
+  ::-webkit-scrollbar-button {
+    display: none;
+  }
+`;
+
+const DocumentationEditor = (props) => {
+  return <StyledEditor {...props} />;
+};
+
+export default DocumentationEditor;
diff --git a/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js b/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
index bfa932766..68223dbd3 100644
--- a/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledContentWrapper.js
@@ -18,32 +18,6 @@ const StyledContentWrapper = styled.div`
   ::-webkit-scrollbar-button {
     display: none;
   }
-
-  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;
-    }
-
-    ::-webkit-scrollbar {
-      width: 0px;
-    }
-
-    ::-webkit-scrollbar-button {
-      display: none;
-    }
-  }
 `;
 
 export default StyledContentWrapper;
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
index 464e789e8..290534cd3 100644
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -7,7 +7,7 @@ import { useTheme } from 'providers/Theme/index';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { findCollectionByUid, findItemInCollection } from 'utils/collections/index';
-import Editor from './DocumentEditor';
+import DocumentationEditor from './DocumentationEditor';
 import MarkdownBody from './MarkdownBody';
 import StyledContentWrapper from './StyledContentWrapper';
 import StyledWrapper from './StyledWrapper';
@@ -90,7 +90,7 @@ const Documentation = () => {
 
       <StyledContentWrapper theme={themeContext.theme}>
         {isEditing ? (
-          <Editor className="w-full h-full" onChange={handleChange} value={docs} />
+          <DocumentationEditor className="w-full h-full" onChange={handleChange} value={docs} />
         ) : (
           <MarkdownBody OnDoubleClick={toggleViewMode} theme={themeContext.theme}>
             {htmlFromMarkdown}