@zohoim/chat-components 1.0.9-beta.1 → 1.0.9-beta.10

package/es/Theme/themeVariables/dark/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#2d3748'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: '#5f6478',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262f3d',
+      editor_border_color: '#3e4d63',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
   }
 };

package/es/Theme/themeVariables/light/blueTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -115,9 +115,21 @@ export default {
       hover_bg_color: 'green'
     },
     replyEditor,
-    emojiPopup,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
+      ttIcon_path2_color: 'var(--dot_black)'
+    },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#ebf0f5'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#c8cbdc',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#0a73eb'
     }
   }
 };

package/es/Theme/themeVariables/light/commonColorVariable.js

@@ -35,12 +35,20 @@ export const imTtIcon = {
 };
 export const replyEditor = {
   bg: '#fff',
-  border: '#f1f4f9',
   color: '#000',
-  placeholder: '#000'
+  placeholder: '#c8cbdc'
 };
 export const emojiPopup = {
   bg: '#f1f4f9',
   border: '#f1f4f9',
   titleColor: '#aaa'
+};
+export const emojisHeader = {
+  bg_color: '#fafafa',
+  border_color: '#ede8e8'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#fff',
+  name_color: '#000',
+  size_color: '#5a616f'
 };

package/es/Theme/themeVariables/light/greenTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
+      tabLine: primaryGreen,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#c5cdc7',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#26a942'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(197, 205, 199, 0.7)',
+      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/light/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
+      tabLine: primaryOrange,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#d1cbc6',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#e57717'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 201, 199, 0.7)',
+      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/light/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
+      tabLine: primaryRed,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#b9b2b4',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#de3535'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 199, 201, 0.7)',
+      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/light/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon } from "./commonColorVariable";
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryYellow, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
 export default {
   library: 'chat_components',
   variables: {
@@ -111,7 +111,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
+      tabLine: primaryYellow,
+      border_color: '#ebf0f5'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#f5f6f7',
+      editor_border_color: '#ccc2a4',
+      editor_border_hover_color: '#788190',
+      editor_border_active_color: '#e8b923'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(204, 203, 199, 0.7)',
+      ttIcon_path2_color: 'var(--dot_black)'
     }
   }
 };

package/es/Theme/themeVariables/pureDark/blueTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,9 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryBlue
+      tabLine: primaryBlue,
+      border_color: '#161515'
     },
     replyEditor,
-    emojiPopup
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#479dff'
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/commonColorVariable.js

@@ -23,7 +23,15 @@ export const emojiPopup = {
 };
 export const replyEditor = {
   bg: '#212121',
-  border: '#f1f4f9',
   color: '#e2e4e6',
   placeholder: '#585858'
+};
+export const emojisHeader = {
+  bg_color: '#171717',
+  border_color: '#161515'
+};
+export const attachmentPreviewHeader = {
+  bg_color: '#212121',
+  name_color: '#e2e4e6',
+  size_color: '#a8b0bd'
 };

package/es/Theme/themeVariables/pureDark/greenTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryGreen
-    },
-    emojiPopup
+      tabLine: primaryGreen,
+      border_color: '#161515'
+    },
+    replyEditor,
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#45a159'
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/orangeTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryOrange
-    },
-    emojiPopup
+      tabLine: primaryOrange,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#ff801f'
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/redTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryRed, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryRed
-    },
-    emojiPopup
+      tabLine: primaryRed,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#e94f4f'
+    }
   }
 };

package/es/Theme/themeVariables/pureDark/yellowTheme.js

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup } from "./commonColorVariable";
+import { incomingBubbleBgColor, outgoingBubbleBgColor, bubbleActiveBgColor, messageStatusSendColor, messageStatusFailedColor, actionIconWrapperColor, primaryYellow, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, emojiPopup, replyEditor, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
 import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
 export default {
   library: 'chat_components',
@@ -112,8 +112,21 @@ export default {
       border_color_failed: failedBdr
     },
     emojiFooter: {
-      tabLine: primaryYellow
-    },
-    emojiPopup
+      tabLine: primaryYellow,
+      border_color: '#161515'
+    },
+    emojiPopup: { ...emojiPopup,
+      ttIcon_path1_color: 'rgba(255, 255, 255, 0.15)',
+      ttIcon_path2_color: 'var(--dot_platinum)'
+    },
+    replyEditor,
+    emojisHeader,
+    attachmentPreviewHeader,
+    attachmentPreviewBody: {
+      bg_color: '#262626',
+      editor_border_color: '#585858',
+      editor_border_hover_color: '#828994',
+      editor_border_active_color: '#d79835'
+    }
   }
 };

package/es/constants/index.js

@@ -1,6 +1,7 @@
 export const MSG_ACTION_POPUP_PORTAL = 'MSG_ACTION_POPUP_PORTAL';
 export const EDITOR_POPUP_PORTAL = 'EDITOR_POPUP_PORTAL';
-const version = '1.4.6';
+export const EDITOR_POPUP_TARGET_PORTAL = 'EDITOR_POPUP_TARGET_PORTAL';
+const version = '1.4.9';
 export const defaultEditorURL = // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.js`;
 // `https://static.zohocdn.com/rtelibrary/${version}/js/rte.js`;
 // `https://static.localzohocdn.com/rtelibrary/${version}/js/rte.min.js`;

package/es/im/ReplyComposer/ReplyComposer.js

@@ -20,6 +20,7 @@ import replyComposerPropTypes from "./props/propTypes";
 /** ** Methods *** */
 
 import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from "./css/cssJSLogic";
 /** ** Styles *** */
 
 import style from "./css/ReplyComposer.module.css";
@@ -47,11 +48,11 @@ export default function ReplyComposer(props) {
     attachmentPreviewTexts,
     renderHeader,
     renderFooter,
+    renderStencils,
     getEditorState: propGetEditorState,
     needFooter
   } = props;
   const {
-    replyEditorProps = dummyObject,
     replyEditorSuggestionsProps = dummyObject,
     replyComposerFooterProps = dummyObject
   } = customProps;
@@ -74,8 +75,11 @@ export default function ReplyComposer(props) {
     editor,
     onKeyDown,
     attachmentPreviewCustomProps,
+    replyEditorCustomProps,
     onFileCancel,
-    onFileSubmit
+    onFileSubmit,
+    isLoading,
+    isLoaded
   } = useReplyComposer({
     onKeyDown: propOnKeyDown,
     isShowSuggestion,
@@ -90,7 +94,17 @@ export default function ReplyComposer(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    replEditorWrapperClass
+  } = cssJSLogic({
+    isLoaded
+  }, newStyle);
   const headerElement = useMemo(() => renderHandler(renderHeader)(), [renderHeader]);
+  const stencilsElement = useMemo(() => isLoading ? renderHandler(renderStencils)({
+    needFooter
+  }) : null, [renderStencils, needFooter, isLoading]);
   return /*#__PURE__*/React.createElement(Container, {
     className: newStyle.replyComposer,
     isCover: false
@@ -111,7 +125,9 @@ export default function ReplyComposer(props) {
     onSubmit: onFileSubmit,
     texts: attachmentPreviewTexts,
     ...attachmentPreviewCustomProps
-  }) : null, headerElement || null, /*#__PURE__*/React.createElement(ReplyEditor, {
+  }) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/React.createElement("div", {
+    className: replEditorWrapperClass
+  }, /*#__PURE__*/React.createElement(ReplyEditor, {
     content: content,
     EDITORURL: EDITORURL,
     features: allFeatures,
@@ -123,8 +139,8 @@ export default function ReplyComposer(props) {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     placeHolder: placeHolder,
-    ...replyEditorProps
-  }), needFooter ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
+    ...replyEditorCustomProps
+  })), needFooter && isLoaded ? /*#__PURE__*/React.createElement(ReplyComposerFooter, {
     editor: editor,
     extensions: extensions,
     isHTMLContent: isHTMLContent,

package/es/im/ReplyComposer/css/ReplyComposer.module.css

@@ -3,3 +3,8 @@
 .replyComposer {
   /** ** Use this class for css customisation *** */
 }
+
+.hidden {
+  visibility: hidden;
+  height: 0 ;
+}

package/es/im/ReplyComposer/css/cssJSLogic.js

@@ -0,0 +1,13 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style) {
+  const {
+    isLoaded
+  } = props;
+  const replEditorWrapperClass = compileClassNames({
+    [style.hidden]: !isLoaded
+  });
+  return {
+    replEditorWrapperClass
+  };
+}

package/es/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css

@@ -1,5 +1,10 @@
 /** ** Styles *** */
 .replyComposerFooter {
   display: flex;
-  padding: 0 var(--zd_size16) var(--zd_size16) ;
+}
+[dir=ltr] .replyComposerFooter {
+  padding: 0 0 0 var(--zd_size16) ;
+}
+[dir=rtl] .replyComposerFooter {
+  padding: 0 var(--zd_size16) 0 0 ;
 }

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -11,14 +11,30 @@
 }
 
 .editableDiv {
+  --zd_fallback_font: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  --zd_regular: var(--zd_base_font_regular), var(--zd_fallback_font) !important;
+  --zd_light: var(--zd_base_font_light), var(--zd_fallback_font) !important;
+  --zd_semibold: var(--zd_base_font_semibold), var(--zd_fallback_font) !important;
+  --zd_bold: var(--zd_base_font_bold), var(--zd_fallback_font) !important;
   max-height: var(--zd_size250)  !important;
   min-height: var(--zd_size80)  !important;
   overflow: auto !important;
   font-size: var(--zd_font_size14)  !important;
   font-family: var(--zd_regular) !important;
   line-height: 22px !important;
-  padding: 0  !important;
-  background-color: var(--imlib_chat_components_replyEditor_bg) !important;
+
+  --rte-text-color: var(--imlib_chat_components_replyEditor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_replyEditor_bg) !important;
+  --rte-placeholder-color: var(
+    --imlib_chat_components_replyEditor_placeholder
+  ) !important;
+  --rte-link-text-color: var(
+    --imlib_chat_components_replyEditor_color
+  ) !important;
+
+  padding: var(--zd_size16)  !important;
+  cursor: text !important;
 }
 
 .editorWrapper {
@@ -28,3 +44,7 @@
 .editor {
   /** ** Use this class for css customisations *** */
 }
+
+.replyEditor :global(.prosemirror-suggestion) {
+  text-decoration: none !important;
+}

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -14,6 +14,7 @@ import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
 import replyEditorSuggestionsDefaultProps from "./props/defaultProps";
 import replyEditorSuggestionsPropTypes from "./props/propTypes";
+import { emojiRegex } from '@zohoim/chat-components-utils/es/constants/regexConstants';
 /** ** Styles *** */
 
 import style from "./css/ReplyEditorSuggestions.module.css";
@@ -39,12 +40,18 @@ export default function ReplyEditorSuggestions(props) {
   const handleRenderEmoji = useCallback(function () {
     let {
       onSelect,
-      searchText,
-      componentProps
+      searchText = '',
+      componentProps,
+      getMethods
     } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    const isShowEmojiPopup = searchText.length > 1;
+    const {
+      searchTextLenForShow = 2
+    } = componentProps || {}; // (-1) -> ':' string is not valid for count.
+
+    const isShowEmojiPopup = searchText.length - 1 >= searchTextLenForShow;
     return isShowEmojiPopup ? /*#__PURE__*/React.createElement(Emojis, {
       emojisRowType: "single",
+      getMethods: getMethods,
       isShowGroupBasedList: false,
       isShowOnlyContent: true,
       isShowSearchBox: false,
@@ -59,7 +66,8 @@ export default function ReplyEditorSuggestions(props) {
     }) : null;
   }, []);
   const defaultRenderMethod = useMemo(() => ({
-    ':': handleRenderEmoji
+    ':': handleRenderEmoji,
+    [emojiRegex]: handleRenderEmoji
   }), [handleRenderEmoji]);
   const {
     suggestionElement,

package/es/im/ReplyEditorSuggestions/props/propTypes.js

@@ -11,6 +11,7 @@ const replyEditorSuggestionsPropTypes = {
   }).isRequired,
   suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
     componentProps: PropTypes.object,
+    popupProps: PropTypes.object,
     renderItem: PropTypes.func
   })).isRequired,
   onSelect: PropTypes.func,

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -4,6 +4,7 @@ import React from 'react';
 
 import Popup from '@zohodesk/components/es/Popup/Popup';
 import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+import Modal from '@zohodesk/components/es/Modal/Modal';
 /** ** Hooks *** */
 
 import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
@@ -13,7 +14,7 @@ import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/
 import replyEditorSuggestionsPopupDefaultProps from "./props/defaultProps";
 import replyEditorSuggestionsPopupPropTypes from "./props/propTypes";
 import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
-import { EDITOR_POPUP_PORTAL } from "../../constants";
+import { EDITOR_POPUP_PORTAL, EDITOR_POPUP_TARGET_PORTAL } from "../../constants";
 /** ** Styles *** */
 
 import style from "./css/ReplyEditorSuggestionsPopup.module.css";
@@ -60,11 +61,13 @@ export function ReplyEditorSuggestionsPopupComp(props) {
   /* External customization */
 
   const newStyle = useMergeStyle(style, customStyle);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+    portalId: EDITOR_POPUP_TARGET_PORTAL
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: getTargetRef,
     className: newStyle.hiddenTarget,
     style: targetElementStyle
-  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+  }))), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
     boxPosition: position,
     customStyle: dummyObject,
     getRef: getContainerRef,

package/es/rte/Editor/css/Editor.module.css

@@ -1,7 +1,5 @@
 .editorWrapper {
   /* Use this class for css customisation */
-  /* max-height: 160px !important; */
-  padding: var(--zd_size16) ;
 }
 
 .editor {