Skip to content

Commit

Permalink
markup added to LITE descriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiolalombardim
fabiolalombardim committed Nov 18, 2023
1 parent b1cc68f commit d0ad21e
Show file tree
Hide file tree
Showing 7 changed files with 425 additions and 114 deletions.
8 changes: 5 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@
"@airgap/beacon-sdk": "^4.0.10",
"@craco/craco": "^7.1.0",
"@date-io/dayjs": "1.x",
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@hookform/resolvers": "^2.8.1",
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.57",
"@microsoft/signalr": "^5.0.9",
"@mui/material": "^5.10.6",
"@mui/icons-material": "^5.14.18",
"@mui/material": "^5.14.18",
"@mui/x-date-pickers": "^5.0.2",
"@taquito/beacon-wallet": "^17.3.1",
"@taquito/signer": "^17.3.1",
Expand All @@ -50,6 +51,7 @@
"graphql": "^15.5.1",
"graphql-request": "^3.4.0",
"hex-to-rgba": "^2.0.1",
"html-react-parser": "^5.0.6",
"https-browserify": "^1.0.0",
"jsonschema": "^1.4.0",
"launchdarkly-react-client-sdk": "2.27.0",
Expand Down
111 changes: 96 additions & 15 deletions src/modules/lite/creator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,33 @@ import { useTezos } from "services/beacon/hooks/useTezos"
import { getSignature } from "services/utils/utils"
import { Navbar } from "modules/common/Toolbar"
import { SmallButton } from "modules/common/SmallButton"
import { EnvKey, getEnv } from "services/config"
import { saveLiteCommunity } from "services/services/lite/lite-services"
import { InfoRounded } from "@material-ui/icons"
import CodeIcon from "@mui/icons-material/Code"
import CodeOffIcon from "@mui/icons-material/CodeOff"
import { ProposalCodeEditorInput } from "modules/explorer/components/ProposalFormInput"
import Prism, { highlight } from "prismjs"
import "prism-themes/themes/prism-night-owl.css"

const CodeButton = styled(CodeIcon)(({ theme }) => ({
background: theme.palette.primary.dark,
padding: 3,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
borderBottom: "0.5px solid",
cursor: "pointer",
color: theme.palette.secondary.main
}))

const CodeOffButton = styled(CodeOffIcon)(({ theme }) => ({
background: theme.palette.primary.dark,
padding: 3,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
borderBottom: "0.5px solid",
cursor: "pointer",
color: theme.palette.secondary.main
}))

const CommunityContainer = styled(Grid)(({ theme }) => ({
boxSizing: "border-box",
Expand Down Expand Up @@ -116,6 +140,7 @@ const CustomTextarea = styled(withTheme(TextareaAutosize))(props => ({
"fontWeight": 400,
"padding": "21px 20px",
"fontFamily": "Roboto Mono",
"borderTopRightRadius": 0,
"border": "none",
"fontSize": 16,
"color": props.theme.palette.text.secondary,
Expand Down Expand Up @@ -197,6 +222,27 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set

const { data: tokenMetadata, isLoading: loading, error } = useTokenMetadata(values?.tokenAddress)

const codeEditorStyles = {
minHeight: 500,
fontFamily: "Roboto Mono",
fontSize: 14,
fontWeight: 400,
outlineWidth: 0,
color: "white"
}

const [isMarkup, setIsMarkup] = useState(false)
const grammar = Prism.languages.markup
const codeEditorPlaceholder = `
<html>
<head>
<title> Proposal Description </title>
</head>
<body>
<h1> ... </h1>
</body>
</html>`

useEffect(() => {
if (tokenMetadata) {
setFieldValue("tokenID", tokenMetadata.token_id)
Expand Down Expand Up @@ -227,20 +273,55 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set
</CustomInputContainer>
{errors?.name && touched.name ? <ErrorText>{errors.name}</ErrorText> : null}
<Grid item>
<Field name="description">
{() => (
<CustomTextarea
disabled={isSubmitting}
maxLength={1500}
aria-label="empty textarea"
placeholder="Short description"
value={getIn(values, "description")}
onChange={(newValue: any) => {
setFieldValue("description", newValue.target.value)
}}
/>
)}
</Field>
{!isMarkup ? (
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Tooltip title="Allow markup">
<CodeButton onClick={() => setIsMarkup(true)} />
</Tooltip>
</div>
) : (
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Tooltip title="Disable markup">
<CodeOffButton onClick={() => setIsMarkup(false)} />
</Tooltip>
</div>
)}

{!isMarkup ? (
<Field name="description">
{() => (
<CustomTextarea
disabled={isSubmitting}
maxLength={1500}
aria-label="empty textarea"
placeholder="Short description"
value={getIn(values, "description")}
onChange={(newValue: any) => {
setFieldValue("description", newValue.target.value)
}}
/>
)}
</Field>
) : (
<Field name="description">
{() => (
<ProposalCodeEditorInput
insertSpaces
ignoreTabKey={false}
tabSize={4}
style={codeEditorStyles}
padding={10}
value={getIn(values, "description")}
onValueChange={(newValue: string) => {
console.log(newValue)
setFieldValue("description", newValue)
}}
highlight={code => highlight(code, grammar, "javascript")}
placeholder={codeEditorPlaceholder}
/>
)}
</Field>
)}
</Grid>
<CustomInputContainer item>
<Field name="linkToTerms" type="text" placeholder="Link to Terms" component={CustomFormikTextField} />
Expand Down
3 changes: 2 additions & 1 deletion src/modules/lite/explorer/components/DaoCardDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { DashboardContext } from "../context/ActionSheets/explorer"
import { updateCount } from "services/services/lite/lite-services"
import { useIsMember } from "../hooks/useIsMember"
import { useHoldersTotalCount } from "../hooks/useHolderTotalCount"
import ReactHtmlParser from "react-html-parser"

const StyledAvatar = styled(Avatar)({
height: 159,
Expand Down Expand Up @@ -112,7 +113,7 @@ export const DaoCardDetail: React.FC<DaoCardDetailProps> = ({ community, setIsUp

<Grid container direction="row" justifyContent="center">
<CommunityDescription variant="body2" color="textPrimary">
{community?.description}
{ReactHtmlParser(community?.description ? community?.description : "")}
</CommunityDescription>
</Grid>

Expand Down
3 changes: 2 additions & 1 deletion src/modules/lite/explorer/components/ProposalDetailCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import LinkIcon from "assets/img/link.svg"
import { Poll } from "models/Polls"
import dayjs from "dayjs"
import { useNotification } from "modules/common/hooks/useNotification"
import ReactHtmlParser from "react-html-parser"

const LogoItem = styled("img")(({ theme }) => ({
cursor: "pointer",
Expand Down Expand Up @@ -195,7 +196,7 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin

<Grid container>
<Typography variant="body2" color="textPrimary">
{poll?.description}
{ReactHtmlParser(poll?.description ? poll?.description : "")}
</Typography>
</Grid>

Expand Down
3 changes: 2 additions & 1 deletion src/modules/lite/explorer/components/ProposalTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useHistory } from "react-router"
import { Blockie } from "modules/common/Blockie"
import { toShortAddress } from "services/contracts/utils"
import { Poll } from "models/Polls"
import ReactHtmlParser from "react-html-parser"

export interface ProposalTableRowData {
daoId?: string
Expand Down Expand Up @@ -76,7 +77,7 @@ export const ProposalTableRow: React.FC<{ poll: Poll; daoId?: string }> = ({ pol
</Grid>

<Grid>
<DescriptionText color="textPrimary">{poll.description}</DescriptionText>
<DescriptionText color="textPrimary">{ReactHtmlParser(poll.description)}</DescriptionText>
</Grid>
</Grid>
</RowContainer>
Expand Down
121 changes: 96 additions & 25 deletions src/modules/lite/explorer/pages/CreateProposal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
withTheme,
TextareaAutosize,
useTheme,
useMediaQuery
useMediaQuery,
Tooltip
} from "@material-ui/core"

import { Choices } from "../../components/Choices"
Expand All @@ -30,6 +31,12 @@ import { isWebUri } from "valid-url"
import { useDAO } from "services/services/dao/hooks/useDAO"
import { useDAOID } from "modules/explorer/pages/DAO/router"
import { useUserTokenBalance } from "services/contracts/token/hooks/useUserTokenBalance"
import CodeIcon from "@mui/icons-material/Code"
import CodeOffIcon from "@mui/icons-material/CodeOff"
import { ProposalCodeEditorInput } from "modules/explorer/components/ProposalFormInput"
import Prism, { highlight } from "prismjs"
import "prism-themes/themes/prism-night-owl.css"

dayjs.extend(duration)

const ProposalContainer = styled(Grid)(({ theme }) => ({
Expand All @@ -39,6 +46,26 @@ const ProposalContainer = styled(Grid)(({ theme }) => ({
}
}))

const CodeButton = styled(CodeIcon)(({ theme }) => ({
background: theme.palette.primary.main,
padding: 3,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
borderBottom: "0.5px solid",
cursor: "pointer",
color: theme.palette.secondary.main
}))

const CodeOffButton = styled(CodeOffIcon)(({ theme }) => ({
background: theme.palette.primary.main,
padding: 3,
borderTopLeftRadius: 4,
borderTopRightRadius: 4,
borderBottom: "0.5px solid",
cursor: "pointer",
color: theme.palette.secondary.main
}))

const CustomFormikTextField = withStyles({
root: {
"& .MuiInput-root": {
Expand Down Expand Up @@ -109,6 +136,7 @@ const CustomTextarea = styled(withTheme(TextareaAutosize))(props => ({
"paddingTop": 19,
"paddingLeft": 26,
"border": "none",
"borderTopRightRadius": 0,
"fontSize": 17,
"color": props.theme.palette.text.primary,
"background": props.theme.palette.primary.main,
Expand Down Expand Up @@ -193,17 +221,6 @@ const hasDuplicates = (options: string[]) => {
return new Set(trimOptions).size !== trimOptions.length
}

const isValidHttpUrl = (externalLink: string) => {
let url
try {
url = new URL(externalLink)
} catch (_) {
return false
}

return url.protocol === "http:" || url.protocol === "https:"
}

const validateForm = (values: Poll) => {
const errors: FormikErrors<Poll> = {}

Expand Down Expand Up @@ -285,7 +302,27 @@ export const ProposalForm = ({

const { pathname } = useLocation()

const codeEditorStyles = {
minHeight: 500,
fontFamily: "Roboto Mono",
fontSize: 14,
fontWeight: 400,
outlineWidth: 0,
color: "white"
}

const shouldShowBar = pathname.includes("/lite") ? true : false
const [isMarkup, setIsMarkup] = useState(false)
const grammar = Prism.languages.markup
const codeEditorPlaceholder = `
<html>
<head>
<title> Proposal Description </title>
</head>
<body>
<h1> ... </h1>
</body>
</html>`

const hasErrors = errors.endTimeDays || errors.endTimeHours || errors.endTimeMinutes
return (
Expand Down Expand Up @@ -315,19 +352,53 @@ export const ProposalForm = ({
{errors?.name && touched.name ? <ErrorText>{errors.name}</ErrorText> : null}
</Grid>
<Grid item>
<Field name="description">
{() => (
<CustomTextarea
maxLength={1500}
aria-label="empty textarea"
placeholder="Short description"
value={getIn(values, "description")}
onChange={(newValue: any) => {
setFieldValue("description", newValue.target.value)
}}
/>
)}
</Field>
{!isMarkup ? (
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Tooltip title="Allow markup">
<CodeButton onClick={() => setIsMarkup(true)} />
</Tooltip>
</div>
) : (
<div style={{ justifyContent: "flex-end", display: "flex" }}>
<Tooltip title="Disable markup">
<CodeOffButton onClick={() => setIsMarkup(false)} />
</Tooltip>
</div>
)}
{!isMarkup ? (
<Field name="description">
{() => (
<CustomTextarea
maxLength={1500}
aria-label="empty textarea"
placeholder="Short description"
value={getIn(values, "description")}
onChange={(newValue: any) => {
setFieldValue("description", newValue.target.value)
}}
/>
)}
</Field>
) : (
<Field name="description">
{() => (
<ProposalCodeEditorInput
insertSpaces
ignoreTabKey={false}
tabSize={4}
style={codeEditorStyles}
padding={10}
value={getIn(values, "description")}
onValueChange={(newValue: string) => {
console.log(newValue)
setFieldValue("description", newValue)
}}
highlight={code => highlight(code, grammar, "javascript")}
placeholder={codeEditorPlaceholder}
/>
)}
</Field>
)}
</Grid>
<Grid item>
<Field name="externalLink" type="text" placeholder="External Link" component={CustomFormikTextField} />
Expand Down
Loading

0 comments on commit d0ad21e

Please sign in to comment.