Merge pull request #348 from EnMarche/poc/mail-wysiwyg

Poc: mail wysiwyg
parti-renaissance · May 6, 2021 · 42d4970 · 42d4970
2 parents 2eabc97 + d96d381
commit 42d4970
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -13,11 +13,15 @@
     "@reduxjs/toolkit": "1.5.0",
     "@sentry/browser": "5.15.0",
     "@testing-library/react-hooks": "^5.1.0",
+    "@types/react-draft-wysiwyg": "^1.13.2",
     "@types/react-router-hash-link": "^1.2.1",
     "@types/redux-mock-store": "^1.0.2",
     "babel-polyfill": "6.26.0",
     "cropperjs": "^1.5.11",
     "date-fns": "^2.21.1",
+    "draft-convert": "^2.1.11",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "emoji-regex": "^9.2.2",
     "env-cmd": "8.0.2",
     "formik": "2.2.6",
@@ -28,6 +32,7 @@
     "react": "16.14.0",
     "react-cropper": "^2.1.7",
     "react-dom": "16.14.0",
+    "react-draft-wysiwyg": "^1.14.6",
     "react-image-file-resizer": "^0.4.2",
     "react-infinite-scroll-component": "^6.0.0",
     "react-intl": "3.12.1",
@@ -100,6 +105,7 @@
   ],
   "devDependencies": {
     "@types/cheerio": "0.22.24",
+    "@types/draft-convert": "^2.1.2",
     "@types/enzyme": "3.10.8",
     "@types/history": "4.7.8",
     "@types/jest": "24.9.1",

diff --git a/src/components/SendMails/SendMails.style.ts b/src/components/SendMails/SendMails.style.ts
@@ -1,6 +1,6 @@
 import { FullWidthButton } from 'components/Button/Button';
 import styled from 'styled-components';
-import { colorPalette, fonts, getSpacing, media, borderRadius } from 'stylesheet';
+import { colorPalette, fonts, fontWeight, getSpacing, media, borderRadius } from 'stylesheet';
 
 export const SendMailsTitle = styled.h1`
   ${fonts.h1Small};
@@ -28,3 +28,7 @@ export const ValidateButton = styled(FullWidthButton)`
     margin-top: ${getSpacing(8)};
   `)}
 `;
+
+export const EditorContainer = styled.div`
+  font-weight: ${fontWeight.normal};
+`;
diff --git a/src/components/SendMails/SendMails.tsx b/src/components/SendMails/SendMails.tsx
@@ -1,12 +1,22 @@
+import React, { FunctionComponent, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { EditorState } from 'draft-js';
+import { Editor } from 'react-draft-wysiwyg';
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+
 import Formik from 'components/Formik';
 import InputField from 'components/InputField';
 import { InputFieldWrapper } from 'components/InputField/InputField.style';
-import React, { FunctionComponent, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
 import { SyncModal } from './components/SyncModal/SyncModal';
 import { usePostMails } from './hooks/usePostMails';
 import { useValidateSendMailsForm, SendMailForm } from './hooks/useValidateSendMailsForm';
-import { SendMailsDescription, SendMailsTitle, ValidateButton } from './SendMails.style';
+import {
+  SendMailsDescription,
+  SendMailsTitle,
+  ValidateButton,
+  EditorContainer,
+} from './SendMails.style';
+import { fontFamily, lineHeight, fontSize } from 'stylesheet';
 
 type SendMailsProps = {
   causeId: string;
@@ -24,6 +34,8 @@ export const SendMails: FunctionComponent<SendMailsProps> = ({ causeId }) => {
     setMailId(response);
     setOpenSyncModal(true);
   };
+  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
+
   return (
     <>
       <SendMailsTitle>
@@ -38,7 +50,16 @@ export const SendMails: FunctionComponent<SendMailsProps> = ({ causeId }) => {
         validate={validateForm}
         validateOnMount
       >
-        {({ values, handleChange, handleBlur, handleSubmit, touched, errors }) => (
+        {({
+          values,
+          handleChange,
+          handleBlur,
+          handleSubmit,
+          touched,
+          errors,
+          setFieldTouched,
+          setFieldValue,
+        }) => (
           <form onSubmit={handleSubmit}>
             <InputFieldWrapper>
               <InputField
@@ -56,7 +77,29 @@ export const SendMails: FunctionComponent<SendMailsProps> = ({ causeId }) => {
                 inputProps={{ maxLength: 255 }}
               />
             </InputFieldWrapper>
-            <InputFieldWrapper>
+            <EditorContainer>
+              <Editor
+                editorState={editorState}
+                onEditorStateChange={(state: EditorState) => {
+                  setEditorState(state);
+                  setFieldTouched('body');
+                  setFieldValue('body', state);
+                }}
+                editorStyle={{
+                  fontFamily: fontFamily.primary,
+                  lineHeight: lineHeight.primary,
+                  fontSize: fontSize.input.desktop,
+                }}
+                toolbar={{
+                  options: ['inline', 'textAlign', 'list', 'link', 'image'],
+                  inline: { options: ['bold', 'italic', 'underline'] },
+                }}
+                placeholder={formatMessage({
+                  id: 'send_mails.body',
+                })}
+              />
+            </EditorContainer>
+            {/* <InputFieldWrapper>
               <InputField
                 placeholder={formatMessage({
                   id: 'send_mails.body',
@@ -73,7 +116,7 @@ export const SendMails: FunctionComponent<SendMailsProps> = ({ causeId }) => {
                 helperText={touched.body === true ? errors.body : undefined}
                 inputProps={{ maxLength: 6000 }}
               />
-            </InputFieldWrapper>
+            </InputFieldWrapper> */}
             <ValidateButton
               disabled={loading || Object.keys(errors).length > 0}
               type="submit"

diff --git a/src/components/SendMails/hooks/format.tsx b/src/components/SendMails/hooks/format.tsx
@@ -0,0 +1,25 @@
+import { IConvertToHTMLConfig } from 'draft-convert';
+import { DraftInlineStyleType, DraftBlockType, RawDraftEntity } from 'draft-js';
+import React from 'react';
+
+export const mailFormatting: IConvertToHTMLConfig<
+  DraftInlineStyleType,
+  DraftBlockType,
+  RawDraftEntity
+> = {
+  blockToHTML: block => {
+    if (block?.data !== undefined && block?.data['text-align'] !== undefined) {
+      return <p style={{ textAlign: block?.data['text-align'] }} />;
+    }
+  },
+  entityToHTML: (entity, originalText) => {
+    console.log('entity', entity);
+    if (entity.type === 'LINK') {
+      return <a href={entity.data.url}>{originalText}</a>;
+    }
+    if (entity.type === 'IMAGE') {
+      return <img src={entity.data.src} alt="" />;
+    }
+    return originalText;
+  },
+};
diff --git a/src/components/SendMails/hooks/usePostMails.ts b/src/components/SendMails/hooks/usePostMails.ts
@@ -1,8 +1,10 @@
+import { convertToHTML } from 'draft-convert';
 import { useCallback, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useTypedAsyncFn } from 'redux/useTypedAsyncFn';
 import HandleErrorService, { APIErrorsType, doesErrorIncludes } from 'services/HandleErrorService';
 import { authenticatedApiClient } from 'services/networking/client';
+import { mailFormatting } from './format';
 import { SendMailForm } from './useValidateSendMailsForm';
 
 const usePostMailsErrorHandler = () => {
@@ -30,7 +32,7 @@ export const usePostMails = (causeId: string) => {
       type: 'coalitions',
       label: `Pourunecause: ${mail.object}`,
       subject: mail.object,
-      content: mail.body,
+      content: convertToHTML(mailFormatting)(mail.body.getCurrentContent()),
     });
     await authenticatedApiClient.put(`v3/adherent_messages/${postedMail.uuid}/filter`, {
       cause: causeId,

diff --git a/src/components/SendMails/hooks/useValidateSendMailsForm.ts b/src/components/SendMails/hooks/useValidateSendMailsForm.ts
@@ -1,9 +1,10 @@
+import { EditorState } from 'draft-js';
 import { useIntl } from 'react-intl';
 import { isFieldEmpty } from 'services/formik/form';
 
 export type SendMailForm = {
   object: string;
-  body: string;
+  body: EditorState;
 };
 
 export type SendMailFormError = {
@@ -29,14 +30,20 @@ export const useValidateSendMailsForm = () => {
       errors.object = formatMessage({ id: 'send_mails.form_errors.too-long-object' });
     }
 
-    if (isFieldEmpty(body)) {
+    if (body === undefined) {
       errors.body = requiredErrorMessage;
-    }
-    if (body !== undefined && body.length < 3) {
-      errors.body = formatMessage({ id: 'send_mails.form_errors.too-short-body' });
-    }
-    if (body !== undefined && body.length > 6000) {
-      errors.body = formatMessage({ id: 'send_mails.form_errors.too-long-body' });
+    } else {
+      const currentBody = body.getCurrentContent();
+
+      if (!currentBody.hasText()) {
+        errors.body = requiredErrorMessage;
+      }
+      if (currentBody.getPlainText().length < 3) {
+        errors.body = formatMessage({ id: 'send_mails.form_errors.too-short-body' });
+      }
+      if (currentBody.getPlainText().length > 6000) {
+        errors.body = formatMessage({ id: 'send_mails.form_errors.too-long-body' });
+      }
     }
 
     return errors;