Merge pull request #458 from erikaperugachi/composer

Composer

Author: Erika Perugachi

electron_app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "criptext",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "author": {
     "name": "Criptext Inc.",
     "email": "[email protected]",
@@ -17,7 +17,7 @@
   },
   "scripts": {
     "electron": "electron .",
-    "set-env": "NODE_ENV=development CSC_LINK=build/Certificates.p12 CSC_KEY_PASSWORD=xxxxxxxx CSC_IDENTITY_AUTO_DISCOVERY=true MAILBOX_URL=http://localhost:3000 DIALOG_URL=http://localhost:3006 LOGIN_URL=http://localhost:3005 LOADING_URL=http://localhost:3003 COMPOSER_URL=http://localhost:3004 REACT_APP_KEYSERVER_URL=http://localhost:8000 REACT_APP_SOCKETSERVER_URL=ws://localhost:3001",
+    "set-env": "NODE_ENV=development CSC_LINK=build/Certificates.p12 CSC_KEY_PASSWORD=xxxxxxxx CSC_IDENTITY_AUTO_DISCOVERY=true MAILBOX_URL=http://localhost:3000 DIALOG_URL=http://localhost:3006 LOGIN_URL=http://localhost:3005 LOADING_URL=http://localhost:3003 COMPOSER_URL=http://localhost:3004",
     "start": "npm run set-env electron .",
     "postinstall": "install-app-deps",
     "test": "criptext-js-tools test",

email_composer/package.json

@@ -7,20 +7,19 @@
     "base64-js": "^1.3.0",
     "criptext-files-sdk": "^0.6.2",
     "crypto-js": "^3.1.9-1",
-    "draft-js": "^0.10.5",
     "draftjs-to-html": "^0.8.2",
-    "html-to-draftjs": "^1.3.1",
     "immutable": "^3.8.2",
+    "jquery": "^3.3.1",
     "node-sass-chokidar": "^0.0.3",
     "npm-run-all": "^4.1.2",
     "randomcolor": "^0.5.3",
     "react": "^16.2.0",
     "react-autosuggest": "^9.3.4",
     "react-dom": "^16.2.0",
-    "react-draft-wysiwyg": "^1.12.7",
     "react-scripts": "1.1.0",
     "react-switch": "^3.0.4",
-    "react-tagsinput": "^3.19.0"
+    "react-tagsinput": "^3.19.0",
+    "react-trumbowyg": "^1.1.0"
   },
   "scripts": {
     "build-css": "node-sass-chokidar src -o src",

email_composer/src/app.scss

@@ -391,9 +391,15 @@ TABLE OF CONTENTS
 .icon-text-edit:before {
   content: "\e93b";
 }
+.icon-font-size:before {
+  content: "\e935";
+}
 .icon-clock:before {
   content: "\e93e";
 }
+.icon-add-friend:before {
+  content: "\e934";
+}
 
 /* 2.- CONTENT
    ----------------------------- */

email_composer/src/components/Body.js

@@ -7,7 +7,6 @@ import './body.css';
 const Body = props => (
   <div className="body-container">
     <DropfileField
-      blockRenderMap={props.blockRenderMap}
       files={props.files}
       getHtmlBody={props.getHtmlBody}
       htmlBody={props.htmlBody}
@@ -34,12 +33,11 @@ const Body = props => (
 
 Body.propTypes = {
   addFiletoken: PropTypes.func,
-  blockRenderMap: PropTypes.object,
   files: PropTypes.array,
   getHtmlBody: PropTypes.func,
   handleDragLeave: PropTypes.func,
   handleDragOver: PropTypes.func,
-  htmlBody: PropTypes.object,
+  htmlBody: PropTypes.string,
   isDragActive: PropTypes.bool,
   isFocusEditorInput: PropTypes.bool,
   isToolbarHidden: PropTypes.bool,

email_composer/src/components/BodyWrapper.js

@@ -32,7 +32,7 @@ class BodyWrapper extends Component {
 
 BodyWrapper.propTypes = {
   getHtmlBody: PropTypes.func,
-  htmlBody: PropTypes.object,
+  htmlBody: PropTypes.string,
   isFocusEditorInput: PropTypes.bool,
   onDrop: PropTypes.func,
   onFocusTextEditor: PropTypes.func

email_composer/src/components/Composer.js

@@ -27,7 +27,6 @@ const Composer = props => (
       text={props.textSubject}
     />
     <BodyWrapper
-      blockRenderMap={props.blockRenderMap}
       files={props.files}
       getHtmlBody={props.getHtmlBody}
       handleDragLeave={props.handleDragLeave}
@@ -62,7 +61,6 @@ const Composer = props => (
 Composer.propTypes = {
   addFiletoken: PropTypes.func,
   bccEmails: PropTypes.array,
-  blockRenderMap: PropTypes.object,
   ccEmails: PropTypes.array,
   disableSendButtonOnInvalidEmail: PropTypes.func,
   displayNonCriptextPopup: PropTypes.bool,
@@ -76,7 +74,7 @@ Composer.propTypes = {
   handleDragOver: PropTypes.func,
   handlePauseUploadFile: PropTypes.func,
   handleResumeUploadFile: PropTypes.func,
-  htmlBody: PropTypes.object,
+  htmlBody: PropTypes.string,
   isCollapsedMoreRecipient: PropTypes.bool,
   isDragActive: PropTypes.bool,
   isFocusEditorInput: PropTypes.bool,

email_composer/src/components/DropfileField.js

@@ -7,7 +7,9 @@ import './dropfilefield.css';
 const DropfileField = props => (
   <div
     className={
-      'dropfilefiled-container ' + (props.isDragActive ? 'dragActive' : '')
+      'dropfilefiled-container' +
+      (props.isDragActive ? ' dragActive' : '') +
+      (props.isToolbarHidden ? ' toolbarHidden' : '')
     }
     onDragLeave={props.onDragLeave}
     onDragOver={props.onDragOver}
@@ -18,7 +20,6 @@ const DropfileField = props => (
       isFocusEditorInput={props.isFocusEditorInput}
       toolbarHidden={props.isToolbarHidden}
       getHtmlBody={props.getHtmlBody}
-      blockRenderMap={props.blockRenderMap}
       onFocusTextEditor={props.onFocusTextEditor}
     />
     <div className="files-container">
@@ -70,10 +71,9 @@ DropfileField.defaultProps = {
 DropfileField.propTypes = {
   accept: PropTypes.string,
   addFiletoken: PropTypes.func,
-  blockRenderMap: PropTypes.object,
   files: PropTypes.array,
   getHtmlBody: PropTypes.func,
-  htmlBody: PropTypes.object,
+  htmlBody: PropTypes.string,
   isDragActive: PropTypes.bool,
   isFocusEditorInput: PropTypes.bool,
   isToolbarHidden: PropTypes.bool,

email_composer/src/components/EditorWrapper.js

@@ -1,65 +1,51 @@
+import './global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Editor } from 'react-draft-wysiwyg';
+import Trumbowyg from 'react-trumbowyg';
+import '../../node_modules/trumbowyg/dist/plugins/colors/trumbowyg.colors.min.js';
+import '../../node_modules/trumbowyg/dist/plugins/colors/ui/trumbowyg.colors.css';
+import '../../node_modules/trumbowyg/dist/plugins/fontfamily/trumbowyg.fontfamily.js';
+import '../../node_modules/trumbowyg/dist/plugins/fontsize/trumbowyg.fontsize.js';
+import 'react-trumbowyg/dist/trumbowyg.css';
 import './editor.css';
 
 class EditorWrapper extends Component {
   render() {
     return (
-      <Editor
-        {...this.props}
-        ref={editor => {
-          this.editor = editor;
-        }}
-        toolbar={{
-          options: [
-            'inline',
-            'fontSize',
-            'fontFamily',
-            'list',
-            'textAlign',
-            'colorPicker',
-            'link',
-            'emoji'
-          ],
-          inline: {
-            options: ['bold', 'italic', 'underline']
-          },
-          textAlign: { inDropdown: true },
-          link: {
-            inDropdown: false,
-            defaultTargetOption: '_blank'
-          },
-          history: { inDropdown: true }
-        }}
-        editorState={this.props.htmlBody}
-        onEditorStateChange={this.onChangeHtmlBody}
-        placeholder={'Message'}
-        blockRenderMap={this.props.blockRenderMap}
-        onFocus={() => this.handleFocus()}
+      <Trumbowyg
+        id="react-trumbowyg"
+        buttons={[
+          ['fontfamily'],
+          ['fontsize'],
+          ['bold', 'italic', 'underline'],
+          ['link'],
+          ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
+          ['unorderedList', 'orderedList'],
+          ['foreColor', 'backColor'],
+          ['removeformat']
+        ]}
+        data={this.props.htmlBody}
+        onChange={this.onChangeHtmlBody}
+        placeholder="Message"
       />
     );
   }
 
-  componentDidMount() {
-    if (this.props.isFocusEditorInput) {
-      this.editor.focusEditor();
+  componentDidUpdate(prevProps) {
+    if (prevProps.htmlBody !== this.props.htmlBody) {
+      this.props.getHtmlBody(this.props.htmlBody);
     }
   }
 
-  onChangeHtmlBody = html => {
+  onChangeHtmlBody = e => {
+    const html = e.target.innerHTML;
     this.props.getHtmlBody(html);
   };
-
-  handleFocus = () => {
-    this.props.onFocusTextEditor(true);
-  };
 }
 
 EditorWrapper.propTypes = {
-  blockRenderMap: PropTypes.object,
   getHtmlBody: PropTypes.func,
-  htmlBody: PropTypes.object,
+  htmlBody: PropTypes.string,
   isFocusEditorInput: PropTypes.bool,
   onFocusTextEditor: PropTypes.func
 };

email_composer/src/components/Recipient.js

@@ -36,7 +36,7 @@ const renderRecipientTo = props => (
   <div className="recipient-content">
     <span className="recipient-input-label">To:</span>
     <TagsInput
-      addKeys={[9, 13, 32, 186, 188]}
+      addKeys={[9, 13, 32, 188]}
       addOnBlur={true}
       addOnPaste={true}
       className="recipient-tags"
@@ -47,8 +47,10 @@ const renderRecipientTo = props => (
         placeholder: '',
         name: 'To'
       }}
+      inputValue={props.inputToValue}
       onlyUnique={true}
       onChange={props.onChangeToTag}
+      onChangeInput={props.onChangeToInput}
       onValidationReject={props.handleOnValidationRejectToTag}
       pasteSplit={pasteSplit}
       renderInput={AutocompleteWrapper}
@@ -66,7 +68,7 @@ const renderRecipientCc = props => (
   <div className="recipient-content">
     <span className="recipient-input-label">Cc:</span>
     <TagsInput
-      addKeys={[9, 13, 32, 186, 188]}
+      addKeys={[9, 13, 32, 188]}
       addOnBlur={true}
       addOnPaste={true}
       className="recipient-tags"
@@ -76,7 +78,9 @@ const renderRecipientCc = props => (
         placeholder: '',
         name: 'Cc'
       }}
+      inputValue={props.inputCcValue}
       onChange={props.onChangeCcTag}
+      onChangeInput={props.onChangeCcInput}
       onlyUnique={true}
       onValidationReject={props.handleOnValidationRejectCcTag}
       pasteSplit={pasteSplit}
@@ -95,7 +99,7 @@ const renderRecipientBcc = props => (
   <div className="recipient-content">
     <span className="recipient-input-label">Bcc:</span>
     <TagsInput
-      addKeys={[9, 13, 32, 186, 188]}
+      addKeys={[9, 13, 32, 188]}
       addOnBlur={true}
       addOnPaste={true}
       className="recipient-tags"
@@ -105,7 +109,9 @@ const renderRecipientBcc = props => (
         placeholder: '',
         name: 'Bcc'
       }}
+      inputValue={props.inputBccValue}
       onChange={props.onChangeBccTag}
+      onChangeInput={props.onChangeBccInput}
       onlyUnique={true}
       onValidationReject={props.handleOnValidationRejectBccTag}
       pasteSplit={pasteSplit}
@@ -129,7 +135,9 @@ Recipient.propTypes = {
 renderRecipientTo.propTypes = {
   checkDisableSendButton: PropTypes.func,
   handleOnValidationRejectToTag: PropTypes.func,
+  inputToValue: PropTypes.string,
   isFocusEditorInput: PropTypes.bool,
+  onChangeToInput: PropTypes.func,
   onChangeToTag: PropTypes.func,
   toTags: PropTypes.string
 };
@@ -138,13 +146,17 @@ renderRecipientCc.propTypes = {
   ccTags: PropTypes.string,
   checkDisableSendButton: PropTypes.func,
   handleOnValidationRejectCcTag: PropTypes.func,
+  inputCcValue: PropTypes.string,
+  onChangeCcInput: PropTypes.func,
   onChangeCcTag: PropTypes.func
 };
 
 renderRecipientBcc.propTypes = {
   bccTags: PropTypes.string,
   checkDisableSendButton: PropTypes.func,
   handleOnValidationRejectBccTag: PropTypes.func,
+  inputBccValue: PropTypes.string,
+  onChangeBccInput: PropTypes.func,
   onChangeBccTag: PropTypes.func
 };
 

email_composer/src/components/RecipientWrapper.js

@@ -4,18 +4,33 @@ import Recipient from './Recipient';
 import { RegexUtils } from './../utils/electronUtilsInterface';
 
 class RecipientWrapper extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputBccValue: '',
+      inputCcValue: '',
+      inputToValue: ''
+    };
+  }
+
   render() {
     return (
       <Recipient
         {...this.props}
         bccTags={this.props.bccEmails}
         ccTags={this.props.ccEmails}
         emailRegex={RegexUtils.emailRegex}
+        inputBccValue={this.state.inputBccValue}
+        inputCcValue={this.state.inputCcValue}
+        inputToValue={this.state.inputToValue}
         isCollapsedMoreRecipient={this.props.isCollapsedMoreRecipient}
         onToggleRecipient={this.props.onToggleRecipient}
-        onChangeBccTag={this.handleOnChangeBccTag}
-        onChangeCcTag={this.handleOnChangeCcTag}
-        onChangeToTag={this.handleOnChangeToTag}
+        onChangeBccTag={this.handleChangeBccTag}
+        onChangeCcTag={this.handleChangeCcTag}
+        onChangeToTag={this.handleChangeToTag}
+        onChangeBccInput={this.handleChangeBccInput}
+        onChangeCcInput={this.handleChangeCcInput}
+        onChangeToInput={this.handleChangeToInput}
         onValidationRejectBccTag={this.handleOnValidationRejectBccTag}
         onValidationRejectCcTag={this.handleOnValidationRejectCcTag}
         onValidationRejectToTag={this.handleOnValidationRejectToTag}
@@ -31,15 +46,27 @@ class RecipientWrapper extends Component {
     }
   };
 
-  handleOnChangeBccTag = tags => {
+  handleChangeBccInput = text => {
+    this.setState({ inputBccValue: text ? text.replace(';', '') : text });
+  };
+
+  handleChangeCcInput = text => {
+    this.setState({ inputCcValue: text ? text.replace(';', '') : text });
+  };
+
+  handleChangeToInput = text => {
+    this.setState({ inputToValue: text ? text.replace(';', '') : text });
+  };
+
+  handleChangeBccTag = tags => {
     this.props.getBccEmails(tags);
   };
 
-  handleOnChangeCcTag = tags => {
+  handleChangeCcTag = tags => {
     this.props.getCcEmails(tags);
   };
 
-  handleOnChangeToTag = tags => {
+  handleChangeToTag = tags => {
     this.props.getToEmails(tags);
   };