- added clean btn for editor and added autoformatter module;

src/components/FormField/components/Wysiwyg/index.js

@@ -1,11 +1,19 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { classNames } from 'primereact/utils';
 import { Controller } from 'react-hook-form';
+import Quill from 'quill';
+import { __ } from '@wordpress/i18n';
+
+// components
 import { Editor } from 'primereact/editor';
 import BlockingOverlay from '../../../BlockingOverlay';
+import { Button } from 'primereact/button';
+
+const Delta = Quill.import('delta');
 
 const Wysiwyg = ({
                      fieldName,
+                     setDataFn,
                      label,
                      control,
                      rows = 3,
@@ -16,6 +24,11 @@ const Wysiwyg = ({
                      placeholder = '',
                      disabled = false
                  }) => {
+    const editorRef = useRef(null);
+
+    const handleCleanValue = () => {
+        setDataFn(fieldName, '', { shouldValidate: true });
+    };
 
     const renderHeader = () => {
         return (
@@ -42,6 +55,13 @@ const Wysiwyg = ({
             <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                 {label}{config.required || config.isRequired ? <span className="appForm__field--required">*</span> : null}
             </label>
+            <Button
+                label={__('Cancella testo', 'gepafin')}
+                type="button"
+                severity="warning"
+                outlined
+                onClick={handleCleanValue}
+            />
             <Controller
                 name={fieldName}
                 control={control}
@@ -49,10 +69,22 @@ const Wysiwyg = ({
                 rules={config}
                 render={({ field, fieldState }) => (
                     <Editor
+                        ref={editorRef}
                         id={field.name}
                         readOnly={disabled}
                         {...field}
                         headerTemplate={header}
+                        modules={{
+                            clipboard: {
+                                matchers: [
+                                    [ Node.ELEMENT_NODE, function(node, delta) {
+                                        console.log('here')
+                                        const ops = delta.ops.map((op) => ({insert: op.insert}));
+                                        return new Delta(ops)
+                                    }]
+                                ]
+                            }
+                        }}
                         placeholder={placeholder}
                         onTextChange={(e) => field.onChange(e.htmlValue)}
                         style={{ height: 80 * rows }}