@zohoim/chat-components 1.1.3 → 1.1.4-beta.2

package/lib/im/ReplyComposer/ReplyComposer.js

@@ -0,0 +1,176 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyComposer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _ReplyEditor = _interopRequireDefault(require("../ReplyEditor/ReplyEditor"));
+
+var _ReplyComposerFooter = _interopRequireDefault(require("../ReplyComposerFooter/ReplyComposerFooter"));
+
+var _ReplyEditorSuggestions = _interopRequireDefault(require("../ReplyEditorSuggestions/ReplyEditorSuggestions"));
+
+var _AttachmentPreview = _interopRequireDefault(require("../../AttachmentPreview/AttachmentPreview"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useReplyComposer2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposer"));
+
+var _useReplyComposerSuggestions = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyComposer/useReplyComposerSuggestions"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _ReplyComposerModule = _interopRequireDefault(require("./css/ReplyComposer.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ReplyComposer(props) {
+  var customStyle = props.customStyle,
+      id = props.id,
+      content = props.content,
+      EDITORURL = props.EDITORURL,
+      placeHolder = props.placeHolder,
+      features = props.features,
+      formats = props.formats,
+      suggestions = props.suggestions,
+      isHTMLContent = props.isHTMLContent,
+      onChange = props.onChange,
+      propOnKeyDown = props.onKeyDown,
+      onPaste = props.onPaste,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps,
+      extensions = props.extensions,
+      _props$files = props.files,
+      files = _props$files === void 0 ? _emptyConstants.dummyArray : _props$files,
+      filesDescription = props.filesDescription,
+      onChangeFileDescription = props.onChangeFileDescription,
+      propOnFileCancel = props.onFileCancel,
+      propOnFileSubmit = props.onFileSubmit,
+      attachmentPreviewTexts = props.attachmentPreviewTexts,
+      renderHeader = props.renderHeader,
+      renderFooter = props.renderFooter,
+      renderStencils = props.renderStencils,
+      propGetEditorState = props.getEditorState,
+      needFooter = props.needFooter;
+  var _customProps$replyEdi = customProps.replyEditorSuggestionsProps,
+      replyEditorSuggestionsProps = _customProps$replyEdi === void 0 ? _emptyConstants.dummyObject : _customProps$replyEdi,
+      _customProps$replyCom = customProps.replyComposerFooterProps,
+      replyComposerFooterProps = _customProps$replyCom === void 0 ? _emptyConstants.dummyObject : _customProps$replyCom;
+
+  var _useReplyComposerSugg = (0, _useReplyComposerSuggestions["default"])({
+    features: features,
+    suggestions: suggestions,
+    isHTMLContent: isHTMLContent
+  }),
+      allFeatures = _useReplyComposerSugg.features,
+      suggestionsMapping = _useReplyComposerSugg.suggestionsMapping,
+      suggestionDetails = _useReplyComposerSugg.suggestionDetails,
+      isShowSuggestion = _useReplyComposerSugg.isShowSuggestion,
+      getSuggetPopupMethods = _useReplyComposerSugg.getSuggetPopupMethods,
+      onHideSuggestions = _useReplyComposerSugg.onHideSuggestions,
+      onSuggestPopupKeyDown = _useReplyComposerSugg.onSuggestPopupKeyDown,
+      onSelectSuggestion = _useReplyComposerSugg.onSelectSuggestion;
+
+  var _useReplyComposer = (0, _useReplyComposer2["default"])({
+    onKeyDown: propOnKeyDown,
+    isShowSuggestion: isShowSuggestion,
+    onSuggestPopupKeyDown: onSuggestPopupKeyDown,
+    EDITORURL: EDITORURL,
+    onPaste: onPaste,
+    customProps: customProps,
+    onFileCancel: propOnFileCancel,
+    onFileSubmit: propOnFileSubmit,
+    getEditorState: propGetEditorState
+  }),
+      getEditorState = _useReplyComposer.getEditorState,
+      editor = _useReplyComposer.editor,
+      onKeyDown = _useReplyComposer.onKeyDown,
+      attachmentPreviewCustomProps = _useReplyComposer.attachmentPreviewCustomProps,
+      replyEditorCustomProps = _useReplyComposer.replyEditorCustomProps,
+      onFileCancel = _useReplyComposer.onFileCancel,
+      onFileSubmit = _useReplyComposer.onFileSubmit,
+      isLoading = _useReplyComposer.isLoading,
+      isLoaded = _useReplyComposer.isLoaded;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyComposerModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    isLoaded: isLoaded
+  }, newStyle),
+      replEditorWrapperClass = _cssJSLogic.replEditorWrapperClass;
+
+  var headerElement = (0, _react.useMemo)(function () {
+    return (0, _renderHandler["default"])(renderHeader)();
+  }, [renderHeader]);
+  var stencilsElement = (0, _react.useMemo)(function () {
+    return isLoading ? (0, _renderHandler["default"])(renderStencils)({
+      needFooter: needFooter
+    }) : null;
+  }, [renderStencils, needFooter, isLoading]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: newStyle.replyComposer,
+    isCover: false
+  }, isShowSuggestion ? /*#__PURE__*/_react["default"].createElement(_ReplyEditorSuggestions["default"], _extends({
+    getMethods: getSuggetPopupMethods,
+    onClose: onHideSuggestions,
+    onSelect: onSelectSuggestion,
+    suggestionDetails: suggestionDetails,
+    suggestionsMapping: suggestionsMapping
+  }, replyEditorSuggestionsProps)) : null, files.length > 0 ? /*#__PURE__*/_react["default"].createElement(_AttachmentPreview["default"], _extends({
+    descriptionDetails: filesDescription,
+    files: files,
+    isDescriptionNeeded: true,
+    needEditImage: false,
+    onCancel: onFileCancel,
+    onDescriptionChange: onChangeFileDescription,
+    onSubmit: onFileSubmit,
+    texts: attachmentPreviewTexts
+  }, attachmentPreviewCustomProps)) : null, isLoaded ? headerElement : null, stencilsElement || null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: replEditorWrapperClass
+  }, /*#__PURE__*/_react["default"].createElement(_ReplyEditor["default"], _extends({
+    content: content,
+    EDITORURL: EDITORURL,
+    features: allFeatures,
+    formats: formats,
+    getEditorState: getEditorState,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    placeHolder: placeHolder
+  }, replyEditorCustomProps))), needFooter && isLoaded ? /*#__PURE__*/_react["default"].createElement(_ReplyComposerFooter["default"], _extends({
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent,
+    renderButtons: renderFooter
+  }, replyComposerFooterProps)) : null);
+}
+
+ReplyComposer.propTypes = _propTypes["default"];
+ReplyComposer.defaultProps = _defaultProps["default"];
+ReplyComposer.displayName = 'ReplyComposer';

package/lib/im/ReplyComposer/css/ReplyComposer.module.css

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

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style) {
+  var isLoaded = props.isLoaded;
+  var replEditorWrapperClass = (0, _utils.compileClassNames)(_defineProperty({}, style.hidden, !isLoaded));
+  return {
+    replEditorWrapperClass: replEditorWrapperClass
+  };
+}

package/lib/im/ReplyComposer/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyComposer", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyComposer["default"];
+  }
+});
+
+var _ReplyComposer = _interopRequireDefault(require("./ReplyComposer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyComposer/props/defaultProps.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var replyComposerDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  needFooter: true
+};
+var _default = replyComposerDefaultProps;
+exports["default"] = _default;

package/lib/im/ReplyComposer/props/propTypes.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _editorPropConstants = require("../../../constants/propConstants/editorPropConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var replyComposerPropTypes = {
+  customStyle: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  content: _propTypes["default"].string.isRequired,
+  EDITORURL: _propTypes["default"].string,
+  placeHolder: _propTypes["default"].string,
+  features: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_editorPropConstants.features)),
+  formats: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(_editorPropConstants.formats)),
+  suggestions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    allowSpace: _propTypes["default"].bool,
+    componentProps: _propTypes["default"].object,
+    popupProps: _propTypes["default"].object,
+    renderItem: _propTypes["default"].func,
+    trigger: _propTypes["default"].string
+  })),
+  isHTMLContent: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired,
+  onKeyDown: _propTypes["default"].func,
+  onPaste: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    attachmentPreviewProps: _propTypes["default"].object,
+    replyComposerFooterProps: _propTypes["default"].object,
+    replyEditorProps: _propTypes["default"].object,
+    replyEditorSuggestionsProps: _propTypes["default"].object
+  }),
+  extensions: _propTypes["default"].shape({
+    details: _propTypes["default"].objectOf(_propTypes["default"].shape({
+      componentProps: _propTypes["default"].object,
+      id: _propTypes["default"].string,
+      renderItem: _propTypes["default"].func
+    })),
+    order: _propTypes["default"].array
+  }),
+  files: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string,
+    size: _propTypes["default"].string,
+    type: _propTypes["default"].string,
+    url: _propTypes["default"].string
+  })),
+  filesDescription: _propTypes["default"].object,
+  onChangeFileDescription: _propTypes["default"].func,
+  onFileCancel: _propTypes["default"].func,
+  onFileSubmit: _propTypes["default"].func,
+  attachmentPreviewTexts: _propTypes["default"].shape({
+    cancelText: _propTypes["default"].string,
+    editText: _propTypes["default"].string,
+    placeHolder: _propTypes["default"].string,
+    submitText: _propTypes["default"].string
+  }),
+  renderHeader: _propTypes["default"].func,
+  renderFooter: _propTypes["default"].func,
+  getEditorState: _propTypes["default"].func
+};
+var _default = replyComposerPropTypes;
+exports["default"] = _default;

package/lib/im/ReplyComposerFooter/ReplyComposerFooter.js

@@ -0,0 +1,64 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyComposerFooter;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ReplyEditorExtensions = _interopRequireDefault(require("../ReplyEditorExtensions/ReplyEditorExtensions"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _renderHandler = _interopRequireDefault(require("@zohoim/chat-components-utils/es/common/renderHandler"));
+
+var _ReplyComposerFooterModule = _interopRequireDefault(require("./css/ReplyComposerFooter.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Methods *** */
+
+/** ** Styles *** */
+function ReplyComposerFooter(props) {
+  var customStyle = props.customStyle,
+      editor = props.editor,
+      isHTMLContent = props.isHTMLContent,
+      extensions = props.extensions,
+      renderButtons = props.renderButtons;
+  /* External customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyComposerFooterModule["default"], customStyle);
+  var footerButtons = (0, _react.useMemo)(function () {
+    return (0, _renderHandler["default"])(renderButtons)();
+  }, [renderButtons]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: newStyle.replyComposerFooter
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ReplyEditorExtensions["default"], {
+    editor: editor,
+    extensions: extensions,
+    isHTMLContent: isHTMLContent
+  })), footerButtons || null);
+}
+
+ReplyComposerFooter.propTypes = _propTypes["default"];
+ReplyComposerFooter.defaultProps = _defaultProps["default"];
+ReplyComposerFooter.displayName = 'ReplyComposerFooter';

package/lib/im/ReplyComposerFooter/css/ReplyComposerFooter.module.css

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

package/lib/im/ReplyComposerFooter/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ReplyComposerFooter", {
+  enumerable: true,
+  get: function get() {
+    return _ReplyComposerFooter["default"];
+  }
+});
+
+var _ReplyComposerFooter = _interopRequireDefault(require("./ReplyComposerFooter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/im/ReplyComposerFooter/props/defaultProps.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _constants = require("@zohoim/chat-components-utils/es/constants");
+
+/** ** Constants *** */
+var replyComposerFooterDefaultProps = {
+  customStyle: _constants.dummyObject,
+  isHTMLContent: _constants.dummyArray,
+  extensions: _constants.dummyArray
+};
+var _default = replyComposerFooterDefaultProps;
+exports["default"] = _default;

package/lib/im/ReplyComposerFooter/props/propTypes.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var replyComposerFooterPropTypes = {
+  customStyle: _propTypes["default"].object,
+  editor: _propTypes["default"].object.isRequired,
+  isHTMLContent: _propTypes["default"].bool,
+  extensions: _propTypes["default"].shape({
+    details: _propTypes["default"].objectOf(_propTypes["default"].shape({
+      componentProps: _propTypes["default"].object,
+      id: _propTypes["default"].string,
+      renderItem: _propTypes["default"].func
+    })),
+    order: _propTypes["default"].array
+  }).isRequired,
+  renderButtons: _propTypes["default"].func
+};
+var _default = replyComposerFooterPropTypes;
+exports["default"] = _default;

package/lib/im/ReplyEditor/ReplyEditor.js

@@ -0,0 +1,124 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ReplyEditor;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Editor = _interopRequireDefault(require("../../rte/Editor/Editor"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useReplyEditor2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/im/ReplyEditor/useReplyEditor"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
+
+var _ReplyEditorModule = _interopRequireDefault(require("./css/ReplyEditor.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function ReplyEditor(props) {
+  var id = props.id,
+      content = props.content,
+      EDITORURL = props.EDITORURL,
+      placeHolder = props.placeHolder,
+      features = props.features,
+      formats = props.formats,
+      isHTMLContent = props.isHTMLContent,
+      onChange = props.onChange,
+      onKeyDown = props.onKeyDown,
+      onPaste = props.onPaste,
+      onEnter = props.onEnter,
+      propOnErrorCallback = props.onErrorCallback,
+      propOnReadyCallback = props.onReadyCallback,
+      customStyle = props.customStyle,
+      _props$customProps = props.customProps,
+      customProps = _props$customProps === void 0 ? _emptyConstants.dummyObject : _props$customProps,
+      getEditorState = props.getEditorState,
+      themeVariables = props.themeVariables;
+  var _customProps$editorPr = customProps.editorProps,
+      editorProps = _customProps$editorPr === void 0 ? _emptyConstants.dummyObject : _customProps$editorPr;
+  var _editorProps$customSt = editorProps.customStyle,
+      editorCustomStyle = _editorProps$customSt === void 0 ? _emptyConstants.dummyObject : _editorProps$customSt;
+
+  var _useReplyEditor = (0, _useReplyEditor2["default"])({
+    onErrorCallback: propOnErrorCallback,
+    onReadyCallback: propOnReadyCallback,
+    getEditorState: getEditorState,
+    onEnter: onEnter,
+    themeVariables: themeVariables
+  }),
+      onReadyCallback = _useReplyEditor.onReadyCallback,
+      onErrorCallback = _useReplyEditor.onErrorCallback,
+      isRenderEditor = _useReplyEditor.isRenderEditor,
+      isShowEditor = _useReplyEditor.isShowEditor,
+      appearance = _useReplyEditor.appearance,
+      isRTL = _useReplyEditor.isRTL;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_ReplyEditorModule["default"], customStyle);
+  /* CSS classnames added based on logic */
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])(props, newStyle, {
+    isShowEditor: isShowEditor
+  }),
+      editorClass = _cssJSLogic.editorClass;
+
+  var editorNewCustomStyle = (0, _react.useMemo)(function () {
+    return _objectSpread({
+      editorWrapper: newStyle.editorWrapper,
+      editor: newStyle.editor,
+      $editableDiv: newStyle.editableDiv
+    }, editorCustomStyle);
+  }, [newStyle, editorCustomStyle]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: newStyle.replyEditor
+  }, isRenderEditor ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    className: editorClass
+  }, /*#__PURE__*/_react["default"].createElement(_Editor["default"], _extends({
+    appearance: appearance,
+    content: content,
+    customStyle: editorNewCustomStyle,
+    EDITORURL: EDITORURL,
+    features: features,
+    formats: formats,
+    id: id,
+    isHTMLContent: isHTMLContent,
+    isRTL: isRTL,
+    onChange: onChange,
+    onErrorCallback: onErrorCallback,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    onReadyCallback: onReadyCallback,
+    placeHolder: placeHolder
+  }, editorProps))) : null);
+}
+
+ReplyEditor.propTypes = _propTypes["default"];
+ReplyEditor.defaultProps = _defaultProps["default"];
+ReplyEditor.displayName = 'ReplyEditor';

package/lib/im/ReplyEditor/css/ReplyEditor.module.css

@@ -0,0 +1,54 @@
+/** ** Styles *** */
+
+.replyEditor {
+  /** ** Use this class for css customisations *** */
+}
+
+.hiddenEditor {
+  /** ** Use this class for css customisations *** */
+  /* display: none; */
+  /* visibility: hidden; */
+}
+
+.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;
+
+  --rte-text-color: var(--imlib_chat_components_reply_editor_color) !important;
+  --rte-bg-color: var(--imlib_chat_components_reply_editor_bg) !important;
+  --rte-placeholder-color: var(
+    --imlib_chat_components_reply_editor_placeholder_color
+  ) !important;
+  --rte-link-text-color: var(
+    --imlib_chat_components_replyEditor_color
+  ) !important;
+
+  padding: var(--zd_size16)  !important;
+  cursor: text !important;
+}	
+
+div.editableDiv[contenteditable="true"]{
+  outline-offset: -5px !important;
+}
+
+.editorWrapper {
+  /** ** Use this class for css customisations *** */
+}
+
+.editor {
+  /** ** Use this class for css customisations *** */
+}
+
+.replyEditor :global(.prosemirror-suggestion) {
+  text-decoration: none !important;
+}

package/lib/im/ReplyEditor/css/cssJSLogic.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(props, style, state) {
+  var editorClass = (0, _utils.compileClassNames)(_defineProperty({}, style.hiddenEditor, !state.isShowEditor));
+  return {
+    editorClass: editorClass
+  };
+}