@sendbird/uikit-react 3.4.1 → 3.4.2-rc.0

package/cjs/ui/ContextMenu.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var reactDom = require('react-dom');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../index-7ee909f2.js');
-var ui_Label = require('../index-8ebb9a4f.js');
-require('../uuid-761f81d7.js');
+var index = require('../index-fc79ad3a.js');
+var ui_Label = require('../index-dd7ec381.js');
+require('../uuid-198051be.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
+require('../stringSet-1839b1fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/DateSeparator.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var React = require('react');
-var color = require('../color-6a2b057a.js');
-var ui_Label = require('../index-8ebb9a4f.js');
+var color = require('../color-013f33a2.js');
+var ui_Label = require('../index-dd7ec381.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
+require('../stringSet-1839b1fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/EmojiReactions.js

@@ -8,17 +8,17 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../index-7ee909f2.js');
-var LocalizationContext = require('../LocalizationContext-2b7cabce.js');
-require('../tslib.es6-c82f2d66.js');
-require('../index-8ebb9a4f.js');
+var index = require('../index-fc79ad3a.js');
+var LocalizationContext = require('../LocalizationContext-4a78a0ea.js');
+require('../tslib.es6-c87db7c9.js');
+require('../index-dd7ec381.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
+require('../stringSet-1839b1fa.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-761f81d7.js');
+require('../uuid-198051be.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-fed2e7d2.js');
+require('../index-62390ff2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/FileMessageItemBody.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-8ebb9a4f.js');
+var ui_Label = require('../index-dd7ec381.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../index-7ee909f2.js');
-var color = require('../color-6a2b057a.js');
-var MediaQueryContext = require('../MediaQueryContext-6aaaad96.js');
+var index = require('../index-fc79ad3a.js');
+var color = require('../color-013f33a2.js');
+var MediaQueryContext = require('../MediaQueryContext-3529b68c.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
-require('../tslib.es6-c82f2d66.js');
+require('../stringSet-1839b1fa.js');
+require('../tslib.es6-c87db7c9.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/FileViewer.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('../LocalizationContext-2b7cabce.js');
-var index = require('../index-4806f5ef.js');
-var index$1 = require('../index-7ee909f2.js');
+var LocalizationContext = require('../LocalizationContext-4a78a0ea.js');
+var index = require('../index-d1d7e169.js');
+var index$1 = require('../index-fc79ad3a.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-8ebb9a4f.js');
+var ui_Label = require('../index-dd7ec381.js');
 var ui_Icon = require('./Icon.js');
-require('../stringSet-b5fd0b8e.js');
-require('../index-fed2e7d2.js');
-require('../tslib.es6-c82f2d66.js');
+require('../stringSet-1839b1fa.js');
+require('../index-62390ff2.js');
+require('../tslib.es6-c87db7c9.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../uuid-761f81d7.js');
+require('../uuid-198051be.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../index-8ebb9a4f.js');
+var ui_Label = require('../index-dd7ec381.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
+require('../stringSet-1839b1fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Label.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('prop-types');
-var ui_Label = require('../index-8ebb9a4f.js');
-require('../stringSet-b5fd0b8e.js');
+var ui_Label = require('../index-dd7ec381.js');
+require('../stringSet-1839b1fa.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var ui_Label = require('../index-8ebb9a4f.js');
-require('../stringSet-b5fd0b8e.js');
+var ui_Label = require('../index-dd7ec381.js');
+require('../stringSet-1839b1fa.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 require('prop-types');

package/cjs/ui/MentionLabel.js

@@ -2,29 +2,29 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-8ebb9a4f.js');
+var ui_Label = require('../index-dd7ec381.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-c82f2d66.js');
+require('../tslib.es6-c87db7c9.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-761f81d7.js');
-require('../index-7ee909f2.js');
+require('../uuid-198051be.js');
+require('../index-fc79ad3a.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-b5fd0b8e.js');
-require('../LocalizationContext-2b7cabce.js');
-require('../index-fed2e7d2.js');
-require('../UserProfileContext-eb29f213.js');
+require('../stringSet-1839b1fa.js');
+require('../LocalizationContext-4a78a0ea.js');
+require('../index-62390ff2.js');
+require('../UserProfileContext-60133216.js');
 require('../sendbirdSelectors.js');
-require('../topics-96919a2d.js');
-require('../utils-bdefdab4.js');
+require('../topics-a653d662.js');
+require('../utils-afa7dd3a.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('./Button.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-1fe24c6a.js');
+require('../_rollupPluginBabelHelpers-7b94fb74.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -71,7 +71,9 @@ function MentionLabel(props) {
         onClick: function () {
           return fetchUser(toggleDropdown);
         },
-        ref: mentionRef
+        ref: mentionRef,
+        "data-userid": mentionedUserId,
+        "data-nickname": mentionedUserNickname
       }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
         type: ui_Label.LabelTypography.CAPTION_1,
         color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1

package/cjs/ui/MentionLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  )\n}\n"],"names":["MentionLabel","props","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","_a","config","sdk","_c","_b","stores","sdkStore","amIBeingMentioned","_d","useState","user","setUser","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","ContextMenu","concat","Label","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","MenuItems","paddingTop","paddingBottom","UserProfile"],"mappings":"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"}
+{"version":3,"file":"MentionLabel.js","sources":["../../../src/ui/MentionLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useCallback,\n} from 'react';\nimport type { User } from '@sendbird/chat';\n\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport UserProfile from '../UserProfile';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\n\ninterface MentionLabelProps {\n  mentionTemplate: string;\n  mentionedUserId: string;\n  mentionedUserNickname: string;\n  isByMe: boolean;\n}\n\nexport default function MentionLabel(props: MentionLabelProps): JSX.Element {\n  const {\n    mentionTemplate,\n    mentionedUserId,\n    mentionedUserNickname,\n    isByMe,\n  } = props;\n\n  const mentionRef = useRef();\n\n  const sendbirdState = useSendbirdStateContext();\n  const userId = sendbirdState?.config?.userId;\n  const sdk = sendbirdState?.stores?.sdkStore?.sdk;\n  const amIBeingMentioned = userId === mentionedUserId;\n  const [user, setUser] = useState<User| null>();\n  const fetchUser = useCallback(\n    (toggleDropdown) => {\n      if (user || !sdk?.createApplicationUserListQuery) {\n        toggleDropdown();\n        return;\n      }\n      const query = sdk?.createApplicationUserListQuery({\n        userIdsFilter: [mentionedUserId],\n      });\n      query.next().then((members) => {\n        if (members?.length > 0) {\n          setUser(members[0]);\n        }\n        toggleDropdown();\n      });\n    },\n    [sdk, mentionedUserId],\n  );\n  return (\n    <ContextMenu\n      menuTrigger={(toggleDropdown: () => void): ReactElement => (\n        <a\n          className={`\n            sendbird-word__mention\n            ${amIBeingMentioned ? 'sendbird-word__mention--me' : ''}\n          `}\n          onClick={() => fetchUser(toggleDropdown)}\n          ref={mentionRef}\n          data-userid={mentionedUserId}\n          data-nickname={mentionedUserNickname}\n        >\n          <Label\n            type={LabelTypography.CAPTION_1}\n            color={isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1}\n          >\n            {`${mentionTemplate}${mentionedUserNickname}`}\n          </Label>\n        </a>\n      )}\n      menuItems={(closeDropdown: () => void): ReactElement => (\n        <MenuItems\n          /**\n          * parentRef: For catching location(x, y) of MenuItems\n          * parentContainRef: For toggling more options(menus & reactions)\n          */\n          parentRef={mentionRef}\n          parentContainRef={mentionRef}\n          closeDropdown={closeDropdown}\n          style={{ paddingTop: '0px', paddingBottom: '0px' }}\n        >\n          <UserProfile\n            user={user}\n            onSuccess={closeDropdown}\n            currentUserId={userId}\n          />\n        </MenuItems>\n      )}\n    />\n  )\n}\n"],"names":["MentionLabel","props","mentionTemplate","mentionedUserId","mentionedUserNickname","isByMe","mentionRef","useRef","sendbirdState","useSendbirdStateContext","userId","_a","config","sdk","_c","_b","stores","sdkStore","amIBeingMentioned","_d","useState","user","setUser","fetchUser","useCallback","toggleDropdown","createApplicationUserListQuery","query","userIdsFilter","next","then","members","length","React","ContextMenu","concat","Label","LabelTypography","CAPTION_1","LabelColors","ONCONTENT_1","ONBACKGROUND_1","closeDropdown","MenuItems","paddingTop","paddingBottom","UserProfile"],"mappings":"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"}

package/cjs/ui/MessageContent.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-1fe24c6a.js');
-var tslib_es6 = require('../tslib.es6-c82f2d66.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-7b94fb74.js');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
 var React = require('react');
-var index$1 = require('../index-bd9302c1.js');
+var index$1 = require('../index-6e61e3cb.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-da2fb7d0.js');
+var ui_MessageStatus = require('../index-83b4a09d.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-8ebb9a4f.js');
+var ui_Label = require('../index-dd7ec381.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,33 +19,33 @@ var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../index-7ee909f2.js');
-var UserProfileContext = require('../UserProfileContext-eb29f213.js');
-var LocalizationContext = require('../LocalizationContext-2b7cabce.js');
+var index = require('../index-fc79ad3a.js');
+var UserProfileContext = require('../UserProfileContext-60133216.js');
+var LocalizationContext = require('../LocalizationContext-4a78a0ea.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-9d9e9ecd.js');
+var useLongPress = require('../useLongPress-064cd274.js');
 var ui_Icon = require('./Icon.js');
 var ui_BottomSheet = require('./BottomSheet.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var MediaQueryContext = require('../MediaQueryContext-6aaaad96.js');
+var MediaQueryContext = require('../MediaQueryContext-3529b68c.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-61e48909.js');
+var _const = require('../const-cbe8960c.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-require('../index-fed2e7d2.js');
-require('../uuid-761f81d7.js');
+require('../index-62390ff2.js');
+require('../uuid-198051be.js');
 require('prop-types');
 require('../sendbirdSelectors.js');
-require('../topics-96919a2d.js');
-require('../utils-bdefdab4.js');
+require('../topics-a653d662.js');
+require('../utils-afa7dd3a.js');
 require('./Button.js');
-require('../stringSet-b5fd0b8e.js');
+require('../stringSet-1839b1fa.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-619bfacc.js');
-require('../index-8a000ef2.js');
+require('../index-bbf06de5.js');
+require('../index-774288ff.js');
 require('./IconButton.js');
-require('../types-52f1dee2.js');
+require('../types-3bad691a.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./Tooltip.js');
@@ -55,13 +55,13 @@ require('./Word.js');
 require('./LinkLabel.js');
 require('./MentionLabel.js');
 require('./TextButton.js');
-require('../color-6a2b057a.js');
+require('../color-013f33a2.js');
 require('../withSendbird.js');
-require('../index-4806f5ef.js');
+require('../index-d1d7e169.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-d5c4102b.js');
-require('../consts-588c44a5.js');
+require('../index-31b40497.js');
+require('../consts-7dce68cd.js');
 require('../VoiceRecorder/context.js');
 require('../lame.all.js');
 require('./PlaybackTime.js');

package/cjs/ui/MessageInput.js

@@ -1,32 +1,195 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-1fe24c6a.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-7b94fb74.js');
 var React = require('react');
 var server = require('react-dom/server');
 var PropTypes = require('prop-types');
-var _const$1 = require('../const-5debbfef.js');
-var _const = require('../const-61e48909.js');
+var _const$1 = require('../const-427af1ce.js');
+var _const = require('../const-cbe8960c.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
 var ui_MentionUserLabel = require('./MentionUserLabel.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-8ebb9a4f.js');
-var LocalizationContext = require('../LocalizationContext-2b7cabce.js');
-var index = require('../index-7ee909f2.js');
-require('../tslib.es6-c82f2d66.js');
-require('../stringSet-b5fd0b8e.js');
-require('../index-fed2e7d2.js');
+var ui_Label = require('../index-dd7ec381.js');
+var LocalizationContext = require('../LocalizationContext-4a78a0ea.js');
+var index = require('../index-fc79ad3a.js');
+var DOMPurify = require('dompurify');
+var tslib_es6 = require('../tslib.es6-c87db7c9.js');
+require('../stringSet-1839b1fa.js');
+require('../index-62390ff2.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var DOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(DOMPurify);
 
 // https://davidwalsh.name/javascript-debounce-function
 
 const sanitizeString = str => str === null || str === void 0 ? void 0 : str.replace(/[\u00A0-\u9999<>]/gim, i => ''.concat('&#', i.charCodeAt(0), ';'));
 
+function inserTemplateToDOM(templateList) {
+  var nodes = templateList.map(function (template) {
+    var text = template.text,
+        userId = template.userId;
+
+    if (userId) {
+      return server.renderToString( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ui_MentionUserLabel, {
+        userId: userId
+      }, text)));
+    }
+
+    return sanitizeString(text);
+  }).join(' ') // add a space at the end of the mention, else cursor/caret wont work
+  .concat(' ');
+  document.execCommand('insertHTML', false, nodes);
+}
+
+var PASTE_NODE = 'sendbird-uikit__paste-node';
+var TEXT_MESSAGE_CLASS = 'sendbird-word';
+var MENTION_CLASS = 'sendbird-word__mention';
+var MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
+var MENTION_CLASS_COMBINED_QUERY = ".".concat(MENTION_CLASS, ", .").concat(MENTION_CLASS_IN_INPUT);
+
+function createPasteNode() {
+  var pasteNode = document.body.querySelector("#".concat(PASTE_NODE)); // remove existing paste node
+
+  if (pasteNode) {
+    pasteNode === null || pasteNode === void 0 ? void 0 : pasteNode.remove();
+  } // create new paste node and return
+
+
+  var node = document.createElement('div');
+  node.id = PASTE_NODE;
+  node.style.display = 'none';
+  return node;
+}
+function hasMention(parent) {
+  return (parent === null || parent === void 0 ? void 0 : parent.querySelector(MENTION_CLASS_COMBINED_QUERY)) ? true : false;
+}
+var extractTextFromNodes = function (nodes) {
+  var text = '';
+  nodes.forEach(function (node) {
+    // to preserve space between words
+    var textNodes = node.querySelectorAll(".".concat(TEXT_MESSAGE_CLASS));
+
+    if (textNodes.length > 0) {
+      text += extractTextFromNodes(Array.from(textNodes)) + ' ';
+    }
+
+    text += node.innerText + ' ';
+  });
+  return text;
+};
+function domToMessageTemplate(nodeArray) {
+  var templates = nodeArray === null || nodeArray === void 0 ? void 0 : nodeArray.reduce(function (accumulator, currentValue) {
+    var _a;
+
+    var mentionNode = currentValue.querySelector(MENTION_CLASS_COMBINED_QUERY); // sometimes the mention node is the parent node
+    // in this case querySelector will return null
+
+    if (!mentionNode) {
+      mentionNode = currentValue.classList.contains(MENTION_CLASS) // for nodes copied from message
+      || currentValue.classList.contains(MENTION_CLASS_IN_INPUT) // for nodes copied from input
+      ? currentValue : null;
+    }
+
+    var text = currentValue.innerText;
+
+    if (mentionNode) {
+      var userId = (_a = mentionNode.dataset) === null || _a === void 0 ? void 0 : _a.userid;
+      return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], accumulator, true), [{
+        text: text,
+        userId: userId
+      }], false);
+    }
+
+    return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], accumulator, true), [{
+      text: text
+    }], false);
+  }, []);
+  return templates;
+}
+function getUsersFromWords(templates, channel) {
+  var userMap = {};
+  var users = channel.members;
+  templates.forEach(function (template) {
+    if (template.userId) {
+      userMap[template.userId] = users.find(function (user) {
+        return user.userId === template.userId;
+      });
+    }
+  });
+  return Object.values(userMap);
+}
+
+// 1. paste simple text
+// 2. paste text with mention
+// 3. paste text with mention and text
+// 4. paste text with mention and text and paste again before and after
+// 5. copy message with mention(only one mention, no other text) and paste
+// 6. copy message with mention from input and paste(before and after)
+
+function usePaste(_a) {
+  var ref = _a.ref,
+      setIsInput = _a.setIsInput,
+      setHeight = _a.setHeight,
+      channel = _a.channel,
+      setMentionedUsers = _a.setMentionedUsers;
+  return React.useCallback(function (e) {
+    e.preventDefault();
+    var html = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text/html'); // simple text, continue as normal
+
+    if (!html) {
+      var text = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text');
+      document.execCommand('insertHTML', false, sanitizeString(text));
+      setIsInput(true);
+      setHeight();
+      return;
+    } // has html, check if there are mentions, sanitize and insert
+
+
+    var purifier = DOMPurify__default["default"](window);
+    var clean = purifier.sanitize(html);
+    var pasteNode = createPasteNode();
+    pasteNode.innerHTML = clean; // does not have mention, continue as normal
+
+    if (!hasMention(pasteNode)) {
+      // to preserve space between words
+      var text = extractTextFromNodes(Array.from(pasteNode.children));
+      document.execCommand('insertHTML', false, sanitizeString(text));
+      pasteNode.remove();
+      setIsInput(true);
+      setHeight();
+      return;
+    } // has mention, sanitize and insert
+
+
+    var childNodes = pasteNode.querySelectorAll(".".concat(TEXT_MESSAGE_CLASS));
+
+    if (pasteNode.querySelectorAll(".".concat(MENTION_CLASS_IN_INPUT)).length > 0) {
+      // @ts-ignore
+      childNodes = pasteNode.children;
+    }
+
+    var nodeArray = Array.from(childNodes); // handle paste when there is only one child
+
+    if (pasteNode.children.length === 1 && pasteNode.querySelectorAll(MENTION_CLASS_COMBINED_QUERY).length === 1) {
+      nodeArray = Array.from(pasteNode.children);
+    }
+
+    var words = domToMessageTemplate(nodeArray);
+    var mentionedUsers = getUsersFromWords(words, channel);
+    setMentionedUsers(mentionedUsers);
+    inserTemplateToDOM(words);
+    pasteNode.remove();
+    setIsInput(true);
+    setHeight();
+    return;
+  }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
+}
+
 const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
 const LINE_HEIGHT = 76;
 
@@ -84,6 +247,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
     onCancelEdit,
     onStartTyping,
     channelUrl,
+    channel,
     mentionSelectedUser,
     onUserMentioned,
     onMentionStringChange,
@@ -93,7 +257,8 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
     onKeyDown,
     renderFileUploadIcon,
     renderVoiceMessageIcon,
-    renderSendMessageIcon
+    renderSendMessageIcon,
+    setMentionedUsers
   } = props;
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
   const {
@@ -413,6 +578,14 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
     }
   };
 
+  const onPaste = usePaste({
+    ref,
+    setMentionedUserIds,
+    setMentionedUsers,
+    channel,
+    setIsInput,
+    setHeight
+  });
   return /*#__PURE__*/React__default["default"].createElement("form", {
     className: index.getClassName([className, isEdit ? 'sendbird-message-input__edit' : '', disabled ? 'sendbird-message-input-form__disabled' : ''])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -464,10 +637,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
       setIsInput((ref === null || ref === void 0 ? void 0 : (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : (_ref$current4$innerTe = _ref$current4.innerText) === null || _ref$current4$innerTe === void 0 ? void 0 : _ref$current4$innerTe.length) > 0);
       useMentionedLabelDetection();
     },
-    onPaste: e => {
-      e.preventDefault();
-      document.execCommand("insertHTML", false, sanitizeString(e === null || e === void 0 ? void 0 : e.clipboardData.getData('text')));
-    }
+    onPaste: onPaste
   }), !isInput && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-input--placeholder",
     type: ui_Label.LabelTypography.BODY_1,
@@ -554,6 +724,7 @@ MessageInput.propTypes = {
     userId: PropTypes__default["default"].string,
     nickname: PropTypes__default["default"].string
   }),
+  setMentionedUsers: PropTypes__default["default"].func,
   onUserMentioned: PropTypes__default["default"].func,
   onMentionStringChange: PropTypes__default["default"].func,
   onMentionedUserIdsUpdated: PropTypes__default["default"].func,