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

package/ui/MessageInput.js

@@ -1,36 +1,37 @@
-import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-79f64283.js';
+import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-e78a810d.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-2919bc87.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../const-df1daff9.js';
+import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../const-4e794221.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../const-e53d1cf9.js';
 import IconButton from './IconButton.js';
 import Button, { ButtonTypes, ButtonSizes } from './Button.js';
-import { a as __spreadArray } from '../tslib.es6-d6e50ec3.js';
 import DOMPurify from 'dompurify';
-import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-f4362414.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from '../consts-c71f0821.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../index-cce0e324.js';
-import { a as LocalizationContext } from '../LocalizationContext-3d8c0b24.js';
-import { k as arrayEqual, j as getClassName } from '../index-e378ca4e.js';
-import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../consts-1861f891.js';
-import { O as OG_MESSAGE_BODY_CLASSNAME } from '../consts-0ea80430.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../tokenize-bd8e35b2.js';
-import '../stringSet-9d579825.js';
-import '../index-aaa9b9f8.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-3f91b4e0.js';
+import { a as LocalizationContext } from '../LocalizationContext-2b2fd3bc.js';
+import { k as arrayEqual, j as getClassName } from '../index-8377af7f.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from '../consts-2839d903.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from '../consts-8592a5a4.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../tokenize-f4307b07.js';
+import '../stringSet-167237e7.js';
+import '../index-3e5fe0b6.js';
 import '../utils/message/getOutgoingMessageState.js';
 
-function renderToString(_a) {
-  var userId = _a.userId,
-    nickname = _a.nickname;
+// cretes a sanitized string from a mention user label
+function renderToString(_ref) {
+  let {
+    userId,
+    nickname
+  } = _ref;
   // 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);
+  const el = `<span data-userid="${userId}" data-sb-mention="true" class="${MENTION_USER_LABEL_CLASSNAME}">${nickname}</span>`;
+  const purifier = DOMPurify(window);
+  const sanitized_ = purifier.sanitize(el);
+  const token = sanitized_.split(' ');
+  const [spanTag, ...rest] = token;
   // we do this because DOMPurify removes the contenteditable attribute
-  var sanitized = __spreadArray([spanTag, 'contenteditable="false"'], rest, true).join(' ');
+  const sanitized = [spanTag, 'contenteditable="false"', ...rest].join(' ');
   return sanitized;
 }
 
@@ -40,12 +41,14 @@ function renderToString(_a) {
 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;
+  const nodes = templateList.map(template => {
+    const {
+      text,
+      userId
+    } = template;
     if (userId) {
       return renderToString({
-        userId: userId,
+        userId,
         nickname: text
       });
     }
@@ -56,53 +59,53 @@ function inserTemplateToDOM(templateList) {
   document.execCommand('insertHTML', false, nodes);
 }
 
-var PASTE_NODE = 'sendbird-uikit__paste-node';
-var TEXT_MESSAGE_CLASS = 'sendbird-word';
-var MENTION_CLASS = 'sendbird-word__mention';
-var MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
-var MENTION_CLASS_COMBINED_QUERY = ".".concat(MENTION_CLASS, ", .").concat(MENTION_CLASS_IN_INPUT);
+const PASTE_NODE = 'sendbird-uikit__paste-node';
+const TEXT_MESSAGE_CLASS = 'sendbird-word';
+const MENTION_CLASS = 'sendbird-word__mention';
+const MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
+const MENTION_CLASS_COMBINED_QUERY = `.${MENTION_CLASS}, .${MENTION_CLASS_IN_INPUT}`;
 
 function querySelectorIncludingSelf(master, selector) {
-  var result = __spreadArray([master], Array.from(master.querySelectorAll(selector)), true).find(function (el) {
-    return el.matches(selector);
-  });
+  const result = [master, ...Array.from(master.querySelectorAll(selector))].find(el => el.matches(selector));
   return result;
 }
+
 // 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));
+  const ogMessage = querySelectorIncludingSelf(master, `.${OG_MESSAGE_BODY_CLASSNAME}`);
   if (ogMessage) {
     return Array.from(ogMessage.childNodes);
   }
-  var textMessageBody = querySelectorIncludingSelf(master, ".".concat(TEXT_MESSAGE_BODY_CLASSNAME));
+  const textMessageBody = querySelectorIncludingSelf(master, `.${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));
+  const pasteNode = document.body.querySelector(`#${PASTE_NODE}`);
   // remove existing paste node
   if (pasteNode) {
     pasteNode === null || pasteNode === void 0 ? void 0 : pasteNode.remove();
   }
+
   // create new paste node and return
-  var node = document.createElement('div');
+  const node = document.createElement('div');
   node.id = PASTE_NODE;
   node.style.display = 'none';
   return node;
 }
 function hasMention(parent) {
-  return (parent === null || parent === void 0 ? void 0 : parent.querySelector(MENTION_CLASS_COMBINED_QUERY)) ? true : false;
+  return parent !== null && parent !== void 0 && parent.querySelector(MENTION_CLASS_COMBINED_QUERY) ? true : false;
 }
-var extractTextFromNodes = function (nodes) {
-  var text = '';
-  nodes.forEach(function (node) {
+const extractTextFromNodes = nodes => {
+  let text = '';
+  nodes.forEach(node => {
     // to preserve space between words
-    var textNodes = node.querySelectorAll(".".concat(TEXT_MESSAGE_CLASS));
+    const textNodes = node.querySelectorAll(`.${TEXT_MESSAGE_CLASS}`);
     if (textNodes.length > 0) {
       text += extractTextFromNodes(Array.from(textNodes)) + ' ';
     }
@@ -111,12 +114,12 @@ var extractTextFromNodes = function (nodes) {
   return text;
 };
 function domToMessageTemplate(nodeArray) {
-  var templates = nodeArray === null || nodeArray === void 0 ? void 0 : nodeArray.reduce(function (accumulator, currentValue) {
-    var _a;
+  const templates = nodeArray === null || nodeArray === void 0 ? void 0 : nodeArray.reduce((accumulator, currentValue) => {
     // currentValue can be node(from messageBody or messageInput) or text
-    var mentionNode;
+    let mentionNode;
     // this looks awkward, but it is a fallback to set default text
-    var text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+    let text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+
     // if text node, set text
     if (currentValue instanceof Text) {
       mentionNode = false;
@@ -125,29 +128,29 @@ function domToMessageTemplate(nodeArray) {
     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) {
-      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;
-      return __spreadArray(__spreadArray([], accumulator, true), [{
-        text: text_1,
-        userId: userId
-      }], false);
+      var _mentionNode$dataset;
+      const text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+      const userId = (_mentionNode$dataset = mentionNode.dataset) === null || _mentionNode$dataset === void 0 ? void 0 : _mentionNode$dataset.userid;
+      return [...accumulator, {
+        text,
+        userId
+      }];
     }
-    return __spreadArray(__spreadArray([], accumulator, true), [{
-      text: text
-    }], false);
+    return [...accumulator, {
+      text
+    }];
   }, []);
   return templates;
 }
 function getUsersFromWords(templates, channel) {
-  var userMap = {};
-  var users = channel.members;
-  templates.forEach(function (template) {
+  const userMap = {};
+  const users = channel.members;
+  templates.forEach(template => {
     if (template.userId) {
-      var mentionedMember = users.find(function (user) {
-        return user.userId === template.userId;
-      });
+      const mentionedMember = users.find(user => user.userId === template.userId);
       // Object.values would return array-> [undefined] if the user is not in the channel
       if (mentionedMember) {
         userMap[template.userId] = mentionedMember;
@@ -164,42 +167,47 @@ function getUsersFromWords(templates, channel) {
 // 4. paste text with mention and text and paste again before and after
 // 5. copy message with mention(only one mention, no other text) and paste
 // 6. copy message with mention from input and paste(before and after)
-function usePaste(_a) {
-  var ref = _a.ref,
-    setIsInput = _a.setIsInput,
-    setHeight = _a.setHeight,
-    channel = _a.channel,
-    setMentionedUsers = _a.setMentionedUsers;
-  return useCallback(function (e) {
+function usePaste(_ref) {
+  let {
+    ref,
+    setIsInput,
+    setHeight,
+    channel,
+    setMentionedUsers
+  } = _ref;
+  return useCallback(e => {
     e.preventDefault();
-    var html = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text/html');
+    const 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');
+      const text = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text');
       document.execCommand('insertHTML', false, sanitizeString(text));
       setIsInput(true);
       setHeight();
       return;
     }
+
     // has html, check if there are mentions, sanitize and insert
-    var purifier = DOMPurify(window);
-    var clean = purifier.sanitize(html);
-    var pasteNode = createPasteNode();
+    const purifier = DOMPurify(window);
+    const clean = purifier.sanitize(html);
+    const pasteNode = createPasteNode();
     pasteNode.innerHTML = clean;
     // does not have mention, continue as normal
     if (!hasMention(pasteNode)) {
       // to preserve space between words
-      var text = extractTextFromNodes(Array.from(pasteNode.children));
+      const text = extractTextFromNodes(Array.from(pasteNode.children));
       document.execCommand('insertHTML', false, sanitizeString(text));
       pasteNode.remove();
       setIsInput(true);
       setHeight();
       return;
     }
+
     // has mention, collect leaf nodes and parse words
-    var leafNodes = getLeafNodes(pasteNode);
-    var words = domToMessageTemplate(leafNodes);
-    var mentionedUsers = getUsersFromWords(words, channel);
+    const leafNodes = getLeafNodes(pasteNode);
+    const words = domToMessageTemplate(leafNodes);
+    const mentionedUsers = getUsersFromWords(words, channel);
+
     // side effects
     setMentionedUsers(mentionedUsers);
     inserTemplateToDOM(words);