Campaign fixes

package.json

@@ -51,9 +51,10 @@
     "chartjs-plugin-annotation": "^3.0.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "date-fns": "2.24.0",
-    "dompurify": "^3.0.3",
     "formik": "2.2.9",
+    "fs": "^0.0.1-security",
     "i18next": "^23.5.1",
+    "isomorphic-dompurify": "^2.7.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mobx": "6.3.2",
@@ -94,7 +95,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/cookie": "^0.4.1",
-    "@types/dompurify": "^3",
     "@types/lodash.truncate": "^4.4.7",
     "@types/lru-cache": "^5.1.1",
     "@types/node": "14.14.37",

src/common/util/htmlUtils.ts

@@ -1,4 +1,4 @@
-import DOMPurify from 'dompurify'
+import DOMPurify from 'isomorphic-dompurify'
 
 export function sanitizeHTML(htmlContent: string): string {
   return DOMPurify.sanitize(htmlContent, { ADD_TAGS: ['iframe'] })

src/components/admin/campaigns/grid/CreateForm.tsx

@@ -65,7 +65,7 @@ const validationSchema: yup.SchemaOf<CampaignAdminCreateFormData> = yup
   .shape({
     title: yup.string().trim().min(10).max(200).required(),
     slug: yup.string().trim().min(10).max(200).optional(),
-    description: yup.string().trim().min(50).max(60000).required(),
+    description: yup.string().trim().min(50).required(),
     targetAmount: yup.number().integer().positive().required(),
     allowDonationOnComplete: yup.bool().optional(),
     campaignTypeId: yup.string().uuid().required(),

src/components/client/campaigns/CampaignDetails.tsx

@@ -28,8 +28,9 @@ import { moneyPublic } from 'common/util/money'
 import CampaignPublicExpensesChart from './CampaignPublicExpensesChart'
 import EmailIcon from '@mui/icons-material/Email'
 import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal'
+import { QuillStypeWrapper } from 'components/common/QuillStyleWrapper'
+import { sanitizeHTML } from 'common/util/htmlUtils'
 
-const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })
 
 const PREFIX = 'CampaignDetails'
@@ -128,6 +129,7 @@ export default function CampaignDetails({ campaign }: Props) {
   const canEditCampaign = useCanEditCampaign(campaign.slug)
   const { data: expensesList } = useCampaignApprovedExpensesList(campaign.slug)
   const totalExpenses = expensesList?.reduce((acc, expense) => acc + expense.amount, 0)
+  const sanitizedDescription = sanitizeHTML(campaign.description)
 
   return (
     <StyledGrid item xs={12} md={8}>
@@ -155,7 +157,14 @@ export default function CampaignDetails({ campaign }: Props) {
           </Typography>
         </Grid>
         <Grid item xs={12} style={{ paddingTop: '20px' }}>
-          <ReactQuill readOnly theme="bubble" value={campaign.description} />
+          <QuillStypeWrapper>
+            {/*Temp: Surpress hydratation warning until the reason for the fail is found*/}
+            <Typography
+              component={'div'}
+              dangerouslySetInnerHTML={{ __html: sanitizedDescription }}
+              suppressHydrationWarning
+            />
+          </QuillStypeWrapper>
         </Grid>
         <Grid item xs={12}>
           <ImageSlider sliderImages={sliderImages} />

src/components/common/QuillStyleWrapper.tsx

@@ -6,10 +6,18 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
     maxWidth: '100%',
   },
 
-  ['p']: {
-    fontSize: theme.spacing(2),
-    fontWeight: 400,
-    lineHeight: theme.spacing(2.85),
+  ['p, span, a']: {
+    fontSize: theme.typography.pxToRem(16),
+    lineHeight: theme.spacing(4),
+    fontWeight: 500,
+    paddingLeft: '0',
+    paddingRight: '0',
+    fontFamily: theme.typography.fontFamily,
+  },
+
+  ['strong']: {
+    fontWeight: 700,
+    fontSize: theme.typography.pxToRem(16),
   },
 
   ['.ql-editor, .ql-video']: {
@@ -21,12 +29,11 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
     marginInline: 'auto',
   },
 
-  ['.ql-editor, blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor ol, .ql-editor p, .ql-editor pre, .ql-editor ul']:
-    {
-      margin: 0,
-      padding: 0,
-      counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9',
-    },
+  ['blockquote, h1, h2, h3,h4, h5,h6, ol, p, pre, ul']: {
+    margin: 0,
+    padding: 0,
+    counterReset: 'list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9',
+  },
 
   ['.ql-editor ol, .ql-editor ul']: {
     paddingLeft: '1.5em',
@@ -77,7 +84,14 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(24),
   },
 
-  ['.ql-bubble .ql-editor a ']: {
-    textDecoration: 'none',
+  ['a']: {
+    textDecoration: 'underline',
+    color: 'rgb(17, 85, 204)',
+  },
+  ['ul']: {
+    listStyle: 'inside',
+  },
+  ['ul, ol']: {
+    paddingLeft: '1.5em',
   },
 }))