@zohoim/chat-components 1.0.9-beta.8 → 1.0.9-beta.9

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

@@ -0,0 +1,50 @@
+/** ** 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_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 {
+  /** ** Use this class for css customisations *** */
+}
+
+.editor {
+  /** ** Use this class for css customisations *** */
+}
+
+.replyEditor :global(.prosemirror-suggestion) {
+  text-decoration: none !important;
+}

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

@@ -0,0 +1,10 @@
+/** ** Methods *** */
+import { compileClassNames } from '@zohodesk/utils';
+export default function cssJSLogic(props, style, state) {
+  const editorClass = compileClassNames({
+    [style.hiddenEditor]: !state.isShowEditor
+  });
+  return {
+    editorClass
+  };
+}

package/es/im/ReplyEditor/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditor } from "./ReplyEditor";

package/es/im/ReplyEditor/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  themeVariables: dummyObject
+};
+export default replyEditorDefaultProps;

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

@@ -0,0 +1,27 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { features, formats } from "../../../constants/propConstants/editorPropConstants";
+const replyEditorPropTypes = {
+  customStyle: PropTypes.object,
+  id: PropTypes.string,
+  content: PropTypes.string.isRequired,
+  EDITORURL: PropTypes.string,
+  placeHolder: PropTypes.string,
+  features: PropTypes.arrayOf(PropTypes.oneOf(features)),
+  formats: PropTypes.arrayOf(PropTypes.oneOf(formats)),
+  isHTMLContent: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func,
+  onPaste: PropTypes.func,
+  onEnter: PropTypes.func,
+  onErrorCallback: PropTypes.func,
+  onReadyCallback: PropTypes.func,
+  themeVariables: PropTypes.object,
+  customProps: PropTypes.shape({
+    editorProps: PropTypes.object
+  }),
+  getEditorState: PropTypes.func
+};
+export default replyEditorPropTypes;

package/es/im/ReplyEditorExtensions/ReplyEditorExtensions.js

@@ -0,0 +1,149 @@
+/** ** Libraries *** */
+import React, { useCallback, useMemo } from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import IMAttachmentHandler from "../IMAttachmentHandler/IMAttachmentHandler";
+import EmojiPopup from "../../EmojiPopup/EmojiPopup";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditorExtensions from '@zohoim/chat-components-hooks/es/im/ReplyEditorExtensions/useReplyEditorExtensions';
+/** ** Constants *** */
+
+import { dummyArray, dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import replyEditorExtensionsDefaultProps from "./props/defaultProps";
+import replyEditorExtensionsPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorExtensions.module.css";
+export default function ReplyEditorExtensions(props) {
+  const {
+    customStyle,
+    extensions = dummyObject,
+    isHTMLContent,
+    editor
+  } = props;
+  const {
+    details = dummyObject,
+    order = dummyArray
+  } = extensions;
+  const handleRenderEmojiExtension = useCallback(_ref => {
+    let {
+      id,
+      onSelect,
+      onPopupOpen,
+      onPopupClose,
+      componentProps
+    } = _ref;
+    const {
+      needFocusOnSelect
+    } = componentProps;
+    return /*#__PURE__*/React.createElement(EmojiPopup, {
+      key: id,
+      onPopupClose: onPopupClose,
+      onPopupOpen: onPopupOpen,
+      onSelect: value => {
+        onSelect({
+          content: value,
+          needFocus: needFocusOnSelect
+        });
+      },
+      ...componentProps
+    });
+  }, []);
+  const handleRenderImageExtension = useCallback(_ref2 => {
+    let {
+      id,
+      componentProps
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+      key: id,
+      attachmentType: "image",
+      iconName: "ZD-TT-image",
+      iconSize: "14",
+      ...componentProps
+    });
+  }, []);
+  const handleRenderFileExtension = useCallback(_ref3 => {
+    let {
+      id,
+      componentProps
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(IMAttachmentHandler, {
+      key: id,
+      attachmentType: "document",
+      iconName: "ZD-TT-ttAttach",
+      iconSize: "14",
+      ...componentProps
+    });
+  }, []);
+  const defaultRenderMethod = useMemo(() => ({
+    emoji: {
+      id: 'emoji',
+      renderItem: handleRenderEmojiExtension
+    },
+    image: {
+      id: 'image',
+      renderItem: handleRenderImageExtension
+    },
+    file: {
+      id: 'file',
+      renderItem: handleRenderFileExtension
+    }
+  }), [handleRenderEmojiExtension, handleRenderFileExtension, handleRenderImageExtension]);
+  const {
+    onSelect,
+    onPopupOpen,
+    onPopupClose,
+    onRetainSelection,
+    onRemoveSelection
+  } = useReplyEditorExtensions({
+    extensions,
+    isHTMLContent,
+    editor
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: newStyle.replyEditorExtensions
+  }, order.map(extension => {
+    const {
+      id,
+      renderItem,
+      componentProps = dummyObject
+    } = details[extension] || {};
+    const {
+      renderItem: renderMethod
+    } = defaultRenderMethod[id] || dummyObject;
+    const props = {
+      id,
+      onSelect,
+      componentProps,
+      editor,
+      onPopupOpen,
+      onPopupClose,
+      onRetainSelection,
+      onRemoveSelection
+    };
+
+    if (renderItem) {
+      return /*#__PURE__*/React.createElement(Box, {
+        key: id
+      }, renderItem(props));
+    }
+
+    if (renderMethod) {
+      return /*#__PURE__*/React.createElement(Box, {
+        key: id
+      }, renderMethod(props));
+    }
+
+    return null;
+  }));
+}
+ReplyEditorExtensions.propTypes = replyEditorExtensionsPropTypes;
+ReplyEditorExtensions.defaultProps = replyEditorExtensionsDefaultProps;
+ReplyEditorExtensions.displayName = 'ReplyEditorExtensions';

package/es/im/ReplyEditorExtensions/css/ReplyEditorExtensions.module.css

@@ -0,0 +1,5 @@
+/** ** Styles *** */
+
+.replyEditorExtensions {
+  /** ** Use this class for css customisation *** */
+}

package/es/im/ReplyEditorExtensions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorExtensions } from "./ReplyEditorExtensions";

package/es/im/ReplyEditorExtensions/props/defaultProps.js

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorExtensionsDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyEditorExtensionsDefaultProps;

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

@@ -0,0 +1,16 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorExtensionsPropTypes = {
+  customStyle: PropTypes.object,
+  editor: PropTypes.object.isRequired,
+  isHTMLContent: PropTypes.bool,
+  extensions: PropTypes.shape({
+    details: PropTypes.objectOf(PropTypes.shape({
+      componentProps: PropTypes.object,
+      id: PropTypes.string,
+      renderItem: PropTypes.func
+    })),
+    order: PropTypes.array
+  }).isRequired
+};
+export default replyEditorExtensionsPropTypes;

package/es/im/ReplyEditorSuggestions/ReplyEditorSuggestions.js

@@ -0,0 +1,96 @@
+/** ** Libraries *** */
+import React, { useMemo, useCallback } from 'react';
+/** ** Components *** */
+
+import { Container } from '@zohodesk/components/es/Layout';
+import Emojis from "../../Emojis/Emojis";
+import ReplyEditorSuggestionsPopup from "../ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup";
+/** ** Hooks *** */
+
+import useReplyEditorSuggestions from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestions/useReplyEditorSuggestions';
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+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";
+export default function ReplyEditorSuggestions(props) {
+  const {
+    customStyle,
+    suggestionDetails = dummyObject,
+    suggestionsMapping,
+    onSelect,
+    customProps,
+    getMethods,
+    onClose
+  } = props;
+  const {
+    position = dummyObject
+  } = suggestionDetails;
+  const {
+    replyEditorSuggestionsPopupProps = dummyObject
+  } = customProps || dummyObject;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const handleRenderEmoji = useCallback(function () {
+    let {
+      onSelect,
+      searchText = '',
+      componentProps,
+      getMethods
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    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,
+      needAutoFocus: false,
+      onSelect: value => {
+        onSelect && onSelect({
+          content: value
+        });
+      },
+      searchString: searchText,
+      ...componentProps
+    }) : null;
+  }, []);
+  const defaultRenderMethod = useMemo(() => ({
+    ':': handleRenderEmoji,
+    [emojiRegex]: handleRenderEmoji
+  }), [handleRenderEmoji]);
+  const {
+    suggestionElement,
+    popupProps = dummyObject
+  } = useReplyEditorSuggestions({
+    defaultRenderMethod,
+    suggestionDetails,
+    suggestionsMapping,
+    onSelect,
+    getMethods,
+    onClose
+  });
+  return /*#__PURE__*/React.createElement(Container, {
+    className: newStyle.suggestionPopup
+  }, /*#__PURE__*/React.createElement(ReplyEditorSuggestionsPopup, {
+    isOutsideScrollBlocked: true,
+    onClose: onClose,
+    suggestionElement: suggestionElement,
+    targetPosition: position,
+    ...replyEditorSuggestionsPopupProps,
+    ...popupProps
+  }));
+}
+ReplyEditorSuggestions.propTypes = replyEditorSuggestionsPropTypes;
+ReplyEditorSuggestions.defaultProps = replyEditorSuggestionsDefaultProps;
+ReplyEditorSuggestions.displayName = 'ReplyEditorSuggestions';

package/es/im/ReplyEditorSuggestions/css/ReplyEditorSuggestions.module.css

@@ -0,0 +1,8 @@
+/** ** Styles *** */
+
+.suggestionPopup {
+  /** ** Use this class name for css customisation *** */
+  bottom: 100% ;
+  height: auto ;
+  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.13);
+}

package/es/im/ReplyEditorSuggestions/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorSuggestions } from "./ReplyEditorSuggestions";

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

@@ -0,0 +1,6 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const replyEditorSuggestionsDefaultProps = {
+  customStyle: dummyObject
+};
+export default replyEditorSuggestionsDefaultProps;

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

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const replyEditorSuggestionsPropTypes = {
+  customStyle: PropTypes.object,
+  suggestionDetails: PropTypes.shape({
+    editor: PropTypes.object,
+    searchText: PropTypes.string,
+    triggerDetails: PropTypes.shape({
+      trigger: PropTypes.string
+    })
+  }).isRequired,
+  suggestionsMapping: PropTypes.objectOf(PropTypes.shape({
+    componentProps: PropTypes.object,
+    popupProps: PropTypes.object,
+    renderItem: PropTypes.func
+  })).isRequired,
+  onSelect: PropTypes.func,
+  getMethods: PropTypes.func,
+  onClose: PropTypes.func
+};
+export default replyEditorSuggestionsPropTypes;

package/es/im/ReplyEditorSuggestionsPopup/ReplyEditorSuggestionsPopup.js

@@ -0,0 +1,90 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useReplyEditorSuggestionsPopup from '@zohoim/chat-components-hooks/es/im/ReplyEditorSuggestionsPopup/useReplyEditorSuggestionsPopup';
+/** ** Constants *** */
+
+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";
+/** ** Styles *** */
+
+import style from "./css/ReplyEditorSuggestionsPopup.module.css";
+export function ReplyEditorSuggestionsPopupComp(props) {
+  const {
+    customStyle,
+    targetPosition = dummyObject,
+    onClose,
+    popupSize,
+    customProps,
+    suggestionElement,
+    needPositionUpdate,
+    defaultPosition,
+
+    /** ** Popup Props *** */
+    getTargetRef,
+    getContainerRef,
+    position,
+    togglePopup,
+    isPopupReady,
+    isPopupOpen,
+    removeClose,
+    openPopupOnly,
+    closePopupOnly,
+    isAbsolutePositioningNeeded,
+    positionsOffset
+  } = props;
+  const {
+    dropBoxProps = dummyObject
+  } = customProps || dummyObject;
+  const {
+    targetElementStyle
+  } = useReplyEditorSuggestionsPopup({
+    suggestionElement,
+    targetPosition,
+    needPositionUpdate,
+    defaultPosition,
+    onClose,
+    openPopupOnly,
+    closePopupOnly,
+    isPopupOpen,
+    togglePopup
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: getTargetRef,
+    className: newStyle.hiddenTarget,
+    style: targetElementStyle
+  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
+    boxPosition: position,
+    customStyle: dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize,
+    ...dropBoxProps
+  }, suggestionElement) : null);
+}
+const ReplyEditorSuggestionsPopup = Popup(ReplyEditorSuggestionsPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+ReplyEditorSuggestionsPopupComp.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopupComp.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.propTypes = replyEditorSuggestionsPopupPropTypes;
+ReplyEditorSuggestionsPopup.defaultProps = replyEditorSuggestionsPopupDefaultProps;
+ReplyEditorSuggestionsPopup.displayName = 'ReplyEditorSuggestionsPopup';
+export default ReplyEditorSuggestionsPopup;

package/es/im/ReplyEditorSuggestionsPopup/css/ReplyEditorSuggestionsPopup.module.css

@@ -0,0 +1,7 @@
+/** ** Styles *** */
+.hiddenTarget {
+  height: var(--zd_size15) ;
+  width: var(--zd_size25) ;
+  visibility: hidden;
+  position: fixed;
+}

package/es/im/ReplyEditorSuggestionsPopup/index.js

@@ -0,0 +1 @@
+export { default as ReplyEditorSuggestionsPopup } from "./ReplyEditorSuggestionsPopup";

package/es/im/ReplyEditorSuggestionsPopup/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const replyEditorSuggestionsPopupDefaultProps = {
+  customStyle: dummyObject,
+  popupSize: 'xxlarge',
+  defaultPosition: 'bottomCenterToRight',
+  needPositionUpdate: true,
+  customOrder: ['bottomCenterToRight', 'bottomLeftToRight', 'topLeftToRight', 'topCenterToRight', 'rightTopToBottom', 'rightCenterToBottom', 'rightBottomToTop', 'rightCenterToTop', 'rightBottom', 'bottomRight', 'topRight', 'rightTop', 'bottomRightToLeft', 'bottomCenterToLeft', 'topRightToLeft', 'topCenterToLeft', 'rightCenter', 'bottomLeft', 'topLeft', 'bottomCenter', 'topCenter', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'leftBottom', 'leftTop']
+};
+export default replyEditorSuggestionsPopupDefaultProps;

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

@@ -0,0 +1,21 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { popupSize, popupPosition } from "../../../constants/propConstants/popupPropConstants";
+const replyEditorSuggestionsPopupPropTypes = {
+  customStyle: PropTypes.object,
+  targetPosition: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number
+  }).isRequired,
+  onClose: PropTypes.func,
+  popupSize: PropTypes.oneOf(popupSize),
+  customProps: PropTypes.shape({
+    dropBoxProps: PropTypes.object
+  }),
+  suggestionElement: PropTypes.element.isRequired,
+  needPositionUpdate: PropTypes.bool,
+  defaultPosition: PropTypes.oneOf(popupPosition)
+};
+export default replyEditorSuggestionsPopupPropTypes;

package/es/im/index.js

@@ -6,4 +6,11 @@ export * from "./IMMessageMetaInfo";
 export * from "./IMMessageContent";
 export * from "./IMTextBubble";
 export * from "./IMReplyBubble";
-export * from "./ArticleBubble";
+export * from "./ArticleBubble";
+export * from "./IMAttachmentHandler";
+export * from "./ReplyComposer";
+export * from "./ReplyEditor";
+export * from "./ReplyEditorSuggestions";
+export * from "./ReplyEditorExtensions";
+export * from "./ReplyComposerFooter";
+export * from "./ReplyEditorSuggestionsPopup";

package/es/index.js

@@ -25,8 +25,19 @@ export * from "./ReplyBubbleHeader";
 export * from "./LazyLoadImage";
 export * from "./ReplyBubbleContent";
 export * from "./MessageStatus";
-export * from "./im"; // ... export other components
-
+export * from "./im";
+export * from "./Emojis";
+export * from "./EmojisList";
+export * from "./Emoji";
+export * from "./EmojiPopup";
+export * from "./EmojisHeader";
+export * from "./EmojisFooter";
+export * from "./EmojisEmptyState";
+export * from "./rte";
+export * from "./AttachmentHandler";
+export * from "./AttachmentPreview";
+export * from "./AttachmentPreviewHeader";
+export * from "./AttachmentPreviewBody";
 /** * CONSTANTS ** */
 
 export * from "./constants";

package/es/rte/Editor/Editor.js

@@ -0,0 +1,80 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEditor from '@zohoim/chat-components-hooks/es/rte/Editor/useEditor';
+/** ** Constants *** */
+
+import editorDefaultProps from "./props/defaultProps";
+import editorPropTypes from "./props/propTypes";
+import { defaultEditorURL } from "../../constants";
+/** ** Styles *** */
+
+import style from "./css/Editor.module.css";
+export default function Editor(props) {
+  const {
+    customStyle,
+    id,
+    EDITORURL = defaultEditorURL,
+    content,
+    placeHolder,
+    isHTMLContent,
+    menuBarProps,
+    formats,
+    features,
+    needAutoFocus,
+    isReadOnly,
+    insertContentDetails,
+    customOptions,
+    onReadyCallback,
+    onErrorCallback,
+    onChange,
+    onKeyDown,
+    onPaste,
+    langCode,
+    appearance,
+    isRTL,
+    handlers,
+    domId: propDomId
+  } = props;
+  /* External CSS Customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const {
+    domId
+  } = useEditor({
+    id,
+    EDITORURL,
+    content,
+    placeHolder,
+    isHTMLContent,
+    menuBarProps,
+    formats,
+    className: newStyle.editableDiv,
+    features,
+    needAutoFocus,
+    isReadOnly,
+    insertContentDetails,
+    customOptions,
+    onReadyCallback,
+    onErrorCallback,
+    onChange,
+    onKeyDown,
+    onPaste,
+    langCode,
+    appearance,
+    isRTL,
+    handlers,
+    domId: propDomId
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: newStyle.editorWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: newStyle.editor,
+    id: domId
+  }));
+}
+Editor.propTypes = editorPropTypes;
+Editor.defaultProps = editorDefaultProps;
+Editor.displayName = 'Editor';