Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

markup added to LITE descriptions #720

Merged
merged 1 commit into from
Nov 24, 2023
Merged

markup added to LITE descriptions #720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading