From 1cade539225c433cc8df2f211adca1c630680fa3 Mon Sep 17 00:00:00 2001
From: Alex <alex0394@hotmail.com>
Date: Thu, 24 Mar 2022 20:18:44 -0400
Subject: [PATCH 1/2] add a preview button for MarkDown when edit mode + add
 markdown in challenge and schedule claim modals

---
 .../field-input/text-field-input.tsx          | 66 ++++++++++++-------
 .../src/components/modals/challenge-modal.tsx |  1 +
 .../modals/schedule-claim-modal.tsx           |  1 +
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
index 02a0a87e..1ec93083 100644
--- a/packages/react-app/src/components/field-input/text-field-input.tsx
+++ b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -1,6 +1,6 @@
-import { TextInput, Markdown } from '@1hive/1hive-ui';
+import { TextInput, Markdown, Button } from '@1hive/1hive-ui';
 import { noop } from 'lodash-es';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { CollapsableBlock } from 'src/collapsable-block';
 import { GUpx } from 'src/utils/style.util';
 import styled from 'styled-components';
@@ -21,6 +21,10 @@ const MaxLineStyled = styled.div`
   }
 `;
 
+const BlockStyled = styled.div`
+  width: 100%;
+`;
+
 // #endregion
 
 type Props = {
@@ -63,6 +67,16 @@ export default function TextFieldInput({
   tooltipDetail,
   tooltip,
 }: Props) {
+  const [isEditState, setIsEdit] = useState(isEdit);
+
+  const handlePreview = () => {
+    setIsEdit(!isEditState);
+  };
+
+  useEffect(() => {
+    setIsEdit(isEdit);
+  }, [isEdit]);
+
   const readOnlyContent = (
     <>
       {isMarkDown ? (
@@ -114,28 +128,34 @@ export default function TextFieldInput({
       )}
     </>
   );
-  const loadableContent = isEdit ? (
-    <TextInput
-      id={id}
-      value={value ?? ''}
-      wide={wide}
-      onChange={onChange}
-      placeHolder={placeHolder}
-      multiline={multiline}
-      style={css}
-      rows={rows}
-    />
+  const loadableContent = isEditState ? (
+    <BlockStyled>
+      <TextInput
+        id={id}
+        value={value ?? ''}
+        wide={wide}
+        onChange={onChange}
+        placeHolder={placeHolder}
+        multiline={multiline}
+        style={css}
+        rows={rows}
+      />
+      {isMarkDown && isEdit && <Button size="mini" label="Preview" onClick={handlePreview} />}
+    </BlockStyled>
   ) : (
-    <div style={{ ...css, fontSize }}>
-      {maxLine ? (
-        <div>
-          <MaxLineStyled maxLine={maxLine}>{readOnlyContent}</MaxLineStyled>
-          {ellipsis}
-        </div>
-      ) : (
-        readOnlyContent
-      )}
-    </div>
+    <BlockStyled>
+      <div style={{ ...css, fontSize }}>
+        {maxLine ? (
+          <div>
+            <MaxLineStyled maxLine={maxLine}>{readOnlyContent}</MaxLineStyled>
+            {ellipsis}
+          </div>
+        ) : (
+          readOnlyContent
+        )}
+      </div>
+      {isMarkDown && isEdit && <Button size="mini" label="Edit" onClick={handlePreview} />}
+    </BlockStyled>
   );
   return (
     <FieldInput
diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
index 7d652972..ece0b0e8 100644
--- a/packages/react-app/src/components/modals/challenge-modal.tsx
+++ b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -359,6 +359,7 @@ export default function ChallengeModal({ claim, challengeDeposit, onClose = noop
                 onChange={handleChange}
                 multiline
                 wide
+                isMarkDown
               />
             </Outset>
           </FormStyled>
diff --git a/packages/react-app/src/components/modals/schedule-claim-modal.tsx b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
index 2382dab7..20d93a04 100644
--- a/packages/react-app/src/components/modals/schedule-claim-modal.tsx
+++ b/packages/react-app/src/components/modals/schedule-claim-modal.tsx
@@ -240,6 +240,7 @@ export default function ScheduleClaimModal({
                   wide
                   rows={5}
                   compact
+                  isMarkDown
                 />
                 <LineStyled>
                   <Outset horizontal>

From 6676debfa9959b7e1e9fa9103a9b00805be43c6a Mon Sep 17 00:00:00 2001
From: Alex <alex0394@hotmail.com>
Date: Fri, 25 Mar 2022 16:35:09 -0400
Subject: [PATCH 2/2] fixed width CSS + hooks and function order

---
 .../src/components/field-input/text-field-input.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-app/src/components/field-input/text-field-input.tsx b/packages/react-app/src/components/field-input/text-field-input.tsx
index 1ec93083..98bf3d3d 100644
--- a/packages/react-app/src/components/field-input/text-field-input.tsx
+++ b/packages/react-app/src/components/field-input/text-field-input.tsx
@@ -22,7 +22,7 @@ const MaxLineStyled = styled.div`
 `;
 
 const BlockStyled = styled.div`
-  width: 100%;
+  ${({ wide }: any) => wide && 'width: 100%;'}
 `;
 
 // #endregion
@@ -69,14 +69,14 @@ export default function TextFieldInput({
 }: Props) {
   const [isEditState, setIsEdit] = useState(isEdit);
 
-  const handlePreview = () => {
-    setIsEdit(!isEditState);
-  };
-
   useEffect(() => {
     setIsEdit(isEdit);
   }, [isEdit]);
 
+  const handlePreview = () => {
+    setIsEdit(!isEditState);
+  };
+
   const readOnlyContent = (
     <>
       {isMarkDown ? (
@@ -129,7 +129,7 @@ export default function TextFieldInput({
     </>
   );
   const loadableContent = isEditState ? (
-    <BlockStyled>
+    <BlockStyled wide={wide}>
       <TextInput
         id={id}
         value={value ?? ''}