@sendbird/uikit-react 3.7.0 → 3.8.0

package/ui/MessageInput.js

@@ -1,635 +1,462 @@
-import { a as _objectSpread2 } from '../_rollupPluginBabelHelpers-e92eb032.js';
+import { _ as __assign, a as __spreadArray } from '../chunks/bundle-hKtwSqbO.js';
 import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../const-93731a4c.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../const-73db0277.js';
+import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../chunks/bundle-sOjc_nNQ.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-AI8e02c3.js';
 import IconButton from './IconButton.js';
-import Button from './Button.js';
-import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage } from '../index-6b3b1eca.js';
+import Button, { ButtonTypes, ButtonSizes } from './Button.js';
+import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage } from '../chunks/bundle-qunsoajv.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-92741c7e.js';
-import { u as useLocalization } from '../LocalizationContext-287ee149.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-wMgBBDf9.js';
+import { u as useLocalization } from '../chunks/bundle-v0OWADVv.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { p as arrayEqual, o as getClassName, q as getMimeTypesUIKitAccepts } from '../index-776554c0.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../tokenize-eae44765.js';
-import { K } from '../index-09847c0f.js';
-import { B as ButtonTypes, a as ButtonSizes } from '../types-9d43ac6e.js';
-import '../tslib.es6-c2fb729e.js';
-import '../stringSet-6422c6b9.js';
+import { G as arrayEqual, d as getClassName, H as getMimeTypesUIKitAccepts } from '../chunks/bundle-EHReigfD.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-cviP1IM2.js';
+import { K } from '../chunks/bundle-9KsbryQI.js';
 import 'dompurify';
-import '../consts-57c888b9.js';
-import '../consts-4ec7d640.js';
-import '../consts-be37687e.js';
-import '../index-e4277f9c.js';
+import '../chunks/bundle--F_1NyoU.js';
+import '../chunks/bundle-kp1MMNMf.js';
+import '../chunks/bundle-khKXutc3.js';
+import '../chunks/bundle-v9a1_z0P.js';
+import '../chunks/bundle-5yKxJk_M.js';
+import '../chunks/bundle-FTgSGiKe.js';
 import '../withSendbird.js';
 import '../utils/message/getOutgoingMessageState.js';
 
-/**
- * FIXME:
- * Import this ChannelType enum from @sendbird/chat
- * once MessageInput.spec unit tests can be run \wo jest <-> ESM issue
- */
-var ChannelType;
-(function (ChannelType) {
-  ChannelType["BASE"] = "base";
-  ChannelType["GROUP"] = "group";
-  ChannelType["OPEN"] = "open";
-})(ChannelType || (ChannelType = {}));
-/**
- * FIXME: Simplify this in UIKit@v4
- * If customer is using MessageInput inside our modules(ie: Channel, Thread, etc),
- * we should use the config from the module.
- * If customer is using MessageInput outside our modules(ie: custom UI),
- * we expect Channel to be undefined and customer gets control to show/hide file-upload.
- * @param {*} channel GroupChannel | OpenChannel
- * @param {*} config SendBirdStateConfig
- * @returns boolean
- */
-var checkIfFileUploadEnabled = function (_a) {
-  var channel = _a.channel,
-    config = _a.config;
-  var isEnabled = K(channel === null || channel === void 0 ? void 0 : channel.channelType).with(ChannelType.GROUP, function () {
-    var _a;
-    return (_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableDocument;
-  }).with(ChannelType.OPEN, function () {
-    var _a;
-    return (_a = config === null || config === void 0 ? void 0 : config.openChannel) === null || _a === void 0 ? void 0 : _a.enableDocument;
-  }).otherwise(function () {
-    return true;
-  });
-  return isEnabled;
+/**
+ * FIXME:
+ * Import this ChannelType enum from @sendbird/chat
+ * once MessageInput.spec unit tests can be run \wo jest <-> ESM issue
+ */
+var ChannelType;
+(function (ChannelType) {
+    ChannelType["BASE"] = "base";
+    ChannelType["GROUP"] = "group";
+    ChannelType["OPEN"] = "open";
+})(ChannelType || (ChannelType = {}));
+/**
+ * FIXME: Simplify this in UIKit@v4
+ * If customer is using MessageInput inside our modules(ie: Channel, Thread, etc),
+ * we should use the config from the module.
+ * If customer is using MessageInput outside our modules(ie: custom UI),
+ * we expect Channel to be undefined and customer gets control to show/hide file-upload.
+ * @param {*} channel GroupChannel | OpenChannel
+ * @param {*} config SendBirdStateConfig
+ * @returns boolean
+ */
+var checkIfFileUploadEnabled = function (_a) {
+    var channel = _a.channel, config = _a.config;
+    var isEnabled = K(channel === null || channel === void 0 ? void 0 : channel.channelType)
+        .with(ChannelType.GROUP, function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableDocument; })
+        .with(ChannelType.OPEN, function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.openChannel) === null || _a === void 0 ? void 0 : _a.enableDocument; })
+        .otherwise(function () { return true; });
+    return isEnabled;
 };
 
-const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
-const LINE_HEIGHT = 76;
-const noop = () => {};
-const displayCaret = (element, position) => {
-  const range = document.createRange();
-  const sel = window.getSelection();
-  range.setStart(element.childNodes[0], position);
-  range.collapse(true);
-  sel.removeAllRanges();
-  sel.addRange(range);
-  element.focus();
-};
-const resetInput = ref => {
-  try {
-    /* eslint-disable no-param-reassign */
-    ref.current.innerHTML = '';
-  } catch (_unused) {
-    //
-  }
-};
-const initialTargetStringInfo = {
-  targetString: '',
-  startNodeIndex: null,
-  startOffsetIndex: null,
-  endNodeIndex: null,
-  endOffsetIndex: null
-};
-const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _ref$current, _ref$current$textCont, _ref$current6;
-  const {
-    className,
-    messageFieldId,
-    isEdit,
-    isMentionEnabled,
-    isVoiceMessageEnabled,
-    isSelectingMultipleFilesEnabled,
-    disabled,
-    message,
-    placeholder,
-    maxLength,
-    onFileUpload,
-    onSendMessage,
-    onUpdateMessage,
-    onCancelEdit,
-    onStartTyping,
-    channelUrl,
-    channel,
-    mentionSelectedUser,
-    onUserMentioned,
-    onMentionStringChange,
-    onMentionedUserIdsUpdated,
-    onVoiceMessageIconClick,
-    onKeyUp,
-    onKeyDown,
-    renderFileUploadIcon,
-    renderVoiceMessageIcon,
-    renderSendMessageIcon,
-    setMentionedUsers,
-    acceptableMimeTypes
-  } = props;
-  const textFieldId = messageFieldId || TEXT_FIELD_ID;
-  const {
-    stringSet
-  } = useLocalization();
-  const {
-    config
-  } = useSendbirdStateContext();
-  const isFileUploadEnabled = checkIfFileUploadEnabled({
-    channel,
-    config
-  });
-  const fileInputRef = useRef(null);
-  const [isInput, setIsInput] = useState(false);
-  const [mentionedUserIds, setMentionedUserIds] = useState([]);
-  const [targetStringInfo, setTargetStringInfo] = useState(_objectSpread2({}, initialTargetStringInfo));
-  const setHeight = useMemo(() => () => {
-    try {
-      const elem = ref === null || ref === void 0 ? void 0 : ref.current;
-      const MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
-      if (elem && elem.scrollHeight >= LINE_HEIGHT) {
-        if (MAX_HEIGHT < elem.scrollHeight) {
-          elem.style.height = 'auto';
-          elem.style.height = `${MAX_HEIGHT}px`;
-        } else {
-          elem.style.height = 'auto';
-          elem.style.height = `${elem.scrollHeight}px`;
-        }
-      } else {
-        elem.style.height = '';
-      }
-    } catch (error) {
-      // error
-    }
-  }, []);
-
-  // #Edit mode
-  // for easilly initialize input value from outside, but
-  // useEffect(_, [channelUrl]) erase it
-  const initialValue = props === null || props === void 0 ? void 0 : props.value;
-  useEffect(() => {
-    var _textField$textConten;
-    const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    try {
-      textField.innerHTML = initialValue;
-      displayCaret(textField, initialValue === null || initialValue === void 0 ? void 0 : initialValue.length);
-    } catch (_unused2) {
-      //
-    }
-    setMentionedUserIds([]);
-    setIsInput((textField === null || textField === void 0 || (_textField$textConten = textField.textContent) === null || _textField$textConten === void 0 ? void 0 : _textField$textConten.trim().length) > 0);
-    setHeight();
-  }, [initialValue]);
-
-  // #Mention | Clear input value when channel changes
-  useEffect(() => {
-    if (!isEdit) {
-      setIsInput(false);
-      resetInput(ref);
-    }
-  }, [channelUrl]);
-
-  // #Mention & #Edit | Fill message input values
-  useEffect(() => {
-    if (isEdit && message !== null && message !== void 0 && message.messageId) {
-      var _message$mentionedUse, _message$mentionedMes, _textField$textConten2;
-      // const textField = document.getElementById(textFieldId);
-      const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-      if (isMentionEnabled && (message === null || message === void 0 || (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.length) > 0 && (message === null || message === void 0 || (_message$mentionedMes = message.mentionedMessageTemplate) === null || _message$mentionedMes === void 0 ? void 0 : _message$mentionedMes.length) > 0) {
-        /* mention enabled */
-        const {
-          mentionedUsers = []
-        } = message;
-        const tokens = tokenizeMessage({
-          messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
-          mentionedUsers
-        });
-        textField.innerHTML = tokens.map(token => {
-          if (token.type === TOKEN_TYPES.mention) {
-            const mentionedUser = mentionedUsers.find(user => user.userId === token.userId);
-            const nickname = `${USER_MENTION_PREFIX}${(mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.nickname) || token.value || stringSet.MENTION_NAME__NO_NAME}`;
-            return renderToString({
-              userId: token.userId,
-              nickname
-            });
-          }
-          return sanitizeString(token.value);
-        }).join(' ');
-      } else {
-        /* mention disabled */
-        try {
-          textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
-        } catch (_unused3) {
-          //
-        }
-        setMentionedUserIds([]);
-      }
-      setIsInput((textField === null || textField === void 0 || (_textField$textConten2 = textField.textContent) === null || _textField$textConten2 === void 0 ? void 0 : _textField$textConten2.trim().length) > 0);
-      setHeight();
-    }
-  }, [isEdit, message]);
-
-  // #Mention | Detect MentionedLabel modified
-  const useMentionedLabelDetection = useCallback(() => {
-    var _textField$textConten3;
-    const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    if (isMentionEnabled) {
-      const newMentionedUserIds = [...textField.getElementsByClassName('sendbird-mention-user-label')].map(node => {
-        var _node$dataset;
-        return node === null || node === void 0 || (_node$dataset = node.dataset) === null || _node$dataset === void 0 ? void 0 : _node$dataset.userid;
-      });
-      if (!arrayEqual(mentionedUserIds, newMentionedUserIds) || newMentionedUserIds.length === 0) {
-        onMentionedUserIdsUpdated(newMentionedUserIds);
-        setMentionedUserIds(newMentionedUserIds);
-      }
-    }
-    setIsInput(((_textField$textConten3 = textField.textContent) === null || _textField$textConten3 === void 0 ? void 0 : _textField$textConten3.trim().length) > 0);
-  }, [targetStringInfo, isMentionEnabled]);
-
-  // #Mention | Replace selected user nickname to the MentionedUserLabel
-  useEffect(() => {
-    if (isMentionEnabled && mentionSelectedUser) {
-      const {
-        targetString,
-        startNodeIndex,
-        startOffsetIndex,
-        endNodeIndex,
-        endOffsetIndex
-      } = targetStringInfo;
-      if (targetString && startNodeIndex !== null && startOffsetIndex !== null) {
-        var _document, _childNodes$startNode, _document2, _childNodes$endNodeIn;
-        // const textField = document.getElementById(textFieldId);
-        const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-        const childNodes = nodeListToArray(textField === null || textField === void 0 ? void 0 : textField.childNodes);
-        const frontTextNode = (_document = document) === null || _document === void 0 ? void 0 : _document.createTextNode((_childNodes$startNode = childNodes[startNodeIndex]) === null || _childNodes$startNode === void 0 ? void 0 : _childNodes$startNode.textContent.slice(0, startOffsetIndex));
-        const backTextNode = (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.createTextNode(`\u00A0${(_childNodes$endNodeIn = childNodes[endNodeIndex]) === null || _childNodes$endNodeIn === void 0 ? void 0 : _childNodes$endNodeIn.textContent.slice(endOffsetIndex)}`);
-        const mentionLabel = renderToString({
-          userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId,
-          nickname: `${USER_MENTION_TEMP_CHAR}${(mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME}`
-        });
-        const div = document.createElement('div');
-        div.innerHTML = mentionLabel;
-        const newNodes = [...childNodes.slice(0, startNodeIndex), frontTextNode, div.childNodes[0], backTextNode, ...childNodes.slice(endNodeIndex + 1)];
-        textField.innerHTML = '';
-        newNodes.forEach(newNode => {
-          textField.appendChild(newNode);
-        });
-        onUserMentioned(mentionSelectedUser);
-        if (window.getSelection || document.getSelection) {
-          // set caret postion
-          const selection = window.getSelection() || document.getSelection();
-          selection.removeAllRanges();
-          const range = new Range();
-          range.selectNodeContents(textField);
-          range.setStart(textField.childNodes[startNodeIndex + 2], 1);
-          range.setEnd(textField.childNodes[startNodeIndex + 2], 1);
-          range.collapse(false);
-          selection.addRange(range);
-          textField.focus();
-        }
-        setTargetStringInfo(_objectSpread2({}, initialTargetStringInfo));
-        setHeight();
-        useMentionedLabelDetection();
-      }
-    }
-  }, [mentionSelectedUser, isMentionEnabled]);
-
-  // #Mention | Detect mentioning user nickname
-  const useMentionInputDetection = useCallback(() => {
-    var _window, _window$getSelection, _document3, _document3$getSelecti;
-    const selection = ((_window = window) === null || _window === void 0 || (_window$getSelection = _window.getSelection) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.call(_window)) || ((_document3 = document) === null || _document3 === void 0 || (_document3$getSelecti = _document3.getSelection) === null || _document3$getSelecti === void 0 ? void 0 : _document3$getSelecti.call(_document3));
-    const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    if (selection.anchorNode === textField) {
-      onMentionStringChange('');
-    }
-    if (isMentionEnabled && selection && selection.anchorNode === selection.focusNode && selection.anchorOffset === selection.focusOffset) {
-      let textStack = '';
-      let startNodeIndex = null;
-      let startOffsetIndex = null;
-      for (let index = 0; index < textField.childNodes.length; index += 1) {
-        const currentNode = textField.childNodes[index];
-        if (currentNode.nodeType === NodeTypes.TextNode) {
-          /* text node */
-          const textContent = currentNode === selection.anchorNode ? (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent.slice(0, selection.anchorOffset)) || '' : (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) || '';
-          if (textStack.length > 0) {
-            textStack += textContent;
-          } else {
-            let charLastIndex = textContent.lastIndexOf(USER_MENTION_TEMP_CHAR);
-            for (let i = charLastIndex - 1; i > -1; i -= 1) {
-              if (textContent[i] === USER_MENTION_TEMP_CHAR) {
-                charLastIndex = i;
-              } else {
-                break;
-              }
-            }
-            if (charLastIndex > -1) {
-              textStack = textContent;
-              startNodeIndex = index;
-              startOffsetIndex = charLastIndex;
-            }
-          }
-        } else {
-          /* other nodes */
-          textStack = '';
-          startNodeIndex = null;
-          startOffsetIndex = null;
-        }
-        if (currentNode === selection.anchorNode) {
-          /**
-           * targetString could be ''
-           * startNodeIndex and startOffsetIndex could be null
-           */
-          const targetString = textStack ? textStack.slice(startOffsetIndex) : ''; // include template character
-          setTargetStringInfo({
-            targetString,
-            startNodeIndex,
-            startOffsetIndex,
-            endNodeIndex: index,
-            endOffsetIndex: selection.anchorOffset
-          });
-          onMentionStringChange(targetString);
-          return;
-        }
-      }
-    }
-  }, [isMentionEnabled]);
-  const sendMessage = () => {
-    const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    if (!isEdit && textField !== null && textField !== void 0 && textField.textContent) {
-      let messageText = '';
-      let mentionTemplate = '';
-      textField.childNodes.forEach(node => {
-        if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-          const {
-            innerText,
-            dataset = {}
-          } = node;
-          const {
-            userid = ''
-          } = dataset;
-          messageText += innerText;
-          mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
-        } else if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Br) {
-          messageText += '\n';
-          mentionTemplate += '\n';
-        } else if ((node === null || node === void 0 ? void 0 : node.nodeType) === NodeTypes.ElementNode && (node === null || node === void 0 ? void 0 : node.nodeName) === NodeNames.Div) {
-          // handles newline in safari
-          const {
-            textContent = ''
-          } = node;
-          messageText += `\n${textContent}`;
-          mentionTemplate += `\n${textContent}`;
-        } else {
-          // other nodes including text node
-          const {
-            textContent = ''
-          } = node;
-          messageText += textContent;
-          mentionTemplate += textContent;
-        }
-      });
-      const params = {
-        message: messageText,
-        mentionTemplate
-      };
-      onSendMessage(params);
-      resetInput(ref);
-      // important: keeps the keyboard open -> must add test on refactor
-      textField.focus();
-      setIsInput(false);
-      setHeight();
-    }
-  };
-  const isEditDisabled = !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current = _ref$current.textContent) !== null && _ref$current !== void 0 && _ref$current.trim());
-  const editMessage = () => {
-    const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    const messageId = message === null || message === void 0 ? void 0 : message.messageId;
-    if (isEdit && messageId) {
-      let messageText = '';
-      let mentionTemplate = '';
-      textField.childNodes.forEach(node => {
-        if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-          const {
-            innerText,
-            dataset = {}
-          } = node;
-          const {
-            userid = ''
-          } = dataset;
-          messageText += innerText;
-          mentionTemplate += `${USER_MENTION_TEMP_CHAR}{${userid}}`;
-          messageText += '\n';
-          mentionTemplate += '\n';
-        } else {
-          // other nodes including text node
-          const {
-            textContent = ''
-          } = node;
-          messageText += textContent;
-          mentionTemplate += textContent;
-        }
-      });
-      const params = {
-        messageId,
-        message: messageText,
-        mentionTemplate
-      };
-      onUpdateMessage(params);
-      resetInput(ref);
-    }
-  };
-  const onPaste = usePaste({
-    ref,
-    setMentionedUserIds,
-    setMentionedUsers,
-    channel,
-    setIsInput,
-    setHeight
-  });
-  return /*#__PURE__*/React__default.createElement("form", {
-    className: getClassName([className, isEdit ? 'sendbird-message-input__edit' : '', disabled ? 'sendbird-message-input-form__disabled' : ''])
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: getClassName(['sendbird-message-input', disabled ? 'sendbird-message-input__disabled' : ''])
-  }, /*#__PURE__*/React__default.createElement("div", {
-    id: `${textFieldId}${isEdit ? message === null || message === void 0 ? void 0 : message.messageId : ''}`,
-    className: `sendbird-message-input--textarea ${textFieldId}`,
-    contentEditable: !disabled,
-    role: "textbox",
-    "aria-label": "Text Input",
-    disabled: disabled,
-    ref: ref,
-    maxLength: maxLength,
-    onKeyDown: e => {
-      const preventEvent = onKeyDown(e);
-      if (preventEvent) {
-        e.preventDefault();
-      } else {
-        var _ref$current2, _e$nativeEvent, _ref$current3, _ref$current4, _ref$current$childNod;
-        if (!e.shiftKey && e.key === MessageInputKeys.Enter && (ref === null || ref === void 0 || (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || (_ref$current2 = _ref$current2.textContent) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.trim().length) > 0 && (e === null || e === void 0 || (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.isComposing) !== true) {
-          e.preventDefault();
-          sendMessage();
-        }
-        if (e.key === MessageInputKeys.Backspace && (ref === null || ref === void 0 || (_ref$current3 = ref.current) === null || _ref$current3 === void 0 || (_ref$current3 = _ref$current3.childNodes) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.length) === 2 && !(ref !== null && ref !== void 0 && (_ref$current4 = ref.current) !== null && _ref$current4 !== void 0 && (_ref$current4 = _ref$current4.childNodes) !== null && _ref$current4 !== void 0 && (_ref$current4 = _ref$current4[0]) !== null && _ref$current4 !== void 0 && _ref$current4.textContent) && (ref === null || ref === void 0 || (_ref$current$childNod = ref.current.childNodes) === null || _ref$current$childNod === void 0 || (_ref$current$childNod = _ref$current$childNod[1]) === null || _ref$current$childNod === void 0 ? void 0 : _ref$current$childNod.nodeType) === NodeTypes.ElementNode) {
-          ref === null || ref === void 0 || ref.current.removeChild(ref === null || ref === void 0 ? void 0 : ref.current.childNodes[1]);
-        }
-      }
-    },
-    onKeyUp: e => {
-      const preventEvent = onKeyUp(e);
-      if (preventEvent) {
-        e.preventDefault();
-      } else {
-        useMentionInputDetection();
-      }
-    },
-    onClick: () => {
-      useMentionInputDetection();
-    },
-    onInput: () => {
-      var _ref$current5;
-      setHeight();
-      onStartTyping();
-      setIsInput((ref === null || ref === void 0 || (_ref$current5 = ref.current) === null || _ref$current5 === void 0 || (_ref$current5 = _ref$current5.textContent) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.trim().length) > 0);
-      useMentionedLabelDetection();
-    },
-    onPaste: onPaste
-  }), ((_ref$current$textCont = ref === null || ref === void 0 || (_ref$current6 = ref.current) === null || _ref$current6 === void 0 || (_ref$current6 = _ref$current6.textContent) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.length) !== null && _ref$current$textCont !== void 0 ? _ref$current$textCont : 0) === 0 && /*#__PURE__*/React__default.createElement(Label, {
-    className: "sendbird-message-input--placeholder",
-    type: LabelTypography.BODY_1,
-    color: disabled ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_3
-  }, placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER), !isEdit && isInput && /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "sendbird-message-input--send",
-    height: "32px",
-    width: "32px",
-    onClick: () => sendMessage()
-  }, (renderSendMessageIcon === null || renderSendMessageIcon === void 0 ? void 0 : renderSendMessageIcon()) || /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.SEND,
-    fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
-    width: "20px",
-    height: "20px"
-  })), !isEdit && !isInput && ((renderFileUploadIcon === null || renderFileUploadIcon === void 0 ? void 0 : renderFileUploadIcon() // UIKit Dashboard configuration should have lower priority than
-  // renderFileUploadIcon which is set in code level
-  ) || isFileUploadEnabled && /*#__PURE__*/React__default.createElement(IconButton, {
-    className: `sendbird-message-input--attach ${isVoiceMessageEnabled ? 'is-voice-message-enabled' : ''}`,
-    height: "32px",
-    width: "32px",
-    onClick: () => {
-      var _fileInputRef$current, _fileInputRef$current2;
-      // todo: clear previous input
-      fileInputRef === null || fileInputRef === void 0 || (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || (_fileInputRef$current2 = _fileInputRef$current.click) === null || _fileInputRef$current2 === void 0 || _fileInputRef$current2.call(_fileInputRef$current);
-    }
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.ATTACH,
-    fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE,
-    width: "20px",
-    height: "20px"
-  }), /*#__PURE__*/React__default.createElement("input", {
-    className: "sendbird-message-input--attach-input",
-    type: "file",
-    ref: fileInputRef
-    // It will affect to <Channel /> and <Thread />
-    ,
-    onChange: event => {
-      const {
-        files
-      } = event.currentTarget;
-      onFileUpload(files && files.length === 1 ? [files[0]] : [...files]);
-      event.target.value = '';
-    },
-    accept: getMimeTypesUIKitAccepts(acceptableMimeTypes),
-    multiple: isSelectingMultipleFilesEnabled && isChannelTypeSupportsMultipleFilesMessage(channel)
-  }))), isVoiceMessageEnabled && !isEdit && !isInput && /*#__PURE__*/React__default.createElement(IconButton, {
-    className: "sendbird-message-input--voice-message",
-    width: "32px",
-    height: "32px",
-    onClick: onVoiceMessageIconClick
-  }, (renderVoiceMessageIcon === null || renderVoiceMessageIcon === void 0 ? void 0 : renderVoiceMessageIcon()) || /*#__PURE__*/React__default.createElement(Icon, {
-    type: IconTypes.AUDIO_ON_LINED,
-    fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE,
-    width: "20px",
-    height: "20px"
-  }))), isEdit && /*#__PURE__*/React__default.createElement("div", {
-    className: "sendbird-message-input--edit-action"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: "sendbird-message-input--edit-action__cancel",
-    type: ButtonTypes.SECONDARY,
-    size: ButtonSizes.SMALL,
-    onClick: onCancelEdit
-  }, stringSet.BUTTON__CANCEL), /*#__PURE__*/React__default.createElement(Button, {
-    className: "sendbird-message-input--edit-action__save",
-    type: ButtonTypes.PRIMARY,
-    size: ButtonSizes.SMALL,
-    disabled: isEditDisabled,
-    onClick: () => editMessage()
-  }, stringSet.BUTTON__SAVE)));
+var TEXT_FIELD_ID = 'sendbird-message-input-text-field';
+var LINE_HEIGHT = 76;
+var noop = function () {
+    return null;
+};
+var displayCaret = function (element, position) {
+    var range = document.createRange();
+    var sel = window.getSelection();
+    range.setStart(element.childNodes[0], position);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    element.focus();
+};
+var resetInput = function (ref) {
+    try {
+        ref.current.innerHTML = '';
+    }
+    catch (_a) {
+        //
+    }
+};
+var initialTargetStringInfo = {
+    targetString: '',
+    startNodeIndex: null,
+    startOffsetIndex: null,
+    endNodeIndex: null,
+    endOffsetIndex: null,
+};
+var MessageInput = React__default.forwardRef(function (props, externalRef) {
+    var _a, _b, _c, _d, _e;
+    var channel = props.channel, _f = props.className, className = _f === void 0 ? '' : _f, _g = props.messageFieldId, messageFieldId = _g === void 0 ? '' : _g, _h = props.isEdit, isEdit = _h === void 0 ? false : _h, _j = props.isMentionEnabled, isMentionEnabled = _j === void 0 ? false : _j, _k = props.isVoiceMessageEnabled, isVoiceMessageEnabled = _k === void 0 ? true : _k, _l = props.isSelectingMultipleFilesEnabled, isSelectingMultipleFilesEnabled = _l === void 0 ? false : _l, _m = props.disabled, disabled = _m === void 0 ? false : _m, _o = props.message, message = _o === void 0 ? null : _o, _p = props.placeholder, placeholder = _p === void 0 ? '' : _p, _q = props.maxLength, maxLength = _q === void 0 ? 5000 : _q, _r = props.onFileUpload, onFileUpload = _r === void 0 ? noop : _r, _s = props.onSendMessage, onSendMessage = _s === void 0 ? noop : _s, _t = props.onUpdateMessage, onUpdateMessage = _t === void 0 ? noop : _t, _u = props.onCancelEdit, onCancelEdit = _u === void 0 ? noop : _u, _v = props.onStartTyping, onStartTyping = _v === void 0 ? noop : _v, _w = props.channelUrl, channelUrl = _w === void 0 ? '' : _w, _x = props.mentionSelectedUser, mentionSelectedUser = _x === void 0 ? null : _x, _y = props.onUserMentioned, onUserMentioned = _y === void 0 ? noop : _y, _z = props.onMentionStringChange, onMentionStringChange = _z === void 0 ? noop : _z, _0 = props.onMentionedUserIdsUpdated, onMentionedUserIdsUpdated = _0 === void 0 ? noop : _0, _1 = props.onVoiceMessageIconClick, onVoiceMessageIconClick = _1 === void 0 ? noop : _1, _2 = props.onKeyUp, onKeyUp = _2 === void 0 ? noop : _2, _3 = props.onKeyDown, onKeyDown = _3 === void 0 ? noop : _3, _4 = props.renderFileUploadIcon, renderFileUploadIcon = _4 === void 0 ? noop : _4, _5 = props.renderVoiceMessageIcon, renderVoiceMessageIcon = _5 === void 0 ? noop : _5, _6 = props.renderSendMessageIcon, renderSendMessageIcon = _6 === void 0 ? noop : _6, _7 = props.setMentionedUsers, setMentionedUsers = _7 === void 0 ? noop : _7, _8 = props.acceptableMimeTypes, acceptableMimeTypes = _8 === void 0 ? null : _8;
+    var internalRef = (externalRef && 'current' in externalRef) ? externalRef : null;
+    var textFieldId = messageFieldId || TEXT_FIELD_ID;
+    var stringSet = useLocalization().stringSet;
+    var config = useSendbirdStateContext().config;
+    var isFileUploadEnabled = checkIfFileUploadEnabled({
+        channel: channel,
+        config: config,
+    });
+    var fileInputRef = useRef(null);
+    var _9 = useState(false), isInput = _9[0], setIsInput = _9[1];
+    var _10 = useState([]), mentionedUserIds = _10[0], setMentionedUserIds = _10[1];
+    var _11 = useState(__assign({}, initialTargetStringInfo)), targetStringInfo = _11[0], setTargetStringInfo = _11[1];
+    var setHeight = useMemo(function () { return function () {
+        try {
+            var elem = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+            var MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
+            if (elem && elem.scrollHeight >= LINE_HEIGHT) {
+                if (MAX_HEIGHT < elem.scrollHeight) {
+                    elem.style.height = 'auto';
+                    elem.style.height = "".concat(MAX_HEIGHT, "px");
+                }
+                else {
+                    elem.style.height = 'auto';
+                    elem.style.height = "".concat(elem.scrollHeight, "px");
+                }
+            }
+            else {
+                elem.style.height = '';
+            }
+        }
+        catch (error) {
+            // error
+        }
+    }; }, []);
+    // #Edit mode
+    // for easilly initialize input value from outside, but
+    // useEffect(_, [channelUrl]) erase it
+    var initialValue = props === null || props === void 0 ? void 0 : props.value;
+    useEffect(function () {
+        var _a;
+        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        try {
+            textField.innerHTML = initialValue;
+            displayCaret(textField, initialValue === null || initialValue === void 0 ? void 0 : initialValue.length);
+        }
+        catch (_b) {
+            //
+        }
+        setMentionedUserIds([]);
+        setIsInput(((_a = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
+        setHeight();
+    }, [initialValue]);
+    // #Mention | Clear input value when channel changes
+    useEffect(function () {
+        if (!isEdit) {
+            setIsInput(false);
+            resetInput(internalRef);
+        }
+    }, [channelUrl]);
+    // #Mention & #Edit | Fill message input values
+    useEffect(function () {
+        var _a, _b, _c;
+        if (isEdit && (message === null || message === void 0 ? void 0 : message.messageId)) {
+            // const textField = document.getElementById(textFieldId);
+            var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+            if (isMentionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                /* mention enabled */
+                var _d = message.mentionedUsers, mentionedUsers_1 = _d === void 0 ? [] : _d;
+                var tokens = tokenizeMessage({
+                    messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
+                    mentionedUsers: mentionedUsers_1,
+                });
+                textField.innerHTML = tokens
+                    .map(function (token) {
+                    if (token.type === TOKEN_TYPES.mention) {
+                        var mentionedUser = mentionedUsers_1.find(function (user) { return user.userId === token.userId; });
+                        var nickname = "".concat(USER_MENTION_PREFIX).concat((mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.nickname) || token.value || stringSet.MENTION_NAME__NO_NAME);
+                        return renderToString({
+                            userId: token.userId,
+                            nickname: nickname,
+                        });
+                    }
+                    return sanitizeString(token.value);
+                })
+                    .join(' ');
+            }
+            else {
+                /* mention disabled */
+                try {
+                    textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
+                }
+                catch (_e) {
+                    //
+                }
+                setMentionedUserIds([]);
+            }
+            setIsInput(((_c = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _c === void 0 ? void 0 : _c.trim().length) > 0);
+            setHeight();
+        }
+    }, [isEdit, message]);
+    // #Mention | Detect MentionedLabel modified
+    var useMentionedLabelDetection = useCallback(function () {
+        var _a;
+        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        if (isMentionEnabled) {
+            var newMentionedUserIds = Array.from(textField.getElementsByClassName('sendbird-mention-user-label')).map(
+            // @ts-ignore
+            function (node) { var _a; return (_a = node === null || node === void 0 ? void 0 : node.dataset) === null || _a === void 0 ? void 0 : _a.userid; });
+            if (!arrayEqual(mentionedUserIds, newMentionedUserIds) || newMentionedUserIds.length === 0) {
+                onMentionedUserIdsUpdated(newMentionedUserIds);
+                setMentionedUserIds(newMentionedUserIds);
+            }
+        }
+        setIsInput(((_a = textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
+    }, [targetStringInfo, isMentionEnabled]);
+    // #Mention | Replace selected user nickname to the MentionedUserLabel
+    useEffect(function () {
+        var _a, _b;
+        if (isMentionEnabled && mentionSelectedUser) {
+            var targetString = targetStringInfo.targetString, startNodeIndex = targetStringInfo.startNodeIndex, startOffsetIndex = targetStringInfo.startOffsetIndex, endNodeIndex = targetStringInfo.endNodeIndex, endOffsetIndex = targetStringInfo.endOffsetIndex;
+            if (targetString && startNodeIndex !== null && startOffsetIndex !== null) {
+                // const textField = document.getElementById(textFieldId);
+                var textField_1 = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+                var childNodes = nodeListToArray(textField_1 === null || textField_1 === void 0 ? void 0 : textField_1.childNodes);
+                var frontTextNode = document === null || document === void 0 ? void 0 : document.createTextNode((_a = childNodes[startNodeIndex]) === null || _a === void 0 ? void 0 : _a.textContent.slice(0, startOffsetIndex));
+                var backTextNode = document === null || document === void 0 ? void 0 : document.createTextNode("\u00A0".concat((_b = childNodes[endNodeIndex]) === null || _b === void 0 ? void 0 : _b.textContent.slice(endOffsetIndex)));
+                var mentionLabel = renderToString({
+                    userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId,
+                    nickname: "".concat(USER_MENTION_TEMP_CHAR).concat((mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME),
+                });
+                var div = document.createElement('div');
+                div.innerHTML = mentionLabel;
+                var newNodes = __spreadArray(__spreadArray(__spreadArray([], childNodes.slice(0, startNodeIndex), true), [
+                    frontTextNode,
+                    div.childNodes[0],
+                    backTextNode
+                ], false), childNodes.slice(endNodeIndex + 1), true);
+                textField_1.innerHTML = '';
+                newNodes.forEach(function (newNode) {
+                    textField_1.appendChild(newNode);
+                });
+                onUserMentioned(mentionSelectedUser);
+                if (window.getSelection || document.getSelection) {
+                    // set caret postion
+                    var selection = window.getSelection() || document.getSelection();
+                    selection.removeAllRanges();
+                    var range = new Range();
+                    range.selectNodeContents(textField_1);
+                    range.setStart(textField_1.childNodes[startNodeIndex + 2], 1);
+                    range.setEnd(textField_1.childNodes[startNodeIndex + 2], 1);
+                    range.collapse(false);
+                    selection.addRange(range);
+                    textField_1.focus();
+                }
+                setTargetStringInfo(__assign({}, initialTargetStringInfo));
+                setHeight();
+                useMentionedLabelDetection();
+            }
+        }
+    }, [mentionSelectedUser, isMentionEnabled]);
+    // #Mention | Detect mentioning user nickname
+    var useMentionInputDetection = useCallback(function () {
+        var _a, _b;
+        var selection = ((_a = window === null || window === void 0 ? void 0 : window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window)) || ((_b = document === null || document === void 0 ? void 0 : document.getSelection) === null || _b === void 0 ? void 0 : _b.call(document));
+        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        if (selection.anchorNode === textField) {
+            onMentionStringChange('');
+        }
+        if (isMentionEnabled
+            && selection
+            && selection.anchorNode === selection.focusNode
+            && selection.anchorOffset === selection.focusOffset) {
+            var textStack = '';
+            var startNodeIndex = null;
+            var startOffsetIndex = null;
+            for (var index = 0; index < textField.childNodes.length; index += 1) {
+                var currentNode = textField.childNodes[index];
+                if (currentNode.nodeType === NodeTypes.TextNode) {
+                    /* text node */
+                    var textContent = currentNode === selection.anchorNode
+                        ? (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent.slice(0, selection.anchorOffset)) || ''
+                        : (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) || '';
+                    if (textStack.length > 0) {
+                        textStack += textContent;
+                    }
+                    else {
+                        var charLastIndex = textContent.lastIndexOf(USER_MENTION_TEMP_CHAR);
+                        for (var i = charLastIndex - 1; i > -1; i -= 1) {
+                            if (textContent[i] === USER_MENTION_TEMP_CHAR) {
+                                charLastIndex = i;
+                            }
+                            else {
+                                break;
+                            }
+                        }
+                        if (charLastIndex > -1) {
+                            textStack = textContent;
+                            startNodeIndex = index;
+                            startOffsetIndex = charLastIndex;
+                        }
+                    }
+                }
+                else {
+                    /* other nodes */
+                    textStack = '';
+                    startNodeIndex = null;
+                    startOffsetIndex = null;
+                }
+                if (currentNode === selection.anchorNode) {
+                    /**
+                     * targetString could be ''
+                     * startNodeIndex and startOffsetIndex could be null
+                     */
+                    var targetString = textStack ? textStack.slice(startOffsetIndex) : ''; // include template character
+                    setTargetStringInfo({
+                        targetString: targetString,
+                        startNodeIndex: startNodeIndex,
+                        startOffsetIndex: startOffsetIndex,
+                        endNodeIndex: index,
+                        endOffsetIndex: selection.anchorOffset,
+                    });
+                    onMentionStringChange(targetString);
+                    return;
+                }
+            }
+        }
+    }, [isMentionEnabled]);
+    var sendMessage = function () {
+        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        if (!isEdit && (textField === null || textField === void 0 ? void 0 : textField.textContent)) {
+            var messageText_1 = '';
+            var mentionTemplate_1 = '';
+            textField.childNodes.forEach(function (node) {
+                if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
+                    // @ts-ignore
+                    var innerText = node.innerText, _a = node.dataset, dataset = _a === void 0 ? {} : _a;
+                    var _b = dataset.userid, userid = _b === void 0 ? '' : _b;
+                    messageText_1 += innerText;
+                    mentionTemplate_1 += "".concat(USER_MENTION_TEMP_CHAR, "{").concat(userid, "}");
+                }
+                else if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Br) {
+                    messageText_1 += '\n';
+                    mentionTemplate_1 += '\n';
+                }
+                else if ((node === null || node === void 0 ? void 0 : node.nodeType) === NodeTypes.ElementNode && (node === null || node === void 0 ? void 0 : node.nodeName) === NodeNames.Div) {
+                    // handles newline in safari
+                    var _c = node.textContent, textContent = _c === void 0 ? '' : _c;
+                    messageText_1 += "\n".concat(textContent);
+                    mentionTemplate_1 += "\n".concat(textContent);
+                }
+                else {
+                    // other nodes including text node
+                    var _d = node.textContent, textContent = _d === void 0 ? '' : _d;
+                    messageText_1 += textContent;
+                    mentionTemplate_1 += textContent;
+                }
+            });
+            var params = { message: messageText_1, mentionTemplate: mentionTemplate_1 };
+            onSendMessage(params);
+            resetInput(internalRef);
+            // important: keeps the keyboard open -> must add test on refactor
+            textField.focus();
+            setIsInput(false);
+            setHeight();
+        }
+    };
+    var isEditDisabled = !((_b = (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim());
+    var editMessage = function () {
+        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+        var messageId = message === null || message === void 0 ? void 0 : message.messageId;
+        if (isEdit && messageId) {
+            var messageText_2 = '';
+            var mentionTemplate_2 = '';
+            textField.childNodes.forEach(function (node) {
+                if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
+                    // @ts-ignore
+                    var innerText = node.innerText, _a = node.dataset, dataset = _a === void 0 ? {} : _a;
+                    var _b = dataset.userid, userid = _b === void 0 ? '' : _b;
+                    messageText_2 += innerText;
+                    mentionTemplate_2 += "".concat(USER_MENTION_TEMP_CHAR, "{").concat(userid, "}");
+                    messageText_2 += '\n';
+                    mentionTemplate_2 += '\n';
+                }
+                else {
+                    // other nodes including text node
+                    var _c = node.textContent, textContent = _c === void 0 ? '' : _c;
+                    messageText_2 += textContent;
+                    mentionTemplate_2 += textContent;
+                }
+            });
+            var params = { messageId: messageId, message: messageText_2, mentionTemplate: mentionTemplate_2 };
+            onUpdateMessage(params);
+            resetInput(internalRef);
+        }
+    };
+    var onPaste = usePaste({
+        ref: internalRef,
+        setMentionedUsers: setMentionedUsers,
+        channel: channel,
+        setIsInput: setIsInput,
+        setHeight: setHeight,
+    });
+    return (React__default.createElement("form", { className: getClassName([
+            className,
+            isEdit ? 'sendbird-message-input__edit' : '',
+            disabled ? 'sendbird-message-input-form__disabled' : '',
+        ]) },
+        React__default.createElement("div", { className: getClassName(['sendbird-message-input', disabled ? 'sendbird-message-input__disabled' : '']) },
+            React__default.createElement("div", { id: "".concat(textFieldId).concat(isEdit ? message === null || message === void 0 ? void 0 : message.messageId : ''), className: "sendbird-message-input--textarea ".concat(textFieldId), contentEditable: !disabled, role: "textbox", "aria-label": "Text Input", ref: externalRef, 
+                // @ts-ignore
+                disabled: disabled, maxLength: maxLength, onKeyDown: function (e) {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    var preventEvent = onKeyDown(e);
+                    if (preventEvent) {
+                        e.preventDefault();
+                    }
+                    else {
+                        if (!e.shiftKey
+                            && e.key === MessageInputKeys.Enter
+                            && ((_b = (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0
+                            && ((_c = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _c === void 0 ? void 0 : _c.isComposing) !== true) {
+                            e.preventDefault();
+                            sendMessage();
+                        }
+                        if (e.key === MessageInputKeys.Backspace
+                            && ((_e = (_d = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _d === void 0 ? void 0 : _d.childNodes) === null || _e === void 0 ? void 0 : _e.length) === 2
+                            && !((_h = (_g = (_f = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _f === void 0 ? void 0 : _f.childNodes) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.textContent)
+                            && ((_k = (_j = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.childNodes) === null || _j === void 0 ? void 0 : _j[1]) === null || _k === void 0 ? void 0 : _k.nodeType) === NodeTypes.ElementNode) {
+                            internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.removeChild(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.childNodes[1]);
+                        }
+                    }
+                }, onKeyUp: function (e) {
+                    var preventEvent = onKeyUp(e);
+                    if (preventEvent) {
+                        e.preventDefault();
+                    }
+                    else {
+                        useMentionInputDetection();
+                    }
+                }, onClick: function () {
+                    useMentionInputDetection();
+                }, onInput: function () {
+                    var _a, _b;
+                    setHeight();
+                    onStartTyping();
+                    setIsInput(((_b = (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0);
+                    useMentionedLabelDetection();
+                }, onPaste: onPaste }),
+            ((_e = (_d = (_c = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) === 0 && (React__default.createElement(Label, { className: "sendbird-message-input--placeholder", type: LabelTypography.BODY_1, color: disabled ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_3 }, placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER)),
+            !isEdit && isInput && (React__default.createElement(IconButton, { className: "sendbird-message-input--send", height: "32px", width: "32px", onClick: function () { return sendMessage(); } }, (renderSendMessageIcon === null || renderSendMessageIcon === void 0 ? void 0 : renderSendMessageIcon()) || (React__default.createElement(Icon, { type: IconTypes.SEND, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY, width: "20px", height: "20px" })))),
+            !isEdit
+                && !isInput
+                && ((renderFileUploadIcon === null || renderFileUploadIcon === void 0 ? void 0 : renderFileUploadIcon())
+                    // UIKit Dashboard configuration should have lower priority than
+                    // renderFileUploadIcon which is set in code level
+                    || (isFileUploadEnabled && (React__default.createElement(IconButton, { className: "sendbird-message-input--attach ".concat(isVoiceMessageEnabled ? 'is-voice-message-enabled' : ''), height: "32px", width: "32px", onClick: function () {
+                            var _a, _b;
+                            // todo: clear previous input
+                            (_b = (_a = fileInputRef === null || fileInputRef === void 0 ? void 0 : fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        } },
+                        React__default.createElement(Icon, { type: IconTypes.ATTACH, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }),
+                        React__default.createElement("input", { className: "sendbird-message-input--attach-input", type: "file", ref: fileInputRef, 
+                            // It will affect to <Channel /> and <Thread />
+                            onChange: function (event) {
+                                var files = event.currentTarget.files;
+                                onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
+                                event.target.value = '';
+                            }, accept: getMimeTypesUIKitAccepts(acceptableMimeTypes), multiple: isSelectingMultipleFilesEnabled && isChannelTypeSupportsMultipleFilesMessage(channel) }))))),
+            isVoiceMessageEnabled && !isEdit && !isInput && (React__default.createElement(IconButton, { className: "sendbird-message-input--voice-message", width: "32px", height: "32px", onClick: onVoiceMessageIconClick }, (renderVoiceMessageIcon === null || renderVoiceMessageIcon === void 0 ? void 0 : renderVoiceMessageIcon()) || (React__default.createElement(Icon, { type: IconTypes.AUDIO_ON_LINED, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }))))),
+        isEdit && (React__default.createElement("div", { className: "sendbird-message-input--edit-action" },
+            React__default.createElement(Button, { className: "sendbird-message-input--edit-action__cancel", type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: onCancelEdit }, stringSet.BUTTON__CANCEL),
+            React__default.createElement(Button, { className: "sendbird-message-input--edit-action__save", type: ButtonTypes.PRIMARY, size: ButtonSizes.SMALL, disabled: isEditDisabled, onClick: function () { return editMessage(); } }, stringSet.BUTTON__SAVE)))));
 });
-MessageInput.propTypes = {
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  isEdit: PropTypes.bool,
-  isMentionEnabled: PropTypes.bool,
-  isVoiceMessageEnabled: PropTypes.bool,
-  isSelectingMultipleFilesEnabled: PropTypes.bool,
-  disabled: PropTypes.bool,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  maxLength: PropTypes.number,
-  onFileUpload: PropTypes.func,
-  onSendMessage: PropTypes.func,
-  onUpdateMessage: PropTypes.func,
-  onStartTyping: PropTypes.func,
-  onCancelEdit: PropTypes.func,
-  channelUrl: PropTypes.string,
-  channel: PropTypes.shape({
-    channelType: PropTypes.string
-  }).isRequired,
-  messageFieldId: PropTypes.string,
-  acceptableMimeTypes: PropTypes.arrayOf(PropTypes.string),
-  // Mention
-  message: PropTypes.shape({
-    messageId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    message: PropTypes.string,
-    mentionedMessageTemplate: PropTypes.string,
-    mentionedUsers: PropTypes.arrayOf(PropTypes.shape({}))
-  }),
-  setMentionedUsers: PropTypes.func,
-  mentionSelectedUser: PropTypes.shape({
-    userId: PropTypes.string,
-    nickname: PropTypes.string
-  }),
-  onUserMentioned: PropTypes.func,
-  onMentionStringChange: PropTypes.func,
-  onMentionedUserIdsUpdated: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  // Voice Message
-  onVoiceMessageIconClick: PropTypes.func,
-  renderVoiceMessageIcon: PropTypes.func,
-  renderSendMessageIcon: PropTypes.func,
-  renderFileUploadIcon: PropTypes.func
-};
-MessageInput.defaultProps = {
-  className: '',
-  messageFieldId: '',
-  channelUrl: '',
-  onSendMessage: noop,
-  onUpdateMessage: noop,
-  value: null,
-  message: null,
-  isEdit: false,
-  isMentionEnabled: false,
-  isVoiceMessageEnabled: true,
-  isSelectingMultipleFilesEnabled: false,
-  onVoiceMessageIconClick: noop,
-  disabled: false,
-  placeholder: '',
-  maxLength: 5000,
-  onFileUpload: noop,
-  onCancelEdit: noop,
-  onStartTyping: noop,
-  mentionSelectedUser: null,
-  onUserMentioned: noop,
-  onMentionStringChange: noop,
-  onMentionedUserIdsUpdated: noop,
-  onKeyUp: noop,
-  onKeyDown: noop,
-  setMentionedUsers: noop,
-  renderVoiceMessageIcon: noop,
-  renderFileUploadIcon: noop,
-  renderSendMessageIcon: noop,
-  acceptableMimeTypes: null
-};
 
 export { MessageInput as default };
 //# sourceMappingURL=MessageInput.js.map