From cdf17ebd006d6005147e66723ceba9f3638f5480 Mon Sep 17 00:00:00 2001
From: Glauber Silva <glauber.silva@givewp.com>
Date: Tue, 17 Sep 2024 11:57:32 -0300
Subject: [PATCH] Refactor: replace textarea with rich text editor on Visual
 Form Builder header description (#7494)

---
 .../templates/layouts/HeaderDescription.tsx       |  4 +++-
 .../design/general-controls/header/index.tsx      | 15 +++++++++++----
 .../js/form-builder/src/styles/_components.scss   |  6 ++++++
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/DonationForms/resources/registrars/templates/layouts/HeaderDescription.tsx b/src/DonationForms/resources/registrars/templates/layouts/HeaderDescription.tsx
index 3f6a9cd991..d4927bd5e6 100644
--- a/src/DonationForms/resources/registrars/templates/layouts/HeaderDescription.tsx
+++ b/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} />;
 }
diff --git a/src/FormBuilder/resources/js/form-builder/src/settings/design/general-controls/header/index.tsx b/src/FormBuilder/resources/js/form-builder/src/settings/design/general-controls/header/index.tsx
index d327a0a0dc..5843333d99 100644
--- a/src/FormBuilder/resources/js/form-builder/src/settings/design/general-controls/header/index.tsx
+++ b/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>
                     )}
diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_components.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_components.scss
index b0dacc687f..043ed76b64 100644
--- a/src/FormBuilder/resources/js/form-builder/src/styles/_components.scss
+++ b/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;
+}