From 5670aaadb33f97f609cf796b95d509025d80bba0 Mon Sep 17 00:00:00 2001
From: whoslen <whoslen@whoslens-Mac-mini.local>
Date: Thu, 5 Oct 2023 14:47:03 +0800
Subject: [PATCH 1/3] perf initiate multiple email widgets dev

---
 .gitignore                                    |   1 +
 .../src/inbox/components/EmailWidget.tsx      | 266 ++++++++++--------
 packages/ui-inbox/src/inbox/styles.ts         |   2 +-
 .../integrations/components/mail/styles.ts    |  67 +++--
 .../.erxes/webpack.config.js                  |   6 +-
 5 files changed, 191 insertions(+), 151 deletions(-)

diff --git a/.gitignore b/.gitignore
index ed8ddfdb07..d482570c22 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ out
 *.swo
 *.log
 build
+/dock
 .env.local
 .env.development.local
 .env.development
diff --git a/packages/ui-inbox/src/inbox/components/EmailWidget.tsx b/packages/ui-inbox/src/inbox/components/EmailWidget.tsx
index c9563fa32c..fe8f111cdd 100644
--- a/packages/ui-inbox/src/inbox/components/EmailWidget.tsx
+++ b/packages/ui-inbox/src/inbox/components/EmailWidget.tsx
@@ -1,4 +1,5 @@
 import {
+  EmailWidgetsWrapper,
   Link,
   NewEmailHeader,
   WidgetButton
@@ -9,7 +10,7 @@ import CommonPortal from '@erxes/ui/src/components/CommonPortal';
 import Icon from '@erxes/ui/src/components/Icon';
 import MailForm from '@erxes/ui-inbox/src/settings/integrations/containers/mail/MailForm';
 import { ModalWrapper } from '../styles';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import Tip from '@erxes/ui/src/components/Tip';
 import { WidgetWrapper } from '@erxes/ui-inbox/src/settings/integrations/components/mail/styles';
 import { __ } from '@erxes/ui/src/utils';
@@ -26,57 +27,60 @@ type Props = {
 };
 
 type State = {
-  shrink: string;
-  clear: boolean;
-  isFullscreen: boolean;
-  isEmptyEmail: boolean;
+  // shrink: string;
+  // clear: boolean;
+  // isFullscreen: boolean;
+  // isEmptyEmail: boolean;
+  widgets: any[];
 };
 
-class Widget extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
+function Widget(props) {
+  const [widgets, setWidgets] = useState<any>([]);
 
-    this.state = {
-      shrink: localStorage.getItem('emailWidgetShrink') || 'false',
-      clear: false,
-      isFullscreen: false,
-      isEmptyEmail: false
-    };
-  }
-
-  changeState = (state: boolean) => {
-    this.setState({
-      shrink: 'false',
-      clear: false
-    });
+  const changeState = (state: boolean) => {
+    // this.setState({
+    //   shrink: 'false',
+    //   clear: false,
+    // });
     localStorage.setItem(
       'emailWidgetShow',
       JSON.stringify({
-        type: this.props.type || 'widget',
+        type: props.type || 'widget',
         show: state
       })
     );
     localStorage.setItem('emailWidgetShrink', 'false');
   };
 
-  showWidget = (isEmptyEmail?: boolean) => {
-    const { type = 'widget' } = this.props;
-    const storageShow = JSON.parse(localStorage.getItem('emailWidgetShow'));
-    const storageWidgetShow = storageShow ? storageShow.show : false;
+  const showWidget = (isEmptyEmail?: boolean) => {
+    // const { type = 'widget' } = props;
+    // const storageShow = JSON.parse(
+    //   localStorage.getItem('emailWidgetShow') ?? ''
+    // );
+    // const storageWidgetShow = storageShow ? storageShow.show : false;
 
-    if (storageWidgetShow === false) {
-      this.changeState(true);
-    }
-    if (storageWidgetShow === true && storageShow.type === type) {
-      this.changeState(false);
-    }
+    // if (storageWidgetShow === false) {
+    //   changeState(true);
+    // }
+    // if (storageWidgetShow === true && storageShow.type === type) {
+    //   changeState(false);
+    // }
+    setWidgets(prevWidgets => [
+      ...prevWidgets,
+      {
+        isShrink: false,
+        clear: false,
+        isFullscreen: false,
+        isEmptyEmail: true
+      }
+    ]);
 
-    if (isEmptyEmail) {
-      this.setState({ isEmptyEmail: true });
-    }
+    // if (isEmptyEmail) {
+    //   this.setState({ isEmptyEmail: true });
+    // }
   };
 
-  renderTrigger() {
+  function renderTrigger() {
     const {
       disabled,
       type = 'widget',
@@ -85,13 +89,13 @@ class Widget extends React.Component<Props, State> {
       buttonText,
       emailTo,
       emailStatus
-    } = this.props;
+    } = props;
 
     if (type === 'action' || type === 'tab') {
       return (
         <Button
           btnStyle={buttonStyle ? buttonStyle : 'primary'}
-          onClick={() => this.showWidget()}
+          onClick={() => showWidget()}
           disabled={disabled}
           size={buttonSize}
         >
@@ -105,7 +109,7 @@ class Widget extends React.Component<Props, State> {
 
     if (type.includes('link')) {
       return (
-        <Link onClick={() => this.showWidget()}>
+        <Link onClick={() => showWidget()}>
           {emailTo}
           {emailStatus && emailStatus()}
         </Link>
@@ -115,129 +119,149 @@ class Widget extends React.Component<Props, State> {
     return (
       <WidgetButton>
         <Tip text={__('New Email')} placement="bottom">
-          <Icon
-            icon="envelope-alt"
-            size={20}
-            onClick={() => this.showWidget(true)}
-          />
+          <Icon icon="envelope-alt" size={20} onClick={() => showWidget()} />
         </Tip>
       </WidgetButton>
     );
   }
 
-  renderContent() {
-    const { shrink, clear, isFullscreen } = this.state;
+  function renderContent() {
+    const changeShrink = (index: number) => {
+      const updatingWidgets = [...widgets];
+      const widgetToUpdate = updatingWidgets.at(index);
 
-    const changeShrink = () => {
-      if (isFullscreen) {
-        this.setState({ isFullscreen: false });
-      }
-      this.setState({ shrink: shrink === 'true' ? 'false' : 'true' });
-      localStorage.setItem(
-        'emailWidgetShrink',
-        shrink === 'true' ? 'false' : 'true'
-      );
+      widgetToUpdate.isFullscreen = false;
+      widgetToUpdate.isShrink = !widgetToUpdate.isShrink;
+      setWidgets(updatingWidgets);
     };
 
     const hideWidget = () => {
-      this.setState({ shrink: 'false' });
+      // this.setState({ shrink: 'false' });
       localStorage.setItem('emailWidgetShrink', 'false');
       localStorage.setItem(
         'emailWidgetShow',
         JSON.stringify({
-          type: this.props.type || 'widget',
+          type: props.type || 'widget',
           show: false
         })
       );
     };
 
-    const onClose = () => {
-      hideWidget();
-      this.setState({ clear: true, isFullscreen: false });
+    const onClose = (id: number) => {
+      // hideWidget();
+      setWidgets(widgets.filter((_, index: number) => index !== id));
+      // this.setState({ clear: true, isFullscreen: false });
     };
 
-    const handleExpand = () => {
-      this.setState({ isFullscreen: !this.state.isFullscreen });
+    const handleExpand = (index: number) => {
+      const updatingWidgets = [...widgets];
+      const widgetToUpdate = updatingWidgets.at(index);
+      widgetToUpdate.isShrink = false;
+      widgetToUpdate.isFullscreen = !widgetToUpdate.isFullscreen;
+      setWidgets(updatingWidgets);
+      // this.setState({ isFullscreen: !this.state.isFullscreen });
     };
 
     const isWidgetShow =
-      JSON.parse(localStorage.getItem('emailWidgetShow')) || {};
+      JSON.parse(localStorage.getItem('emailWidgetShow') ?? '') || {};
 
-    const isShrink = shrink === 'true' ? true : false;
+    // const isShrink = shrink === 'true' ? true : false;
 
-    return (
-      <ModalWrapper onClick={() => changeShrink()} show={isFullscreen}>
-        <WidgetWrapper
-          shrink={isShrink}
-          show={isWidgetShow.show}
-          fullScreen={isFullscreen}
-          onClick={e => {
-            e.stopPropagation();
-          }}
+    const renderWidget = (widgetState, index) => {
+      return (
+        <ModalWrapper
+          onClick={() => changeShrink(index)}
+          show={widgetState.isFullscreen}
         >
-          <NewEmailHeader>
-            <span onClick={changeShrink}>{__('New Email')}</span>
-            <div>
-              <Tip text={'Minimize'} placement="top">
-                <Icon
-                  size={10}
-                  icon={shrink === 'true' ? 'plus' : 'minus'}
-                  onClick={changeShrink}
-                />
-              </Tip>
-              <Tip
-                text={isFullscreen ? 'Exit full screen' : 'Full screen'}
-                placement="top"
-              >
-                <Icon
-                  size={10}
-                  icon={isFullscreen ? 'compress' : 'expand-arrows-alt'}
-                  onClick={handleExpand}
-                />
-              </Tip>
-              <Tip text={'Close'} placement="top">
-                <Icon size={10} icon="cancel" onClick={onClose} />
-              </Tip>
-            </div>
-          </NewEmailHeader>
-          <MailForm
-            {...this.props}
-            isEmptyEmail={this.state.isEmptyEmail}
-            shrink={isShrink}
-            clear={clear}
-            clearOnSubmit={true}
-            closeModal={onClose}
-          />
-        </WidgetWrapper>
-      </ModalWrapper>
+          <WidgetWrapper
+            shrink={widgetState.isShrink}
+            show={isWidgetShow.show}
+            fullScreen={widgetState.isFullscreen}
+            onClick={e => {
+              e.stopPropagation();
+            }}
+          >
+            <NewEmailHeader>
+              <span onClick={() => changeShrink(index)}>{__('New Email')}</span>
+              <div>
+                <Tip text={'Minimize'} placement="top">
+                  <Icon
+                    size={10}
+                    icon={widgetState.isShrink === 'true' ? 'plus' : 'minus'}
+                    onClick={() => changeShrink(index)}
+                  />
+                </Tip>
+                <Tip
+                  text={
+                    widgetState.isFullscreen
+                      ? 'Exit full screen'
+                      : 'Full screen'
+                  }
+                  placement="top"
+                >
+                  <Icon
+                    size={10}
+                    icon={
+                      widgetState.isFullscreen
+                        ? 'compress'
+                        : 'expand-arrows-alt'
+                    }
+                    onClick={() => handleExpand(index)}
+                  />
+                </Tip>
+                <Tip text={'Close'} placement="top">
+                  <Icon
+                    size={10}
+                    icon="cancel"
+                    onClick={() => onClose(index)}
+                  />
+                </Tip>
+              </div>
+            </NewEmailHeader>
+            <MailForm
+              {...props}
+              // isEmptyEmail={this.state.isEmptyEmail}
+              isEmptyEmail={true}
+              shrink={widgetState.isShrink}
+              clear={widgetState.clear}
+              clearOnSubmit={true}
+              closeModal={() => onClose(index)}
+            />
+          </WidgetWrapper>
+        </ModalWrapper>
+      );
+    };
+
+    return (
+      <EmailWidgetsWrapper>
+        {widgets.map((widget, index) => renderWidget(widget, index))}
+      </EmailWidgetsWrapper>
     );
   }
 
-  renderWidget() {
-    const { type = 'widget' } = this.props;
+  function renderWidget() {
+    const { type = 'widget' } = props;
 
     const isWidgetShow =
-      JSON.parse(localStorage.getItem('emailWidgetShow')) || {};
+      JSON.parse(localStorage.getItem('emailWidgetShow') || '') || {};
 
     if (window.location.href.includes('contacts')) {
       if (isWidgetShow.type === type) {
-        return this.renderContent();
+        return renderContent();
       }
 
       return null;
     }
 
-    return this.renderContent();
+    return renderContent();
   }
 
-  render() {
-    return (
-      <>
-        {this.renderTrigger()}
-        <CommonPortal>{this.renderWidget()}</CommonPortal>
-      </>
-    );
-  }
+  return (
+    <>
+      {renderTrigger()}
+      <CommonPortal>{renderWidget()}</CommonPortal>
+    </>
+  );
 }
 
 export default Widget;
diff --git a/packages/ui-inbox/src/inbox/styles.ts b/packages/ui-inbox/src/inbox/styles.ts
index dca61a8524..5f865ef5cf 100644
--- a/packages/ui-inbox/src/inbox/styles.ts
+++ b/packages/ui-inbox/src/inbox/styles.ts
@@ -373,7 +373,7 @@ ${({ show }) =>
         min-height: 450px !important;
       }
   `
-    : ``}`;
+    : `z-index: 3;`}`;
 
 export {
   PopoverButton,
diff --git a/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts b/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
index 96bfb139e3..5632895fe8 100644
--- a/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
+++ b/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
@@ -286,32 +286,33 @@ const WidgetWrapper = styledTS<{
   show: boolean;
   shrink: boolean;
   fullScreen?: boolean;
+  displayNone?: boolean;
 }>(styled.div)`
-  position: fixed;
-  flex-direction: column;
-  z-index: 300;
-  justify-content: flex-end;
-  align-content: flex-end;
-  background: #fff;
-  border-radius: 8px;
-  overflow: hidden;
-  width: ${({ fullScreen, shrink }) =>
-    fullScreen ? '75vw' : shrink ? '260px' : '600px'};
-  ${({ fullScreen }) =>
-    fullScreen
-      ? `
-    left: 50%;
-    top: 6%;
-    transform: translate(-50%, 0);
-    box-shadow: 0 0 0 50vmax rgba(0,0,0,.3);
-  `
-      : `
-    bottom: ${dimensions.unitSpacing}px;
-    right: ${dimensions.coreSpacing}px; 
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 0px 3px -4px;
-  `}
-  ${({ show }) => (show ? 'display: flex;' : 'display:none;')} 
-
+  
+flex-direction: column;
+z-index: 300;
+justify-content: flex-end;
+align-content: flex-end;
+background: #fff;
+border-radius: 8px;
+overflow: hidden;
+width: ${({ fullScreen, shrink }) =>
+  fullScreen ? '75vw' : shrink ? '260px' : '600px'};
+${({ fullScreen }) =>
+  fullScreen
+    ? `
+position: fixed;
+left: 50%;
+top: 6%;
+transform: translate(-50%, 0);
+box-shadow: 0 0 0 50vmax rgba(0,0,0,.3);
+`
+    : `
+box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 0px 3px -4px;
+`} 
+${({ show }) => (show ? 'display: flex;' : 'display:none;')} 
+${({ displayNone }) => (displayNone ? 'display:none;' : 'display: flex;')} 
+  margin-right: 5px;
   .Select-arrow-zone {
     padding: 0;
   }
@@ -398,6 +399,19 @@ const SignatureDropdownWrapper = styled.div`
   }
 `;
 
+const EmailWidgetsWrapper = styled.div`
+  display: flex;
+  position: absolute;
+  height: 600px;
+  right: 50px;
+  width: min-content;
+  bottom: 0;
+  z-index: 1;
+  align-items: end;
+  overflow: hidden;
+  justify-content: end;
+>`;
+
 export {
   Attachments,
   FlexRow,
@@ -424,5 +438,6 @@ export {
   SignatureChooserFooter,
   SignatureOptionWrapper,
   SignatureHiderButton,
-  SignatureDropdownWrapper
+  SignatureDropdownWrapper,
+  EmailWidgetsWrapper
 };
diff --git a/packages/ui-plugin-template/.erxes/webpack.config.js b/packages/ui-plugin-template/.erxes/webpack.config.js
index 16cd415750..d03ea87544 100644
--- a/packages/ui-plugin-template/.erxes/webpack.config.js
+++ b/packages/ui-plugin-template/.erxes/webpack.config.js
@@ -4,8 +4,8 @@ const path = require("path");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const InterpolateHtmlPlugin = require("interpolate-html-plugin");
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-//   .BundleAnalyzerPlugin;
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+  .BundleAnalyzerPlugin;
 const { MFLiveReloadPlugin } = require("@module-federation/fmr");
 
 const configs = require("./plugin-src/configs");
@@ -215,7 +215,7 @@ module.exports = (env, args) => {
             standalone: false, // false uses chrome extention
           })
         : false,
-      // new BundleAnalyzerPlugin()
+      new BundleAnalyzerPlugin()
     ].filter(Boolean),
   };
 };

From 1f62de68e2b756f2668108d842e4cd5503483e0a Mon Sep 17 00:00:00 2001
From: whoslen <whoslen@whoslens-Mac-mini.local>
Date: Fri, 13 Oct 2023 16:20:29 +0800
Subject: [PATCH 2/3] perf editor implementation done

---
 packages/erxes-ui/package.json                |   9 +-
 .../richTextEditor/RichTextEditor.context.ts  |  17 +
 .../RichTextEditorContent.tsx                 |  17 +
 .../RichTextEditorControl.tsx                 | 106 ++++
 .../RichTextEditorControl/controls.tsx        | 192 +++++++
 .../RichTextEditorControl/styles.ts           |  44 ++
 .../RichTextEditorControlsGroup.tsx           |  12 +
 .../RichTextEditorControlsGroup/styles.ts     |   8 +
 .../RichTextEditorToolbar.tsx                 |  26 +
 .../RichTextEditorToolbar/styles.ts           |  11 +
 .../src/components/richTextEditor/TEditor.tsx |  95 ++++
 .../richTextEditor/extensions/TextSize.ts     |  51 ++
 .../src/components/richTextEditor/hooks.tsx   |  27 +
 .../src/components/richTextEditor/labels.ts   | 169 +++++++
 packages/erxes-ui/src/styles/global-styles.ts |  74 +++
 .../integrations/components/mail/MailForm.tsx |  42 +-
 packages/ui-plugin-deps/package.json          |   3 +
 .../.erxes/webpack.config.js                  |   6 +-
 yarn.lock                                     | 470 +++++++++++++++++-
 19 files changed, 1365 insertions(+), 14 deletions(-)
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/styles.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/styles.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/hooks.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/labels.ts

diff --git a/packages/erxes-ui/package.json b/packages/erxes-ui/package.json
index d328bfec45..28ab7dade5 100644
--- a/packages/erxes-ui/package.json
+++ b/packages/erxes-ui/package.json
@@ -7,6 +7,13 @@
     "@nateradebaugh/react-datetime": "4.0.0-rc.10",
     "@types/styled-components": "^3.0.0",
     "ckeditor4-react": "^1.0.0",
+    "@tiptap/pm": "^2.1.11",
+    "@tiptap/react": "^2.1.11",
+    "@tiptap/starter-kit": "^2.1.11",
+    "@tiptap/extension-text-style": "^2.1.12",
+    "@tiptap/extension-bullet-list": "^2.1.12",
+    "@tiptap/extension-list-item": "^2.1.12",
+    "@tiptap/extension-text-align": "^2.1.12",
     "color": "3.1.2",
     "dayjs": "^1.8.15",
     "draft-js": "^0.10.5",
@@ -36,6 +43,6 @@
     "styled-components-ts": "^0.0.14",
     "validator": "12.1.0",
     "xss": "1.0.14",
-    "video.js":"^8.5.2"
+    "video.js": "^8.5.2"
   }
 }
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
new file mode 100644
index 0000000000..7775e5dcd5
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
@@ -0,0 +1,17 @@
+import { Editor } from '@tiptap/react';
+import { RichTextEditorLabels } from './labels';
+import { createSafeContext } from './hooks';
+interface RichTextEditorContext {
+  editor: Editor | null;
+  labels: RichTextEditorLabels;
+  withCodeHighlightStyles: boolean | undefined;
+  withTypographyStyles: boolean | undefined;
+  unstyled: boolean | undefined;
+}
+
+export const [
+  RichTextEditorProvider,
+  useRichTextEditorContext
+] = createSafeContext<RichTextEditorContext>(
+  'RichTextEditor component was not found in tree'
+);
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
new file mode 100644
index 0000000000..e62d509e45
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { EditorContent } from '@tiptap/react';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+
+export type RichTextEditorContentFactory = {
+  props: any;
+  ref: HTMLDivElement;
+};
+
+export const RichTextEditorContent = props => {
+  const ctx = useRichTextEditorContext();
+  return (
+    <div data-promise-mirror-editor {...props}>
+      <EditorContent editor={ctx.editor} />
+    </div>
+  );
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
new file mode 100644
index 0000000000..c0b1ecbc12
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
@@ -0,0 +1,106 @@
+import React, { forwardRef, useRef } from 'react';
+
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+import { RichTextEditorLabels } from '../labels';
+import { EditorControl } from './styles';
+
+export type RichTextEditorControlStylesNames = 'control';
+
+export interface RichTextEditorControlProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Determines whether the control should have active state, false by default */
+  active?: boolean;
+
+  /** Determines whether the control can be interacted with, set `false` to make the control to act as a label */
+  interactive?: boolean;
+}
+
+export type RichTextEditorControlFactory = {
+  props: RichTextEditorControlProps;
+  ref: HTMLButtonElement;
+  stylesNames: RichTextEditorControlStylesNames;
+};
+export const RichTextEditorControl = props => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { interactive, active, onMouseDown, ...others } = props;
+
+  return (
+    <EditorControl
+      {...others}
+      data-rich-text-editor-control
+      tabIndex={interactive ? 0 : -1}
+      data-interactive={interactive || undefined}
+      data-active={active || undefined}
+      aria-pressed={(active && interactive) || undefined}
+      aria-hidden={!interactive || undefined}
+      ref={ref}
+      //   unstyled={ctx.unstyled}
+      onMouseDown={event => {
+        event.preventDefault();
+        onMouseDown?.(event);
+      }}
+    />
+  );
+};
+
+export interface RichTextEditorControlBaseProps
+  extends RichTextEditorControlProps {
+  icon?: React.FC<{ style: React.CSSProperties }>;
+}
+
+export const RichTextEditorControlBase = <
+  HTMLButtonElement,
+  RichTextEditorControlBaseProps
+>({
+  className,
+  icon: Icon,
+  ...others
+}: any) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  return (
+    <RichTextEditorControl ref={ref} {...others}>
+      <Icon style={{ width: '1rem', height: '1rem' }} />
+    </RichTextEditorControl>
+  );
+};
+
+export interface CreateControlProps {
+  label: keyof RichTextEditorLabels;
+  icon: React.FC<{ style: React.CSSProperties }>;
+  isActive?: { name: string; attributes?: Record<string, any> | string };
+  operation: { name: string; attributes?: Record<string, any> | string };
+}
+
+export function createControl({
+  label,
+  isActive,
+  operation,
+  icon
+}: CreateControlProps) {
+  return <HTMLButtonElement, RichTextEditorControlBaseProps>(props) => {
+    const { editor, labels } = useRichTextEditorContext();
+    const _label = labels[label] as string;
+    const ref = useRef<HTMLButtonElement>(null);
+    return (
+      <RichTextEditorControlBase
+        {...props}
+        aria-label={_label}
+        title={_label}
+        active={
+          isActive?.name
+            ? editor?.isActive(isActive.name, isActive.attributes)
+            : false
+        }
+        ref={ref}
+        onClick={() =>
+          (editor as any)
+            ?.chain()
+            .focus()
+            [operation.name](operation.attributes)
+            .run()
+        }
+        icon={props.icon || icon}
+      />
+    );
+  };
+}
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
new file mode 100644
index 0000000000..c523d65b86
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import {
+  TypeBold,
+  TypeH1,
+  TypeH2,
+  TypeH3,
+  TypeItalic,
+  TypeStrikethrough,
+  TypeUnderline,
+  ListOl,
+  ListUl,
+  TextLeft,
+  TextRight,
+  TextCenter,
+  Justify
+} from 'react-bootstrap-icons';
+
+import { createControl } from './RichTextEditorControl';
+
+export const BoldControl = createControl({
+  label: 'boldControlLabel',
+  icon: props => <TypeBold />,
+  isActive: { name: 'bold' },
+  operation: { name: 'toggleBold' }
+});
+
+export const ItalicControl = createControl({
+  label: 'italicControlLabel',
+  icon: props => <TypeItalic />,
+  isActive: { name: 'italic' },
+  operation: { name: 'toggleItalic' }
+});
+
+// export const UnderlineControl = createControl({
+//   label: 'underlineControlLabel',
+//   icon: (props) => <TypeUnderline />,
+//   isActive: { name: 'underline' },
+//   operation: { name: 'toggleUnderline' },
+// });
+
+export const StrikeThroughControl = createControl({
+  label: 'strikeControlLabel',
+  icon: props => <TypeStrikethrough />,
+  isActive: { name: 'strike' },
+  operation: { name: 'toggleStrike' }
+});
+
+// export const ClearFormattingControl = createControl({
+//   label: 'clearFormattingControlLabel',
+//   icon: (props) => <IconClearFormatting {...props} stroke={1.5} />,
+//   operation: { name: 'unsetAllMarks' },
+// });
+
+// export const UnlinkControl = createControl({
+//   label: 'unlinkControlLabel',
+//   icon: (props) => <IconUnlink {...props} stroke={1.5} />,
+//   operation: { name: 'unsetLink' },
+// });
+
+export const BulletListControl = createControl({
+  label: 'bulletListControlLabel',
+  icon: props => <ListUl />,
+  isActive: { name: 'bulletList' },
+  operation: { name: 'toggleBulletList' }
+});
+
+export const OrderedListControl = createControl({
+  label: 'orderedListControlLabel',
+  icon: props => <ListOl />,
+  isActive: { name: 'orderedList' },
+  operation: { name: 'toggleOrderedList' }
+});
+
+export const H1Control = createControl({
+  label: 'h1ControlLabel',
+  icon: props => <TypeH1 />,
+  isActive: { name: 'heading', attributes: { level: 1 } },
+  operation: { name: 'toggleHeading', attributes: { level: 1 } }
+});
+
+export const H2Control = createControl({
+  label: 'h2ControlLabel',
+  icon: props => <TypeH2 />,
+  isActive: { name: 'heading', attributes: { level: 2 } },
+  operation: { name: 'toggleHeading', attributes: { level: 2 } }
+});
+
+export const H3Control = createControl({
+  label: 'h3ControlLabel',
+  icon: props => <TypeH3 />,
+  isActive: { name: 'heading', attributes: { level: 3 } },
+  operation: { name: 'toggleHeading', attributes: { level: 3 } }
+});
+
+// export const H4Control = createControl({
+//   label: 'h4ControlLabel',
+//   icon: (props) => <TypeH4 />,
+//   isActive: { name: 'heading', attributes: { level: 4 } },
+//   operation: { name: 'toggleHeading', attributes: { level: 4 } },
+// });
+
+// export const H5Control = createControl({
+//   label: 'h5ControlLabel',
+//   icon: (props) => <TypeH5 />,
+//   isActive: { name: 'heading', attributes: { level: 5 } },
+//   operation: { name: 'toggleHeading', attributes: { level: 5 } },
+// });
+
+// export const H6Control = createControl({
+//   label: 'h6ControlLabel',
+//   icon: (props) => <TypeH6 />,
+//   isActive: { name: 'heading', attributes: { level: 6 } },
+//   operation: { name: 'toggleHeading', attributes: { level: 6 } },
+// });
+
+// export const BlockquoteControl = createControl({
+//   label: 'blockquoteControlLabel',
+//   icon: (props) => <IconBlockquote {...props} stroke={1.5} />,
+//   isActive: { name: 'blockquote' },
+//   operation: { name: 'toggleBlockquote' },
+// });
+
+export const AlignLeftControl = createControl({
+  label: 'alignLeftControlLabel',
+  icon: props => <TextLeft />,
+  operation: { name: 'setTextAlign', attributes: 'left' }
+});
+
+export const AlignRightControl = createControl({
+  label: 'alignRightControlLabel',
+  icon: props => <TextRight />,
+  operation: { name: 'setTextAlign', attributes: 'right' }
+});
+
+export const AlignCenterControl = createControl({
+  label: 'alignCenterControlLabel',
+  icon: props => <TextCenter />,
+  operation: { name: 'setTextAlign', attributes: 'center' }
+});
+
+export const AlignJustifyControl = createControl({
+  label: 'alignJustifyControlLabel',
+  icon: props => <Justify />,
+  operation: { name: 'setTextAlign', attributes: 'justify' }
+});
+
+// export const SubscriptControl = createControl({
+//   label: 'subscriptControlLabel',
+//   icon: (props) => <IconSubscript {...props} stroke={1.5} />,
+//   isActive: { name: 'subscript' },
+//   operation: { name: 'toggleSubscript' },
+// });
+
+// export const SuperscriptControl = createControl({
+//   label: 'superscriptControlLabel',
+//   icon: (props) => <IconSuperscript {...props} stroke={1.5} />,
+//   isActive: { name: 'superscript' },
+//   operation: { name: 'toggleSuperscript' },
+// });
+
+// export const CodeControl = createControl({
+//   label: 'codeControlLabel',
+//   icon: (props) => <IconCode {...props} stroke={1.5} />,
+//   isActive: { name: 'code' },
+//   operation: { name: 'toggleCode' },
+// });
+
+// export const CodeBlockControl = createControl({
+//   label: 'codeBlockControlLabel',
+//   icon: (props) => <IconCode {...props} stroke={1.5} />,
+//   isActive: { name: 'codeBlock' },
+//   operation: { name: 'toggleCodeBlock' },
+// });
+
+// export const HighlightControl = createControl({
+//   label: 'highlightControlLabel',
+//   icon: (props) => <IconHighlight {...props} stroke={1.5} />,
+//   isActive: { name: 'highlight' },
+//   operation: { name: 'toggleHighlight' },
+// });
+
+// export const HrControl = createControl({
+//   label: 'hrControlLabel',
+//   icon: (props) => <IconLineDashed {...props} stroke={1.5} />,
+//   operation: { name: 'setHorizontalRule' },
+// });
+
+// export const UnsetColorControl = createControl({
+//   label: 'unsetColorControlLabel',
+//   icon: (props) => <IconCircleOff {...props} stroke={1.5} />,
+//   operation: { name: 'unsetColor' },
+// });
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
new file mode 100644
index 0000000000..d4e8ddb38d
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import styledTS from 'styled-components-ts';
+import { colors } from '../../../styles';
+import { rgba } from '../../../styles/ecolor';
+
+const EditorControl = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border: 0.0625rem solid #ced4da;
+  color: ${colors.textPrimary};
+  cursor: pointer;
+  height: 1.75rem;
+  padding: 0.25rem;
+  width: 1.75rem;
+
+  &:hover,
+  &.is-active {
+    background-color: #f8f9fa;
+  }
+
+  &[data-rich-text-editor-control] {
+    border-radius: 0;
+    &:not(:last-of-type) {
+      border-right: 0;
+    }
+    &:first-of-type {
+      border-bottom-left-radius: 0.25rem;
+      border-top-left-radius: 0.25rem;
+    }
+    &:last-of-type {
+      margin-right: 0;
+      border-bottom-right-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
+    }
+  }
+  &[data-active='true'] {
+    color: ${colors.colorSecondary};
+    background-color: ${rgba(colors.colorSecondary, 0.15)};
+  }
+`;
+
+export { EditorControl };
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
new file mode 100644
index 0000000000..9c979567db
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
@@ -0,0 +1,12 @@
+import React, { useRef } from 'react';
+import { ControlsGroupWrapper } from './styles';
+
+export type RichTextEditorControlsGroupFactory = {
+  props: any;
+  ref: HTMLDivElement;
+};
+
+export const RichTextEditorControlsGroup = props => {
+  const ref = useRef<HTMLDivElement>(null);
+  return <ControlsGroupWrapper ref={ref} {...props} />;
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/styles.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/styles.ts
new file mode 100644
index 0000000000..e3fbda7b54
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/styles.ts
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import styledTS from 'styled-components-ts';
+
+const ControlsGroupWrapper = styled.div`
+  display: flex;
+`;
+
+export { ControlsGroupWrapper };
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
new file mode 100644
index 0000000000..04a3c0b205
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
@@ -0,0 +1,26 @@
+import React, { useRef } from 'react';
+import { EditorToolbarWrapper } from './styles';
+
+export interface RichTextEditorToolbarProps {
+  /** Determines whether `position: sticky` styles should be added to the toolbar, `false` by default */
+  sticky?: boolean;
+
+  /** Sets top style to offset elements with fixed position, `0` by default */
+  stickyOffset?: React.CSSProperties['top'];
+}
+
+export type RichTextEditorToolbarFactory = {
+  props: RichTextEditorToolbarProps;
+  ref: HTMLDivElement;
+};
+
+const defaultProps: Partial<RichTextEditorToolbarProps> = {};
+
+export const RichTextEditorToolbar = props => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { sticky = false, stickyOffset, ...others } = props;
+
+  return (
+    <EditorToolbarWrapper ref={ref} style={{ position: sticky }} {...others} />
+  );
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/styles.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/styles.ts
new file mode 100644
index 0000000000..8c7d0f534f
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/styles.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const EditorToolbarWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.625rem;
+  border-bottom: 0.0625rem solid #e9ecef;
+`;
+
+export { EditorToolbarWrapper };
diff --git a/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx b/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
new file mode 100644
index 0000000000..fc78c4f071
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
@@ -0,0 +1,95 @@
+import React, { useMemo, useRef } from 'react';
+import { DEFAULT_LABELS } from './labels';
+import { RichTextEditorProvider } from './RichTextEditor.context';
+import { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';
+import { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';
+import { RichTextEditorToolbar } from './RichTextEditorToolbar/RichTextEditorToolbar';
+import { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';
+import { useEditor } from '@tiptap/react';
+import * as controls from './RichTextEditorControl/controls';
+
+import StarterKit from '@tiptap/starter-kit';
+
+export const RichTextEditor = props => {
+  const ref = useRef<HTMLDivElement>(null);
+  const {
+    unstyled,
+    vars,
+    // editor,
+    withCodeHighlightStyles,
+    withTypographyStyles,
+    labels,
+    children,
+    ...others
+  } = props;
+
+  const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [
+    labels
+  ]);
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: '<h1> hi </h1>'
+  });
+
+  return (
+    <RichTextEditorProvider
+      value={{
+        editor,
+        labels: mergedLabels,
+        withCodeHighlightStyles,
+        withTypographyStyles,
+        unstyled
+      }}
+    >
+      <div
+        {...others}
+        ref={ref}
+        style={{
+          margin: '0.5rem',
+          border: '1px solid #e9ecef',
+          borderRadius: '4px'
+        }}
+      >
+        {children}
+      </div>
+    </RichTextEditorProvider>
+  );
+};
+
+// Generic components
+RichTextEditor.Content = RichTextEditorContent;
+RichTextEditor.Control = RichTextEditorControl;
+RichTextEditor.Toolbar = RichTextEditorToolbar;
+RichTextEditor.ControlsGroup = RichTextEditorControlsGroup;
+
+// Controls components
+RichTextEditor.Bold = controls.BoldControl;
+RichTextEditor.Italic = controls.ItalicControl;
+RichTextEditor.Strikethrough = controls.StrikeThroughControl;
+// RichTextEditor.Underline = controls.UnderlineControl;
+// RichTextEditor.ClearFormatting = controls.ClearFormattingControl;
+RichTextEditor.H1 = controls.H1Control;
+RichTextEditor.H2 = controls.H2Control;
+RichTextEditor.H3 = controls.H3Control;
+// RichTextEditor.H4 = controls.H4Control;
+// RichTextEditor.H5 = controls.H5Control;
+// RichTextEditor.H6 = controls.H6Control;
+RichTextEditor.BulletList = controls.BulletListControl;
+RichTextEditor.OrderedList = controls.OrderedListControl;
+// RichTextEditor.Link = controls.RichTextEditorLinkControl;
+// RichTextEditor.Unlink = controls.UnlinkControl;
+// RichTextEditor.Blockquote = controls.BlockquoteControl;
+RichTextEditor.AlignLeft = controls.AlignLeftControl;
+RichTextEditor.AlignRight = controls.AlignRightControl;
+RichTextEditor.AlignCenter = controls.AlignCenterControl;
+RichTextEditor.AlignJustify = controls.AlignJustifyControl;
+// RichTextEditor.Superscript = controls.SuperscriptControl;
+// RichTextEditor.Subscript = controls.SubscriptControl;
+// RichTextEditor.Code = controls.CodeControl;
+// RichTextEditor.CodeBlock = controls.CodeBlockControl;
+// RichTextEditor.ColorPicker = controls.RichTextEditorColorPickerControl;
+// RichTextEditor.Color = controls.RichTextEditorColorControl;
+// RichTextEditor.Highlight = controls.HighlightControl;
+// RichTextEditor.Hr = controls.HrControl;
+// RichTextEditor.UnsetColor = controls.UnsetColorControl;
diff --git a/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts b/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
new file mode 100644
index 0000000000..71c77942bf
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
@@ -0,0 +1,51 @@
+import TextStyle from '@tiptap/extension-text-style';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      /**
+       * Set the font size
+       */
+      setFontSize: (size: string) => ReturnType;
+      /**
+       * Unset the font size
+       */
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+export const TextStyleExtended = TextStyle.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      fontSize: {
+        default: null,
+        parseHTML: element => element.style.fontSize.replace('px', ''),
+        renderHTML: attributes => {
+          if (!attributes['fontSize']) {
+            return {};
+          }
+          return {
+            style: `font-size: ${attributes['fontSize']}px`
+          };
+        }
+      }
+    };
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setFontSize: fontSize => ({ commands }) => {
+        return commands.setMark(this.name, { fontSize: fontSize });
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain()
+          .setMark(this.name, { fontSize: null })
+          .removeEmptyTextStyle()
+          .run();
+      }
+    };
+  }
+});
diff --git a/packages/erxes-ui/src/components/richTextEditor/hooks.tsx b/packages/erxes-ui/src/components/richTextEditor/hooks.tsx
new file mode 100644
index 0000000000..12673bb6bc
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/hooks.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+
+export function createSafeContext<ContextValue>(errorMessage: string) {
+  const Context = createContext<ContextValue | null>(null);
+
+  const useSafeContext = () => {
+    const ctx = useContext(Context);
+
+    if (ctx === null) {
+      console.log('ASDLKJASDLKAJSDASD NOL TFOUND');
+
+      throw new Error(errorMessage);
+    }
+
+    return ctx;
+  };
+
+  const Provider = ({
+    children,
+    value
+  }: {
+    value: ContextValue;
+    children: React.ReactNode;
+  }) => <Context.Provider value={value}> {children} </Context.Provider>;
+
+  return [Provider, useSafeContext] as const;
+}
diff --git a/packages/erxes-ui/src/components/richTextEditor/labels.ts b/packages/erxes-ui/src/components/richTextEditor/labels.ts
new file mode 100644
index 0000000000..5ae8969d04
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/labels.ts
@@ -0,0 +1,169 @@
+export interface RichTextEditorLabels {
+  /** RichTextEditor.Bold control aria-label */
+  boldControlLabel: string;
+
+  /** RichTextEditor.Hr control aria-label */
+  hrControlLabel: string;
+
+  /** RichTextEditor.Italic control aria-label */
+  italicControlLabel: string;
+
+  /** RichTextEditor.Underline control aria-label */
+  underlineControlLabel: string;
+
+  /** RichTextEditor.Strike control aria-label */
+  strikeControlLabel: string;
+
+  /** RichTextEditor.ClearFormatting control aria-label */
+  clearFormattingControlLabel: string;
+
+  /** RichTextEditor.Link control aria-label */
+  linkControlLabel: string;
+
+  /** RichTextEditor.Unlink control aria-label */
+  unlinkControlLabel: string;
+
+  /** RichTextEditor.BulletList control aria-label */
+  bulletListControlLabel: string;
+
+  /** RichTextEditor.OrderedList control aria-label */
+  orderedListControlLabel: string;
+
+  /** RichTextEditor.H1 control aria-label */
+  h1ControlLabel: string;
+
+  /** RichTextEditor.H2 control aria-label */
+  h2ControlLabel: string;
+
+  /** RichTextEditor.H3 control aria-label */
+  h3ControlLabel: string;
+
+  /** RichTextEditor.H4 control aria-label */
+  h4ControlLabel: string;
+
+  /** RichTextEditor.H5 control aria-label */
+  h5ControlLabel: string;
+
+  /** RichTextEditor.H6 control aria-label */
+  h6ControlLabel: string;
+
+  /** RichTextEditor.Blockquote control aria-label */
+  blockquoteControlLabel: string;
+
+  /** RichTextEditor.AlignLeft control aria-label */
+  alignLeftControlLabel: string;
+
+  /** RichTextEditor.AlignCenter control aria-label */
+  alignCenterControlLabel: string;
+
+  /** RichTextEditor.AlignRight control aria-label */
+  alignRightControlLabel: string;
+
+  /** RichTextEditor.AlignJustify control aria-label */
+  alignJustifyControlLabel: string;
+
+  /** RichTextEditor.Code control aria-label */
+  codeControlLabel: string;
+
+  /** RichTextEditor.CodeBlock control aria-label */
+  codeBlockControlLabel: string;
+
+  /** RichTextEditor.Subscript control aria-label */
+  subscriptControlLabel: string;
+
+  /** RichTextEditor.Superscript control aria-label */
+  superscriptControlLabel: string;
+
+  /** RichTextEditor.ColorPicker control aria-label */
+  colorPickerControlLabel: string;
+
+  /** RichTextEditor.UnsetColor control aria-label */
+  unsetColorControlLabel: string;
+
+  /** RichTextEditor.Highlight control aria-label */
+  highlightControlLabel: string;
+
+  /** A function go get RichTextEditor.Color control aria-label based on color that control applies */
+  colorControlLabel(color: string): string;
+
+  /** aria-label for link editor url input */
+  linkEditorInputLabel: string;
+
+  /** placeholder for link editor url input */
+  linkEditorInputPlaceholder: string;
+
+  /** Content of external button tooltip in link editor when the link was chosen to open in a new tab */
+  linkEditorExternalLink: string;
+
+  /** Content of external button tooltip in link editor when the link was chosen to open in the same tab */
+  linkEditorInternalLink: string;
+
+  /** Save button content in link editor */
+  linkEditorSave: string;
+
+  /** Cancel button title text in color picker control */
+  colorPickerCancel: string;
+
+  /** Clear button title text in color picker control */
+  colorPickerClear: string;
+
+  /** Color picker button title text in color picker control */
+  colorPickerColorPicker: string;
+
+  /** Palette button title text in color picker control */
+  colorPickerPalette: string;
+
+  /** Save button title text in color picker control */
+  colorPickerSave: string;
+
+  /** aria-label for color palette colors */
+  colorPickerColorLabel(color: string): string;
+}
+
+export const DEFAULT_LABELS: RichTextEditorLabels = {
+  // Controls labels
+  linkControlLabel: 'Link',
+  colorPickerControlLabel: 'Text color',
+  highlightControlLabel: 'Highlight text',
+  colorControlLabel: color => `Set text color ${color}`,
+  boldControlLabel: 'Bold',
+  italicControlLabel: 'Italic',
+  underlineControlLabel: 'Underline',
+  strikeControlLabel: 'Strikethrough',
+  clearFormattingControlLabel: 'Clear formatting',
+  unlinkControlLabel: 'Remove link',
+  bulletListControlLabel: 'Bullet list',
+  orderedListControlLabel: 'Ordered list',
+  h1ControlLabel: 'Heading 1',
+  h2ControlLabel: 'Heading 2',
+  h3ControlLabel: 'Heading 3',
+  h4ControlLabel: 'Heading 4',
+  h5ControlLabel: 'Heading 5',
+  h6ControlLabel: 'Heading 6',
+  blockquoteControlLabel: 'Blockquote',
+  alignLeftControlLabel: 'Align text: left',
+  alignCenterControlLabel: 'Align text: center',
+  alignRightControlLabel: 'Align text: right',
+  alignJustifyControlLabel: 'Align text: justify',
+  codeControlLabel: 'Code',
+  codeBlockControlLabel: 'Code block',
+  subscriptControlLabel: 'Subscript',
+  superscriptControlLabel: 'Superscript',
+  unsetColorControlLabel: 'Unset color',
+  hrControlLabel: 'Horizontal line',
+
+  // Link editor
+  linkEditorInputLabel: 'Enter URL',
+  linkEditorInputPlaceholder: 'https://example.com/',
+  linkEditorExternalLink: 'Open link in a new tab',
+  linkEditorInternalLink: 'Open link in the same tab',
+  linkEditorSave: 'Save',
+
+  // Color picker control
+  colorPickerCancel: 'Cancel',
+  colorPickerClear: 'Clear color',
+  colorPickerColorPicker: 'Color picker',
+  colorPickerPalette: 'Color palette',
+  colorPickerSave: 'Save',
+  colorPickerColorLabel: color => `Set text color ${color}`
+};
diff --git a/packages/erxes-ui/src/styles/global-styles.ts b/packages/erxes-ui/src/styles/global-styles.ts
index 62b6cff952..a89db58ed9 100644
--- a/packages/erxes-ui/src/styles/global-styles.ts
+++ b/packages/erxes-ui/src/styles/global-styles.ts
@@ -1247,6 +1247,80 @@ a:hover {
     font:inherit;
     color:inherit
   }
+
+  /* Tiptap */
+  .tiptap {
+    > * + * {
+      margin-top: 0.75em;
+    }
+  
+    ul,
+    ol {
+      padding: 0 1rem;
+    }
+  
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 1.1;
+    }
+  
+    code {
+      background-color: rgba(#616161, 0.1);
+      color: #616161;
+    }
+  
+    pre {
+      background: #0D0D0D;
+      color: #FFF;
+      font-family: 'JetBrainsMono', monospace;
+      padding: 0.75rem 1rem;
+      border-radius: 0.5rem;
+  
+      code {
+        color: inherit;
+        padding: 0;
+        background: none;
+        font-size: 0.8rem;
+      }
+    }
+  
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  
+    blockquote {
+      padding-left: 1rem;
+      border-left: 2px solid rgba(#0D0D0D, 0.1);
+    }
+  
+    hr {
+      border: none;
+      border-top: 2px solid rgba(#0D0D0D, 0.1);
+      margin: 2rem 0;
+    }
+
+  }
+
+  /* PromiseMirror (actual editable section of editor) */
+  
+  .ProseMirror{
+    padding: 1rem;
+  }
+
+  &[data-promise-mirror-editor] {
+    div {
+      outline: 0px;
+      min-height: 150px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+  }
+
 `;
 
 const globalStyle = [`${style}`] as any;
diff --git a/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx b/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
index 7c986ec1dd..5a3c57c86c 100644
--- a/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
+++ b/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
@@ -42,6 +42,7 @@ import Uploader from '@erxes/ui/src/components/Uploader';
 import asyncComponent from '@erxes/ui/src/components/AsyncComponent';
 import dayjs from 'dayjs';
 import { generateEmailTemplateParams } from '@erxes/ui-engage/src/utils';
+import { RichTextEditor } from '@erxes/ui/src/components/richTextEditor/TEditor';
 
 const Signature = asyncComponent(() =>
   import(
@@ -109,7 +110,9 @@ type State = {
   showReply: string;
   isRepliesRetrieved: boolean;
 };
-
+{
+  /* @ts-ignore*/
+}
 class MailForm extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -819,8 +822,39 @@ class MailForm extends React.Component<Props, State> {
   renderBody() {
     return (
       <MailEditorWrapper>
-        {this.renderShowReplies()}
-        <EditorCK
+        {/* {this.renderShowReplies()} */}
+
+        <RichTextEditor>
+          <RichTextEditor.Toolbar sticky stickyOffset={60}>
+            <RichTextEditor.ControlsGroup>
+              <RichTextEditor.Bold />
+              <RichTextEditor.Italic />
+              {/* <RichTextEditor.Underline /> */}
+              <RichTextEditor.Strikethrough />
+            </RichTextEditor.ControlsGroup>
+
+            <RichTextEditor.ControlsGroup>
+              <RichTextEditor.H1 />
+              <RichTextEditor.H2 />
+              <RichTextEditor.H3 />
+            </RichTextEditor.ControlsGroup>
+
+            <RichTextEditor.ControlsGroup>
+              <RichTextEditor.BulletList />
+              <RichTextEditor.OrderedList />
+            </RichTextEditor.ControlsGroup>
+
+            <RichTextEditor.ControlsGroup>
+              <RichTextEditor.AlignLeft />
+              <RichTextEditor.AlignRight />
+              <RichTextEditor.AlignCenter />
+              <RichTextEditor.AlignJustify />
+            </RichTextEditor.ControlsGroup>
+          </RichTextEditor.Toolbar>
+          <RichTextEditor.Content />
+        </RichTextEditor>
+
+        {/* <EditorCK
           toolbar={MAIL_TOOLBARS_CONFIG}
           removePlugins="elementspath"
           content={this.state.content}
@@ -830,7 +864,7 @@ class MailForm extends React.Component<Props, State> {
           autoGrow={true}
           autoGrowMinHeight={300}
           autoGrowMaxHeight={300}
-        />
+        /> */}
       </MailEditorWrapper>
     );
   }
diff --git a/packages/ui-plugin-deps/package.json b/packages/ui-plugin-deps/package.json
index 9f256a60fb..c9af453b06 100644
--- a/packages/ui-plugin-deps/package.json
+++ b/packages/ui-plugin-deps/package.json
@@ -28,6 +28,9 @@
     "@nateradebaugh/react-datetime": "4.0.0-rc.10",
     "@types/styled-components": "^3.0.0",
     "ckeditor4-react": "1.1.0",
+    "@tiptap/pm": "^2.1.11",
+    "@tiptap/react": "^2.1.11",
+    "@tiptap/starter-kit": "^2.1.11",
     "color": "^4.1.0",
     "dayjs": "1.8.15",
     "dotenv": "^10.0.0",
diff --git a/packages/ui-plugin-template/.erxes/webpack.config.js b/packages/ui-plugin-template/.erxes/webpack.config.js
index d03ea87544..16cd415750 100644
--- a/packages/ui-plugin-template/.erxes/webpack.config.js
+++ b/packages/ui-plugin-template/.erxes/webpack.config.js
@@ -4,8 +4,8 @@ const path = require("path");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const InterpolateHtmlPlugin = require("interpolate-html-plugin");
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
-  .BundleAnalyzerPlugin;
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
+//   .BundleAnalyzerPlugin;
 const { MFLiveReloadPlugin } = require("@module-federation/fmr");
 
 const configs = require("./plugin-src/configs");
@@ -215,7 +215,7 @@ module.exports = (env, args) => {
             standalone: false, // false uses chrome extention
           })
         : false,
-      new BundleAnalyzerPlugin()
+      // new BundleAnalyzerPlugin()
     ].filter(Boolean),
   };
 };
diff --git a/yarn.lock b/yarn.lock
index 2a76be05d8..df4c887c14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4783,7 +4783,7 @@
   resolved "https://registry.npmjs.org/@opentelemetry/api/-/api-1.0.4.tgz"
   integrity sha512-BuJuXRSJNQ3QoKA6GWWDyuLpOUck+9hAXNMCnrloc1aWVoy6Xq6t9PUV08aBZ4Lutqq2LEHM486bpZqoViScog==
 
-"@popperjs/core@^2.11.6":
+"@popperjs/core@^2.11.6", "@popperjs/core@^2.9.0":
   version "2.11.8"
   resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -4852,6 +4852,37 @@
     prepend-file "^1.3.1"
     release-it "^12.2.1"
 
+"@remirror/core-constants@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.2.tgz#f05eccdc69e3a65e7d524b52548f567904a11a1a"
+  integrity sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ==
+
+"@remirror/core-helpers@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@remirror/core-helpers/-/core-helpers-3.0.0.tgz#3a35c2346bc23ebc3cee585b7840b5567755c5f1"
+  integrity sha512-tusEgQJIqg4qKj6HSBUFcyRnWnziw3neh4T9wOmsPGHFC3w9kl5KSrDb9UAgE8uX6y32FnS7vJ955mWOl3n50A==
+  dependencies:
+    "@remirror/core-constants" "^2.0.2"
+    "@remirror/types" "^1.0.1"
+    "@types/object.omit" "^3.0.0"
+    "@types/object.pick" "^1.3.2"
+    "@types/throttle-debounce" "^2.1.0"
+    case-anything "^2.1.13"
+    dash-get "^1.0.2"
+    deepmerge "^4.3.1"
+    fast-deep-equal "^3.1.3"
+    make-error "^1.3.6"
+    object.omit "^3.0.0"
+    object.pick "^1.3.0"
+    throttle-debounce "^3.0.1"
+
+"@remirror/types@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@remirror/types/-/types-1.0.1.tgz#768502497a0fbbc23338a1586b893f729310cf70"
+  integrity sha512-VlZQxwGnt1jtQ18D6JqdIF+uFZo525WEqrfp9BOc3COPpK4+AWCgdnAWL+ho6imWcoINlGjR/+3b6y5C1vBVEA==
+  dependencies:
+    type-fest "^2.19.0"
+
 "@restart/context@^2.1.4":
   version "2.1.4"
   resolved "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz"
@@ -5016,6 +5047,192 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tiptap/core@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.1.11.tgz#06bbd189c6b2dffe58b1c80f848737d76fb012bd"
+  integrity sha512-1W2DdjpPwfphHgQ3Qm4s5wzCnEjiXm1TeZ+6/zBl89yKURXgv8Mw1JGdj/NcImQjtDcsNn97MscACK3GKbEJBA==
+
+"@tiptap/extension-blockquote@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.1.11.tgz#f91729fb7f328384243c37516fab55ab2efa01a4"
+  integrity sha512-IEVe3goA0rgp1G8Wm733BSRJiy71Vh2fmTCyZKWmc2A6GREVSy1X3fCvAo6pMENRObhjIoaBQUCE3p4iJYOxqg==
+
+"@tiptap/extension-bold@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.1.11.tgz#a890d278ba932d91081dc91b75d2b3579a276f5c"
+  integrity sha512-vhdkBtvd029ufOYt2ug49Gz+RLKSczO/CCqKYBqBmpIpsifyK7M6jkgamvAQg3c/vYk0LNcKiL2dp0Jp7L+5Gw==
+
+"@tiptap/extension-bubble-menu@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.1.11.tgz#3cc3d8be3108932f15c36e9b00948219cc92ab0f"
+  integrity sha512-WFJJpZvl9DP94Y5RQZB/THDxvDbrTo8tuhjT7yWlhseJ6zyhWmRXdutt39wfSZNFxitv/As+s7cO9aYLML/TVg==
+  dependencies:
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-bullet-list@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.11.tgz#bb72bbd8b7aaeb8c03ba9575886f7c1faec8e4e5"
+  integrity sha512-SOOVH2aSmdMtjWL7TTLbN72xbAFz2G5jifT4UCXb7Qx6LsyhNCyDCu0ukOW8rSosGoSdmBXxAsD9sBJ1jEOmZw==
+
+"@tiptap/extension-bullet-list@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.1.12.tgz#7c905a577ce30ef2cb335870a23f9d24fd26f6aa"
+  integrity sha512-vtD8vWtNlmAZX8LYqt2yU9w3mU9rPCiHmbp4hDXJs2kBnI0Ju/qAyXFx6iJ3C3XyuMnMbJdDI9ee0spAvFz7cQ==
+
+"@tiptap/extension-code-block@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.1.11.tgz#5fa34d41d87f365d6bc1f8fdf3d5da0c5182df7c"
+  integrity sha512-QhmhCCWqg/5qLXpZ3sl2A0rqJqV8zMOegcxUFaqcJMOqNbsuHcRgc9C+1hWSVLbCmstB7M6sgF02QpTBOkYHxg==
+
+"@tiptap/extension-code@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.1.11.tgz#c4f8fee03a8866ea189c112e907e17ea8aaa8f74"
+  integrity sha512-G0UEbMFunujy/F86yHN0/dumPLbwTis9C+6IQv1XRPNsV28U0MgxBhlPcJUgyO5lwuleePDxiBVcRv2XrysgKw==
+
+"@tiptap/extension-document@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.1.11.tgz#76782660420900acb6301a5ba69c27054139b622"
+  integrity sha512-L/iLuqxvJep33ycCFNrnUhdR0VtcZyeNnqB+ZvVHzEwLoRud+LBy44lpEdBrAFsvRm3DG14m/FGYL+TfaD0vxA==
+
+"@tiptap/extension-dropcursor@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.1.11.tgz#1a23efec39c3e59c1b7eeb970ed2facdbe1f920d"
+  integrity sha512-MiJepRpHlu93aInOMW8NeRCvm9VE5rL0MA9TONY/IspJFGFIqonc/01J6t33JQa3Xh/x3xAfis4nKa/UazeVJw==
+
+"@tiptap/extension-floating-menu@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.1.11.tgz#3013924727ad95a1cd484e4bc426912b63e1a444"
+  integrity sha512-ExeoOQ6nT0CY0eWx6WjbG+osurXLXa7XrqIdhCAcTmzBAlGiKt8khX9qaZ+QF+BRK1r1lja2KX+5/fpLK7Dt1g==
+  dependencies:
+    tippy.js "^6.3.7"
+
+"@tiptap/extension-gapcursor@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.1.11.tgz#77bcd8d886405c10ddbc251186d88be752db2ec4"
+  integrity sha512-P/xjyhSOVyop5XXbNtRPgrooQrSlpYblwR67ClI9FAC7uQliuOwi5VcndmEItjWWSe85kJa2IHjOS7mLYvJe8A==
+
+"@tiptap/extension-hard-break@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.1.11.tgz#49fd0954fab4448dd3a975f2b20340ab9c0d8b95"
+  integrity sha512-qhiPe6FA0b6PPb/ITlgSnY0l9tEVmXZ9e7eSjvks12ORfqL/dofSCLtChHWvhZxugzo92xejG2hXLi6lyOLbkg==
+
+"@tiptap/extension-heading@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.1.11.tgz#fa9802e006a47a8d3afd652e67cde4e68afeb1d0"
+  integrity sha512-QBtl0S1aDFB+F1wvTrS5iGdNUEeXp+WuTddj+L2f5EP4KqG2x7sj7e7ENMy20g/l8tbKwzd3AZZydvClH4Ybbw==
+
+"@tiptap/extension-history@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.1.11.tgz#80a6a8887c8a5a4b73f06285a273928d4c51d7b5"
+  integrity sha512-88dovV2O9icmBn0IvaArFFeS6X5ts6BxZPu5VbGML8KBL8iAu+Og7RXEPdOy5e13K0K4V21fDpO3n7KdvNOAYQ==
+
+"@tiptap/extension-horizontal-rule@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.1.11.tgz#e423a2b41123ef7f8d778a1cd026e6606e7be28b"
+  integrity sha512-uvHPa2YCKnDhtSBSZB3lk5U4H3wRKP0DNvVx4Y2F7MdQianVzcyOd1pZYO9BQs+lUB1aZots6doE69Zqz3mU2Q==
+
+"@tiptap/extension-italic@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.1.11.tgz#31b5d096e7bd15e855644a0066eb750140b1a57a"
+  integrity sha512-QmDsHtnBBit/1KtQpBPxjSPjDC1mVKtoNTgsEwMWK6YAkCKOKPj7oPEqqjaNZIRMKPPzE5XCsfBoS3jtVmo+6A==
+
+"@tiptap/extension-list-item@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.11.tgz#466e4d1dcad153b4e52678b08d2bf073339c2dc9"
+  integrity sha512-YhwHaPGhffsFsg/zjCu1G24//j/BTRDRZbZXmMwp77m1yEqPULcWyoWrI+gUzetQxJRD/ruAucqjLtoLLfICmQ==
+
+"@tiptap/extension-list-item@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.1.12.tgz#3eb28dc998490a98f14765783770b3cf6587d39e"
+  integrity sha512-Gk7hBFofAPmNQ8+uw8w5QSsZOMEGf7KQXJnx5B022YAUJTYYxO3jYVuzp34Drk9p+zNNIcXD4kc7ff5+nFOTrg==
+
+"@tiptap/extension-ordered-list@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.1.11.tgz#19c993090bc2aca6d8fed8b9c8759dd4816f06db"
+  integrity sha512-/tghfEJ5U7WFbF8xyOqRJks8KxP/lRjnroMXMglaushSMx8PYPo1dZDB/dJZw7ksy47MAaKJfKlx3gyN2CPXBQ==
+
+"@tiptap/extension-paragraph@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.1.11.tgz#6d0eb3d7509e1d467526f2658a147db52dd225d6"
+  integrity sha512-gXMgJ2CU3X4yh1wKnb8RdbDmhITB76pH6DX0uWprmEgvzNMN3Qw+h5uBD9lgxg1WVghbCmkG9mY9J4PPbPTLxw==
+
+"@tiptap/extension-strike@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.1.11.tgz#738df0eebb6ab997783e01434397156601017bcb"
+  integrity sha512-UnjeSVgu3bDuyjjUdWsUErRCoQKAHCzH/pAiqTEPEEdFYgZFQPBpcJICRVdlYjRmI2ZKh6d0TMUS55m7ckmwmQ==
+
+"@tiptap/extension-text-align@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.1.12.tgz#962dca4d284ce57ed345fd4b94ddb3a97944e0d1"
+  integrity sha512-siMlwrkgVrAxxgmZn8GOc75J7UZi2CVrP9vDHkUPPyKm/fjssYekXwGCEk4Vswii1BbOh2gt+MDsRkeYRGyDlQ==
+
+"@tiptap/extension-text-style@^2.1.12":
+  version "2.1.12"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.1.12.tgz#ec6a025fc6785246c9fcf78e34088759c1d2b213"
+  integrity sha512-nfjWXX0JSRHLcscfiMESh+RN+Z7bG8nio/C9+8yQASM90VxU9f8oKgF8HnnSYsSrD4lLf44Q6XjmB7aMVUuikg==
+
+"@tiptap/extension-text@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.1.11.tgz#f67ac1a782a8ee1d30885680e52bba3ef19322f9"
+  integrity sha512-Iey0EXYv9079+lbHMvZtLc6XcYfKrq++msEXuFFNHxvL0i/XzndhGf+qlDhLROLgEtDiiTqzOBBwFCGlFjbDow==
+
+"@tiptap/pm@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.1.11.tgz#023c854d447a6509d52da0be890539037582cf39"
+  integrity sha512-vBIAic+H8fjHfT8r2qJkAOxdx1Iiss9+qMyujAoIdPkiyjEc4+sXcM0qSYgIr6KL5icITyuK8J7x/V62VfB7Uw==
+  dependencies:
+    prosemirror-changeset "^2.2.0"
+    prosemirror-collab "^1.3.0"
+    prosemirror-commands "^1.3.1"
+    prosemirror-dropcursor "^1.5.0"
+    prosemirror-gapcursor "^1.3.1"
+    prosemirror-history "^1.3.0"
+    prosemirror-inputrules "^1.2.0"
+    prosemirror-keymap "^1.2.0"
+    prosemirror-markdown "^1.10.1"
+    prosemirror-menu "^1.2.1"
+    prosemirror-model "^1.18.1"
+    prosemirror-schema-basic "^1.2.0"
+    prosemirror-schema-list "^1.2.2"
+    prosemirror-state "^1.4.1"
+    prosemirror-tables "^1.3.0"
+    prosemirror-trailing-node "^2.0.2"
+    prosemirror-transform "^1.7.0"
+    prosemirror-view "^1.28.2"
+
+"@tiptap/react@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.1.11.tgz#d049ebba81ad7750175da413bf13df3814f2feac"
+  integrity sha512-OLU4uqMeCE/LKz/GY2P1JRykUgHJDoPROHUa1IOnVpj/1FbbBHDyurT3eomwsVzScTULbrKGwrS3ada6QAmTTA==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.1.11"
+    "@tiptap/extension-floating-menu" "^2.1.11"
+
+"@tiptap/starter-kit@^2.1.11":
+  version "2.1.11"
+  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.1.11.tgz#8874ddc14397020d98bf8fc60dc2c7c7164e2a77"
+  integrity sha512-kZXwuo9yxrs1ASxluRKjXThjdcy90d7owJxnJWD7SyEwXaXYc4h+Ar1M9rP3jieCDBuRTtCgvAOKbVbhnRJ2jg==
+  dependencies:
+    "@tiptap/core" "^2.1.11"
+    "@tiptap/extension-blockquote" "^2.1.11"
+    "@tiptap/extension-bold" "^2.1.11"
+    "@tiptap/extension-bullet-list" "^2.1.11"
+    "@tiptap/extension-code" "^2.1.11"
+    "@tiptap/extension-code-block" "^2.1.11"
+    "@tiptap/extension-document" "^2.1.11"
+    "@tiptap/extension-dropcursor" "^2.1.11"
+    "@tiptap/extension-gapcursor" "^2.1.11"
+    "@tiptap/extension-hard-break" "^2.1.11"
+    "@tiptap/extension-heading" "^2.1.11"
+    "@tiptap/extension-history" "^2.1.11"
+    "@tiptap/extension-horizontal-rule" "^2.1.11"
+    "@tiptap/extension-italic" "^2.1.11"
+    "@tiptap/extension-list-item" "^2.1.11"
+    "@tiptap/extension-ordered-list" "^2.1.11"
+    "@tiptap/extension-paragraph" "^2.1.11"
+    "@tiptap/extension-strike" "^2.1.11"
+    "@tiptap/extension-text" "^2.1.11"
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz"
@@ -5483,6 +5700,16 @@
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
+"@types/object.omit@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.1.tgz#1b9de058cf94344b9284308a41b17e3a356ed18e"
+  integrity sha512-24XD34UeRWw505TsMNBrQ4bES2s8IxiFC59mmNUFhTz9IX2hAtA7gQ8wVww1i17QmhBYILg5iqYP2y7aqA3pwQ==
+
+"@types/object.pick@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/object.pick/-/object.pick-1.3.2.tgz#9eb28118240ad8f658b9c9c6caf35359fdb37150"
+  integrity sha512-sn7L+qQ6RLPdXRoiaE7bZ/Ek+o4uICma/lBFPyJEKDTPTBP1W8u0c4baj3EiS4DiqLs+Hk+KUGvMVJtAw3ePJg==
+
 "@types/parse-json@^4.0.0":
   version "4.0.0"
   resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz"
@@ -5670,6 +5897,11 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/throttle-debounce@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
+
 "@types/tough-cookie@*":
   version "4.0.1"
   resolved "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.1.tgz"
@@ -8451,6 +8683,11 @@ capture-exit@^2.0.0:
   dependencies:
     rsvp "^4.8.4"
 
+case-anything@^2.1.13:
+  version "2.1.13"
+  resolved "https://registry.yarnpkg.com/case-anything/-/case-anything-2.1.13.tgz#0cdc16278cb29a7fcdeb072400da3f342ba329e9"
+  integrity sha512-zlOQ80VrQ2Ue+ymH5OuM/DlDq64mEm+B9UTdHULv5osUMD6HalNTblf2b1u/m6QecjsnOkBpqVZ+XPwIVsy7Ng==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
@@ -9673,6 +9910,11 @@ create-require@^1.1.0:
   resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+crelt@^1.0.0:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
+  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
+
 cron-parser@^2.18.0:
   version "2.18.0"
   resolved "https://registry.npmjs.org/cron-parser/-/cron-parser-2.18.0.tgz"
@@ -10160,6 +10402,11 @@ dargs@^7.0.0:
   resolved "https://registry.npmjs.org/dargs/-/dargs-7.0.0.tgz"
   integrity sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==
 
+dash-get@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/dash-get/-/dash-get-1.0.2.tgz#4c9e9ad5ef04c4bf9d3c9a451f6f7997298dcc7c"
+  integrity sha512-4FbVrHDwfOASx7uQVxeiCTo7ggSdYZbqs8lH+WU6ViypPlDbe9y6IP5VVUDQBv9DcnyaiPT5XT0UWHgJ64zLeQ==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz"
@@ -10510,6 +10757,11 @@ deepmerge@^4.2.2:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
+deepmerge@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
+
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz"
@@ -11371,6 +11623,11 @@ entities@^2.0.0:
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 env-var@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/env-var/-/env-var-6.3.0.tgz"
@@ -14886,7 +15143,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1:
   resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz"
   integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 
-is-extendable@^1.0.1:
+is-extendable@^1.0.0, is-extendable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz"
   integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
@@ -16737,6 +16994,13 @@ linkify-it@4.0.0:
   dependencies:
     uc.micro "^1.0.1"
 
+linkify-it@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-4.0.1.tgz#01f1d5e508190d06669982ba31a7d9f56a5751ec"
+  integrity sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==
+  dependencies:
+    uc.micro "^1.0.1"
+
 lint-staged@^3.6.0:
   version "3.6.1"
   resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-3.6.1.tgz"
@@ -17578,7 +17842,7 @@ make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@^1.1.1, make-error@^1.3.6:
   version "1.3.6"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -17629,6 +17893,17 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it@^13.0.1:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-13.0.2.tgz#1bc22e23379a6952e5d56217fbed881e0c94d536"
+  integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz"
@@ -17705,7 +17980,7 @@ mdast-util-to-string@^3.1.0:
   resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz"
   integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
 
-mdurl@^1.0.0:
+mdurl@^1.0.0, mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
@@ -19274,6 +19549,13 @@ object.omit@^2.0.0:
     for-own "^0.1.4"
     is-extendable "^0.1.1"
 
+object.omit@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-3.0.0.tgz#0e3edc2fce2ba54df5577ff529f6d97bd8a522af"
+  integrity sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==
+  dependencies:
+    is-extendable "^1.0.0"
+
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz"
@@ -19485,6 +19767,11 @@ ora@^3.4.0:
     strip-ansi "^5.2.0"
     wcwidth "^1.0.1"
 
+orderedmap@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
+  integrity sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==
+
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
@@ -20378,6 +20665,160 @@ property-information@^6.0.0:
   resolved "https://registry.npmjs.org/property-information/-/property-information-6.1.1.tgz"
   integrity sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==
 
+prosemirror-changeset@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz#dae94b63aec618fac7bb9061648e6e2a79988383"
+  integrity sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==
+  dependencies:
+    prosemirror-transform "^1.0.0"
+
+prosemirror-collab@^1.3.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz#0e8c91e76e009b53457eb3b3051fb68dad029a33"
+  integrity sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+
+prosemirror-commands@^1.0.0, prosemirror-commands@^1.3.1:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz#e94aeea52286f658cd984270de9b4c3fff580852"
+  integrity sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-dropcursor@^1.5.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz#49b9fb2f583e0d0f4021ff87db825faa2be2832d"
+  integrity sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+    prosemirror-view "^1.1.0"
+
+prosemirror-gapcursor@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz#5fa336b83789c6199a7341c9493587e249215cb4"
+  integrity sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-view "^1.0.0"
+
+prosemirror-history@^1.0.0, prosemirror-history@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.3.2.tgz#ce6ad7ab9db83e761aee716f3040d74738311b15"
+  integrity sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==
+  dependencies:
+    prosemirror-state "^1.2.2"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.31.0"
+    rope-sequence "^1.3.0"
+
+prosemirror-inputrules@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.2.1.tgz#8faf3d78c16150aedac71d326a3e3947417ce557"
+  integrity sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz#14a54763a29c7b2704f561088ccf3384d14eb77e"
+  integrity sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==
+  dependencies:
+    prosemirror-state "^1.0.0"
+    w3c-keyname "^2.2.0"
+
+prosemirror-markdown@^1.10.1:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.11.2.tgz#f6e529e669d11fa3eec859e93c0d2c91788d6c80"
+  integrity sha512-Eu5g4WPiCdqDTGhdSsG9N6ZjACQRYrsAkrF9KYfdMaCmjIApH75aVncsWYOJvEk2i1B3i8jZppv3J/tnuHGiUQ==
+  dependencies:
+    markdown-it "^13.0.1"
+    prosemirror-model "^1.0.0"
+
+prosemirror-menu@^1.2.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
+  dependencies:
+    crelt "^1.0.0"
+    prosemirror-commands "^1.0.0"
+    prosemirror-history "^1.0.0"
+    prosemirror-state "^1.0.0"
+
+prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
+  integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
+  dependencies:
+    orderedmap "^2.0.0"
+
+prosemirror-schema-basic@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7"
+  integrity sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==
+  dependencies:
+    prosemirror-model "^1.19.0"
+
+prosemirror-schema-list@^1.2.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.3.0.tgz#05374702cf35a3ba5e7ec31079e355a488d52519"
+  integrity sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.7.3"
+
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.1:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
+  integrity sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==
+  dependencies:
+    prosemirror-model "^1.0.0"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.27.0"
+
+prosemirror-tables@^1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.3.4.tgz#0b7cc16d49f90c5b834c9f29291c545478ce9ab0"
+  integrity sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==
+  dependencies:
+    prosemirror-keymap "^1.1.2"
+    prosemirror-model "^1.8.1"
+    prosemirror-state "^1.3.1"
+    prosemirror-transform "^1.2.1"
+    prosemirror-view "^1.13.3"
+
+prosemirror-trailing-node@^2.0.2:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.7.tgz#ba782a7929f18bcae650b1c7082a2d10443eab19"
+  integrity sha512-8zcZORYj/8WEwsGo6yVCRXFMOfBo0Ub3hCUvmoWIZYfMP26WqENU0mpEP27w7mt8buZWuGrydBewr0tOArPb1Q==
+  dependencies:
+    "@remirror/core-constants" "^2.0.2"
+    "@remirror/core-helpers" "^3.0.0"
+    escape-string-regexp "^4.0.0"
+
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.0, prosemirror-transform@^1.7.3:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz#a47c64a3c373c1bd0ff46e95be3210c8dda0cd11"
+  integrity sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==
+  dependencies:
+    prosemirror-model "^1.0.0"
+
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.28.2, prosemirror-view@^1.31.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.32.0.tgz#2022538d02932c0901232d1e0430c064f79a8ea2"
+  integrity sha512-HwW7IWgca6ehiW2PA48H/8yl0TakA0Ms5LgN5Krc97oar7GfjIKE/NocUsLe74Jq4mwyWKUNoBljE8WkXKZwng==
+  dependencies:
+    prosemirror-model "^1.16.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.1.0"
+
 protobufjs@5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.1.tgz"
@@ -22419,6 +22860,11 @@ rollup@^3.27.1:
   optionalDependencies:
     fsevents "~2.3.2"
 
+rope-sequence@^1.3.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
+  integrity sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==
+
 rsa-pem-from-mod-exp@^0.8.4:
   version "0.8.6"
   resolved "https://registry.yarnpkg.com/rsa-pem-from-mod-exp/-/rsa-pem-from-mod-exp-0.8.6.tgz#8b828d602d544154e317a3c3eb8889cdac810f2c"
@@ -24269,6 +24715,13 @@ tinyspy@^2.1.1:
   resolved "https://registry.npmjs.org/tinyspy/-/tinyspy-2.1.1.tgz"
   integrity sha512-XPJL2uSzcOyBMky6OFrusqWlzfFrXtE0hPuMgW8A2HmaqrPo4ZQHRN/V0QXN3FSjKxpsbRrFc5LI7KOwBsT1/w==
 
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tlds@1.231.0:
   version "1.231.0"
   resolved "https://registry.npmjs.org/tlds/-/tlds-1.231.0.tgz"
@@ -24802,7 +25255,7 @@ type-fest@^0.8.1:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-type-fest@^2.14.0:
+type-fest@^2.14.0, type-fest@^2.19.0:
   version "2.19.0"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
@@ -24861,7 +25314,7 @@ ua-parser-js@^0.7.18:
   resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz"
   integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==
 
-uc.micro@^1.0.1:
+uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
@@ -25674,6 +26127,11 @@ w3c-hr-time@^1.0.1:
   dependencies:
     browser-process-hrtime "^0.1.2"
 
+w3c-keyname@^2.2.0:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+
 w3c-xmlserializer@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz"

From 3677c1c4cebcb809a554a3cecfd745626b94d4eb Mon Sep 17 00:00:00 2001
From: whoslen <whoslen@whoslens-Mac-mini.local>
Date: Wed, 1 Nov 2023 15:08:11 +0800
Subject: [PATCH 3/3] perf implement tiptap

---
 packages/erxes-ui/package.json                |  12 +-
 .../richTextEditor/RichTextEditor.context.ts  |   5 +-
 .../RichTextEditorContent.tsx                 |   9 +-
 .../RichTextEditorControl.tsx                 |  29 ++--
 .../RichTextEditorFontControl.tsx             |  91 ++++++++++++
 .../RichTextEditorLinkControl.tsx             | 137 +++++++++++++++++
 .../RichTextEditorControl/controls.tsx        |  25 +++-
 .../RichTextEditorControl/index.ts            |   5 +
 .../RichTextEditorControl/styles.ts           | 121 ++++++++++++++-
 .../RichTextEditorControlsGroup.tsx           |  12 +-
 .../RichTextEditorToolbar.tsx                 |  19 +--
 .../src/components/richTextEditor/TEditor.tsx | 117 +++++++++++----
 .../{hooks.tsx => createSafeContext.tsx}      |   2 -
 .../richTextEditor/extensions/FontSize.ts     |  85 +++++++++++
 .../richTextEditor/extensions/Link.ts         |  10 ++
 .../richTextEditor/extensions/TextSize.ts     |  51 -------
 .../richTextEditor/extensions/index.ts        |   6 +
 .../richTextEditor/hooks/useExtensions.ts     | 139 ++++++++++++++++++
 .../components/richTextEditor/nodes/DivTag.ts |  25 ++++
 .../components/richTextEditor/nodes/index.ts  |   1 +
 packages/erxes-ui/src/styles/global-styles.ts |  25 ++--
 .../integrations/components/mail/MailForm.tsx | 124 +++++++---------
 .../integrations/components/mail/styles.ts    |   9 +-
 23 files changed, 846 insertions(+), 213 deletions(-)
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorFontControl.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorLinkControl.tsx
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/index.ts
 rename packages/erxes-ui/src/components/richTextEditor/{hooks.tsx => createSafeContext.tsx} (91%)
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/extensions/FontSize.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/extensions/Link.ts
 delete mode 100644 packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/extensions/index.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/hooks/useExtensions.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/nodes/DivTag.ts
 create mode 100644 packages/erxes-ui/src/components/richTextEditor/nodes/index.ts

diff --git a/packages/erxes-ui/package.json b/packages/erxes-ui/package.json
index 28ab7dade5..89895bae89 100644
--- a/packages/erxes-ui/package.json
+++ b/packages/erxes-ui/package.json
@@ -9,11 +9,21 @@
     "ckeditor4-react": "^1.0.0",
     "@tiptap/pm": "^2.1.11",
     "@tiptap/react": "^2.1.11",
-    "@tiptap/starter-kit": "^2.1.11",
     "@tiptap/extension-text-style": "^2.1.12",
     "@tiptap/extension-bullet-list": "^2.1.12",
     "@tiptap/extension-list-item": "^2.1.12",
     "@tiptap/extension-text-align": "^2.1.12",
+    "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-image": "^2.1.12",
+    "@tiptap/extension-color": "^2.1.12",
+    "@tiptap/extension-font-family": "^2.1.12",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.1.12",
+    "@tiptap/extension-superscript": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/extension-dropcursor": "^2.1.12",
     "color": "3.1.2",
     "dayjs": "^1.8.15",
     "draft-js": "^0.10.5",
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
index 7775e5dcd5..96ef9a94b7 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts
@@ -1,12 +1,9 @@
 import { Editor } from '@tiptap/react';
 import { RichTextEditorLabels } from './labels';
-import { createSafeContext } from './hooks';
+import { createSafeContext } from './createSafeContext';
 interface RichTextEditorContext {
   editor: Editor | null;
   labels: RichTextEditorLabels;
-  withCodeHighlightStyles: boolean | undefined;
-  withTypographyStyles: boolean | undefined;
-  unstyled: boolean | undefined;
 }
 
 export const [
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
index e62d509e45..817c43115e 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
@@ -2,15 +2,10 @@ import React from 'react';
 import { EditorContent } from '@tiptap/react';
 import { useRichTextEditorContext } from '../RichTextEditor.context';
 
-export type RichTextEditorContentFactory = {
-  props: any;
-  ref: HTMLDivElement;
-};
-
-export const RichTextEditorContent = props => {
+export const RichTextEditorContent = () => {
   const ctx = useRichTextEditorContext();
   return (
-    <div data-promise-mirror-editor {...props}>
+    <div data-promise-mirror-editor>
       <EditorContent editor={ctx.editor} />
     </div>
   );
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
index c0b1ecbc12..98b4a22aeb 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx
@@ -15,12 +15,7 @@ export interface RichTextEditorControlProps
   interactive?: boolean;
 }
 
-export type RichTextEditorControlFactory = {
-  props: RichTextEditorControlProps;
-  ref: HTMLButtonElement;
-  stylesNames: RichTextEditorControlStylesNames;
-};
-export const RichTextEditorControl = props => {
+export const RichTextEditorControl = (props: RichTextEditorControlProps) => {
   const ref = useRef<HTMLButtonElement>(null);
   const { interactive, active, onMouseDown, ...others } = props;
 
@@ -33,8 +28,7 @@ export const RichTextEditorControl = props => {
       data-active={active || undefined}
       aria-pressed={(active && interactive) || undefined}
       aria-hidden={!interactive || undefined}
-      ref={ref}
-      //   unstyled={ctx.unstyled}
+      innerRef={ref}
       onMouseDown={event => {
         event.preventDefault();
         onMouseDown?.(event);
@@ -46,6 +40,7 @@ export const RichTextEditorControl = props => {
 export interface RichTextEditorControlBaseProps
   extends RichTextEditorControlProps {
   icon?: React.FC<{ style: React.CSSProperties }>;
+  // className: React.HTMLAttributes<HTMLButtonElement>;
 }
 
 export const RichTextEditorControlBase = <
@@ -56,9 +51,8 @@ export const RichTextEditorControlBase = <
   icon: Icon,
   ...others
 }: any) => {
-  const ref = useRef<HTMLButtonElement>(null);
   return (
-    <RichTextEditorControl ref={ref} {...others}>
+    <RichTextEditorControl {...others}>
       <Icon style={{ width: '1rem', height: '1rem' }} />
     </RichTextEditorControl>
   );
@@ -67,7 +61,7 @@ export const RichTextEditorControlBase = <
 export interface CreateControlProps {
   label: keyof RichTextEditorLabels;
   icon: React.FC<{ style: React.CSSProperties }>;
-  isActive?: { name: string; attributes?: Record<string, any> | string };
+  isActive?: { name: string | null; attributes?: Record<string, any> | string };
   operation: { name: string; attributes?: Record<string, any> | string };
 }
 
@@ -77,21 +71,23 @@ export function createControl({
   operation,
   icon
 }: CreateControlProps) {
-  return <HTMLButtonElement, RichTextEditorControlBaseProps>(props) => {
+  return <HTMLButtonElement, RichTextEditorControlBaseProps>(
+    props: RichTextEditorControlBaseProps
+  ) => {
     const { editor, labels } = useRichTextEditorContext();
     const _label = labels[label] as string;
-    const ref = useRef<HTMLButtonElement>(null);
+    // const ref = useRef<HTMLButtonElement>(null);
     return (
       <RichTextEditorControlBase
-        {...props}
         aria-label={_label}
         title={_label}
         active={
           isActive?.name
             ? editor?.isActive(isActive.name, isActive.attributes)
+            : isActive?.attributes
+            ? editor?.isActive(isActive.attributes)
             : false
         }
-        ref={ref}
         onClick={() =>
           (editor as any)
             ?.chain()
@@ -99,7 +95,8 @@ export function createControl({
             [operation.name](operation.attributes)
             .run()
         }
-        icon={props.icon || icon}
+        icon={icon}
+        // icon={icon || props.icon}
       />
     );
   };
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorFontControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorFontControl.tsx
new file mode 100644
index 0000000000..eea61cb9aa
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorFontControl.tsx
@@ -0,0 +1,91 @@
+import React, { useRef, useState } from 'react';
+import { Link, BoxArrowUpRight } from 'react-bootstrap-icons';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+import Select from 'react-select-plus';
+import {
+  RichTextEditorControlBaseProps,
+  RichTextEditorControlBase
+} from './RichTextEditorControl';
+import Tip from '../../Tip';
+import {
+  FontSelectWrapper,
+  InputAction,
+  InputWrapper,
+  LinkInput,
+  LinkWrapper
+} from './styles';
+import { SelectWrapper } from '../../form/styles';
+
+const LinkIcon: RichTextEditorControlBaseProps['icon'] = props => (
+  <Link {...props} />
+);
+
+export const RichTextEditorFontControl = props => {
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    vars,
+    icon,
+    popoverProps,
+    disableTooltips,
+    initialExternal,
+    ...others
+  } = props;
+  const [fontSize, setFontSize] = useState('');
+  const ctx = useRichTextEditorContext();
+  const fontSizes = [
+    'default',
+    8,
+    9,
+    10,
+    11,
+    12,
+    14,
+    16,
+    18,
+    20,
+    22,
+    24,
+    26,
+    28,
+    36,
+    42,
+    72
+  ];
+
+  const setSize = (size: string) => {
+    setFontSize(size === 'default' ? '13px' : size + 'px');
+    ctx.editor
+      ?.chain()
+      .setFontSize(size === 'default' ? '13px' : size + 'px')
+      .focus()
+      .run();
+  };
+
+  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      //   setLink();
+    }
+  };
+
+  return (
+    <FontSelectWrapper>
+      <Select
+        //  placeholder={ctx.labels.linkEditorInputPlaceholder}
+        //           aria-label={ctx.labels.linkEditorInputLabel}
+        placeholder="Size"
+        multi={false}
+        value={fontSize}
+        onChange={val => setSize(val.value)}
+        options={fontSizes.map(size => ({
+          value: size,
+          label: size
+          //   <p style={{ fontSize: size }}>
+        }))}
+      />
+    </FontSelectWrapper>
+  );
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorLinkControl.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorLinkControl.tsx
new file mode 100644
index 0000000000..be286d49ec
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorLinkControl.tsx
@@ -0,0 +1,137 @@
+import React, { useRef, useState } from 'react';
+import { OverlayTrigger, PopoverContent } from 'react-bootstrap';
+import { Link, BoxArrowUpRight } from 'react-bootstrap-icons';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+import {
+  RichTextEditorControlBaseProps,
+  RichTextEditorControlBase
+} from './RichTextEditorControl';
+import Tip from '../../Tip';
+import { InputAction, InputWrapper, LinkInput, LinkWrapper } from './styles';
+
+const LinkIcon: RichTextEditorControlBaseProps['icon'] = props => (
+  <Link {...props} />
+);
+
+export const RichTextEditorLinkControl = props => {
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    vars,
+    icon,
+    popoverProps,
+    disableTooltips,
+    initialExternal,
+    ...others
+  } = props;
+
+  const ctx = useRichTextEditorContext();
+
+  const [url, setUrl] = useState('');
+  const [external, setExternal] = useState(initialExternal);
+  const [opened, setOpened] = useState(false);
+
+  const open = () => {
+    setOpened(true);
+  };
+  const close = () => {
+    setOpened(false);
+  };
+
+  const handleOpen = () => {
+    open();
+    const linkData = ctx.editor?.getAttributes('link');
+    setUrl(linkData?.href || '');
+    setExternal(linkData?.target === '_blank');
+  };
+
+  const handleClose = () => {
+    close();
+    setUrl('');
+    setExternal(initialExternal);
+  };
+
+  const setLink = () => {
+    handleClose();
+    url === ''
+      ? ctx.editor
+          ?.chain()
+          .focus()
+          .extendMarkRange('link')
+          .unsetLink()
+          .run()
+      : ctx.editor
+          ?.chain()
+          .focus()
+          .extendMarkRange('link')
+          .setLink({ href: url, target: external ? '_blank' : null })
+          .run();
+  };
+
+  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      setLink();
+    }
+  };
+
+  //   useWindowEvent('edit-link', handleOpen, false);
+
+  return (
+    <OverlayTrigger
+      ref={overlayTrigger => {
+        overlayTrigger = overlayTrigger;
+      }}
+      trigger="click"
+      placement="top"
+      rootClose={true}
+      overlay={
+        <LinkWrapper>
+          <InputWrapper>
+            <LinkInput
+              placeholder={ctx.labels.linkEditorInputPlaceholder}
+              aria-label={ctx.labels.linkEditorInputLabel}
+              type="url"
+              value={url}
+              onChange={e => setUrl(e.target.value)}
+              onKeyDown={handleInputKeydown}
+            />
+            <InputAction>
+              <Tip
+                placement="top"
+                text={
+                  external
+                    ? ctx.labels.linkEditorExternalLink
+                    : ctx.labels.linkEditorInternalLink
+                }
+              >
+                <button
+                  onClick={() => setExternal(e => !e)}
+                  data-active={external || undefined}
+                >
+                  <BoxArrowUpRight
+                    style={{ width: '0.875rem', height: '0.875rem' }}
+                  />
+                </button>
+              </Tip>
+            </InputAction>
+          </InputWrapper>
+          <button onClick={setLink}>{ctx.labels.linkEditorSave}</button>
+        </LinkWrapper>
+      }
+    >
+      <RichTextEditorControlBase
+        icon={icon || LinkIcon}
+        {...others}
+        aria-label={ctx.labels.linkControlLabel}
+        title={ctx.labels.linkControlLabel}
+        onClick={handleOpen}
+        active={ctx.editor?.isActive('link')}
+        className={className}
+        style={style}
+      />
+    </OverlayTrigger>
+  );
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
index c523d65b86..b02fb3625c 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/controls.tsx
@@ -12,7 +12,8 @@ import {
   TextLeft,
   TextRight,
   TextCenter,
-  Justify
+  Justify,
+  Link45deg
 } from 'react-bootstrap-icons';
 
 import { createControl } from './RichTextEditorControl';
@@ -51,11 +52,11 @@ export const StrikeThroughControl = createControl({
 //   operation: { name: 'unsetAllMarks' },
 // });
 
-// export const UnlinkControl = createControl({
-//   label: 'unlinkControlLabel',
-//   icon: (props) => <IconUnlink {...props} stroke={1.5} />,
-//   operation: { name: 'unsetLink' },
-// });
+export const UnlinkControl = createControl({
+  label: 'unlinkControlLabel',
+  icon: props => <Link45deg />,
+  operation: { name: 'unsetLink' }
+});
 
 export const BulletListControl = createControl({
   label: 'bulletListControlLabel',
@@ -123,24 +124,34 @@ export const H3Control = createControl({
 export const AlignLeftControl = createControl({
   label: 'alignLeftControlLabel',
   icon: props => <TextLeft />,
-  operation: { name: 'setTextAlign', attributes: 'left' }
+
+  // { textAlign: 'left' }
+  // editor?.isActive(isActive.name, isActive.attributes)
+  isActive: { name: null, attributes: { textAlign: 'left' } },
+  operation: {
+    name: 'setTextAlign',
+    attributes: 'left'
+  }
 });
 
 export const AlignRightControl = createControl({
   label: 'alignRightControlLabel',
   icon: props => <TextRight />,
+  isActive: { name: null, attributes: { textAlign: 'right' } },
   operation: { name: 'setTextAlign', attributes: 'right' }
 });
 
 export const AlignCenterControl = createControl({
   label: 'alignCenterControlLabel',
   icon: props => <TextCenter />,
+  isActive: { name: null, attributes: { textAlign: 'center' } },
   operation: { name: 'setTextAlign', attributes: 'center' }
 });
 
 export const AlignJustifyControl = createControl({
   label: 'alignJustifyControlLabel',
   icon: props => <Justify />,
+  isActive: { name: null, attributes: { textAlign: 'justify' } },
   operation: { name: 'setTextAlign', attributes: 'justify' }
 });
 
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/index.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/index.ts
new file mode 100644
index 0000000000..e5a7dd8b2d
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/index.ts
@@ -0,0 +1,5 @@
+export * from './controls';
+export { RichTextEditorLinkControl } from './RichTextEditorLinkControl';
+export { RichTextEditorFontControl } from './RichTextEditorFontControl';
+// export { RichTextEditorColorPickerControl } from './RichTextEditorColorPickerControl';
+// export { RichTextEditorColorControl } from './RichTextEditorColorControl';
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
index d4e8ddb38d..f1bfeefe4f 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/styles.ts
@@ -40,5 +40,124 @@ const EditorControl = styled.button`
     background-color: ${rgba(colors.colorSecondary, 0.15)};
   }
 `;
+const LinkWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border: 0.0625rem solid #ced4da;
+  border-radius: 0.25rem;
+  color: ${colors.textPrimary};
+  cursor: pointer;
+  padding: 0.5rem;
+  > button {
+    height: 2.25rem;
+    min-height: 2.25rem;
+    background-color: #fff;
+    border: 0.0625rem solid #ced4da;
+    color: ${colors.textPrimary};
+    cursor: pointer;
+    outline: none;
+    font-weight: 600;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-radius: 0.25rem;
+    border: 0.0625rem solid #ced4da;
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    &:hover,
+    &.is-active {
+      background-color: #f8f9fa;
+    }
+  }
+`;
+const InputWrapper = styled.div`
+  position: relative;
+`;
+const LinkInput = styled.input`
+  border: 0.0625rem solid #ced4da;
+  border-radius: 0.25rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  height: 2.25rem;
+  min-height: 2.25rem;
+  color: #000;
+  outline: none;
+  padding: 0 2.35rem 0 0.25rem;
+  &:focus {
+    border: 0.0625rem solid ${rgba(colors.colorSecondary, 0.55)};
+  }
+  &::placeholder {
+    color: #adb5bd;
+  }
+`;
+const InputAction = styled.div`
+  position: absolute;
+  right: 0.3rem;
+  top: 0.3rem;
+  > button {
+    cursor: pointer;
+    background-color: #fff;
+    border: 0.0625rem solid #ced4da;
+    border-radius: 0.25rem;
+    padding-top: 0.2rem;
+    &[data-active='true'] {
+      color: ${colors.colorSecondary};
+      background-color: ${rgba(colors.colorSecondary, 0.15)};
+    }
+  }
+`;
+const FontSelectWrapper = styled.div`
+  z-index: 100;
+  .Select {
+    border: 0.0625rem solid #ced4da;
+    border-radius: 0.25rem;
+    height: 1.75rem;
+  }
+  .Select-clear-zone {
+    display: none;
+  }
+  .Select-input {
+  }
+  .Select-control {
+    width: 56px;
+    border-bottom: none;
+  }
+  .Select-arrow-zone {
+    top: -3px;
+  }
+  .Select--single > .Select-control .Select-value {
+    padding-left: 0;
+    padding-right: 0;
+    top: -4px;
+    left: 15px;
+  }
+  .Select-input > input {
+    color: transparent;
+    text-shadow: 0 0 0 #2196f3;
+
+    &:focus {
+      outline: none;
+    }
+  }
+  .Select-menu-outer {
+    width: max-content;
+  }
+  .Select-option {
+    padding: 4px 8px;
+  }
+  .Select-placeholder {
+    top: -4px;
+    left: 9px;
+  }
+`;
 
-export { EditorControl };
+export {
+  EditorControl,
+  LinkWrapper,
+  LinkInput,
+  InputAction,
+  InputWrapper,
+  FontSelectWrapper
+};
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
index 9c979567db..244e30f40f 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorControlsGroup/RichTextEditorControlsGroup.tsx
@@ -1,12 +1,12 @@
 import React, { useRef } from 'react';
 import { ControlsGroupWrapper } from './styles';
 
-export type RichTextEditorControlsGroupFactory = {
-  props: any;
-  ref: HTMLDivElement;
-};
+export interface RichTextEditorControlsGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
 
-export const RichTextEditorControlsGroup = props => {
+export const RichTextEditorControlsGroup = (
+  props: RichTextEditorControlsGroupProps
+) => {
   const ref = useRef<HTMLDivElement>(null);
-  return <ControlsGroupWrapper ref={ref} {...props} />;
+  return <ControlsGroupWrapper innerRef={ref} {...props} />;
 };
diff --git a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
index 04a3c0b205..d83419ff6f 100644
--- a/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/RichTextEditorToolbar/RichTextEditorToolbar.tsx
@@ -7,20 +7,21 @@ export interface RichTextEditorToolbarProps {
 
   /** Sets top style to offset elements with fixed position, `0` by default */
   stickyOffset?: React.CSSProperties['top'];
-}
-
-export type RichTextEditorToolbarFactory = {
-  props: RichTextEditorToolbarProps;
-  ref: HTMLDivElement;
-};
 
-const defaultProps: Partial<RichTextEditorToolbarProps> = {};
+  children?: React.ReactNode | string;
+}
 
-export const RichTextEditorToolbar = props => {
+export const RichTextEditorToolbar = (
+  props: Partial<RichTextEditorToolbarProps> = {}
+) => {
   const ref = useRef<HTMLDivElement>(null);
   const { sticky = false, stickyOffset, ...others } = props;
 
   return (
-    <EditorToolbarWrapper ref={ref} style={{ position: sticky }} {...others} />
+    <EditorToolbarWrapper
+      innerRef={ref}
+      style={{ position: sticky ? 'sticky' : 'unset' }}
+      {...others}
+    />
   );
 };
diff --git a/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx b/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
index fc78c4f071..b3dd2cb314 100644
--- a/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/TEditor.tsx
@@ -1,57 +1,121 @@
-import React, { useMemo, useRef } from 'react';
-import { DEFAULT_LABELS } from './labels';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { DEFAULT_LABELS, RichTextEditorLabels } from './labels';
 import { RichTextEditorProvider } from './RichTextEditor.context';
 import { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';
 import { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';
 import { RichTextEditorToolbar } from './RichTextEditorToolbar/RichTextEditorToolbar';
 import { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';
-import { useEditor } from '@tiptap/react';
+
 import * as controls from './RichTextEditorControl/controls';
 
-import StarterKit from '@tiptap/starter-kit';
+import {
+  RichTextEditorFontControl,
+  RichTextEditorLinkControl
+} from './RichTextEditorControl';
+import { useEditor } from '@tiptap/react';
+import useExtensions from './hooks/useExtensions';
+
+type toolbarLocationOption = 'bottom' | 'top';
+export interface RichTextEditorProps {
+  /** Controlled value */
+  content: string;
 
-export const RichTextEditor = props => {
+  /** Exposing editor onChange to outer component via props */
+  onChange?: (editorHtml: string) => void;
+  labels?: RichTextEditorLabels;
+  toolbarLocation?: toolbarLocationOption;
+}
+
+export const RichTextEditor = (props: RichTextEditorProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const {
-    unstyled,
-    vars,
-    // editor,
-    withCodeHighlightStyles,
-    withTypographyStyles,
-    labels,
-    children,
-    ...others
-  } = props;
+  const { content, onChange, labels } = props;
 
   const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [
     labels
   ]);
 
+  const handleEditorChange = ({ editor }) => {
+    if (onChange) {
+      onChange(editor.getHTML());
+    }
+  };
+
+  const extensions = useExtensions({
+    placeholder: 'Custom placeholder...'
+  });
+
   const editor = useEditor({
-    extensions: [StarterKit],
-    content: '<h1> hi </h1>'
+    extensions,
+    content,
+    parseOptions: { preserveWhitespace: 'full' },
+    onUpdate: handleEditorChange
   });
 
+  useEffect(() => {
+    if (!editor) return;
+    let { from, to } = editor.state.selection;
+    editor.commands.setContent(content, false, {
+      preserveWhitespace: true
+    });
+    editor.commands.setTextSelection({ from, to });
+  }, [editor, content]);
+
   return (
     <RichTextEditorProvider
       value={{
         editor,
-        labels: mergedLabels,
-        withCodeHighlightStyles,
-        withTypographyStyles,
-        unstyled
+        labels: mergedLabels
       }}
     >
       <div
-        {...others}
+        // {...others}
         ref={ref}
         style={{
+          position: 'relative',
+          background: '#fff',
+          overflowY: 'hidden',
+          minHeight: 350,
           margin: '0.5rem',
           border: '1px solid #e9ecef',
           borderRadius: '4px'
         }}
       >
-        {children}
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            {/* <RichTextEditor.Underline /> */}
+            <RichTextEditor.Strikethrough />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.FontSize />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignRight />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+        <RichTextEditorContent />
       </div>
     </RichTextEditorProvider>
   );
@@ -77,13 +141,16 @@ RichTextEditor.H3 = controls.H3Control;
 // RichTextEditor.H6 = controls.H6Control;
 RichTextEditor.BulletList = controls.BulletListControl;
 RichTextEditor.OrderedList = controls.OrderedListControl;
-// RichTextEditor.Link = controls.RichTextEditorLinkControl;
-// RichTextEditor.Unlink = controls.UnlinkControl;
+RichTextEditor.Link = RichTextEditorLinkControl;
+RichTextEditor.Unlink = controls.UnlinkControl;
 // RichTextEditor.Blockquote = controls.BlockquoteControl;
 RichTextEditor.AlignLeft = controls.AlignLeftControl;
 RichTextEditor.AlignRight = controls.AlignRightControl;
 RichTextEditor.AlignCenter = controls.AlignCenterControl;
 RichTextEditor.AlignJustify = controls.AlignJustifyControl;
+
+RichTextEditor.FontSize = RichTextEditorFontControl;
+
 // RichTextEditor.Superscript = controls.SuperscriptControl;
 // RichTextEditor.Subscript = controls.SubscriptControl;
 // RichTextEditor.Code = controls.CodeControl;
diff --git a/packages/erxes-ui/src/components/richTextEditor/hooks.tsx b/packages/erxes-ui/src/components/richTextEditor/createSafeContext.tsx
similarity index 91%
rename from packages/erxes-ui/src/components/richTextEditor/hooks.tsx
rename to packages/erxes-ui/src/components/richTextEditor/createSafeContext.tsx
index 12673bb6bc..4003984364 100644
--- a/packages/erxes-ui/src/components/richTextEditor/hooks.tsx
+++ b/packages/erxes-ui/src/components/richTextEditor/createSafeContext.tsx
@@ -7,8 +7,6 @@ export function createSafeContext<ContextValue>(errorMessage: string) {
     const ctx = useContext(Context);
 
     if (ctx === null) {
-      console.log('ASDLKJASDLKAJSDASD NOL TFOUND');
-
       throw new Error(errorMessage);
     }
 
diff --git a/packages/erxes-ui/src/components/richTextEditor/extensions/FontSize.ts b/packages/erxes-ui/src/components/richTextEditor/extensions/FontSize.ts
new file mode 100644
index 0000000000..b4b2cf8be7
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/extensions/FontSize.ts
@@ -0,0 +1,85 @@
+import { Extension } from '@tiptap/core';
+
+export type FontSizeAttrs = {
+  fontSize?: string | null;
+};
+
+export type FontSizeOptions = {
+  /**
+   * What types of marks this applies to. By default just "textStyle".
+   * (https://tiptap.dev/api/marks/text-style).
+   */
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    fontSize: {
+      /**
+       * Set the text font size. ex: "12px", "2em", or "small". Must be a valid
+       * CSS font-size
+       * (https://developer.mozilla.org/en-US/docs/Web/CSS/font-size).
+       */
+      setFontSize: (fontSize: string) => ReturnType;
+      /**
+       * Unset the text font size.
+       */
+      unsetFontSize: () => ReturnType;
+    };
+  }
+}
+
+/**
+ * Allow for setting the font size of text. Requires the TextStyle extension
+ * https://tiptap.dev/api/marks/text-style, as Tiptap suggests.
+ */
+const FontSize = Extension.create<FontSizeOptions>({
+  name: 'fontSize',
+
+  addOptions() {
+    return {
+      types: ['textStyle']
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: element => element.style.fontSize.replace(/['"]+/g, ''),
+            renderHTML: (attributes: FontSizeAttrs) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontSize: fontSize => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize })
+          .run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain()
+          .setMark('textStyle', { fontSize: null })
+          .removeEmptyTextStyle()
+          .run();
+      }
+    };
+  }
+});
+
+export default FontSize;
diff --git a/packages/erxes-ui/src/components/richTextEditor/extensions/Link.ts b/packages/erxes-ui/src/components/richTextEditor/extensions/Link.ts
new file mode 100644
index 0000000000..9bc8a1b7ea
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/extensions/Link.ts
@@ -0,0 +1,10 @@
+import TipTapLink from '@tiptap/extension-link';
+
+export const Link = TipTapLink.extend({
+  addKeyboardShortcuts: () => ({
+    'Mod-k': () => {
+      window.dispatchEvent(new Event('edit-link'));
+      return true;
+    }
+  })
+}).configure({ openOnClick: false });
diff --git a/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts b/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
deleted file mode 100644
index 71c77942bf..0000000000
--- a/packages/erxes-ui/src/components/richTextEditor/extensions/TextSize.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import TextStyle from '@tiptap/extension-text-style';
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    fontSize: {
-      /**
-       * Set the font size
-       */
-      setFontSize: (size: string) => ReturnType;
-      /**
-       * Unset the font size
-       */
-      unsetFontSize: () => ReturnType;
-    };
-  }
-}
-
-export const TextStyleExtended = TextStyle.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      fontSize: {
-        default: null,
-        parseHTML: element => element.style.fontSize.replace('px', ''),
-        renderHTML: attributes => {
-          if (!attributes['fontSize']) {
-            return {};
-          }
-          return {
-            style: `font-size: ${attributes['fontSize']}px`
-          };
-        }
-      }
-    };
-  },
-
-  addCommands() {
-    return {
-      ...this.parent?.(),
-      setFontSize: fontSize => ({ commands }) => {
-        return commands.setMark(this.name, { fontSize: fontSize });
-      },
-      unsetFontSize: () => ({ chain }) => {
-        return chain()
-          .setMark(this.name, { fontSize: null })
-          .removeEmptyTextStyle()
-          .run();
-      }
-    };
-  }
-});
diff --git a/packages/erxes-ui/src/components/richTextEditor/extensions/index.ts b/packages/erxes-ui/src/components/richTextEditor/extensions/index.ts
new file mode 100644
index 0000000000..2a4fe92756
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/extensions/index.ts
@@ -0,0 +1,6 @@
+export { Link } from './Link';
+export {
+  default as FontSize,
+  FontSizeAttrs,
+  FontSizeOptions
+} from './FontSize';
diff --git a/packages/erxes-ui/src/components/richTextEditor/hooks/useExtensions.ts b/packages/erxes-ui/src/components/richTextEditor/hooks/useExtensions.ts
new file mode 100644
index 0000000000..4302140a6a
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/hooks/useExtensions.ts
@@ -0,0 +1,139 @@
+import { EditorOptions } from '@tiptap/core';
+import { Blockquote } from '@tiptap/extension-blockquote';
+import { Bold } from '@tiptap/extension-bold';
+import { BulletList } from '@tiptap/extension-bullet-list';
+import { Code } from '@tiptap/extension-code';
+import { CodeBlock } from '@tiptap/extension-code-block';
+import { Color } from '@tiptap/extension-color';
+import { Document } from '@tiptap/extension-document';
+import { Dropcursor } from '@tiptap/extension-dropcursor';
+import { FontFamily } from '@tiptap/extension-font-family';
+import { Gapcursor } from '@tiptap/extension-gapcursor';
+import { HardBreak } from '@tiptap/extension-hard-break';
+import { Highlight } from '@tiptap/extension-highlight';
+import { History } from '@tiptap/extension-history';
+import { HorizontalRule } from '@tiptap/extension-horizontal-rule';
+import { Italic } from '@tiptap/extension-italic';
+import { Link } from '@tiptap/extension-link';
+import { ListItem } from '@tiptap/extension-list-item';
+import { Mention } from '@tiptap/extension-mention/src/index';
+import { OrderedList } from '@tiptap/extension-ordered-list';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Placeholder } from '@tiptap/extension-placeholder';
+import { Strike } from '@tiptap/extension-strike';
+import { Subscript } from '@tiptap/extension-subscript';
+import { Superscript } from '@tiptap/extension-superscript';
+// import { TableCell } from "@tiptap/extension-table-cell";
+// import { TableHeader } from "@tiptap/extension-table-header";
+// import { TableRow } from "@tiptap/extension-table-row";
+// import { TaskItem } from "@tiptap/extension-task-item";
+// import { TaskList } from "@tiptap/extension-task-list";
+import { Text } from '@tiptap/extension-text';
+import { TextAlign } from '@tiptap/extension-text-align';
+import { TextStyle } from '@tiptap/extension-text-style';
+import { Underline } from '@tiptap/extension-underline';
+import { Heading } from '@tiptap/extension-heading';
+import { useMemo } from 'react';
+import { FontSize } from '../extensions';
+import Image from '@tiptap/extension-image';
+import { DivTag } from '../nodes';
+
+export type UseExtensionsOptions = {
+  /** Placeholder hint to show in the text input area before a user types a message. */
+  placeholder?: string;
+};
+
+// Don't treat the end cursor as "inclusive" of the Link mark, so that users can
+// actually "exit" a link if it's the last element in the editor (see
+// https://tiptap.dev/api/schema#inclusive and
+// https://github.com/ueberdosis/tiptap/issues/2572#issuecomment-1055827817).
+// This also makes the `isActive` behavior somewhat more consistent with
+// `extendMarkRange` (as described here
+// https://github.com/ueberdosis/tiptap/issues/2535), since a link won't be
+// treated as active if the cursor is at the end of the link. One caveat of this
+// approach: it seems that after creating or editing a link with the link menu
+// (as opposed to having a link created via autolink), the next typed character
+// will be part of the link unexpectedly, and subsequent characters will not be.
+// This may have to do with how we're using `insertContent` and `setLink` in
+// the LinkBubbleMenu, but I can't figure out an alternative approach that
+// avoids the issue. This is arguably better than being "stuck" in the link
+// without being able to leave it, but it is still not quite right. See the
+// related open issues here:
+// https://github.com/ueberdosis/tiptap/issues/2571,
+// https://github.com/ueberdosis/tiptap/issues/2572, and
+// https://github.com/ueberdosis/tiptap/issues/514
+const CustomLinkExtension = Link.extend({
+  inclusive: false
+});
+// Make subscript and superscript mutually exclusive
+// https://github.com/ueberdosis/tiptap/pull/1436#issuecomment-1031937768
+
+///@later config these
+const CustomSubscript = Subscript.extend({
+  excludes: 'superscript'
+});
+
+const CustomSuperscript = Superscript.extend({
+  excludes: 'subscript'
+});
+
+/**
+ * A hook for providing a default set of useful extensions for the editor.
+ */
+export default function useExtensions({
+  placeholder
+}: UseExtensionsOptions = {}): EditorOptions['extensions'] {
+  return useMemo(() => {
+    return [
+      BulletList,
+      CodeBlock,
+      Document,
+      HardBreak,
+      ListItem,
+      OrderedList,
+      Paragraph,
+      CustomSubscript,
+      CustomSuperscript,
+      Text,
+      Bold,
+      Blockquote,
+      Code,
+      Italic,
+      Underline,
+      Image.configure({
+        inline: true,
+        allowBase64: true
+      }),
+      Strike,
+      CustomLinkExtension.configure({
+        // autolink is generally useful for changing text into links if they
+        // appear to be URLs (like someone types in literally "example.com"),
+        // though it comes with the caveat that if you then *remove* the link
+        // from the text, and then add a space or newline directly after the
+        // text, autolink will turn the text back into a link again. Not ideal,
+        // but probably still overall worth having autolink enabled, and that's
+        // how a lot of other tools behave as well.
+        autolink: true,
+        linkOnPaste: true,
+        openOnClick: false
+      }),
+      Gapcursor,
+      TextAlign.configure({
+        types: ['heading', 'paragraph', 'image']
+      }),
+      TextStyle,
+      Color,
+      FontFamily,
+      FontSize,
+      Highlight.configure({ multicolor: true }),
+      HorizontalRule,
+      Dropcursor,
+      Heading,
+      Placeholder.configure({
+        placeholder
+      }),
+      History,
+      DivTag
+    ];
+  }, [placeholder]);
+}
diff --git a/packages/erxes-ui/src/components/richTextEditor/nodes/DivTag.ts b/packages/erxes-ui/src/components/richTextEditor/nodes/DivTag.ts
new file mode 100644
index 0000000000..cc83d09596
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/nodes/DivTag.ts
@@ -0,0 +1,25 @@
+import { Node } from '@tiptap/core';
+import { mergeAttributes } from '@tiptap/react';
+
+export const DivTag = Node.create({
+  name: 'customdiv',
+  group: 'block',
+  content: 'block*',
+  parseHTML() {
+    return [{ tag: 'div' }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0
+    ];
+  },
+  addAttributes() {
+    return {
+      style: {
+        parseHTML: element => element.getAttribute('style')
+      }
+    };
+  }
+});
diff --git a/packages/erxes-ui/src/components/richTextEditor/nodes/index.ts b/packages/erxes-ui/src/components/richTextEditor/nodes/index.ts
new file mode 100644
index 0000000000..c037899e99
--- /dev/null
+++ b/packages/erxes-ui/src/components/richTextEditor/nodes/index.ts
@@ -0,0 +1 @@
+export { DivTag } from './DivTag';
diff --git a/packages/erxes-ui/src/styles/global-styles.ts b/packages/erxes-ui/src/styles/global-styles.ts
index a89db58ed9..c83ad233e9 100644
--- a/packages/erxes-ui/src/styles/global-styles.ts
+++ b/packages/erxes-ui/src/styles/global-styles.ts
@@ -1253,7 +1253,15 @@ a:hover {
     > * + * {
       margin-top: 0.75em;
     }
-  
+
+    a {
+      color: #228be6;
+    }
+    
+    a:hover {
+      text-decoration: underline;
+    }
+
     ul,
     ol {
       padding: 0 1rem;
@@ -1310,17 +1318,12 @@ a:hover {
   
   .ProseMirror{
     padding: 1rem;
+    outline: 0px;
+    min-height: 150px;
+    max-height: 300px;
+    overflow-y: auto;
   }
-
-  &[data-promise-mirror-editor] {
-    div {
-      outline: 0px;
-      min-height: 150px;
-      max-height: 300px;
-      overflow-y: auto;
-    }
-  }
-
+ 
 `;
 
 const globalStyle = [`${style}`] as any;
diff --git a/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx b/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
index 5a3c57c86c..9b2a6ba756 100644
--- a/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
+++ b/packages/ui-inbox/src/settings/integrations/components/mail/MailForm.tsx
@@ -2,6 +2,7 @@ import { Alert, __ } from '@erxes/ui/src/utils';
 import {
   ControlWrapper,
   EditorFooter,
+  EditorFooterGroup,
   MailEditorWrapper,
   Resipients,
   ShowReplies,
@@ -24,7 +25,6 @@ import { isEnabled, readFile } from '@erxes/ui/src/utils/core';
 import Attachment from '@erxes/ui/src/components/Attachment';
 import Button from '@erxes/ui/src/components/Button';
 import { Column } from '@erxes/ui/src/styles/main';
-import EditorCK from '@erxes/ui/src/containers/EditorCK';
 import EmailTemplate from './emailTemplate/EmailTemplate';
 import FormControl from '@erxes/ui/src/components/form/Control';
 import { IAttachment } from '@erxes/ui/src/types';
@@ -32,7 +32,6 @@ import { IEmailSignature } from '@erxes/ui/src/auth/types';
 import { IUser } from '@erxes/ui/src/auth/types';
 import Icon from '@erxes/ui/src/components/Icon';
 import { Label } from '@erxes/ui/src/components/form/styles';
-import { MAIL_TOOLBARS_CONFIG } from '@erxes/ui/src/constants/integrations';
 import MailChooser from './MailChooser';
 import { Meta } from './styles';
 import SignatureChooser from './SignatureChooser';
@@ -444,8 +443,9 @@ class MailForm extends React.Component<Props, State> {
     });
   };
 
-  onEditorChange = e => {
-    this.setState({ content: e.editor.getData() });
+  onEditorChange = (value: string) => {
+    // this.setState({ content: e.editor.getData() });
+    this.setState({ content: value });
     this.prepareData();
   };
 
@@ -749,50 +749,55 @@ class MailForm extends React.Component<Props, State> {
           />
         </UploaderWrapper>
         <EditorFooter>
-          <div>
-            {this.renderSubmit('Send', this.onSubmit, 'primary')}
-            {isReply &&
-              this.renderSubmit(
-                conversationStatus === 'closed'
-                  ? 'Send and Open'
-                  : 'Send and Resolve',
-                onSubmitResolve,
-                conversationStatus === 'closed' ? 'warning' : 'success',
-                conversationStatus === 'closed' ? 'redo' : 'check-circle',
-                'resolveOrOpen'
+          <EditorFooterGroup>
+            <div>
+              {this.renderSubmit('Send', this.onSubmit, 'primary')}
+              {isReply &&
+                this.renderSubmit(
+                  conversationStatus === 'closed'
+                    ? 'Send and Open'
+                    : 'Send and Resolve',
+                  onSubmitResolve,
+                  conversationStatus === 'closed' ? 'warning' : 'success',
+                  conversationStatus === 'closed' ? 'redo' : 'check-circle',
+                  'resolveOrOpen'
+                )}
+            </div>
+            <ToolBar>
+              <Uploader
+                defaultFileList={this.state.attachments || []}
+                onChange={onChangeAttachment}
+                icon="attach"
+                showOnlyIcon={true}
+                noPreview={true}
+              />
+
+              {isEnabled('emailtemplates') && (
+                <EmailTemplate
+                  onSelect={this.templateChange}
+                  totalCount={totalCount}
+                  fetchMoreEmailTemplates={fetchMoreEmailTemplates}
+                  targets={generateEmailTemplateParams(emailTemplates || [])}
+                  history={history}
+                />
               )}
-          </div>
+              <SignatureChooser
+                signatureContent={this.signatureContent}
+                brands={brands || []}
+                signatures={emailSignatures || []}
+                emailSignature={this.state.emailSignature}
+                emailContent={this.state.content}
+                onContentChange={this.onContentChange}
+                onSignatureChange={this.onSignatureChange}
+              />
+            </ToolBar>
+          </EditorFooterGroup>
           <ToolBar>
-            <Uploader
-              defaultFileList={this.state.attachments || []}
-              onChange={onChangeAttachment}
-              icon="attach"
-              showOnlyIcon={true}
-              noPreview={true}
-            />
             {this.renderIcon({
               text: 'Delete',
               icon: 'trash-alt',
               onClick: toggleReply
             })}
-            {isEnabled('emailtemplates') && (
-              <EmailTemplate
-                onSelect={this.templateChange}
-                totalCount={totalCount}
-                fetchMoreEmailTemplates={fetchMoreEmailTemplates}
-                targets={generateEmailTemplateParams(emailTemplates || [])}
-                history={history}
-              />
-            )}
-            <SignatureChooser
-              signatureContent={this.signatureContent}
-              brands={brands || []}
-              signatures={emailSignatures || []}
-              emailSignature={this.state.emailSignature}
-              emailContent={this.state.content}
-              onContentChange={this.onContentChange}
-              onSignatureChange={this.onSignatureChange}
-            />
           </ToolBar>
         </EditorFooter>
       </div>
@@ -822,38 +827,13 @@ class MailForm extends React.Component<Props, State> {
   renderBody() {
     return (
       <MailEditorWrapper>
-        {/* {this.renderShowReplies()} */}
-
-        <RichTextEditor>
-          <RichTextEditor.Toolbar sticky stickyOffset={60}>
-            <RichTextEditor.ControlsGroup>
-              <RichTextEditor.Bold />
-              <RichTextEditor.Italic />
-              {/* <RichTextEditor.Underline /> */}
-              <RichTextEditor.Strikethrough />
-            </RichTextEditor.ControlsGroup>
-
-            <RichTextEditor.ControlsGroup>
-              <RichTextEditor.H1 />
-              <RichTextEditor.H2 />
-              <RichTextEditor.H3 />
-            </RichTextEditor.ControlsGroup>
-
-            <RichTextEditor.ControlsGroup>
-              <RichTextEditor.BulletList />
-              <RichTextEditor.OrderedList />
-            </RichTextEditor.ControlsGroup>
-
-            <RichTextEditor.ControlsGroup>
-              <RichTextEditor.AlignLeft />
-              <RichTextEditor.AlignRight />
-              <RichTextEditor.AlignCenter />
-              <RichTextEditor.AlignJustify />
-            </RichTextEditor.ControlsGroup>
-          </RichTextEditor.Toolbar>
-          <RichTextEditor.Content />
-        </RichTextEditor>
+        {this.renderShowReplies()}
 
+        <RichTextEditor
+          content={this.state.content}
+          onChange={this.onEditorChange}
+          toolbarLocation="bottom"
+        />
         {/* <EditorCK
           toolbar={MAIL_TOOLBARS_CONFIG}
           removePlugins="elementspath"
diff --git a/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts b/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
index 5632895fe8..9e90dcf744 100644
--- a/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
+++ b/packages/ui-inbox/src/settings/integrations/components/mail/styles.ts
@@ -100,6 +100,12 @@ const Resipients = styledTS<{ isActive?: boolean }>(styled.a)`
 
 const EditorFooter = styled.div`
   padding: ${dimensions.unitSpacing}px ${dimensions.coreSpacing}px;
+  display: flex;
+  justify-content: space-between;
+  gap: 15px;
+`;
+
+const EditorFooterGroup = styled.div`
   display: flex;
   gap: 15px;
 `;
@@ -439,5 +445,6 @@ export {
   SignatureOptionWrapper,
   SignatureHiderButton,
   SignatureDropdownWrapper,
-  EmailWidgetsWrapper
+  EmailWidgetsWrapper,
+  EditorFooterGroup
 };