added: image/video resize and html edit in RichText editor (#1032)

* added: image/video resize and html edit in RichText editor * fixed the interruption of video playback by removing the global QueryClient staletime autorefresh * fixed: beneficiary name to display below the banner image on campaign details page when longer text * renamed: "не е въведена" to "безсрочна" Co-authored-by: quantum-grit <[email protected]>
podkrepi-bg · Sep 21, 2022 · 2ebe174 · 2ebe174
1 parent fd14f76
commit 2ebe174
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -63,6 +63,8 @@
     "next-auth": "^4.10.3",
     "next-i18next": "^11.2.2",
     "nookies": "^2.5.2",
+    "quill-blot-formatter": "^1.0.5",
+    "quill-html-edit-button": "^2.2.12",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-gtm-module": "2.0.11",

diff --git a/src/components/campaigns/CampaignDetails.tsx b/src/components/campaigns/CampaignDetails.tsx
@@ -78,7 +78,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     fontSize: theme.spacing(3),
     marginTop: theme.spacing(3),
     [theme.breakpoints.up('md')]: {
-      marginTop: theme.spacing(8),
+      marginTop: theme.spacing(12),
     },
   },
   ['& .ql-editor']: {

diff --git a/src/components/campaigns/CampaignInfo.tsx b/src/components/campaigns/CampaignInfo.tsx
@@ -102,7 +102,7 @@ export default function CampaignInfo({ campaign }: Props) {
           <Grid item>
             <Typography variant="subtitle2" component="p" className={classes.campaignTextWithIcon}>
               <strong>{t('campaigns:campaign.end-date')}</strong>{' '}
-              {campaign.endDate ? getExactDate(campaign.endDate, locale) : 'не е въведена'}
+              {campaign.endDate ? getExactDate(campaign.endDate, locale) : 'безсрочна'}
             </Typography>
           </Grid>
         </Grid>

diff --git a/src/components/campaigns/grid/CreateForm.tsx b/src/components/campaigns/grid/CreateForm.tsx
@@ -18,9 +18,13 @@ import FileUpload from 'components/file-upload/FileUpload'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
-import FormRichTextField from 'components/common/form/FormRichTextField'
 import AcceptTermsField from 'components/common/form/AcceptTermsField'
 
+import dynamic from 'next/dynamic'
+const FormRichTextField = dynamic(() => import('components/common/form/FormRichTextField'), {
+  ssr: false,
+})
+
 import { ApiErrors, isAxiosError, matchValidator } from 'service/apiErrors'
 import { useCreateCampaign, useUploadCampaignFiles } from 'service/campaign'
 import { CampaignFileRole, FileRole, UploadCampaignFiles } from 'components/campaign-file/roles'

diff --git a/src/components/campaigns/grid/EditForm.tsx b/src/components/campaigns/grid/EditForm.tsx
@@ -17,7 +17,11 @@ import { createSlug } from 'common/util/createSlug'
 import GenericForm from 'components/common/form/GenericForm'
 import SubmitButton from 'components/common/form/SubmitButton'
 import FormTextField from 'components/common/form/FormTextField'
-import FormRichTextField from 'components/common/form/FormRichTextField'
+
+import dynamic from 'next/dynamic'
+const FormRichTextField = dynamic(() => import('components/common/form/FormRichTextField'), {
+  ssr: false,
+})
 
 import { ApiErrors, isAxiosError, matchValidator } from 'service/apiErrors'
 import {

diff --git a/src/components/common/form/FormRichTextField.tsx b/src/components/common/form/FormRichTextField.tsx
@@ -6,9 +6,17 @@ import { Typography } from '@mui/material'
 import { translateError } from 'common/form/useForm'
 import { TranslatableField } from 'common/form/validation'
 
-import dynamic from 'next/dynamic'
 import 'react-quill/dist/quill.snow.css'
-const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
+
+import ReactQuill, { Quill } from 'react-quill'
+
+import BlotFormatter from 'quill-blot-formatter/'
+Quill.register('modules/blotFormatter', BlotFormatter)
+
+import htmlEditButton from 'quill-html-edit-button'
+Quill.register({
+  'modules/htmlEditButton': htmlEditButton,
+})
 
 export type RegisterFormProps = {
   name: string
@@ -30,6 +38,14 @@ const modules = {
     // toggle to add extra line breaks when pasting HTML:
     matchVisual: false,
   },
+  blotFormatter: {
+    overlay: {
+      style: {
+        border: '2px solid red',
+      },
+    },
+  },
+  htmlEditButton: {},
 }
 
 export default function FormRichTextField({ name }: RegisterFormProps) {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -70,7 +70,6 @@ function CustomApp({
         defaultOptions: {
           queries: {
             queryFn,
-            staleTime: 25000,
           },
         },
       }),

diff --git a/yarn.lock b/yarn.lock
@@ -3231,7 +3231,7 @@ deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.1.1:
+deepmerge@^2.0.0, deepmerge@^2.1.1:
   version "2.2.1"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
@@ -6528,6 +6528,13 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quill-blot-formatter@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/quill-blot-formatter/-/quill-blot-formatter-1.0.5.tgz#934cadd10ed9cf68b54b22b99d1e0a6a06f4479d"
+  integrity sha512-iVmuEdmMIpvERBnnDfosWul6VAVN6tqQRruUzAEwA9ZbQ/Ef7DTHGZDUR4KklXpxM+z50opFp6m1NhNdN6HJhw==
+  dependencies:
+    deepmerge "^2.0.0"
+
 quill-delta@^3.6.2:
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
@@ -6537,7 +6544,14 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.3.7:
+quill-html-edit-button@^2.2.12:
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/quill-html-edit-button/-/quill-html-edit-button-2.2.12.tgz#45f7ad9f907252d9efdf9f5b5590834a2f5484f9"
+  integrity sha512-lrCJmf2XpvkpjpofRW77ShsCj5x9JhL4Mji03aIKZWR6uGKeKal0IKI22buW8tG6hFekTHzv7UBl2Jz0Yd+BTQ==
+  dependencies:
+    quill "^1.x"
+
+quill@^1.3.7, quill@^1.x:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==