From 9a3d85a9ef0f7154dc876d7f89a20dee4f6167d8 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Fri, 27 Mar 2020 15:31:22 +0100
Subject: [PATCH] add code button

---
 .../screens/Comments/Dialog/index.tsx         | 107 ++++++++++++------
 .../Comments/components/CodeButton.tsx        |  31 +++++
 2 files changed, 101 insertions(+), 37 deletions(-)
 create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/CodeButton.tsx

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
index ce0ce1348de..e174dc628ca 100644
--- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx
@@ -20,6 +20,7 @@ import { EditComment } from '../components/EditComment';
 import { Markdown } from './Markdown';
 import { Reply } from './Reply';
 import { useScrollTop } from './use-scroll-top';
+import { CodeButton } from '../components/CodeButton';
 
 export const CommentDialog = props =>
   ReactDOM.createPortal(<Dialog {...props} />, document.body);
@@ -32,7 +33,7 @@ export const Dialog: React.FC = () => {
 
   const comment = state.comments.currentComment;
 
-  // This comment doens't exist in the database, it's an optimistic comment
+  // This comment doesn't exist in the database, it's an optimistic comment
   const isNewComment = comment.id === OPTIMISTIC_COMMENT_ID;
 
   const [editing, setEditing] = useState(isNewComment);
@@ -166,26 +167,42 @@ const DialogAddComment = ({ comment, onSave }) => {
           onClick={closeDialog}
         />
       </Stack>
-      <Textarea
-        autosize
-        autoFocus
-        css={css({
-          overflow: 'hidden',
-          border: 'none',
-          display: 'block',
-          borderTop: '1px solid',
-          borderColor: 'sideBar.border',
-        })}
-        value={value}
-        onChange={e => setValue(e.target.value)}
-        placeholder="Add comment..."
-        onKeyDown={async event => {
-          if (event.keyCode === ENTER && !event.shiftKey) {
-            saveComment();
-            event.preventDefault();
-          }
-        }}
-      />
+      <Element css={css({ position: 'relative' })}>
+        <Textarea
+          autosize
+          autoFocus
+          css={css({
+            overflow: 'hidden',
+            border: 'none',
+            display: 'block',
+            borderTop: '1px solid',
+            borderColor: 'sideBar.border',
+            paddingRight: 10,
+          })}
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          placeholder="Add comment..."
+          onKeyDown={async event => {
+            if (event.keyCode === ENTER && !event.shiftKey) {
+              saveComment();
+              event.preventDefault();
+            }
+          }}
+        />
+        <CodeButton
+          onClick={() => {
+            setValue(
+              value +
+                `
+\`\`\`
+
+
+\`\`\`
+`
+            );
+          }}
+        />
+      </Element>
     </Stack>
   );
 };
@@ -326,22 +343,38 @@ const AddReply = ({ comment }) => {
   };
 
   return (
-    <Textarea
-      autosize
-      css={css({
-        overflow: 'hidden',
-        border: 'none',
-        display: 'block',
-        borderTop: '1px solid',
-        borderColor: 'sideBar.border',
-      })}
-      value={value}
-      onChange={e => setValue(e.target.value)}
-      placeholder="Reply..."
-      onKeyDown={event => {
-        if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
-      }}
-    />
+    <Element css={css({ position: 'relative' })}>
+      <Textarea
+        autosize
+        css={css({
+          overflow: 'hidden',
+          border: 'none',
+          display: 'block',
+          borderTop: '1px solid',
+          borderColor: 'sideBar.border',
+          paddingRight: 10,
+        })}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Reply..."
+        onKeyDown={event => {
+          if (event.keyCode === ENTER && !event.shiftKey) onSubmit();
+        }}
+      />
+      <CodeButton
+        onClick={() => {
+          setValue(
+            value +
+              `
+\`\`\`
+
+
+\`\`\`
+`
+          );
+        }}
+      />
+    </Element>
   );
 };
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/CodeButton.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/CodeButton.tsx
new file mode 100644
index 00000000000..34c9e3e17d6
--- /dev/null
+++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/CodeButton.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Element } from '@codesandbox/components';
+import css from '@styled-system/css';
+
+const CodeIcon = props => (
+  <svg width={56} height={56} fill="none" viewBox="0 0 56 56" {...props}>
+    <path
+      fill="#999"
+      fillRule="evenodd"
+      d="M29.529 36l-1.386-.32L32.365 20l1.386.32L29.529 36zM21 27.936l4.976-5.291 1.244 1.323-3.732 3.968 3.732 3.968-1.244 1.323L21 27.937zm20 0l-4.976 5.291-1.243-1.322 3.731-3.969-3.731-3.968 1.243-1.323L41 27.936z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export const CodeButton = ({ onClick }) => (
+  <Element
+    css={css({
+      cursor: 'pointer',
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      border: 'none',
+      backgroundColor: 'transparent',
+      padding: 0,
+    })}
+    as="button"
+  >
+    <CodeIcon onClick={onClick} />
+  </Element>
+);