diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/bar-menu.less b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/bar-menu.less
index 1dcb7bcef7c..779e072c701 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/bar-menu.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BarMenu/bar-menu.less
@@ -21,6 +21,7 @@
   border-top-right-radius: 4px;
   background-color: @menu-bg-color;
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   padding: 8px;
   border-bottom: 1px solid @format-group-separator-color;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts
index a807211858c..57bcaee06f2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts
@@ -197,42 +197,63 @@ export const BlockAndDragHandle = (options: BlockAndDragHandleOptions) => {
 
   return new Plugin({
     view: (view) => {
-      // drag handle initialization
-      dragHandleElement = document.createElement('div');
-      dragHandleElement.draggable = true;
-      dragHandleElement.dataset.dragHandle = '';
-      dragHandleElement.title = 'Drag to move\nClick to open menu';
-      dragHandleElement.classList.add('om-drag-handle');
-      dragHandleElement.addEventListener('dragstart', (e) => {
-        handleDragStart(e, view);
-      });
-      dragHandleElement.addEventListener('click', (e) => {
-        handleDragClick(e, view);
-      });
+      try {
+        const isBarMenu =
+          view.dom?.parentElement?.parentElement?.classList.contains(
+            'block-editor-wrapper--bar-menu'
+          );
 
-      hideDragHandle();
+        if (isBarMenu) {
+          return {
+            destroy: () => {
+              // do nothing
+            },
+          };
+        }
 
-      // block handle initialization
-      blockHandleElement = document.createElement('div');
-      blockHandleElement.draggable = false;
-      blockHandleElement.dataset.blockHandle = '';
-      blockHandleElement.title = 'Add new node';
-      blockHandleElement.classList.add('om-block-handle');
+        // drag handle initialization
+        dragHandleElement = document.createElement('div');
+        dragHandleElement.draggable = true;
+        dragHandleElement.dataset.dragHandle = '';
+        dragHandleElement.title = 'Drag to move\nClick to open menu';
+        dragHandleElement.classList.add('om-drag-handle');
+        dragHandleElement.addEventListener('dragstart', (e) => {
+          handleDragStart(e, view);
+        });
+        dragHandleElement.addEventListener('click', (e) => {
+          handleDragClick(e, view);
+        });
 
-      hideBlockHandle();
+        hideDragHandle();
 
-      view?.dom?.parentElement?.appendChild(dragHandleElement);
-      view?.dom?.parentElement?.appendChild(blockHandleElement);
+        // block handle initialization
+        blockHandleElement = document.createElement('div');
+        blockHandleElement.draggable = false;
+        blockHandleElement.dataset.blockHandle = '';
+        blockHandleElement.title = 'Add new node';
+        blockHandleElement.classList.add('om-block-handle');
 
-      return {
-        destroy: () => {
-          dragHandleElement?.remove?.();
-          dragHandleElement = null;
+        hideBlockHandle();
 
-          blockHandleElement?.remove?.();
-          blockHandleElement = null;
-        },
-      };
+        view?.dom?.parentElement?.appendChild(dragHandleElement);
+        view?.dom?.parentElement?.appendChild(blockHandleElement);
+
+        return {
+          destroy: () => {
+            dragHandleElement?.remove?.();
+            dragHandleElement = null;
+
+            blockHandleElement?.remove?.();
+            blockHandleElement = null;
+          },
+        };
+      } catch (error) {
+        return {
+          destroy: () => {
+            // do nothing
+          },
+        };
+      }
     },
     props: {
       handleDOMEvents: {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
index 6dfb77acf42..d9c0dc8b125 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
@@ -207,11 +207,17 @@
   &.block-editor-wrapper--bar-menu {
     border: 1px solid #dadde6;
     border-radius: 4px;
+
+    // do not show drag handle and block handle in bar menu mode
+    .om-drag-handle,
+    .om-block-handle {
+      display: none;
+    }
     .om-block-editor {
       max-height: 300px;
       overflow: auto;
-      padding-left: 50px;
-      padding-right: 50px;
+      padding-left: 24px;
+      padding-right: 24px;
       padding-top: 8px;
       &:focus-visible {
         outline: none;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/EditTestCaseModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/EditTestCaseModal.tsx
index d81dd6a4077..9999c1e63f8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/EditTestCaseModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/EditTestCaseModal.tsx
@@ -48,7 +48,6 @@ import { generateFormFields } from '../../../utils/formUtils';
 import { isValidJSONString } from '../../../utils/StringsUtils';
 import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 import Loader from '../../common/Loader/Loader';
-import RichTextEditor from '../../common/RichTextEditor/RichTextEditor';
 import { EditTestCaseModalProps } from './AddDataQualityTest.interface';
 import ParameterForm from './components/ParameterForm';
 
@@ -214,6 +213,24 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: testCase?.description ?? '',
+        style: {
+          margin: 0,
+        },
+      },
+    }),
+    [testCase?.description]
+  );
+
   useEffect(() => {
     if (testCase) {
       fetchTestDefinitionById();
@@ -317,18 +334,7 @@ const EditTestCaseModal: React.FC<EditTestCaseModalProps> = ({
 
           {!showOnlyParameter && (
             <>
-              <Form.Item
-                label={t('label.description')}
-                name="description"
-                trigger="onTextChange"
-                valuePropName="initialValue">
-                <RichTextEditor
-                  initialValue={testCase?.description ?? ''}
-                  style={{
-                    margin: 0,
-                  }}
-                />
-              </Form.Item>
+              {generateFormFields([descriptionField])}
               {isComputeRowCountFieldVisible
                 ? generateFormFields(formFields)
                 : null}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx
index 7de1ef7e6bd..c4f3add108e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseForm.tsx
@@ -63,7 +63,6 @@ import { getEntityName } from '../../../../utils/EntityUtils';
 import { generateFormFields } from '../../../../utils/formUtils';
 import { generateEntityLink } from '../../../../utils/TableUtils';
 import { showErrorToast } from '../../../../utils/ToastUtils';
-import RichTextEditor from '../../../common/RichTextEditor/RichTextEditor';
 import {
   TestCaseFormProps,
   TestCaseFormType,
@@ -249,6 +248,24 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
     );
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: initialValue?.description ?? '',
+        style: {
+          margin: 0,
+        },
+      },
+    }),
+    [initialValue?.description]
+  );
+
   useEffect(() => {
     const selectedColumn = table.columns.find(
       (column) => column.name === columnName
@@ -418,17 +435,8 @@ const TestCaseForm: React.FC<TestCaseFormProps> = ({
           getFieldValue('useDynamicAssertion') ? null : generateParamsField
         }
       </Form.Item>
-      <Form.Item
-        label={t('label.description')}
-        name="description"
-        trigger="onTextChange">
-        <RichTextEditor
-          initialValue={initialValue?.description || ''}
-          style={{
-            margin: 0,
-          }}
-        />
-      </Form.Item>
+
+      {generateFormFields([descriptionField])}
 
       {isComputeRowCountFieldVisible ? generateFormFields(formFields) : null}
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
index 1f41d22aa0b..6680398a831 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCaseStatusModal/TestCaseStatusModal.component.tsx
@@ -15,7 +15,6 @@ import { AxiosError } from 'axios';
 import { startCase, unionBy } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import RichTextEditor from '../../../components/common/RichTextEditor/RichTextEditor';
 import { EntityType } from '../../../enums/entity.enum';
 import { CreateTestCaseResolutionStatus } from '../../../generated/api/tests/createTestCaseResolutionStatus';
 import { TestCaseFailureReasonType } from '../../../generated/tests/resolved';
@@ -29,6 +28,8 @@ import { showErrorToast } from '../../../utils/ToastUtils';
 
 import { VALIDATION_MESSAGES } from '../../../constants/constants';
 import { useApplicationStore } from '../../../hooks/useApplicationStore';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
+import { generateFormFields } from '../../../utils/formUtils';
 import { TestCaseStatusModalProps } from './TestCaseStatusModal.interface';
 
 export const TestCaseStatusModal = ({
@@ -125,6 +126,36 @@ export const TestCaseStatusModal = ({
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: ['testCaseResolutionStatusDetails', 'testCaseFailureComment'],
+      required: true,
+      label: t('label.comment'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      rules: [
+        {
+          required: true,
+        },
+      ],
+      props: {
+        'data-testid': 'description',
+        initialValue:
+          data?.testCaseResolutionStatusDetails?.testCaseFailureComment ?? '',
+        placeHolder: t('message.write-your-text', {
+          text: t('label.comment'),
+        }),
+
+        onTextChange: (value: string) =>
+          form.setFieldValue(
+            ['testCaseResolutionStatusDetails', 'testCaseFailureComment'],
+            value
+          ),
+      },
+    }),
+    [data?.testCaseResolutionStatusDetails?.testCaseFailureComment]
+  );
+
   useEffect(() => {
     const assignee = data?.testCaseResolutionStatusDetails?.assignee;
     if (
@@ -202,36 +233,7 @@ export const TestCaseStatusModal = ({
                 ))}
               </Select>
             </Form.Item>
-            <Form.Item
-              label={t('label.comment')}
-              name={[
-                'testCaseResolutionStatusDetails',
-                'testCaseFailureComment',
-              ]}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}>
-              <RichTextEditor
-                initialValue={
-                  data?.testCaseResolutionStatusDetails
-                    ?.testCaseFailureComment ?? ''
-                }
-                placeHolder={t('message.write-your-text', {
-                  text: t('label.comment'),
-                })}
-                onTextChange={(value) =>
-                  form.setFieldValue(
-                    [
-                      'testCaseResolutionStatusDetails',
-                      'testCaseFailureComment',
-                    ],
-                    value
-                  )
-                }
-              />
-            </Form.Item>
+            {generateFormFields([descriptionField])}
           </>
         )}
         {statusType === TestCaseResolutionStatusTypes.Assigned && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/AddTestSuiteForm/AddTestSuiteForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/AddTestSuiteForm/AddTestSuiteForm.tsx
index 2b587d39bd5..2800555ceb9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/AddTestSuiteForm/AddTestSuiteForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/AddTestSuiteForm/AddTestSuiteForm.tsx
@@ -12,7 +12,7 @@
  */
 
 import { Button, Form, Input, Space } from 'antd';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import {
@@ -22,11 +22,15 @@ import {
 import { NAME_FIELD_RULES } from '../../../../constants/Form.constants';
 import { TabSpecificField } from '../../../../enums/entity.enum';
 import { TestSuite } from '../../../../generated/tests/testSuite';
+import {
+  FieldProp,
+  FieldTypes,
+} from '../../../../interface/FormUtils.interface';
 import { DataQualityPageTabs } from '../../../../pages/DataQuality/DataQualityPage.interface';
 import { getListTestSuites } from '../../../../rest/testAPI';
+import { getField } from '../../../../utils/formUtils';
 import { getDataQualityPagePath } from '../../../../utils/RouterUtils';
 import Loader from '../../../common/Loader/Loader';
-import RichTextEditor from '../../../common/RichTextEditor/RichTextEditor';
 import { AddTestSuiteFormProps } from '../TestSuiteStepper/TestSuiteStepper.interface';
 
 const AddTestSuiteForm: React.FC<AddTestSuiteFormProps> = ({
@@ -58,6 +62,21 @@ const AddTestSuiteForm: React.FC<AddTestSuiteFormProps> = ({
     history.push(getDataQualityPagePath(DataQualityPageTabs.TEST_SUITES));
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'test-suite-description',
+        initialValue: testSuite?.description ?? '',
+      },
+    }),
+    [testSuite?.description]
+  );
+
   useEffect(() => {
     fetchTestSuites();
   }, []);
@@ -101,14 +120,7 @@ const AddTestSuiteForm: React.FC<AddTestSuiteFormProps> = ({
           })}
         />
       </Form.Item>
-      <Form.Item label={t('label.description')} name="description">
-        <RichTextEditor
-          data-testid="test-suite-description"
-          initialValue={testSuite?.description ?? ''}
-          onTextChange={(value) => form.setFieldsValue({ description: value })}
-        />
-      </Form.Item>
-
+      {getField(descriptionField)}
       <Form.Item noStyle>
         <Space className="w-full justify-end" size={16}>
           <Button data-testid="cancel-button" onClick={handleCancelClick}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
index 38bc0993ce2..934efefe4d9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
@@ -71,6 +71,10 @@ import {
 import { TagLabel } from '../../../../generated/type/tagLabel';
 import { useAuth } from '../../../../hooks/authHooks';
 import { useApplicationStore } from '../../../../hooks/useApplicationStore';
+import {
+  FieldProp,
+  FieldTypes,
+} from '../../../../interface/FormUtils.interface';
 import Assignees from '../../../../pages/TasksPage/shared/Assignees';
 import DescriptionTask from '../../../../pages/TasksPage/shared/DescriptionTask';
 import TagsTask from '../../../../pages/TasksPage/shared/TagsTask';
@@ -84,6 +88,7 @@ import { postTestCaseIncidentStatus } from '../../../../rest/incidentManagerAPI'
 import { getNameFromFQN } from '../../../../utils/CommonUtils';
 import EntityLink from '../../../../utils/EntityLink';
 import { getEntityFQN } from '../../../../utils/FeedUtils';
+import { getField } from '../../../../utils/formUtils';
 import { checkPermission } from '../../../../utils/PermissionsUtils';
 import { getErrorText } from '../../../../utils/StringsUtils';
 import {
@@ -106,7 +111,6 @@ import { useActivityFeedProvider } from '../../../ActivityFeed/ActivityFeedProvi
 import InlineEdit from '../../../common/InlineEdit/InlineEdit.component';
 import { OwnerLabel } from '../../../common/OwnerLabel/OwnerLabel.component';
 import EntityPopOverCard from '../../../common/PopOverCard/EntityPopOverCard';
-import RichTextEditor from '../../../common/RichTextEditor/RichTextEditor';
 import TaskTabIncidentManagerHeader from '../TaskTabIncidentManagerHeader/TaskTabIncidentManagerHeader.component';
 import './task-tab.less';
 import { TaskTabProps } from './TaskTab.interface';
@@ -897,6 +901,32 @@ export const TaskTab = ({
     </div>
   );
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'testCaseFailureComment',
+      required: true,
+      label: t('label.comment'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      rules: [
+        {
+          required: true,
+          message: t('label.field-required', {
+            field: t('label.comment'),
+          }),
+        },
+      ],
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        placeHolder: t('message.write-your-text', {
+          text: t('label.comment'),
+        }),
+      },
+    }),
+    []
+  );
+
   return (
     <Row className="p-y-sm p-x-md" data-testid="task-tab" gutter={[0, 24]}>
       <Col
@@ -1000,25 +1030,7 @@ export const TaskTab = ({
                 ))}
               </Select>
             </Form.Item>
-            <Form.Item
-              label={t('label.comment')}
-              name="testCaseFailureComment"
-              rules={[
-                {
-                  required: true,
-                  message: t('label.field-required', {
-                    field: t('label.comment'),
-                  }),
-                },
-              ]}
-              trigger="onTextChange">
-              <RichTextEditor
-                initialValue=""
-                placeHolder={t('message.write-your-text', {
-                  text: t('label.comment'),
-                })}
-              />
-            </Form.Item>
+            {getField(descriptionField)}
           </Form>
         </Modal>
       ) : (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
index a98a3057761..f2ac332d690 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/AddAnnouncementModal.tsx
@@ -14,7 +14,7 @@
 import { DatePicker, Form, Input, Modal, Space } from 'antd';
 import { AxiosError } from 'axios';
 import { Moment } from 'moment';
-import React, { FC, useState } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VALIDATION_MESSAGES } from '../../../constants/constants';
 import {
@@ -27,7 +27,8 @@ import { getEntityFeedLink } from '../../../utils/EntityUtils';
 import { showErrorToast, showSuccessToast } from '../../../utils/ToastUtils';
 
 import { useApplicationStore } from '../../../hooks/useApplicationStore';
-import RichTextEditor from '../../common/RichTextEditor/RichTextEditor';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
+import { getField } from '../../../utils/formUtils';
 import './announcement-modal.less';
 
 interface Props {
@@ -96,6 +97,22 @@ const AddAnnouncementModal: FC<Props> = ({
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        placeHolder: t('message.write-your-announcement-lowercase'),
+      },
+    }),
+    []
+  );
+
   return (
     <Modal
       centered
@@ -162,15 +179,7 @@ const AddAnnouncementModal: FC<Props> = ({
             <DatePicker className="w-full" />
           </Form.Item>
         </Space>
-        <Form.Item
-          label={`${t('label.description')}:`}
-          name="description"
-          trigger="onTextChange"
-          valuePropName="initialValue">
-          <RichTextEditor
-            placeHolder={t('message.write-your-announcement-lowercase')}
-          />
-        </Form.Item>
+        {getField(descriptionField)}
       </Form>
     </Modal>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
index 12bb0907635..b47a818c5a1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/AnnouncementModal/EditAnnouncementModal.tsx
@@ -13,13 +13,14 @@
 
 import { DatePicker, Form, Input, Modal, Space } from 'antd';
 import moment from 'moment';
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VALIDATION_MESSAGES } from '../../../constants/constants';
 import { AnnouncementDetails } from '../../../generated/entity/feed/thread';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
 import { getTimeZone } from '../../../utils/date-time/DateTimeUtils';
+import { getField } from '../../../utils/formUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
-import RichTextEditor from '../../common/RichTextEditor/RichTextEditor';
 import { CreateAnnouncement } from './AddAnnouncementModal';
 import './announcement-modal.less';
 
@@ -63,6 +64,22 @@ const EditAnnouncementModal: FC<Props> = ({
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: announcement.description,
+        placeHolder: t('message.write-your-announcement-lowercase'),
+      },
+    }),
+    [announcement.description]
+  );
+
   return (
     <Modal
       centered
@@ -133,15 +150,7 @@ const EditAnnouncementModal: FC<Props> = ({
             <DatePicker className="w-full" />
           </Form.Item>
         </Space>
-        <Form.Item
-          label={`${t('label.description')}:`}
-          name="description"
-          trigger="onTextChange"
-          valuePropName="initialValue">
-          <RichTextEditor
-            placeHolder={t('message.write-your-announcement-lowercase')}
-          />
-        </Form.Item>
+        {getField(descriptionField)}
       </Form>
     </Modal>
   );
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/CreateUser/CreateUser.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/CreateUser/CreateUser.component.tsx
index e8fca9ec456..0d21bd81129 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/CreateUser/CreateUser.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/CreateUser/CreateUser.component.tsx
@@ -60,7 +60,6 @@ import CopyToClipboardButton from '../../../common/CopyToClipboardButton/CopyToC
 import { DomainLabel } from '../../../common/DomainLabel/DomainLabel.component';
 import InlineAlert from '../../../common/InlineAlert/InlineAlert';
 import Loader from '../../../common/Loader/Loader';
-import RichTextEditor from '../../../common/RichTextEditor/RichTextEditor';
 import TeamsSelectable from '../../Team/TeamsSelectable/TeamsSelectable';
 import { CreateUserProps } from './CreateUser.interface';
 
@@ -195,6 +194,21 @@ const CreateUser = ({
     onSave(userProfile);
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+      },
+    }),
+    []
+  );
+
   useEffect(() => {
     generateRandomPassword();
   }, []);
@@ -272,13 +286,8 @@ const CreateUser = ({
           </Select>
         </Form.Item>
       )}
-      <Form.Item
-        label={t('label.description')}
-        name="description"
-        trigger="onTextChange"
-        valuePropName="initialValue">
-        <RichTextEditor />
-      </Form.Item>
+
+      {getField(descriptionField)}
 
       {!forceBot && (
         <>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/rich-text-editor-previewerV1.less b/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/rich-text-editor-previewerV1.less
index d15bb69436e..32831c1628a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/rich-text-editor-previewerV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/RichTextEditor/rich-text-editor-previewerV1.less
@@ -37,4 +37,15 @@
       }
     }
   }
+
+  .markdown-parser.white {
+    .block-editor-wrapper .tiptap.ProseMirror.om-block-editor {
+      p {
+        color: @white;
+      }
+      ul li::before {
+        background-color: @white;
+      }
+    }
+  }
 }
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddNotificationPage/AddNotificationPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddNotificationPage/AddNotificationPage.tsx
index 9b2107723e0..161edece649 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddNotificationPage/AddNotificationPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddNotificationPage/AddNotificationPage.tsx
@@ -269,11 +269,10 @@ const AddNotificationPage = () => {
                           label={t('label.description')}
                           labelCol={{ span: 24 }}
                           name="description"
-                          trigger="onTextChange"
-                          valuePropName="initialValue">
+                          trigger="onTextChange">
                           <RichTextEditor
                             data-testid="description"
-                            initialValue=""
+                            initialValue={alert?.description}
                           />
                         </Form.Item>
                       </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/AddObservabilityPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/AddObservabilityPage.tsx
index a65e9f98d46..3c680ad0db5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/AddObservabilityPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddObservabilityPage/AddObservabilityPage.tsx
@@ -243,11 +243,10 @@ function AddObservabilityPage() {
                         label={t('label.description')}
                         labelCol={{ span: 24 }}
                         name="description"
-                        trigger="onTextChange"
-                        valuePropName="initialValue">
+                        trigger="onTextChange">
                         <RichTextEditor
                           data-testid="description"
-                          initialValue=""
+                          initialValue={alert?.description}
                         />
                       </Form.Item>
                     </Col>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
index 8464a2b7327..23c5f1a2c3e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AddQueryPage/AddQueryPage.component.tsx
@@ -14,12 +14,11 @@ import { Button, Form, FormProps, Space, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
 import { AxiosError } from 'axios';
 import { filter, isEmpty } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { AsyncSelect } from '../../components/common/AsyncSelect/AsyncSelect';
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
-import RichTextEditor from '../../components/common/RichTextEditor/RichTextEditor';
 import TitleBreadcrumb from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { TitleBreadcrumbProps } from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.interface';
 import SchemaEditor from '../../components/Database/SchemaEditor/SchemaEditor';
@@ -39,6 +38,7 @@ import { CreateQuery } from '../../generated/api/data/createQuery';
 import { Table } from '../../generated/entity/data/table';
 import { useApplicationStore } from '../../hooks/useApplicationStore';
 import { useFqn } from '../../hooks/useFqn';
+import { FieldProp, FieldTypes } from '../../interface/FormUtils.interface';
 import { searchData } from '../../rest/miscAPI';
 import { postQuery } from '../../rest/queryAPI';
 import { getTableDetailsByFQN } from '../../rest/tableAPI';
@@ -49,6 +49,7 @@ import {
   getEntityLabel,
   getEntityName,
 } from '../../utils/EntityUtils';
+import { getField } from '../../utils/formUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 
 const AddQueryPage = () => {
@@ -196,6 +197,26 @@ const AddQueryPage = () => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+        onTextChange: (value: string) => setDescription(value),
+      },
+    }),
+    []
+  );
+
   return (
     <ResizablePanels
       className="content-height-with-resizable-panel"
@@ -238,16 +259,7 @@ const AddQueryPage = () => {
                     showCopyButton={false}
                   />
                 </Form.Item>
-                <Form.Item
-                  label={`${t('label.description')}:`}
-                  name="description">
-                  <RichTextEditor
-                    initialValue={description}
-                    placeHolder={t('message.write-your-description')}
-                    style={{ margin: 0 }}
-                    onTextChange={(value) => setDescription(value)}
-                  />
-                </Form.Item>
+                {getField(descriptionField)}
                 <Form.Item
                   label={`${t('label.query-used-in')}:`}
                   name="queryUsedIn">
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
index f56b4a14787..04fa75e3e37 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx
@@ -34,7 +34,6 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
-import RichTextEditor from '../../components/common/RichTextEditor/RichTextEditor';
 import TitleBreadcrumb from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { ROUTES, VALIDATION_MESSAGES } from '../../constants/constants';
 import { KPI_DATE_PICKER_FORMAT } from '../../constants/DataInsight.constants';
@@ -44,11 +43,13 @@ import {
   KpiTargetType,
 } from '../../generated/api/dataInsight/kpi/createKpiRequest';
 import { Kpi } from '../../generated/dataInsight/kpi/kpi';
+import { FieldProp, FieldTypes } from '../../interface/FormUtils.interface';
 import { getListKPIs, postKPI } from '../../rest/KpiAPI';
 import {
   getDataInsightPathWithFqn,
   getDisabledDates,
 } from '../../utils/DataInsightUtils';
+import { getField } from '../../utils/formUtils';
 import {
   filterChartOptions,
   getDataInsightChartForKPI,
@@ -158,6 +159,33 @@ const AddKPIPage = () => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: true,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      rules: [
+        {
+          required: true,
+          message: t('label.field-required', {
+            field: t('label.description-kpi'),
+          }),
+        },
+      ],
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+      },
+    }),
+    []
+  );
+
   useEffect(() => {
     fetchKpiList();
   }, []);
@@ -346,24 +374,7 @@ const AddKPIPage = () => {
                 </Col>
               </Row>
 
-              <Form.Item
-                label={t('label.description')}
-                name="description"
-                rules={[
-                  {
-                    required: true,
-                    message: t('label.field-required', {
-                      field: t('label.description-kpi'),
-                    }),
-                  },
-                ]}
-                trigger="onTextChange"
-                valuePropName="initialValue">
-                <RichTextEditor
-                  placeHolder={t('message.write-your-description')}
-                  style={{ margin: 0 }}
-                />
-              </Form.Item>
+              {getField(descriptionField)}
 
               <Space align="center" className="w-full justify-end">
                 <Button
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
index facff972c24..f2c7ac7688a 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.tsx
@@ -36,7 +36,6 @@ import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 import Loader from '../../components/common/Loader/Loader';
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
-import RichTextEditor from '../../components/common/RichTextEditor/RichTextEditor';
 import TitleBreadcrumb from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { ROUTES, VALIDATION_MESSAGES } from '../../constants/constants';
 import { KPI_DATE_PICKER_FORMAT } from '../../constants/DataInsight.constants';
@@ -45,11 +44,13 @@ import { DataInsightChart } from '../../generated/api/dataInsight/kpi/createKpiR
 import { Kpi, KpiTargetType } from '../../generated/dataInsight/kpi/kpi';
 import { useAuth } from '../../hooks/authHooks';
 import { useFqn } from '../../hooks/useFqn';
+import { FieldProp, FieldTypes } from '../../interface/FormUtils.interface';
 import { getKPIByName, patchKPI } from '../../rest/KpiAPI';
 import {
   getDataInsightPathWithFqn,
   getDisabledDates,
 } from '../../utils/DataInsightUtils';
+import { getField } from '../../utils/formUtils';
 import {
   getKPIChartType,
   KPIChartOptions,
@@ -192,6 +193,25 @@ const EditKPIPage = () => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: kpiData?.description,
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+      },
+    }),
+    [kpiData?.description]
+  );
+
   useEffect(() => {
     fetchKPI();
   }, [kpiName]);
@@ -385,16 +405,7 @@ const EditKPIPage = () => {
                 </Col>
               </Row>
 
-              <Form.Item
-                label={t('label.description')}
-                name="description"
-                trigger="onTextChange"
-                valuePropName="initialValue">
-                <RichTextEditor
-                  placeHolder={t('message.write-your-description')}
-                  style={{ margin: 0 }}
-                />
-              </Form.Item>
+              {getField(descriptionField)}
 
               <Space align="center" className="w-full justify-end">
                 <Button
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/AddPolicyPage/AddPolicyPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/AddPolicyPage/AddPolicyPage.tsx
index e13d0f2281f..60562e13081 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/AddPolicyPage/AddPolicyPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/AddPolicyPage/AddPolicyPage.tsx
@@ -15,10 +15,9 @@ import { Button, Divider, Form, Input, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { t } from 'i18next';
 import { trim } from 'lodash';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import ResizablePanels from '../../../components/common/ResizablePanels/ResizablePanels';
-import RichTextEditor from '../../../components/common/RichTextEditor/RichTextEditor';
 import TitleBreadcrumb from '../../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { ERROR_MESSAGE } from '../../../constants/constants';
 import { NAME_FIELD_RULES } from '../../../constants/Form.constants';
@@ -28,8 +27,10 @@ import {
   Effect,
   Rule,
 } from '../../../generated/api/policies/createPolicy';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
 import { addPolicy } from '../../../rest/rolesAPIV1';
 import { getIsErrorMatch } from '../../../utils/CommonUtils';
+import { getField } from '../../../utils/formUtils';
 import {
   getPath,
   getPolicyWithFqnPath,
@@ -106,6 +107,26 @@ const AddPolicyPage = () => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+        onTextChange: (value: string) => setDescription(value),
+      },
+    }),
+    []
+  );
+
   return (
     <ResizablePanels
       className="content-height-with-resizable-panel"
@@ -143,16 +164,7 @@ const AddPolicyPage = () => {
                   />
                 </Form.Item>
 
-                <Form.Item
-                  label={`${t('label.description')}:`}
-                  name="description">
-                  <RichTextEditor
-                    initialValue={description}
-                    placeHolder={t('message.write-your-description')}
-                    style={{ margin: 0 }}
-                    onTextChange={(value) => setDescription(value)}
-                  />
-                </Form.Item>
+                {getField(descriptionField)}
 
                 <Divider data-testid="add-rule-divider">
                   {t('label.add-entity', {
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
index 59a139aaf59..61084fbf149 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/EditRulePage.tsx
@@ -56,6 +56,8 @@ const EditRulePage = () => {
   const [policy, setPolicy] = useState<Policy>({} as Policy);
   const [ruleData, setRuleData] = useState<Rule>(InitialData);
 
+  const selectedRuleRef = React.useRef<Rule | undefined>(InitialData);
+
   const breadcrumb = useMemo(
     () => [
       {
@@ -89,6 +91,7 @@ const EditRulePage = () => {
       if (data) {
         setPolicy(data);
         const selectedRule = data.rules.find((rule) => rule.name === ruleName);
+        selectedRuleRef.current = selectedRule;
         setRuleData(selectedRule ?? InitialData);
       } else {
         setPolicy({} as Policy);
@@ -183,7 +186,11 @@ const EditRulePage = () => {
               }}
               layout="vertical"
               onFinish={handleSubmit}>
-              <RuleForm ruleData={ruleData} setRuleData={setRuleData} />
+              <RuleForm
+                description={selectedRuleRef.current?.description}
+                ruleData={ruleData}
+                setRuleData={setRuleData}
+              />
               <Space align="center" className="w-full justify-end">
                 <Button
                   data-testid="cancel-btn"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
index f692b7517c5..71139594361 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx
@@ -18,7 +18,6 @@ import { AxiosError } from 'axios';
 import { capitalize, startCase, uniq, uniqBy } from 'lodash';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import RichTextEditor from '../../../components/common/RichTextEditor/RichTextEditor';
 import { NAME_FIELD_RULES } from '../../../constants/Form.constants';
 import {
   Effect,
@@ -27,11 +26,13 @@ import {
 } from '../../../generated/api/policies/createPolicy';
 import { ResourceDescriptor } from '../../../generated/entity/policies/accessControl/resourceDescriptor';
 import { Function } from '../../../generated/type/function';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
 import {
   getPolicyFunctions,
   getPolicyResources,
   validateRuleCondition,
 } from '../../../rest/rolesAPIV1';
+import { getField } from '../../../utils/formUtils';
 import { ALL_TYPE_RESOURCE_LIST } from '../../../utils/PermissionsUtils';
 import { getErrorText } from '../../../utils/StringsUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
@@ -41,9 +42,14 @@ const { Option } = Select;
 export interface RuleFormProps {
   ruleData: Rule;
   setRuleData: (value: React.SetStateAction<Rule>) => void;
+  description?: string;
 }
 
-const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
+const RuleForm: FC<RuleFormProps> = ({
+  ruleData,
+  setRuleData,
+  description,
+}) => {
   const { t } = useTranslation();
   const [policyResources, setPolicyResources] = useState<ResourceDescriptor[]>(
     []
@@ -189,6 +195,27 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'ruleDescription',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: description,
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+        onTextChange: (value: string) =>
+          setRuleData((prev: Rule) => ({ ...prev, description: value })),
+      },
+    }),
+    [description, setRuleData]
+  );
+
   useEffect(() => {
     fetchPolicyResources();
     fetchPolicyFunctions();
@@ -214,16 +241,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
           }
         />
       </Form.Item>
-      <Form.Item label={t('label.description')} name="ruleDescription">
-        <RichTextEditor
-          initialValue={ruleData.description || ''}
-          placeHolder={t('message.write-your-description')}
-          style={{ margin: 0 }}
-          onTextChange={(value: string) =>
-            setRuleData((prev: Rule) => ({ ...prev, description: value }))
-          }
-        />
-      </Form.Item>
+      {getField(descriptionField)}
       <Form.Item
         label={`${t('label.resource-plural')}:`}
         name="resources"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
index 24c40e60bc5..e0c54a45906 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/AddRolePage/AddRolePage.tsx
@@ -15,18 +15,19 @@ import { Button, Form, Input, Select, Space, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import { t } from 'i18next';
 import { trim } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import ResizablePanels from '../../../components/common/ResizablePanels/ResizablePanels';
-import RichTextEditor from '../../../components/common/RichTextEditor/RichTextEditor';
 import TitleBreadcrumb from '../../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import { ERROR_MESSAGE } from '../../../constants/constants';
 import { NAME_FIELD_RULES } from '../../../constants/Form.constants';
 import { GlobalSettingOptions } from '../../../constants/GlobalSettings.constants';
 import { TabSpecificField } from '../../../enums/entity.enum';
 import { Policy } from '../../../generated/entity/policies/policy';
+import { FieldProp, FieldTypes } from '../../../interface/FormUtils.interface';
 import { addRole, getPolicies } from '../../../rest/rolesAPIV1';
 import { getIsErrorMatch } from '../../../utils/CommonUtils';
+import { getField } from '../../../utils/formUtils';
 import {
   getPath,
   getRoleWithFqnPath,
@@ -107,6 +108,26 @@ const AddRolePage = () => {
     }
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: `${t('label.description')}:`,
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        style: {
+          margin: 0,
+        },
+        placeHolder: t('message.write-your-description'),
+        onTextChange: (value: string) => setDescription(value),
+      },
+    }),
+    []
+  );
+
   useEffect(() => {
     fetchPolicies();
   }, []);
@@ -144,16 +165,8 @@ const AddRolePage = () => {
                     onChange={(e) => setName(e.target.value)}
                   />
                 </Form.Item>
-                <Form.Item
-                  label={`${t('label.description')}:`}
-                  name="description">
-                  <RichTextEditor
-                    initialValue={description}
-                    placeHolder={t('message.write-your-description')}
-                    style={{ margin: 0 }}
-                    onTextChange={(value) => setDescription(value)}
-                  />
-                </Form.Item>
+                {getField(descriptionField)}
+
                 <Form.Item
                   label={`${t('label.select-a-policy')}:`}
                   name="policies"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/AddTeamForm.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/AddTeamForm.tsx
index 497f099eca3..e8128d19731 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/AddTeamForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/TeamsPage/AddTeamForm.tsx
@@ -19,7 +19,6 @@ import { toLower, trim } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DomainLabel } from '../../components/common/DomainLabel/DomainLabel.component';
-import RichTextEditor from '../../components/common/RichTextEditor/RichTextEditor';
 import { VALIDATION_MESSAGES } from '../../constants/constants';
 import { NAME_FIELD_RULES } from '../../constants/Form.constants';
 import { EntityType } from '../../enums/entity.enum';
@@ -123,6 +122,25 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
     helperText: t('message.access-to-collaborate'),
   };
 
+  const descriptionField: FieldProp = useMemo(
+    () => ({
+      name: 'description',
+      required: false,
+      label: t('label.description'),
+      id: 'root/description',
+      type: FieldTypes.DESCRIPTION,
+      props: {
+        'data-testid': 'description',
+        initialValue: '',
+        style: {
+          marginBottom: 0,
+        },
+        onTextChange: (value: string) => setDescription(value),
+      },
+    }),
+    []
+  );
+
   useEffect(() => {
     if (visible) {
       fetchAllTeams();
@@ -218,18 +236,7 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
           />
         </Form.Item>
         {getField(isJoinableField)}
-        <Form.Item
-          label={t('label.description')}
-          name="description"
-          style={{
-            marginBottom: 0,
-          }}>
-          <RichTextEditor
-            data-testid="description"
-            initialValue=""
-            onTextChange={(value) => setDescription(value)}
-          />
-        </Form.Item>
+        {getField(descriptionField)}
         <div className="m-t-xs">
           {getField(domainsField)}
           {selectedDomain && (