feat: improve off-chain proposal HTML support

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",

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
 
           <Grid container>
             <Typography variant="body2" color="textPrimary" className="proposal-details">
-              {ReactHtmlParser(daoProposalSelected?.description ? daoProposalSelected?.description : "")}
+              {parse(daoProposalSelected?.description ? daoProposalSelected?.description : "")}
             </Typography>
           </Grid>
 

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<{
           </Grid>
         </Grid>
         <Grid container direction="row">
-          <DescriptionText>{ReactHtmlParser(dao.description)}</DescriptionText>
+          <DescriptionText>{parse(dao.description)}</DescriptionText>
         </Grid>
         <Grid container direction="row" justifyContent="space-between">
           <Grid xs={6} container item direction="column">

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 && (
               <Grid item>
                 <Typography color="textPrimary" variant="body1" align={isMobileSmall ? "center" : "left"}>
-                  {ReactHtmlParser(agoraPost.post_stream.posts[0].cooked)}
+                  {parse(agoraPost.post_stream.posts[0].cooked)}
                 </Typography>
               </Grid>
             )}

src/modules/lite/creator/index.tsx

@@ -298,13 +298,13 @@ const CommunityForm = ({ submitForm, values, setFieldValue, errors, touched, set
           <Grid item>
             {!isMarkup ? (
               <div style={{ justifyContent: "flex-end", display: "flex" }}>
-                <Tooltip title="Allow markup">
+                <Tooltip title="Allow HTML">
                   <CodeButton onClick={() => setIsMarkup(true)} />
                 </Tooltip>
               </div>
             ) : (
               <div style={{ justifyContent: "flex-end", display: "flex" }}>
-                <Tooltip title="Disable markup">
+                <Tooltip title="Disable HTML">
                   <CodeOffButton onClick={() => setIsMarkup(false)} />
                 </Tooltip>
               </div>

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<DaoCardDetailProps> = ({ community, setIsUp
 
       <Grid container direction="row" justifyContent="center">
         <CommunityDescription variant="body2" color="textPrimary">
-          {ReactHtmlParser(community?.description ? community?.description : "")}
+          {parse(community?.description ? community?.description : "")}
         </CommunityDescription>
       </Grid>
 

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
           </Grid>
 
           <Grid container>
-            <Typography
-              variant="body2"
-              color="textPrimary"
-              className="proposal-details"
-              style={{ whiteSpace: "pre-line" }}
+            {/* DEBUG INFO - Remove after fixing */}
+            <div
+              style={{
+                background: "#ff000033",
+                padding: "10px",
+                marginBottom: "20px",
+                fontSize: "12px",
+                fontFamily: "monospace",
+                width: "100%",
+                border: "2px solid red"
+              }}
             >
-              {ReactHtmlParser(poll?.description ? poll?.description : "")}
-            </Typography>
+              <div>
+                <strong>🔍 DEBUG INFO (commit: ab568a4)</strong>
+              </div>
+              <div>parse is function: {typeof parse === "function" ? "✅ YES" : "❌ NO"}</div>
+              <div>parse type: {typeof parse}</div>
+              <div>description length: {poll?.description?.length || 0}</div>
+              <div>description starts with: {poll?.description?.substring(0, 50)}</div>
+              <div>parsed result type: {typeof parse(poll?.description || "")}</div>
+              <div>parsed is array: {Array.isArray(parse(poll?.description || "")) ? "YES" : "NO"}</div>
+            </div>
+            <HtmlContent className="proposal-details">{parse(poll?.description ? poll?.description : "")}</HtmlContent>
           </Grid>
 
           {poll?.externalLink ? (

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 }> =
           <DescriptionText>
             {poll.description.length > 200
               ? stripHtmlTags(poll.description).slice(0, 200) + "..."
-              : ReactHtmlParser(poll.description)}
+              : parse(poll.description)}
           </DescriptionText>
         </Grid>
 

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
 }

src/modules/lite/explorer/pages/CreateProposal/index.tsx

@@ -529,13 +529,13 @@ export const ProposalForm = ({
               <Grid item>
                 {!isMarkup ? (
                   <div style={{ justifyContent: "flex-end", display: "flex" }}>
-                    <Tooltip title="Allow markup">
+                    <Tooltip title="Allow HTML">
                       <CodeButton onClick={() => setIsMarkup(true)} />
                     </Tooltip>
                   </div>
                 ) : (
                   <div style={{ justifyContent: "flex-end", display: "flex" }}>
-                    <Tooltip title="Disable markup">
+                    <Tooltip title="Disable HTML">
                       <CodeOffButton onClick={() => setIsMarkup(false)} />
                     </Tooltip>
                   </div>
@@ -544,7 +544,7 @@ export const ProposalForm = ({
                   <Field name="description">
                     {() => (
                       <CustomTextarea
-                        maxLength={1500}
+                        maxLength={10000}
                         aria-label="empty textarea"
                         placeholder="Type description"
                         value={getIn(values, "description")}