Merge pull request #431 from HausDAO/feat/markdown-field

Feat/markdown field

libs/moloch-v3-fields/src/config/fieldConfig.ts

@@ -8,6 +8,7 @@ import { RequestNativeToken } from '../fields';
 import { RequestERC20 } from '../fields';
 import { ShamanDeluxe } from '../fields';
 import { TagsInput } from '../fields';
+import { MarkdownField } from '../fields';
 
 import { ProposalOffering } from '../fields';
 import { DelegateInput } from '../fields';
@@ -37,6 +38,7 @@ export const MolochFields = {
   safeSelect: SafeSelect,
   multisendActions: MultisendActions,
   addressesAndAmounts: AddressesAndAmounts,
+  markdownField: MarkdownField,
 };
 
 export type MolochFieldLego = FieldLegoBase<typeof MolochFields>;

libs/moloch-v3-fields/src/fields/MarkdownField.tsx

@@ -0,0 +1,164 @@
+import React, { useState } from 'react';
+import {
+  Buildable,
+  Button,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  Field,
+  Label,
+  WrappedTextArea,
+} from '@daohaus/ui';
+import { useFormContext } from 'react-hook-form';
+import { BiPencil } from 'react-icons/bi';
+import { MdFullscreen, MdFullscreenExit, MdPreview } from 'react-icons/md';
+
+import ReactMarkdown from 'react-markdown';
+
+import styled from 'styled-components';
+
+const TabsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-bottom: -2rem;
+`;
+
+const MarkDownContainer = styled.div`
+  min-height: 12rem;
+  max-height: 12rem;
+  overflow-y: scroll;
+  padding: 10px;
+  margin-bottom: 5rem;
+  border-radius: 5px;
+  background-color: hsl(228, 43.3%, 17.5%);
+  font-size: 1.5rem;
+  font-family: inherit;
+`;
+
+const DialogMarkDownContainer = styled.div`
+  height: 50rem;
+  max-width: 100rem;
+  min-width: 50rem;
+  overflow-y: scroll;
+  padding: 10px;
+  margin-bottom: 5rem;
+  border-radius: 5px;
+  background-color: hsl(228, 43.3%, 17.5%);
+  font-size: 1.5rem;
+  font-family: inherit;
+`;
+
+const LabelContainer = styled(Label)`
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  label {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+  svg {
+    transform: translateY(0.1rem);
+  }
+`;
+
+const DialogWrappedTextArea = styled(WrappedTextArea)`
+  height: 50rem;
+  max-width: 100rem;
+  min-width: 70rem;
+`;
+
+const DialogButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-bottom: -2rem;
+`;
+
+export const MarkdownField = (props: Buildable<Field>) => {
+  const { watch } = useFormContext();
+  const value = watch(props.id);
+  // use state for edit or preview view
+  const [edit, setEdit] = useState(true);
+  const [toggleFullscreen, setToggleFullscreen] = useState(false);
+
+  return (
+    <>
+      <TabsContainer>
+        <Button
+          color="secondary"
+          variant={!edit ? 'outline' : 'solid'}
+          onClick={() => setEdit(true)}
+          size="sm"
+        >
+          <BiPencil />
+        </Button>
+        <Button
+          color="secondary"
+          variant={edit ? 'outline' : 'solid'}
+          onClick={() => setEdit(false)}
+          size="sm"
+        >
+          <MdPreview />
+        </Button>
+
+        <Dialog open={toggleFullscreen} onOpenChange={setToggleFullscreen}>
+          <DialogTrigger asChild>
+            <Button
+              color="secondary"
+              variant={toggleFullscreen ? 'outline' : 'solid'}
+              size="sm"
+            >
+              {toggleFullscreen ? <MdFullscreen /> : <MdFullscreenExit />}
+            </Button>
+          </DialogTrigger>
+
+          <DialogContent title="Markdown Editor">
+            <DialogButtonWrapper>
+              <Button
+                color="secondary"
+                variant={!edit ? 'outline' : 'solid'}
+                onClick={() => setEdit(true)}
+                size="sm"
+              >
+                <BiPencil />
+              </Button>
+              <Button
+                color="secondary"
+                variant={edit ? 'outline' : 'solid'}
+                onClick={() => setEdit(false)}
+                size="sm"
+              >
+                <MdPreview />
+              </Button>
+            </DialogButtonWrapper>
+            {edit ? (
+              <DialogWrappedTextArea {...props} />
+            ) : (
+              <>
+                <LabelContainer>
+                  <Label>Preview</Label>
+                </LabelContainer>
+                <DialogMarkDownContainer>
+                  <ReactMarkdown>{value}</ReactMarkdown>
+                </DialogMarkDownContainer>
+              </>
+            )}
+          </DialogContent>
+        </Dialog>
+      </TabsContainer>
+      {edit && !toggleFullscreen ? (
+        <WrappedTextArea {...props} />
+      ) : (
+        <>
+          <LabelContainer>
+            <Label>Preview</Label>
+          </LabelContainer>
+          <MarkDownContainer>
+            <ReactMarkdown>{value}</ReactMarkdown>
+          </MarkDownContainer>
+        </>
+      )}
+    </>
+  );
+};

libs/moloch-v3-fields/src/fields/index.ts

@@ -1,5 +1,6 @@
 export * from './AddressesAndAmounts';
 export * from './DelegateInput';
+export * from './MarkdownField';
 export * from './MetadataLink';
 export * from './MultisendActions';
 export * from './ProposalExpiry';

libs/moloch-v3-legos/src/fields.ts

@@ -9,7 +9,7 @@ export const FIELD: Record<string, MolochFieldLego> = {
   },
   DESCRIPTION: {
     id: 'description',
-    type: 'textarea',
+    type: 'markdownField',
     label: 'Description',
     placeholder: 'Enter description',
   },

libs/moloch-v3-macro-ui/src/components/MemberList/MemberList.tsx

@@ -54,6 +54,7 @@ export const MemberList = ({
     hasNextPage,
     orderMembers,
   } = useDaoMembers();
+  console.log('members', members, hasNextPage);
   const isMd = useBreakpoint(widthQuery.md);
 
   const tableData = useMemo<MolochV3Members>(() => {

libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.styles.ts

@@ -15,6 +15,9 @@ export const OverviewContainer = styled.div`
 
   .description {
     word-break: break-word;
+    img {
+      max-width: 100%;
+    }
   }
 
   .proposal-link {

libs/moloch-v3-macro-ui/src/components/ProposalDetails/ProposalDetails.tsx

@@ -29,6 +29,8 @@ import { ProposalWarning } from '../ProposalActionData/ProposalWarning';
 import styled from 'styled-components';
 import { ProposalActionConfig } from '../ProposalActionData';
 
+import ReactMarkdown from "react-markdown";
+
 const Spacer = styled.div`
   margin-bottom: 2rem;
 `;
@@ -59,7 +61,7 @@ export const ProposalDetails = ({
 
   return (
     <OverviewContainer>
-      <ParMd className="description">{proposal.description}</ParMd>
+      <ReactMarkdown className="description">{proposal.description}</ReactMarkdown>
       {proposal.contentURI && (
         <Link href={proposal.contentURI} className="proposal-link">
           Link

libs/utils/src/constants/summoning.ts

@@ -21,7 +21,7 @@ export const SUMMON_COPY = {
   MIN_RETENTION:
     'What is the maximum percentage of DAO members (voting and non-voting stake) required to remain in the DAO after grace period? If the percentage falls below this number, the proposal is not executed.',
   SPONSOR_THRESHOLD:
-    'What is minimum number of voting stake tokens a member needs to sponsor a proposal?',
+    'What is minimum number of delegated stake tokens a member needs to sponsor a proposal?',
   NEW_OFFERING:
     'Would you like to require a fee to submit proposals? This feature is intended to protect against spam proposals. Fees go into the DAO treasury.',
   SHAMAN:

package.json

@@ -63,6 +63,7 @@
     "react-icons": "^4.7.1",
     "react-is": "18.2.0",
     "react-json-view": "^1.21.3",
+    "react-markdown": "^9.0.0",
     "react-query": "^3.39.3",
     "react-router-dom": "6.4.1",
     "react-table": "^7.8.0",