@sendbird/uikit-react 3.4.7 → 3.4.8-rc.0

package/cjs/ui/MessageInput.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-4b6406c2.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-b15f36e8.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var _const$1 = require('../const-97ad0ae2.js');
-var _const = require('../const-bba9510b.js');
+var _const$1 = require('../const-0680206f.js');
+var _const = require('../const-ca84becf.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
 var DOMPurify = require('dompurify');
-var consts = require('../consts-cb169c09.js');
+var consts = require('../consts-61e273f2.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-80b17a7f.js');
-var LocalizationContext = require('../LocalizationContext-30772f4a.js');
-var index = require('../index-4de6caed.js');
-var consts$2 = require('../consts-a235ce0a.js');
-var consts$1 = require('../consts-6acebb51.js');
-var tokenize = require('../tokenize-07747f4c.js');
-require('../stringSet-2b481a03.js');
-require('../index-6d3fe482.js');
+var ui_Label = require('../index-3c695c6e.js');
+var LocalizationContext = require('../LocalizationContext-b4f03715.js');
+var index = require('../index-9d76f61f.js');
+var consts$2 = require('../consts-f7e71891.js');
+var consts$1 = require('../consts-a2d246e6.js');
+var tokenize = require('../tokenize-5a0f3157.js');
+require('../stringSet-0edd77c8.js');
+require('../index-df16527d.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -48,6 +48,19 @@ function renderToString(_ref) {
 // 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), ';'));
 
+/**
+ * NodeList cannot be used with Array methods
+ * @param {childNodes} NodeList
+ * @returns Array of child nodes
+ */
+const nodeListToArray = childNodes => {
+  try {
+    return Array.from(childNodes);
+  } catch (error) {
+    return [];
+  }
+};
+
 function inserTemplateToDOM(templateList) {
   const nodes = templateList.map(template => {
     const {
@@ -85,13 +98,13 @@ function getLeafNodes(master) {
   // og message
   const ogMessage = querySelectorIncludingSelf(master, `.${consts$1.OG_MESSAGE_BODY_CLASSNAME}`);
   if (ogMessage) {
-    return Array.from(ogMessage.childNodes);
+    return nodeListToArray(ogMessage.childNodes);
   }
   const textMessageBody = querySelectorIncludingSelf(master, `.${consts$2.TEXT_MESSAGE_BODY_CLASSNAME}`);
   if (textMessageBody) {
-    return Array.from(textMessageBody.childNodes);
+    return nodeListToArray(textMessageBody.childNodes);
   }
-  return Array.from(master.childNodes);
+  return nodeListToArray(master.childNodes);
 }
 function createPasteNode() {
   const pasteNode = document.body.querySelector(`#${PASTE_NODE}`);
@@ -222,7 +235,6 @@ function usePaste(_ref) {
     pasteNode.remove();
     setIsInput(true);
     setHeight();
-    return;
   }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
 }
 
@@ -247,6 +259,7 @@ const displayCaret = (element, position) => {
 };
 const resetInput = ref => {
   try {
+    /* eslint-disable no-param-reassign */
     ref.current.innerHTML = '';
   } catch (_unused) {
     //
@@ -260,7 +273,7 @@ const initialTargetStringInfo = {
   endOffsetIndex: null
 };
 const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
-  var _textField$innerText3, _textField$innerText5;
+  var _ref$current, _ref$current$textCont, _textField$innerText;
   const {
     className,
     messageFieldId,
@@ -290,7 +303,6 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
     renderSendMessageIcon,
     setMentionedUsers
   } = props;
-  const textField = ref === null || ref === void 0 ? void 0 : ref.current;
   const textFieldId = messageFieldId || TEXT_FIELD_ID;
   const {
     stringSet
@@ -324,14 +336,16 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
   // useEffect(_, [channelUrl]) erase it
   const initialValue = props === null || props === void 0 ? void 0 : props.value;
   React.useEffect(() => {
-    var _textField$innerText;
+    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) {}
+    } catch (_unused2) {
+      //
+    }
     setMentionedUserIds([]);
-    setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$innerText = textField.innerText) === null || _textField$innerText === void 0 ? void 0 : _textField$innerText.trim().length) > 0);
+    setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$textConten = textField.textContent) === null || _textField$textConten === void 0 ? void 0 : _textField$textConten.trim().length) > 0);
     setHeight();
   }, [initialValue]);
 
@@ -346,7 +360,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
   // #Mention & #Edit | Fill message input values
   React.useEffect(() => {
     if (isEdit && message !== null && message !== void 0 && message.messageId) {
-      var _message$mentionedUse, _message$mentionedMes, _textField$innerText2;
+      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 ? 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) {
@@ -373,16 +387,19 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
         /* mention disabled */
         try {
           textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
-        } catch (_unused3) {}
+        } catch (_unused3) {
+          //
+        }
         setMentionedUserIds([]);
       }
-      setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$innerText2 = textField.innerText) === null || _textField$innerText2 === void 0 ? void 0 : _textField$innerText2.trim().length) > 0);
+      setIsInput((textField === null || textField === void 0 ? 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 = React.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 => {
@@ -394,7 +411,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
         setMentionedUserIds(newMentionedUserIds);
       }
     }
-    setIsInput(textField.innerText.trim().length > 0);
+    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
@@ -411,7 +428,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
         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)];
+        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({
@@ -506,7 +523,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
   }, [isMentionEnabled]);
   const sendMessage = () => {
     const textField = ref === null || ref === void 0 ? void 0 : ref.current;
-    if (!isEdit && textField !== null && textField !== void 0 && textField.innerText) {
+    if (!isEdit && textField !== null && textField !== void 0 && textField.textContent) {
       let messageText = '';
       let mentionTemplate = '';
       textField.childNodes.forEach(node => {
@@ -549,7 +566,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
       setHeight();
     }
   };
-  const isEditDisabled = !(textField !== null && textField !== void 0 && (_textField$innerText3 = textField.innerText) !== null && _textField$innerText3 !== void 0 && _textField$innerText3.trim());
+  const isEditDisabled = !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && (_ref$current$textCont = _ref$current.textContent) !== null && _ref$current$textCont !== void 0 && _ref$current$textCont.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;
@@ -567,7 +584,6 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
           } = dataset;
           messageText += innerText;
           mentionTemplate += `${_const.USER_MENTION_TEMP_CHAR}{${userid}}`;
-        } else if (node.nodeType === _const$1.NodeTypes.ElementNode && node.nodeName === _const$1.NodeNames.Span) {
           messageText += '\n';
           mentionTemplate += '\n';
         } else {
@@ -596,6 +612,7 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
     setIsInput,
     setHeight
   });
+  const textField = ref === null || ref === void 0 ? void 0 : ref.current;
   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", {
@@ -614,12 +631,12 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
       if (preventEvent) {
         e.preventDefault();
       } else {
-        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 === _const$1.MessageInputKeys.Enter && (e === null || e === void 0 ? void 0 : (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.isComposing) !== true) {
+        var _textField$textConten4, _e$nativeEvent, _ref$current2, _ref$current2$childNo, _ref$current3, _ref$current3$childNo, _ref$current3$childNo2, _ref$current$childNod, _ref$current$childNod2;
+        if (!e.shiftKey && e.key === _const$1.MessageInputKeys.Enter && (textField === null || textField === void 0 ? void 0 : (_textField$textConten4 = textField.textContent) === null || _textField$textConten4 === void 0 ? void 0 : _textField$textConten4.trim().length) > 0 && (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 === _const$1.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) === _const$1.NodeTypes.ElementNode) {
+        if (e.key === _const$1.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) === _const$1.NodeTypes.ElementNode) {
           ref === null || ref === void 0 ? void 0 : ref.current.removeChild(ref === null || ref === void 0 ? void 0 : ref.current.childNodes[1]);
         }
       }
@@ -636,14 +653,14 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
       useMentionInputDetection();
     },
     onInput: () => {
-      var _textField$innerText4;
+      var _textField$textConten5;
       setHeight();
       onStartTyping();
-      setIsInput(((_textField$innerText4 = textField.innerText) === null || _textField$innerText4 === void 0 ? void 0 : _textField$innerText4.trim().length) > 0);
+      setIsInput((textField === null || textField === void 0 ? void 0 : (_textField$textConten5 = textField.textContent) === null || _textField$textConten5 === void 0 ? void 0 : _textField$textConten5.trim().length) > 0);
       useMentionedLabelDetection();
     },
     onPaste: onPaste
-  }), (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["default"].createElement(ui_Label.Label, {
+  }), (textField === null || textField === void 0 ? void 0 : (_textField$innerText = textField.innerText) === null || _textField$innerText === void 0 ? void 0 : _textField$innerText.length) === 0 && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
     className: "sendbird-message-input--placeholder",
     type: ui_Label.LabelTypography.BODY_1,
     color: disabled ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_3
@@ -733,7 +750,11 @@ MessageInput.propTypes = {
   onMentionStringChange: PropTypes__default["default"].func,
   onMentionedUserIdsUpdated: PropTypes__default["default"].func,
   onKeyUp: PropTypes__default["default"].func,
-  onKeyDown: PropTypes__default["default"].func
+  onKeyDown: PropTypes__default["default"].func,
+  renderVoiceMessageIcon: PropTypes__default["default"].func,
+  renderSendMessageIcon: PropTypes__default["default"].func,
+  renderFileUploadIcon: PropTypes__default["default"].func,
+  channel: PropTypes__default["default"].shape({})
 };
 MessageInput.defaultProps = {
   className: '',
@@ -758,7 +779,12 @@ MessageInput.defaultProps = {
   onMentionStringChange: noop,
   onMentionedUserIdsUpdated: noop,
   onKeyUp: noop,
-  onKeyDown: noop
+  onKeyDown: noop,
+  setMentionedUsers: noop,
+  renderVoiceMessageIcon: noop,
+  renderFileUploadIcon: noop,
+  renderSendMessageIcon: noop,
+  channel: {}
 };
 
 module.exports = MessageInput;