- updated call form - added new fields;

src/pages/BandoFormsEdit/components/BuilderElementSettings/components/ElementSetting/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import ElementSettingRepeater from '../ElementSettingRepeater';
 import { InputText } from 'primereact/inputtext';
 import { MultiSelect } from 'primereact/multiselect';
+import { Editor } from 'primereact/editor';
 
 import { mimeTypes } from '../../../../../../configData';
 
@@ -19,6 +20,26 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
         text: __('Testo formattato', 'gepafin')
     }
 
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+                <button className="ql-link" aria-label="Link"></button>
+                <button className="ql-list" value="ordered"></button>
+                <button className="ql-header" value="1"></button>
+                <button className="ql-header" value="2"></button>
+                <button className="ql-blockquote"></button>
+                <button className="ql-list" value="bullet"></button>
+                <button className="ql-indent" value="-1"></button>
+                <button className="ql-indent" value="+1"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
     return <div className="formElementSettings__field" key={setting.name}>
         <label htmlFor={setting.name}>{settingLabels[setting.name]}</label>
         {setting.name === 'options'
@@ -31,9 +52,16 @@ const ElementSetting = ({ setting, changeFn, updateDataFn }) => {
                     optionLabel="name"
                     display="chip"
                     placeholder={__('Scegli', 'gepafin')} />
-                : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
-                         value={setting.value}
-                         onChange={(e) => changeFn(e.target.value, setting.name)}/>}
+                : setting.name === 'text'
+                    ? <Editor
+                        value={setting.value}
+                        headerTemplate={header}
+                        onTextChange={(e) => changeFn(e.htmlValue, setting.name)}
+                        style={{ height: 80 * 4 }}
+                    />
+                    : <InputText id={setting.name} aria-describedby={`${setting.name}-help`}
+                                 value={setting.value}
+                                 onChange={(e) => changeFn(e.target.value, setting.name)}/>}
     </div>
 }