CRIC-1927: Change TinyMCE to Quill (#1836)

Change TinyMCE to Quill rich text editor

grails-app/views/layouts/main_component.gsp

@@ -72,7 +72,6 @@
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
-    <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=kyknyn3xmeam53u8vyway2oxf18oecyfwkjoym1xcydpyfyh"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
     <!-- Google identity service library -->
     <script src="https://accounts.google.com/gsi/client" async defer></script>

src/main/webapp/components/Comments.js

@@ -1,21 +1,22 @@
 import React, { Component, Fragment } from 'react';
 import { div, h, hh, label, button } from 'react-hyperscript-helpers';
-import TextEditor from './TextEditor';
-import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
-import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
 import { Btn } from './Btn';
-import './Btn.css';
 import { exportData } from '../util/Utils';
 import { TableComponent } from './TableComponent';
 import { formatDataPrintableFormat } from '../util/TableUtil';
-import { Editor } from '@tinymce/tinymce-react';
 import { AlertMessage } from '../components/AlertMessage';
 import { isEmpty } from '../util/Utils';
 import { Review } from '../util/ajax';
 import { ConfirmationDialog } from '../components/ConfirmationDialog';
-import '../components/Btn.css';
-import './Wizard.css';
 import LoadingWrapper from './LoadingWrapper';
+import ReactQuill from 'react-quill';
+import { MODULES, STYLE, THEME } from '../util/TextEditorConstants';
+
+import './Btn.css';
+import './Wizard.css';
+import '../components/Btn.css';
+import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
+import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
 
 const defaultSorted = [{
   dataField: 'date',
@@ -125,7 +126,7 @@ const Comments = hh(class Comments extends Component {
         }
       }],
       editMode: false,
-      comment: {},
+      comment: '',
       showAlert: false,
       errorMsg: '',
       errorType: '',
@@ -135,13 +136,57 @@ const Comments = hh(class Comments extends Component {
     }
   }
 
-  handleEditorChange = (comment, editor) => {
+  handleAddEditorChange = (comment, editor) => {
     this.setState(prev => {
-      prev.newComment =  comment
+      prev.comment =  comment;
       return prev;
     });
   };
 
+  handleUpdateEditorChange = (comment, editor) => {
+    this.setState(prev => {
+      prev.newComment =  comment;
+      return prev;
+    });
+  };
+
+  addComment = () => {
+    this.props.showSpinner();
+    Review.addComments(this.props.id, this.state.comment).then(
+      response => {
+        this.props.hideSpinner();
+        this.setState({
+          showAlert: true,
+          comment: '',
+          errorMsg: 'Comment updated succesfully',
+          errorType: 'success',
+          editMode: false
+        }, () => {
+          this.props.updateContent();
+          setTimeout(() => {
+            this.setState({
+              showAlert: false
+            })
+          }, 4000);
+        });
+      }
+    ).catch(error =>
+      this.setState(prev => {
+        prev.showAlert = true;
+        prev.errorMsg = 'Error trying to update comment, please try again later.';
+        prev.errorType = 'danger';
+        prev.editMode = false;
+      },()=> {
+        this.props.hideSpinner();
+        setTimeout(() => {
+          this.setState({
+            showAlert: false
+          })
+        }, 4000);
+      })
+    )
+  };
+
   editComment = (row) => {
     this.setState({
       newComment: row.comment,
@@ -290,46 +335,73 @@ const Comments = hh(class Comments extends Component {
         div({
           id: 'comment'
         }),
-        h(TextEditor, {
+        div({
           isRendered: !this.state.editMode,
-          id: this.props.id,
-          loadComments: this.props.updateContent
-        }),
+          className: "well"
+        },[
+          label({},["Add comment"]),
+          h(ReactQuill, {
+            theme: THEME,
+            modules: MODULES,
+            value: this.state.comment,
+            onChange:this.handleAddEditorChange,
+            style: STYLE
+          }),
+          div({}, [
+            button({
+              className: "btn btn-primary",
+              style: {marginTop:"15px"},
+              isRendered: true,
+              onClick: this.addComment,
+              disabled: isEmpty(this.state.comment)
+            }, ["Add"]),
+            button({
+              className: "btn buttonSecondary",
+              style: {marginTop:"15px", marginLeft: "5px"},
+              ref: el => {
+                if(el) {
+                    el.style.setProperty('background', 'none', 'important');
+                    el.style.setProperty('color', '#000000', 'important');
+                }
+              },
+              isRendered: true,
+              onClick: this.returnToAddComment
+            }, ["Cancel"]),
+          ])
+        ]),
         div({
           isRendered: this.state.editMode,
           className: "well"
         },[
           label({},["Edit comment"]),
-          h(Editor, {
-            init: {
-              width: '100%',
-              menubar: false,
-              statusbar: false,
-              plugins: "paste",
-              paste_data_images: false
-            },
+          h(ReactQuill, {
+            theme: THEME,
+            modules: MODULES,
             value: this.state.newComment,
-            onEditorChange: this.handleEditorChange
-          }, []),
-          button({
-            className: "btn btn-primary",
-            style: {marginTop:"15px"},
-            isRendered: true,
-            onClick: this.updateComment,
-            disabled: isEmpty(this.state.comment)
-          }, ["Save"]),
-          button({
-            className: "btn buttonSecondary",
-            style: {marginTop:"15px", marginLeft: "5px"},
-            ref: el => {
-              if(el) {
-                  el.style.setProperty('background', 'none', 'important');
-                  el.style.setProperty('color', '#000000', 'important');
-              }
-            },
-            isRendered: true,
-            onClick: this.returnToAddComment
-          }, ["Cancel"]),
+            onChange:this.handleUpdateEditorChange,
+            style:STYLE
+          }),
+          div({}, [
+            button({
+              className: "btn btn-primary",
+              style: {marginTop:"15px"},
+              isRendered: true,
+              onClick: this.updateComment,
+              disabled: isEmpty(this.state.comment)
+            }, ["Save"]),
+            button({
+              className: "btn buttonSecondary",
+              style: {marginTop:"15px", marginLeft: "5px"},
+              ref: el => {
+                if(el) {
+                    el.style.setProperty('background', 'none', 'important');
+                    el.style.setProperty('color', '#000000', 'important');
+                }
+              },
+              isRendered: true,
+              onClick: this.returnToAddComment
+            }, ["Cancel"]),
+          ])
         ]),
         div({
           style: {marginTop:"15px"}

src/main/webapp/index.css

@@ -397,4 +397,12 @@ input[type=checkbox] {
 
 .modal-footer {
   padding: 20px !important;
-}
+}
+
+.ql-editor {
+  background-color: #ffffff;
+}
+
+.ql-picker-label {
+  border: 1px solid #cccccc !important;
+}

src/main/webapp/loginText/LoginText.js

@@ -1,22 +1,15 @@
 import React, { Component } from 'react';
-import '../components/Wizard.css'
-import '../index.css'
-import { button, hh, h1, h3, p, div, br } from 'react-hyperscript-helpers';
-
+import { hh } from 'react-hyperscript-helpers';
 import { InputFieldText } from '../components/InputFieldText'; 
-import { InputFieldTextArea } from '../components/InputFieldTextArea';
 import { LoginText } from '../util/ajax';
 import { AlertMessage } from '../components/AlertMessage';
 import { InputFieldSelect } from '../components/InputFieldSelect';
-
 import ReactQuill from "react-quill";
-import 'react-quill/dist/quill.snow.css';
+import { MODULES, THEME } from '../util/TextEditorConstants';
 
-const styles = {
-    titleSize: '24px',
-    fontFamily : '"Helvetica Neue",Helvetica,Arial,sans-serif',
-    textFontSize: '14px'
-  };
+import 'react-quill/dist/quill.snow.css';
+import '../components/Wizard.css'
+import '../index.css'
 
 export const LogintText = hh(class LogintText extends Component {
 
@@ -198,7 +191,8 @@ export const LogintText = hh(class LogintText extends Component {
                     ></InputFieldText>
                     <label style={{ color: '#286090', fontWeight: '700', fontSize: '1rem', marginBottom: '3px', marginTop: '10px' }}>Body for the login page text</label>
                     <ReactQuill
-                        theme='snow'
+                        theme={THEME}
+                        modules={MODULES}
                         value={this.state.body}
                         onChange={this.handleBodyChange}
                         style={{height: '12rem'}}