diff --git a/package.json b/package.json index 479ecfd55..678ff717b 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "graphql": "^15.5.1", "graphql-request": "^3.4.0", "hex-to-rgba": "^2.0.1", - "html-react-parser": "^5.0.6", + "html-react-parser": "^5.2.8", "https-browserify": "^1.0.0", "jsonschema": "^1.4.0", "notistack": "^1.0.3", @@ -73,7 +73,6 @@ "react-customizable-progressbar": "^1.0.2", "react-dom": "^18.2.0", "react-hook-form": "^7.15.4", - "react-html-parser": "^2.0.2", "react-markdown": "^8.0.0", "react-paginate": "^8.2.0", "react-query": "^3.13.0", @@ -102,7 +101,6 @@ "@types/node": "^14.14.35", "@types/react": "^17.0.44", "@types/react-dom": "^18.2.25", - "@types/react-html-parser": "^2.0.2", "@types/react-router-dom": "^5.1.6", "@types/yup": "^0.29.11", "@typescript-eslint/eslint-plugin": "^6.21.0", diff --git a/src/modules/etherlink/components/EvmProposalDetailCard.tsx b/src/modules/etherlink/components/EvmProposalDetailCard.tsx index 574e2559c..ca9f5890f 100644 --- a/src/modules/etherlink/components/EvmProposalDetailCard.tsx +++ b/src/modules/etherlink/components/EvmProposalDetailCard.tsx @@ -7,7 +7,7 @@ import Share from "assets/img/share.svg" import LinkIcon from "assets/img/link.svg" import { useNotification } from "modules/common/hooks/useNotification" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" import { Badge } from "components/ui/Badge" import { StatusBadge } from "modules/explorer/components/StatusBadge" import { CopyIcon } from "components/ui/icons/CopyIcon" @@ -163,7 +163,7 @@ export const EvmProposalDetailCard: React.FC<{ poll: IEvmProposal | undefined; d - {ReactHtmlParser(daoProposalSelected?.description ? daoProposalSelected?.description : "")} + {parse(daoProposalSelected?.description ? daoProposalSelected?.description : "")} diff --git a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx index f626e3602..9cb6efea6 100644 --- a/src/modules/explorer/pages/DAOList/components/DAOItem.tsx +++ b/src/modules/explorer/pages/DAOList/components/DAOItem.tsx @@ -1,7 +1,7 @@ import { styled, Grid, Theme, Typography, Link, useTheme, useMediaQuery } from "@material-ui/core" import React from "react" import { EnvKey, getEnv } from "services/config" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" import { formatNumber } from "modules/explorer/utils/FormatNumber" import BigNumber from "bignumber.js" import { getDaoHref } from "utils" @@ -143,7 +143,7 @@ export const DAOItem: React.FC<{ - {ReactHtmlParser(dao.description)} + {parse(dao.description)} diff --git a/src/modules/explorer/pages/ProposalDetails/index.tsx b/src/modules/explorer/pages/ProposalDetails/index.tsx index 38bab934b..d9c2aa368 100644 --- a/src/modules/explorer/pages/ProposalDetails/index.tsx +++ b/src/modules/explorer/pages/ProposalDetails/index.tsx @@ -1,6 +1,6 @@ import _ from "lodash" import { Button, Grid, Theme, Typography, useMediaQuery, styled, useTheme, Tooltip } from "@material-ui/core" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" import { BigNumber } from "bignumber.js" import ProgressBar from "react-customizable-progressbar" import { StatusBadge, statusColors } from "modules/explorer/components/StatusBadge" @@ -655,7 +655,7 @@ export const ProposalDetails: React.FC = () => { {agoraPost && ( - {ReactHtmlParser(agoraPost.post_stream.posts[0].cooked)} + {parse(agoraPost.post_stream.posts[0].cooked)} )} diff --git a/src/modules/lite/creator/index.tsx b/src/modules/lite/creator/index.tsx index 01225acc6..b2cb7ef98 100644 --- a/src/modules/lite/creator/index.tsx +++ b/src/modules/lite/creator/index.tsx @@ -298,13 +298,13 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set {!isMarkup ? (
- + setIsMarkup(true)} />
) : (
- + setIsMarkup(false)} />
diff --git a/src/modules/lite/explorer/components/DaoCardDetail.tsx b/src/modules/lite/explorer/components/DaoCardDetail.tsx index 22487a0ac..b0b26326a 100644 --- a/src/modules/lite/explorer/components/DaoCardDetail.tsx +++ b/src/modules/lite/explorer/components/DaoCardDetail.tsx @@ -6,7 +6,7 @@ import { useTezos } from "services/beacon/hooks/useTezos" import { DashboardContext } from "../context/ActionSheets/explorer" import { updateCount } from "services/services/lite/lite-services" import { useHoldersTotalCount } from "../hooks/useHolderTotalCount" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" const StyledAvatar = styled(Avatar)({ height: 159, @@ -113,7 +113,7 @@ export const DaoCardDetail: React.FC = ({ community, setIsUp - {ReactHtmlParser(community?.description ? community?.description : "")} + {parse(community?.description ? community?.description : "")} diff --git a/src/modules/lite/explorer/components/ProposalDetailCard.tsx b/src/modules/lite/explorer/components/ProposalDetailCard.tsx index cf2811018..361288ca5 100644 --- a/src/modules/lite/explorer/components/ProposalDetailCard.tsx +++ b/src/modules/lite/explorer/components/ProposalDetailCard.tsx @@ -9,7 +9,7 @@ import dayjs from "dayjs" import LinkIcon from "assets/img/link.svg" import { useNotification } from "modules/common/hooks/useNotification" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" const Title = styled(Typography)({ fontSize: 32, @@ -23,6 +23,32 @@ const Subtitle = styled(Typography)(({ theme }) => ({ color: theme.palette.primary.light })) +const HtmlContent = styled("div")(({ theme }) => ({ + "fontSize": 14, + "fontWeight": 400, + "fontFamily": "Roboto Flex", + "color": theme.palette.text.secondary, + "& h1, & h2, & h3, & h4, & h5, & h6": { + marginTop: 16, + marginBottom: 8 + }, + "& p": { + marginTop: 8, + marginBottom: 8 + }, + "& ul, & ol": { + marginTop: 8, + marginBottom: 8, + paddingLeft: 24 + }, + "& hr": { + marginTop: 16, + marginBottom: 16, + border: "none", + borderTop: `1px solid ${theme.palette.primary.light}` + } +})) + const LogoItem = styled("img")(({ theme }) => ({ cursor: "pointer", [theme.breakpoints.down("sm")]: { @@ -216,14 +242,29 @@ export const ProposalDetailCard: React.FC<{ poll: Poll | undefined; daoId: strin - - {ReactHtmlParser(poll?.description ? poll?.description : "")} - +
+ 🔍 DEBUG INFO (commit: ab568a4) +
+
parse is function: {typeof parse === "function" ? "✅ YES" : "❌ NO"}
+
parse type: {typeof parse}
+
description length: {poll?.description?.length || 0}
+
description starts with: {poll?.description?.substring(0, 50)}
+
parsed result type: {typeof parse(poll?.description || "")}
+
parsed is array: {Array.isArray(parse(poll?.description || "")) ? "YES" : "NO"}
+ + {parse(poll?.description ? poll?.description : "")} {poll?.externalLink ? ( diff --git a/src/modules/lite/explorer/components/ProposalTableRow.tsx b/src/modules/lite/explorer/components/ProposalTableRow.tsx index 41a3bd456..97fc42137 100644 --- a/src/modules/lite/explorer/components/ProposalTableRow.tsx +++ b/src/modules/lite/explorer/components/ProposalTableRow.tsx @@ -4,7 +4,7 @@ import { RowContainer } from "./tables/RowContainer" import { ProposalStatus, TableStatusBadge } from "./ProposalTableRowStatusBadge" import { useHistory } from "react-router" import { Poll } from "models/Polls" -import ReactHtmlParser from "react-html-parser" +import parse from "html-react-parser" import dayjs from "dayjs" export interface ProposalTableRowData { daoId?: string @@ -69,7 +69,7 @@ export const ProposalTableRow: React.FC<{ poll: Poll | any; daoId?: string }> = {poll.description.length > 200 ? stripHtmlTags(poll.description).slice(0, 200) + "..." - : ReactHtmlParser(poll.description)} + : parse(poll.description)} diff --git a/src/modules/lite/explorer/hooks/usePoll.tsx b/src/modules/lite/explorer/hooks/usePoll.tsx index c180e0540..025485128 100644 --- a/src/modules/lite/explorer/hooks/usePoll.tsx +++ b/src/modules/lite/explorer/hooks/usePoll.tsx @@ -29,6 +29,13 @@ export const useSinglePoll = (pollId: string | undefined, id?: any, community?: return } + // DEBUG: Log raw API response + console.log("🔍 RAW API RESPONSE for pollId:", pollId) + console.log("Description length from API:", record.description?.length || 0) + console.log("Description first 100 chars:", record.description?.substring(0, 100)) + console.log("Has HTML tags:", record.description?.includes("<")) + console.log("Full record:", JSON.stringify(record, null, 2)) + record.timeFormatted = isProposalActive(Number(record.endTime)) record.isActive = record.timeFormatted && !record.timeFormatted.includes("ago") @@ -47,8 +54,10 @@ export const useSinglePoll = (pollId: string | undefined, id?: any, community?: return } } - fetchPoll() + if (pollId) { + fetchPoll() + } return - }, [id, community]) + }, [id, community, pollId]) return poll } diff --git a/src/modules/lite/explorer/pages/CreateProposal/index.tsx b/src/modules/lite/explorer/pages/CreateProposal/index.tsx index 3a7298d63..31032c32b 100644 --- a/src/modules/lite/explorer/pages/CreateProposal/index.tsx +++ b/src/modules/lite/explorer/pages/CreateProposal/index.tsx @@ -529,13 +529,13 @@ export const ProposalForm = ({ {!isMarkup ? (
- + setIsMarkup(true)} />
) : (
- + setIsMarkup(false)} />
@@ -544,7 +544,7 @@ export const ProposalForm = ({ {() => (