@sendbird/uikit-react 3.4.5 → 3.4.6-rc.0

package/ui/MessageInput.js

@@ -1,58 +1,57 @@
-import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-e908c50d.js';
+import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-6e60e429.js';
 import React__default, { useCallback, useContext, useRef, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../const-c7334190.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../const-735bcf5b.js';
+import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../const-85ec8faf.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../const-10a01327.js';
 import IconButton from './IconButton.js';
 import Button, { ButtonTypes, ButtonSizes } from './Button.js';
-import { a as __spreadArray } from '../tslib.es6-209c9f08.js';
+import { a as __spreadArray } from '../tslib.es6-debac48c.js';
 import DOMPurify from 'dompurify';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-ddb92249.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-3fe926ac.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8e901b57.js';
-import { a as LocalizationContext } from '../LocalizationContext-654ae04f.js';
-import { k as arrayEqual, j as getClassName } from '../index-83ae3ffe.js';
-import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../consts-12512664.js';
-import { O as OG_MESSAGE_BODY_CLASSNAME } from '../consts-8f50899e.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../tokenize-8f238f49.js';
-import '../stringSet-7c7d84fc.js';
-import '../index-cf141ad7.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-8efe881f.js';
+import { a as LocalizationContext } from '../LocalizationContext-428ea690.js';
+import { k as arrayEqual, j as getClassName } from '../index-f87c5aab.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../consts-ef58410d.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from '../consts-89b1e965.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../tokenize-7bcc2072.js';
+import '../stringSet-fa7e0d83.js';
+import '../index-8b3cd0b6.js';
 import '../utils/message/getOutgoingMessageState.js';
 
 function renderToString(_a) {
   var userId = _a.userId,
-      nickname = _a.nickname; // donot change this template, it wont work
-
+    nickname = _a.nickname;
+  // donot change this template, it wont work
   var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
   var purifier = DOMPurify(window);
   var sanitized_ = purifier.sanitize(el);
   var token = sanitized_.split(' ');
   var spanTag = token[0],
-      rest = token.slice(1); // we do this because DOMPurify removes the contenteditable attribute
-
+    rest = token.slice(1);
+  // we do this because DOMPurify removes the contenteditable attribute
   var sanitized = __spreadArray([spanTag, 'contenteditable="false"'], rest, true).join(' ');
-
   return sanitized;
 }
 
 // https://davidwalsh.name/javascript-debounce-function
 
+// Sanitize that special characters of HTML tags cause XSS issue
 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;
-
+      userId = template.userId;
     if (userId) {
       return renderToString({
         userId: userId,
         nickname: text
       });
     }
-
     return sanitizeString(text);
-  }).join(' ') // add a space at the end of the mention, else cursor/caret wont work
+  }).join(' ')
+  // add a space at the end of the mention, else cursor/caret wont work
   .concat(' ');
   document.execCommand('insertHTML', false, nodes);
 }
@@ -67,36 +66,30 @@ function querySelectorIncludingSelf(master, selector) {
   var result = __spreadArray([master], Array.from(master.querySelectorAll(selector)), true).find(function (el) {
     return el.matches(selector);
   });
-
   return result;
-} // Pasted dom node can be OG_MESSAGE or partial message or full message
+}
+// Pasted dom node can be OG_MESSAGE or partial message or full message
 // full messsage would have TEXT_MESSAGE_BODY_CLASSNAME and have childNodes
 // partial message would not have TEXT_MESSAGE_BODY_CLASSNAME
-
 function getLeafNodes(master) {
   // og message
   var ogMessage = querySelectorIncludingSelf(master, ".".concat(OG_MESSAGE_BODY_CLASSNAME));
-
   if (ogMessage) {
     return Array.from(ogMessage.childNodes);
   }
-
   var textMessageBody = querySelectorIncludingSelf(master, ".".concat(TEXT_MESSAGE_BODY_CLASSNAME));
-
   if (textMessageBody) {
     return Array.from(textMessageBody.childNodes);
   }
-
   return Array.from(master.childNodes);
 }
 function createPasteNode() {
-  var pasteNode = document.body.querySelector("#".concat(PASTE_NODE)); // remove existing paste node
-
+  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
-
-
+  }
+  // create new paste node and return
   var node = document.createElement('div');
   node.id = PASTE_NODE;
   node.style.display = 'none';
@@ -110,34 +103,29 @@ var extractTextFromNodes = function (nodes) {
   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; // currentValue can be node(from messageBody or messageInput) or text
-
-
-    var mentionNode; // this looks awkward, but it is a fallback to set default text
-
-    var text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText; // if text node, set text
-
+    var _a;
+    // currentValue can be node(from messageBody or messageInput) or text
+    var mentionNode;
+    // this looks awkward, but it is a fallback to set default text
+    var text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+    // if text node, set text
     if (currentValue instanceof Text) {
       mentionNode = false;
       text = currentValue.textContent;
     }
-
     if (currentValue instanceof HTMLElement) {
       mentionNode = currentValue.classList.contains(MENTION_CLASS) || currentValue.classList.contains(MENTION_CLASS_IN_INPUT) ? currentValue : currentValue.querySelector(MENTION_CLASS_COMBINED_QUERY);
-    } // if mentionNode is not null, it is a mention
-
-
+    }
+    // if mentionNode is not null, it is a mention
     if (mentionNode) {
       var text_1 = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
       var userId = (_a = mentionNode.dataset) === null || _a === void 0 ? void 0 : _a.userid;
@@ -146,7 +134,6 @@ function domToMessageTemplate(nodeArray) {
         userId: userId
       }], false);
     }
-
     return __spreadArray(__spreadArray([], accumulator, true), [{
       text: text
     }], false);
@@ -160,8 +147,8 @@ function getUsersFromWords(templates, channel) {
     if (template.userId) {
       var mentionedMember = users.find(function (user) {
         return user.userId === template.userId;
-      }); // Object.values would return array-> [undefined] if the user is not in the channel
-
+      });
+      // Object.values would return array-> [undefined] if the user is not in the channel
       if (mentionedMember) {
         userMap[template.userId] = mentionedMember;
       }
@@ -170,37 +157,36 @@ function getUsersFromWords(templates, channel) {
   return Object.values(userMap);
 }
 
+// conditions to test:
 // 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;
+    setIsInput = _a.setIsInput,
+    setHeight = _a.setHeight,
+    channel = _a.channel,
+    setMentionedUsers = _a.setMentionedUsers;
   return useCallback(function (e) {
     e.preventDefault();
-    var html = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text/html'); // simple text, continue as normal
-
+    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
-
-
+    }
+    // has html, check if there are mentions, sanitize and insert
     var purifier = DOMPurify(window);
     var clean = purifier.sanitize(html);
     var pasteNode = createPasteNode();
-    pasteNode.innerHTML = clean; // does not have mention, continue as normal
-
+    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));
@@ -209,13 +195,12 @@ function usePaste(_a) {
       setIsInput(true);
       setHeight();
       return;
-    } // has mention, collect leaf nodes and parse words
-
-
+    }
+    // has mention, collect leaf nodes and parse words
     var leafNodes = getLeafNodes(pasteNode);
     var words = domToMessageTemplate(leafNodes);
-    var mentionedUsers = getUsersFromWords(words, channel); // side effects
-
+    var mentionedUsers = getUsersFromWords(words, channel);
+    // side effects
     setMentionedUsers(mentionedUsers);
     inserTemplateToDOM(words);
     pasteNode.remove();
@@ -227,18 +212,14 @@ function usePaste(_a) {
 
 const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
 const LINE_HEIGHT = 76;
-
 const noop = () => {};
-
 const handleUploadFile = callback => event => {
   if (event.target.files && event.target.files[0]) {
     callback(event.target.files[0]);
-  } // eslint-disable-next-line no-param-reassign
-
-
+  }
+  // eslint-disable-next-line no-param-reassign
   event.target.value = '';
 };
-
 const displayCaret = (element, position) => {
   const range = document.createRange();
   const sel = window.getSelection();
@@ -248,14 +229,13 @@ const displayCaret = (element, position) => {
   sel.addRange(range);
   element.focus();
 };
-
 const resetInput = ref => {
   try {
     ref.current.innerHTML = '';
-  } catch (_unused) {//
+  } catch (_unused) {
+    //
   }
 };
-
 const initialTargetStringInfo = {
   targetString: '',
   startNodeIndex: null,
@@ -264,8 +244,7 @@ const initialTargetStringInfo = {
   endOffsetIndex: null
 };
 const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _ref$current, _ref$current$innerTex;
-
+  var _textField$innerText3, _textField$innerText5;
   const {
     className,
     messageFieldId,
@@ -295,6 +274,7 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     renderSendMessageIcon,
     setMentionedUsers
   } = props;
+  const textField = ref === null || ref === void 0 ? void 0 : ref.current;
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
   const {
     stringSet
@@ -307,7 +287,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     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';
@@ -319,42 +298,41 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       } else {
         elem.style.height = '';
       }
-    } catch (error) {// error
+    } catch (error) {
+      // error
     }
-  }, []); // #Edit mode
+  }, []);
+
+  // #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$innerText;
-
     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 ? void 0 : (_textField$innerText = textField.innerText) === null || _textField$innerText === void 0 ? void 0 : _textField$innerText.length) > 0);
+    setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$innerText = textField.innerText) === null || _textField$innerText === void 0 ? void 0 : _textField$innerText.trim().length) > 0);
     setHeight();
-  }, [initialValue]); // #Mention | Clear input value when channel changes
+  }, [initialValue]);
 
+  // #Mention | Clear input value when channel changes
   useEffect(() => {
     if (!isEdit) {
       setIsInput(false);
       resetInput(ref);
     }
-  }, [channelUrl]); // #Mention & #Edit | Fill message input values
+  }, [channelUrl]);
 
+  // #Mention & #Edit | Fill message input values
   useEffect(() => {
     if (isEdit && message !== null && message !== void 0 && message.messageId) {
       var _message$mentionedUse, _message$mentionedMes, _textField$innerText2;
-
       // const textField = document.getElementById(textFieldId);
       const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-
       if (isMentionEnabled && (message === null || message === void 0 ? void 0 : (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.length) > 0 && (message === null || message === void 0 ? void 0 : (_message$mentionedMes = message.mentionedMessageTemplate) === null || _message$mentionedMes === void 0 ? void 0 : _message$mentionedMes.length) > 0) {
         /* mention enabled */
         const {
@@ -373,7 +351,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               nickname
             });
           }
-
           return sanitizeString(token.value);
         }).join(' ');
       } else {
@@ -381,34 +358,30 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         try {
           textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
         } catch (_unused3) {}
-
         setMentionedUserIds([]);
       }
-
-      setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$innerText2 = textField.innerText) === null || _textField$innerText2 === void 0 ? void 0 : _textField$innerText2.length) > 0);
+      setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$innerText2 = textField.innerText) === null || _textField$innerText2 === void 0 ? void 0 : _textField$innerText2.trim().length) > 0);
       setHeight();
     }
-  }, [isEdit, message]); // #Mention | Detect MentionedLabel modified
+  }, [isEdit, message]);
 
+  // #Mention | Detect MentionedLabel modified
   const useMentionedLabelDetection = useCallback(() => {
     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 ? 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.innerText.trim().length > 0);
+  }, [targetStringInfo, isMentionEnabled]);
 
-    setIsInput(textField.innerText.length > 0);
-  }, [targetStringInfo, isMentionEnabled]); // #Mention | Replace selected user nickname to the MentionedUserLabel
-
+  // #Mention | Replace selected user nickname to the MentionedUserLabel
   useEffect(() => {
     if (isMentionEnabled && mentionSelectedUser) {
       const {
@@ -418,10 +391,8 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         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 = [...(textField === null || textField === void 0 ? void 0 : textField.childNodes)];
@@ -439,7 +410,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           textField.appendChild(newNode);
         });
         onUserMentioned(mentionSelectedUser);
-
         if (window.getSelection || document.getSelection) {
           // set caret postion
           const selection = window.getSelection() || document.getSelection();
@@ -452,41 +422,34 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           selection.addRange(range);
           textField.focus();
         }
-
         setTargetStringInfo(_objectSpread2({}, initialTargetStringInfo));
         setHeight();
         useMentionedLabelDetection();
       }
     }
-  }, [mentionSelectedUser, isMentionEnabled]); // #Mention | Detect mentioning user nickname
+  }, [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 ? void 0 : (_window$getSelection = _window.getSelection) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.call(_window)) || ((_document3 = document) === null || _document3 === void 0 ? 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;
@@ -494,7 +457,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
                 break;
               }
             }
-
             if (charLastIndex > -1) {
               textStack = textContent;
               startNodeIndex = index;
@@ -507,14 +469,12 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           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,
@@ -528,10 +488,8 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       }
     }
   }, [isMentionEnabled]);
-
   const sendMessage = () => {
     const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-
     if (!isEdit && textField !== null && textField !== void 0 && textField.innerText) {
       let messageText = '';
       let mentionTemplate = '';
@@ -575,13 +533,10 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       setHeight();
     }
   };
-
-  const isEditDisabled = !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$innerTex = _ref$current.innerText) !== null && _ref$current$innerTex !== void 0 && _ref$current$innerTex.trim());
-
+  const isEditDisabled = !(textField !== null && textField !== void 0 && (_textField$innerText3 = textField.innerText) !== null && _textField$innerText3 !== void 0 && _textField$innerText3.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 = '';
@@ -617,7 +572,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       resetInput(ref);
     }
   };
-
   const onPaste = usePaste({
     ref,
     setMentionedUserIds,
@@ -641,25 +595,21 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     maxLength: maxLength,
     onKeyDown: e => {
       const preventEvent = onKeyDown(e);
-
       if (preventEvent) {
         e.preventDefault();
       } else {
-        var _e$nativeEvent, _ref$current2, _ref$current2$childNo, _ref$current3, _ref$current3$childNo, _ref$current3$childNo2, _ref$current$childNod, _ref$current$childNod2;
-
+        var _e$nativeEvent, _ref$current, _ref$current$childNod, _ref$current2, _ref$current2$childNo, _ref$current2$childNo2, _ref$current$childNod2, _ref$current$childNod3;
         if (!e.shiftKey && e.key === MessageInputKeys.Enter && (e === null || e === void 0 ? 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 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : (_ref$current2$childNo = _ref$current2.childNodes) === null || _ref$current2$childNo === void 0 ? void 0 : _ref$current2$childNo.length) === 2 && !(ref !== null && ref !== void 0 && (_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && (_ref$current3$childNo = _ref$current3.childNodes) !== null && _ref$current3$childNo !== void 0 && (_ref$current3$childNo2 = _ref$current3$childNo[0]) !== null && _ref$current3$childNo2 !== void 0 && _ref$current3$childNo2.textContent) && (ref === null || ref === void 0 ? void 0 : (_ref$current$childNod = ref.current.childNodes) === null || _ref$current$childNod === void 0 ? void 0 : (_ref$current$childNod2 = _ref$current$childNod[1]) === null || _ref$current$childNod2 === void 0 ? void 0 : _ref$current$childNod2.nodeType) === NodeTypes.ElementNode) {
+        if (e.key === MessageInputKeys.Backspace && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : (_ref$current$childNod = _ref$current.childNodes) === null || _ref$current$childNod === void 0 ? void 0 : _ref$current$childNod.length) === 2 && !(ref !== null && ref !== void 0 && (_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && (_ref$current2$childNo = _ref$current2.childNodes) !== null && _ref$current2$childNo !== void 0 && (_ref$current2$childNo2 = _ref$current2$childNo[0]) !== null && _ref$current2$childNo2 !== void 0 && _ref$current2$childNo2.textContent) && (ref === null || ref === void 0 ? void 0 : (_ref$current$childNod2 = ref.current.childNodes) === null || _ref$current$childNod2 === void 0 ? void 0 : (_ref$current$childNod3 = _ref$current$childNod2[1]) === null || _ref$current$childNod3 === void 0 ? void 0 : _ref$current$childNod3.nodeType) === NodeTypes.ElementNode) {
           ref === null || ref === void 0 ? 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 {
@@ -670,15 +620,14 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       useMentionInputDetection();
     },
     onInput: () => {
-      var _ref$current4, _ref$current4$innerTe;
-
+      var _textField$innerText4;
       setHeight();
       onStartTyping();
-      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);
+      setIsInput(((_textField$innerText4 = textField.innerText) === null || _textField$innerText4 === void 0 ? void 0 : _textField$innerText4.trim().length) > 0);
       useMentionedLabelDetection();
     },
     onPaste: onPaste
-  }), !isInput && /*#__PURE__*/React__default.createElement(Label, {
+  }), (textField === null || textField === void 0 ? void 0 : (_textField$innerText5 = textField.innerText) === null || _textField$innerText5 === void 0 ? void 0 : _textField$innerText5.length) === 0 && /*#__PURE__*/React__default.createElement(Label, {
     className: "sendbird-message-input--placeholder",
     type: LabelTypography.BODY_1,
     color: disabled ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_3
@@ -698,7 +647,6 @@ const MessageInput = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     width: "32px",
     onClick: () => {
       var _fileInputRef$current, _fileInputRef$current2;
-
       // todo: clear previous input
       fileInputRef === null || fileInputRef === void 0 ? void 0 : (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : (_fileInputRef$current2 = _fileInputRef$current.click) === null || _fileInputRef$current2 === void 0 ? void 0 : _fileInputRef$current2.call(_fileInputRef$current);
     }