Refactor: replace textarea with rich text editor on Visual Form Build…

…er header description (#7494)

src/DonationForms/resources/registrars/templates/layouts/HeaderDescription.tsx

@@ -1,8 +1,10 @@
 import type {HeaderDescriptionProps} from '@givewp/forms/propTypes';
+import {Interweave} from 'interweave';
 
 /**
+ * @unreleased Replace <p></p> tag with Interweave to be able to render the content generated through the ClassicEditor component
  * @since 3.0.0
  */
 export default function HeaderDescription({text}: HeaderDescriptionProps) {
-    return <p>{text}</p>;
+    return <Interweave content={text} />;
 }

src/FormBuilder/resources/js/form-builder/src/settings/design/general-controls/header/index.tsx

@@ -1,9 +1,13 @@
 import {__} from '@wordpress/i18n';
-import {PanelBody, PanelRow, SelectControl, TextareaControl, TextControl, ToggleControl} from '@wordpress/components';
+import {PanelBody, PanelRow, SelectControl, TextControl, ToggleControl} from '@wordpress/components';
 import {setFormSettings, useFormState} from '@givewp/form-builder/stores/form-state';
 import MediaLibrary from '@givewp/form-builder/components/settings/MediaLibrary';
 import {upload} from '@wordpress/icons';
+import {ClassicEditor} from '@givewp/form-builder-library';
 
+/**
+ * @unreleased Replace TextareaControl component with ClassicEditor component on the description option
+ */
 export default function Header({dispatch, publishSettings}) {
     const {
         settings: {
@@ -99,10 +103,12 @@ export default function Header({dispatch, publishSettings}) {
                     )}
                     {showDescription && (
                         <PanelRow>
-                            <TextareaControl
+                            <ClassicEditor
+                                key={'givewp-header-description'}
+                                id={'givewp-header-description'}
                                 label={__('Description', 'give')}
-                                value={description}
-                                onChange={(description) => {
+                                content={description}
+                                setContent={(description) => {
                                     dispatch(
                                         setFormSettings({
                                             description,
@@ -112,6 +118,7 @@ export default function Header({dispatch, publishSettings}) {
                                         description,
                                     });
                                 }}
+                                rows={10}
                             />
                         </PanelRow>
                     )}

src/FormBuilder/resources/js/form-builder/src/styles/_components.scss

@@ -473,3 +473,9 @@ This creates a consistent separator between the tabs and the rest of the sidebar
         }
     }
 }
+
+/* Ensure that the link editor modal from the ClassicEditor component will be visible. */
+#wp-link-backdrop,
+#wp-link-wrap {
+    z-index: 9999999999 !important;
+}