react-input-emoji 5.9.0-beta.1 → 5.9.0-beta.3

package/dist/index.es.js

@@ -79,6 +79,7 @@ function getAllEmojisFromText(text) {
  * @return {string}
  */
 function getImageEmoji(emoji) {
+  var _emojiPickerEl$shadow;
   /** @type {HTMLElement | null} */
   const emojiPickerEl = document.querySelector('em-emoji-picker');
   if (!emojiPickerEl) {
@@ -86,7 +87,7 @@ function getImageEmoji(emoji) {
   }
 
   /** @type {HTMLSpanElement | null=} */
-  const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
+  const emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 || (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
   if (!emojiSpanEl) {
     return getInputEmojiNativeHTML(emoji.native);
   }
@@ -102,7 +103,7 @@ function getImageEmoji(emoji) {
  * @returns
  */
 function getInputEmojiHTML(style, emoji) {
-  return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
+  return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
 }
 
 /**
@@ -111,7 +112,7 @@ function getInputEmojiHTML(style, emoji) {
  * @returns 
  */
 function getInputEmojiNativeHTML(emoji) {
-  return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
+  return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
 }
 
 /**
@@ -158,7 +159,7 @@ let currentRangeCached;
  */
 function cacheCurrentRange() {
   const selection = window.getSelection();
-  if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
+  if (!selection.rangeCount || (selection === null || selection === void 0 ? void 0 : selection.anchorNode['className']) !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
   const range = selection.getRangeAt(0);
   currentRangeCached = range.cloneRange();
 }
@@ -174,7 +175,8 @@ function handlePasteHtmlAtCaret(html) {
     sel = window.getSelection();
     if (sel === null) return;
     if (sel.getRangeAt && sel.rangeCount) {
-      range = currentRangeCached ?? sel.getRangeAt(0);
+      var _currentRangeCached;
+      range = (_currentRangeCached = currentRangeCached) !== null && _currentRangeCached !== void 0 ? _currentRangeCached : sel.getRangeAt(0);
       range.deleteContents();
 
       // Range.createContextualFragment() would be useful here but is
@@ -220,10 +222,11 @@ function replaceEmojiToString(container) {
  * @param {{text: string, html: string}} props
  * @return {number}
  */
-function totalCharacters({
-  text,
-  html
-}) {
+function totalCharacters(_ref2) {
+  let {
+    text,
+    html
+  } = _ref2;
   const textCount = text.length;
   const emojisCount = (html.match(/<img/g) || []).length;
   return textCount + emojisCount;
@@ -631,13 +634,14 @@ function handleEmoji(text) {
  *
  * @param {Props} props
  */
-function useExpose({
-  ref,
-  textInputRef,
-  setValue,
-  emitChange,
-  shouldConvertEmojiToImage
-}) {
+function useExpose(_ref) {
+  let {
+    ref,
+    textInputRef,
+    setValue,
+    emitChange,
+    shouldConvertEmojiToImage
+  } = _ref;
   const {
     sanitize,
     sanitizedTextRef
@@ -701,7 +705,84 @@ function useEmit(textInputRef, onResize, onChange) {
   return emitChange;
 }
 
-// @ts-check
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
+
+const _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
 
 /**
  * @typedef {Object} Props
@@ -735,14 +816,15 @@ function useEmit(textInputRef, onResize, onChange) {
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-const TextInput = ({
-  placeholder,
-  style,
-  tabIndex,
-  className,
-  onChange,
-  ...props
-}, ref) => {
+const TextInput = (_ref, ref) => {
+  let {
+      placeholder,
+      style,
+      tabIndex,
+      className,
+      onChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   useImperativeHandle(ref, () => ({
     appendContent: html => {
       if (textInputRef.current) {
@@ -810,7 +892,7 @@ const TextInput = ({
       placeholderStyle.color = style.placeholderColor;
     }
     return placeholderStyle;
-  }, [style?.placeholderColor]);
+  }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
 
   /** @type {React.CSSProperties} */
   const inputStyle = useMemo(() => {
@@ -819,7 +901,7 @@ const TextInput = ({
       inputStyle.color = style.color;
     }
     return inputStyle;
-  }, [style?.color]);
+  }, [style === null || style === void 0 ? void 0 : style.color]);
 
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   const placeholderRef = useRef(null);
@@ -892,7 +974,7 @@ const TextInput = ({
     onKeyUp: handleKeyUp,
     tabIndex: tabIndex,
     contentEditable: true,
-    className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
+    className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
     onBlur: props.onBlur,
     onCopy: props.onCopy,
     onPaste: props.onPaste,
@@ -917,27 +999,29 @@ const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
  * @param {Props} props
  * @return {JSX.Element}
  */
-function EmojiPickerButton({
-  showPicker,
-  toggleShowPicker,
-  buttonElement,
-  buttonRef
-}) {
+function EmojiPickerButton(_ref) {
+  let {
+    showPicker,
+    toggleShowPicker,
+    buttonElement,
+    buttonRef
+  } = _ref;
   const localButtonRef = useRef(null);
   const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
   useEffect(() => {
-    if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
+    var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
+    if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
       localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
       setShowCustomButtonContent(true);
-    } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
-      localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
+    } else if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 || (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
+      localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
       setShowCustomButtonContent(true);
     }
-  }, [buttonElement?.childNodes]);
+  }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
   return /*#__PURE__*/React.createElement("button", {
     ref: localButtonRef,
     type: "button",
-    className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
+    className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
     onClick: toggleShowPicker
   }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3434,7 +3518,7 @@ function EmojiPicker(props) {
       }
 
       // @ts-ignore
-      fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
+      fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(async data => {
         const translations = await data.json();
         setI18n(translations);
         cacheI18n.en = translations;
@@ -3449,7 +3533,7 @@ function EmojiPicker(props) {
     }
 
     // @ts-ignore
-    fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
+    fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(async data => {
       const translations = await data.json();
       setI18n(translations);
       cacheI18n[language] = translations;
@@ -3489,15 +3573,16 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
  * @param {Props} props
  * @return {JSX.Element}
  */
-function EmojiPickerContainer({
-  showPicker,
-  theme,
-  handleSelectEmoji,
-  disableRecent,
-  customEmojis,
-  position,
-  language
-}) {
+function EmojiPickerContainer(_ref) {
+  let {
+    showPicker,
+    theme,
+    handleSelectEmoji,
+    disableRecent,
+    customEmojis,
+    position,
+    language
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React.createElement("div", {
@@ -3636,10 +3721,11 @@ const EmojiPickerWrapper = props => {
     }
   }
   useEffect(() => {
-    if (buttonRef?.current?.style) {
+    var _buttonRef$current;
+    if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
       buttonRef.current.style.position = "relative";
       setCustomButton(buttonRef.current);
-    } else if (buttonElement?.style) {
+    } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
       buttonElement.style.position = "relative";
       setCustomButton(buttonElement);
     }
@@ -3761,7 +3847,7 @@ function getElementWithFocus() {
  */
 function getSelectionStart() {
   const node = document.getSelection().anchorNode;
-  return node?.nodeType == 3 ? node : null;
+  return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
 }
 
 // @ts-check
@@ -3805,8 +3891,9 @@ function useMention(searchMention) {
 
   /** @type {(event: React.KeyboardEvent) => void} */
   const onKeyUp = useCallback(async event => {
+    var _getElementWithFocus;
     if (typeof searchMention !== "function") return;
-    if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
+    if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
       const elementWithFocus = getElementWithFocus();
       elementWithFocus.element.parentElement.remove();
     } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -3826,8 +3913,6 @@ function useMention(searchMention) {
   };
 }
 
-// @ts-check
-
 /**
  * @typedef {import('../types/types').MentionUser} MentionUser
  */
@@ -3850,12 +3935,13 @@ function useMention(searchMention) {
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
-const MentionUserList = ({
-  users,
-  mentionSearchText,
-  onSelect,
-  addEventListener
-}, ref) => {
+const MentionUserList = (_ref, ref) => {
+  let {
+    users,
+    mentionSearchText,
+    onSelect,
+    addEventListener
+  } = _ref;
   const [selectedUser, setSelectedUser] = useState(0);
   useImperativeHandle(ref, () => ({
     prevUser: () => {
@@ -3886,7 +3972,7 @@ const MentionUserList = ({
    * @return {string}
    */
   function getMentionSelectedNameEl(selectedText, rest) {
-    return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
+    return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
   }
 
   /** @type {(MentionUser & {nameHtml: string})[]} */
@@ -3907,10 +3993,9 @@ const MentionUserList = ({
           }).join(" ");
         }
       }
-      return {
-        ...user,
+      return _objectSpread2(_objectSpread2({}, user), {}, {
         nameHtml
-      };
+      });
     });
   }, [mentionSearchText, users]);
 
@@ -3945,7 +4030,7 @@ const MentionUserList = ({
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: handleClick(user),
-    className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
+    className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
     onMouseOver: () => setSelectedUser(index)
   }, /*#__PURE__*/React.createElement("img", {
     className: "react-input-emoji--mention--item--img",
@@ -3983,12 +4068,13 @@ const MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
 
 // eslint-disable-next-line valid-jsdoc
 /** @type {React.FC<Props>} */
-const MentionWrapper = ({
-  searchMention,
-  addEventListener,
-  appendContent,
-  addSanitizeFn
-}) => {
+const MentionWrapper = _ref => {
+  let {
+    searchMention,
+    addEventListener,
+    appendContent,
+    addSanitizeFn
+  } = _ref;
   /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
   const metionUserListRef = useRef(null);
   const [showUserList, setShowUserList] = useState(false);
@@ -4006,7 +4092,7 @@ const MentionWrapper = ({
       container.innerHTML = html;
       const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
       mentionsEl.forEach(mentionEl => {
-        container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
+        container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
       });
       return container.innerHTML;
     });
@@ -4079,7 +4165,7 @@ const MentionWrapper = ({
    */
   function handleSelect(user) {
     onSelectUser();
-    appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
+    appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
     className: "react-input-emoji--mention--container"
@@ -4289,7 +4375,8 @@ function InputEmoji(props, ref) {
     addPolluteFn,
     pollute
   } = usePollute();
-  const updateHTML = useCallback((nextValue = "") => {
+  const updateHTML = useCallback(function () {
+    let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
     if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;