Merge pull request #183 from 1Hive/quests-117

add a preview button for MarkDown when edit mode + add markdown in ch…
1Hive · Mar 25, 2022 · 948862d · 948862d · vercel · Mar 25, 2022
2 parents fe8b3a8 + 6676deb
commit 948862d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 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
@@ -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`
+  ${({ wide }: any) => wide && 'width: 100%;'}
+`;
+
 // #endregion
 
 type Props = {
@@ -63,6 +67,16 @@ export default function TextFieldInput({
   tooltipDetail,
   tooltip,
 }: Props) {
+  const [isEditState, setIsEdit] = useState(isEdit);
+
+  useEffect(() => {
+    setIsEdit(isEdit);
+  }, [isEdit]);
+
+  const handlePreview = () => {
+    setIsEdit(!isEditState);
+  };
+
   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 wide={wide}>
+      <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
@@ -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
@@ -240,6 +240,7 @@ export default function ScheduleClaimModal({
                   wide
                   rows={5}
                   compact
+                  isMarkDown
                 />
                 <LineStyled>
                   <Outset horizontal>