@visns-studio/visns-components 3.1.10 → 3.1.11

package/components/cms/Field.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
 import ReactQuill, { Quill } from 'react-quill';
+import { Editor } from '@tinymce/tinymce-react';
 import ImageUploader from 'quill-image-uploader';
 import Toggle from 'react-toggle';
 import { NumericFormat, PatternFormat } from 'react-number-format';
@@ -75,6 +76,7 @@ const Field = ({
     settings,
     uploadProgress,
 }) => {
+    const editorRef = useRef(null);
     const inputFile = useRef(null);
     const [options, setOptions] = useState([]);
     const [dataOptions, setDataOptions] = useState([]);
@@ -665,26 +667,45 @@ const Field = ({
                         break;
                     case 'richeditor':
                         htmlContainer = (
-                            <ReactQuill
-                                theme="snow"
-                                name={settings.id}
-                                onChange={(value) => {
-                                    onChangeRicheditor(value, settings.id);
+                            <Editor
+                                apiKey="51mqcxkrrco6unmr6h8exc5mkhtjwi6fpyedy3r493px8cbq"
+                                onEditorChange={(value, e) => {
+                                    onChangeRicheditor(e, value, settings.id);
                                 }}
+                                onInit={(evt, editor) =>
+                                    (editorRef.current = editor)
+                                }
                                 value={inputValue || ''}
-                                modules={modules}
-                                formats={[
-                                    'header',
-                                    'bold',
-                                    'italic',
-                                    'underline',
-                                    'strike',
-                                    'blockquote',
-                                    'list',
-                                    'bullet',
-                                    'link',
-                                    'image',
-                                ]}
+                                init={{
+                                    branding: false,
+                                    height: 500,
+                                    menubar: false,
+                                    plugins: [
+                                        'advlist',
+                                        'autolink',
+                                        'lists',
+                                        'link',
+                                        'image',
+                                        'charmap',
+                                        'preview',
+                                        'anchor',
+                                        'searchreplace',
+                                        'visualblocks',
+                                        'code',
+                                        'fullscreen',
+                                        'insertdatetime',
+                                        'media',
+                                        'table',
+                                        'code',
+                                    ],
+                                    toolbar:
+                                        'undo redo | blocks | ' +
+                                        'bold italic forecolor | alignleft aligncenter ' +
+                                        'alignright alignjustify | bullist numlist outdent indent | ' +
+                                        'removeformat | table',
+                                    content_style:
+                                        'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
+                                }}
                             />
                         );
                         break;

package/components/crm/Field.jsx

@@ -17,7 +17,6 @@ import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from '../cms/DropZone';
 
 import 'react-toggle/style.css';
-import 'react-quill/dist/quill.snow.css';
 import 'react-datepicker/dist/react-datepicker.css';
 
 function Field({

package/package.json

@@ -49,7 +49,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.1.10",
+    "version": "3.1.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {