Integrate mdxeditor (#1546)

* POC on mdxeditor, content is visible * wip: md <> html * wip: style the editor * Youtube button * wip: touchups of the editor * type-check passes * wip: upgrade to the released version * Upgrade to latest editor * remove local testing script * chore: fix lint errors * chore: fix TS error * chore: fix lint styles * Fix dialogs submitting the entire form * Adjust resulting youtube videos dimensions * Remove test script
podkrepi-bg · Aug 24, 2023 · 523b8e9 · 523b8e9
1 parent d562d11
commit 523b8e9
Show file tree

Hide file tree

Showing 24 changed files with 7,835 additions and 4,188 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -28,6 +28,7 @@ module.exports = {
     'sentry.client.config.js',
     'sentry.server.config.js',
     'next-sitemap.config.js',
+    'e2e/*'
   ],
   rules: {
     'react/display-name': 'off',

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@emotion/react": "^11.8.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.8.1",
+    "@mdxeditor/editor": "^0.14.2",
     "@mui/icons-material": "^5.11.11",
     "@mui/lab": "^5.0.0-alpha.69",
     "@mui/material": "^5.10.14",
@@ -67,10 +68,20 @@
     "react-material-ui-carousel": "^3.4.2",
     "react-quill": "^2.0.0",
     "react-slick": "^0.29.0",
+    "rehype-format": "^4.0.1",
+    "rehype-raw": "^6.1.1",
+    "rehype-stringify": "^9.0.3",
+    "remark-directive": "^2.0.1",
+    "remark-parse": "^10.0.2",
+    "remark-rehype": "^10.1.0",
+    "sanitize-html": "^2.11.0",
     "sharp": "^0.30.5",
     "slick-carousel": "^1.8.1",
     "slugify": "^1.6.0",
     "socket.io-client": "^4.5.4",
+    "turndown": "^7.1.2",
+    "unified": "^10.1.2",
+    "unist-util-visit": "^5.0.0",
     "yup": "0.32.9"
   },
   "devDependencies": {
@@ -82,11 +93,13 @@
     "@types/lodash.truncate": "^4.4.7",
     "@types/lru-cache": "^5.1.1",
     "@types/node": "14.14.37",
-    "@types/react": "18.0.25",
+    "@types/react": "18.2.14",
     "@types/react-dom": "^18.0.0",
     "@types/react-gtm-module": "2.0.0",
     "@types/react-slick": "^0.23.10",
+    "@types/sanitize-html": "^2",
     "@types/tryghost__content-api": "^1.3.11",
+    "@types/turndown": "^5.0.1",
     "@types/uuid": "^9.0.0",
     "@types/yup": "0.29.11",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -109,7 +122,7 @@
     "stripe": "^8.184.0",
     "stylelint": "^15.10.1",
     "stylelint-config-sass-guidelines": "9.0.1",
-    "typescript": "4.8.3"
+    "typescript": "5.1.6"
   },
   "lint-staged": {
     "*.{ts,tsx,js}": [

diff --git a/public/locales/bg/campaigns.json b/public/locales/bg/campaigns.json
@@ -92,6 +92,10 @@
       "warning": "Редактирането на това поле ще измени линка към кампанията и ще направи текущия невалиден",
       "placeholder": "Стойността по подразбиране е същата като 'Име на кампанията'"
     },
+    "rte": {
+      "modern": "Нов (бета)",
+      "classic": "Предишен"
+    },
     "amount": "Необходима сума",
     "type": "Тип кампания",
     "state": "Статус",

diff --git a/public/locales/en/admin.json b/public/locales/en/admin.json
@@ -16,5 +16,5 @@
     "view": "View",
     "edit": "Edit",
     "delete": "Delete"
-  }
+  },
 }
diff --git a/public/locales/en/campaigns.json b/public/locales/en/campaigns.json
@@ -129,6 +129,10 @@
       "resume": "Resume",
       "retry": "Retry"
     },
+    "rte": {
+      "modern": "New (beta)",
+      "classic": "Classic"
+    },
     "beneficiary": {
       "name": "Beneficiary",
       "label": "Beneficiary:",

diff --git a/src/common/theme.ts b/src/common/theme.ts
@@ -39,6 +39,7 @@ const borders = {
   light: colors.blue.main,
   round: '60px',
   semiRound: '20px',
+  input: 'rgba(0, 0, 0, 0.23)',
 }
 
 export const themeOptions: ThemeOptions = {

diff --git a/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsCampaignConfirmModal.tsx
@@ -64,7 +64,7 @@ export default function RenderCampaignNotificationsConfirmModal({
   >({
     mutationFn: useUNsubscribeEmail(),
     onError: (error) => handleError(error),
-    onSuccess: (response) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
       //   Update data
       queryClient.invalidateQueries({

diff --git a/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx b/src/components/client/auth/profile/MyNotificationsConfirmModal.tsx
@@ -66,7 +66,7 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal
   >({
     mutationFn: useSubscribeEmail(),
     onError: (error) => handleError(error),
-    onSuccess: (response) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
       //   Update data
       queryClient.invalidateQueries({ queryKey: [endpoints.account.me.url] })
@@ -80,7 +80,7 @@ export default function RenderNotificationsConfirmModal({ type, setOpen }: Modal
   >({
     mutationFn: useUNsubscribeEmail(),
     onError: (error) => handleError(error),
-    onSuccess: (response) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
       //   Update data
       queryClient.invalidateQueries({ queryKey: [endpoints.account.me.url] })

diff --git a/src/components/client/campaigns/CampaignDetails.tsx b/src/components/client/campaigns/CampaignDetails.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { useTranslation } from 'next-i18next'
 import dynamic from 'next/dynamic'
@@ -7,7 +7,7 @@ import { CampaignResponse } from 'gql/campaigns'
 
 import 'react-quill/dist/quill.bubble.css'
 
-import { Button, Divider, Grid, Tooltip, Typography } from '@mui/material'
+import { Divider, Grid, Tooltip, Typography } from '@mui/material'
 import SecurityIcon from '@mui/icons-material/Security'
 import { styled } from '@mui/material/styles'
 
@@ -21,12 +21,11 @@ import { campaignSliderUrls } from 'common/util/campaignImageUrls'
 import CampaignPublicExpensesGrid from './CampaignPublicExpensesGrid'
 import EditIcon from '@mui/icons-material/Edit'
 import { useCampaignApprovedExpensesList } from 'common/hooks/expenses'
-import { Assessment, Email } from '@mui/icons-material'
+import { Assessment } from '@mui/icons-material'
 import { routes } from 'common/routes'
 import { useCanEditCampaign } from 'common/hooks/campaigns'
 import { moneyPublic } from 'common/util/money'
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong'
-import RenderCampaignSubscribeModal from '../notifications/CampaignSubscribeModal'
 
 const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
 const CampaignNewsSection = dynamic(() => import('./CampaignNewsSection'), { ssr: false })

diff --git a/src/components/client/campaigns/CampaignInfo/CampaignInfoOrganizer.tsx b/src/components/client/campaigns/CampaignInfo/CampaignInfoOrganizer.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { CampaignResponse } from 'gql/campaigns'
 import { useTranslation } from 'next-i18next'
 
-import { Grid, Stack, Typography } from '@mui/material'
+import { Grid, Typography } from '@mui/material'
 import EmailIcon from '@mui/icons-material/Email'
 
 import { organizerCampaignPictureUrl } from 'common/util/campaignImageUrls'

diff --git a/src/components/client/campaigns/InlineDonation.tsx b/src/components/client/campaigns/InlineDonation.tsx
@@ -5,8 +5,8 @@ import { useRouter } from 'next/router'
 
 import { CampaignResponse } from 'gql/campaigns'
 
-import { Button, CircularProgress, Grid, Icon, IconButton, Menu, Typography } from '@mui/material'
-import { AddLinkOutlined, Favorite, Mail, MarkEmailUnread } from '@mui/icons-material'
+import { Button, CircularProgress, Grid, IconButton, Menu, Typography } from '@mui/material'
+import { AddLinkOutlined, Favorite, MarkEmailUnread } from '@mui/icons-material'
 import { lighten } from '@mui/material/styles'
 import { styled } from '@mui/material/styles'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'

diff --git a/src/components/client/donation-flow/common/RadioAccordionGroup.tsx b/src/components/client/donation-flow/common/RadioAccordionGroup.tsx
@@ -25,7 +25,7 @@ export const StyledRadioAccordionItem = styled(Box)(() => ({
   cursor: 'pointer',
 }))
 
-interface RadioAccordionItemProps extends BoxProps {
+interface RadioAccordionItemProps extends Omit<BoxProps, 'content'> {
   control: React.ReactNode
   icon: React.ReactNode
   content?: React.ReactNode

diff --git a/src/components/client/notifications/CampaignSubscribeModal.tsx b/src/components/client/notifications/CampaignSubscribeModal.tsx
@@ -76,7 +76,7 @@ export default function RenderCampaignSubscribeModal({ campaign, setOpen }: Moda
   >({
     mutationFn: useSubscribeToCampaign(campaign.id),
     onError: (error) => handleError(error),
-    onSuccess: (response) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
 
       setIsSuccess(true)

diff --git a/src/components/client/notifications/GeneralSubscribeModal.tsx b/src/components/client/notifications/GeneralSubscribeModal.tsx
@@ -66,7 +66,7 @@ export default function RenderSubscribeModal({ setOpen }: ModalProps) {
   >({
     mutationFn: useSendConfirmationEmail(),
     onError: (error) => handleError(error),
-    onSuccess: (response) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
 
       setIsSuccess(true)

diff --git a/src/components/client/notifications/SubscriptionPage.tsx b/src/components/client/notifications/SubscriptionPage.tsx
@@ -108,7 +108,7 @@ export default function SubscriptionPage(data: Props) {
   >({
     mutationFn: useSubscribePublicEmail(),
     onError: (error) => handleError(error),
-    onSuccess: (response, data) => {
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
       setIsSuccess(true)
       setLoading(false)

diff --git a/src/components/client/notifications/UNsubscriptionsPage.tsx b/src/components/client/notifications/UNsubscriptionsPage.tsx
@@ -88,8 +88,7 @@ export default function UNsubscriptionPage(data: Props) {
     callUNsubscribeApiRoute(payload).catch(() => console.log())
   }, [])
 
-  const handleError = (e: AxiosError<ApiError>) => {
-    const error = e.response?.data?.message
+  const handleError = () => {
     setLoading(false)
     setIsSuccess(false)
   }
@@ -100,8 +99,8 @@ export default function UNsubscriptionPage(data: Props) {
     UNsubscribePublicEmailInput
   >({
     mutationFn: useUNSubscribePublicEmail(),
-    onError: (error) => handleError(error),
-    onSuccess: (response, data) => {
+    onError: () => handleError(),
+    onSuccess: () => {
       AlertStore.show(t('common:alerts.message-sent'), 'success')
       setIsSuccess(true)
       setLoading(false)

diff --git a/src/components/common/QuillStyleWrapper.tsx b/src/components/common/QuillStyleWrapper.tsx
@@ -15,6 +15,10 @@ export const QuillStypeWrapper = styled(Grid)(({ theme }) => ({
   ['.ql-editor, .ql-video']: {
     maxWidth: '100%',
   },
+  ['.ql-video']: {
+    maxWidth: '100%',
+    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']:
     {