react-input-emoji 4.1.0 → 4.2.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, memo, useMemo, useState } from 'react';
+import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useMemo, memo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 function styleInject(css, ref) {
@@ -156,6 +156,7 @@ function handlePasteHtmlAtCaret(html) {
   if (window.getSelection) {
     // IE9 and non-IE
     sel = window.getSelection();
+    if (sel === null) return;
 
     if (sel.getRangeAt && sel.rangeCount) {
       range = sel.getRangeAt(0);
@@ -251,7 +252,7 @@ function replaceAllHtmlToString(html) {
 /**
  * @typedef {Object} Props
  * @property {React.Ref<any>} ref
- * @property {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @property {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @property {(value: string) => void} setValue
  * @property {() => void} emitChange
  */
@@ -281,10 +282,14 @@ function useExpose({
     },
 
     focus: () => {
+      if (textInputRef.current === null) return;
       textInputRef.current.focus();
     },
     blur: () => {
-      sanitize(textInputRef.current.html);
+      if (textInputRef.current !== null) {
+        sanitize(textInputRef.current.html);
+      }
+
       emitChange();
     }
   }));
@@ -294,16 +299,17 @@ function useExpose({
 
 /**
  * useEmit
- * @param {React.MutableRefObject<import('../text-input').Ref>} textInputRef
+ * @param {React.MutableRefObject<import('../text-input').Ref | null>} textInputRef
  * @param {(size: {width: number, height: number}) => void} onResize
  * @param {(text: string) => void} onChange
  */
 
 function useEmit(textInputRef, onResize, onChange) {
+  /** @type {React.MutableRefObject<{width: number; height: number} | null>} */
   const currentSizeRef = useRef(null);
   const onChangeFn = useRef(onChange);
   const checkAndEmitResize = useCallback(() => {
-    if (textInputRef.current) {
+    if (textInputRef.current !== null) {
       const currentSize = currentSizeRef.current;
       const nextSize = textInputRef.current.size;
 
@@ -337,7 +343,7 @@ function useEmit(textInputRef, onResize, onChange) {
  * @property {(event: React.KeyboardEvent) => void} onKeyDown
  * @property {(event: React.KeyboardEvent) => void} onKeyUp
  * @property {() => void} onFocus
- * @property {() => void=} onBlur
+ * @property {() => void} onBlur
  * @property {(sanitizedText: string) => void=} onChange
  * @property {(event: React.KeyboardEvent) => void} onArrowUp
  * @property {(event: React.KeyboardEvent) => void} onArrowDown
@@ -374,40 +380,63 @@ const TextInput = ({
 }, ref) => {
   useImperativeHandle(ref, () => ({
     appendContent: html => {
-      textInputRef.current.focus();
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
       handlePasteHtmlAtCaret(html);
-      textInputRef.current.focus();
 
-      if (textInputRef.current.innerHTML.trim() === "") {
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+
+      if (textInputRef.current && placeholderRef.current && textInputRef.current.innerHTML.trim() === "") {
         placeholderRef.current.style.visibility = "visible";
-      } else {
+      } else if (placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (textInputRef.current && typeof onChange === 'function') {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     set html(value) {
-      textInputRef.current.innerHTML = value;
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = value;
+      }
 
-      if (value.trim() === "") {
-        placeholderRef.current.style.visibility = "visible";
-      } else {
-        placeholderRef.current.style.visibility = "hidden";
+      if (placeholderRef.current) {
+        if (value.trim() === "") {
+          placeholderRef.current.style.visibility = "visible";
+        } else {
+          placeholderRef.current.style.visibility = "hidden";
+        }
       }
 
-      onChange(textInputRef.current.innerHTML);
+      if (typeof onChange === 'function' && textInputRef.current) {
+        onChange(textInputRef.current.innerHTML);
+      }
     },
 
     get html() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerHTML;
     },
 
     get text() {
+      if (!textInputRef.current) return '';
       return textInputRef.current.innerText;
     },
 
     get size() {
+      if (!textInputRef.current) {
+        return {
+          width: 0,
+          height: 0
+        };
+      }
+
       return {
         width: textInputRef.current.offsetWidth,
         height: textInputRef.current.offsetHeight
@@ -415,14 +444,15 @@ const TextInput = ({
     },
 
     focus() {
+      if (!textInputRef.current) return;
       textInputRef.current.focus();
     }
 
   }));
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const placeholderRef = useRef(null);
-  /** @type {React.MutableRefObject<HTMLDivElement>} */
+  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
 
   const textInputRef = useRef(null);
   /**
@@ -438,7 +468,7 @@ const TextInput = ({
     } else if (event.key === "ArrowDown") {
       props.onArrowDown(event);
     } else {
-      if (event.key.length === 1) {
+      if (event.key.length === 1 && placeholderRef.current) {
         placeholderRef.current.style.visibility = "hidden";
       }
     }
@@ -458,18 +488,20 @@ const TextInput = ({
 
 
   function handleKeyUp(event) {
-    var _input$innerText;
-
     props.onKeyUp(event);
     const input = textInputRef.current;
 
-    if (((_input$innerText = input.innerText) === null || _input$innerText === void 0 ? void 0 : _input$innerText.trim()) === "") {
-      placeholderRef.current.style.visibility = "visible";
-    } else {
-      placeholderRef.current.style.visibility = "hidden";
+    if (placeholderRef.current) {
+      if (input?.innerText?.trim() === "") {
+        placeholderRef.current.style.visibility = "visible";
+      } else {
+        placeholderRef.current.style.visibility = "hidden";
+      }
     }
 
-    onChange(textInputRef.current.innerHTML);
+    if (typeof onChange === 'function' && textInputRef.current) {
+      onChange(textInputRef.current.innerHTML);
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {
@@ -49301,23 +49333,20 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
   return Constructor;
 }
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function _typeof(obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function _typeof(obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
-
-  return _typeof(obj);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 var mapping = {
@@ -49407,8 +49436,8 @@ var stringFromCodePoint = _String.fromCodePoint || function stringFromCodePoint(
     codePoint > 0x10ffff || // not a valid Unicode code point
     Math.floor(codePoint) != codePoint // not an integer
     ) {
-        throw RangeError('Invalid code point: ' + codePoint);
-      }
+      throw RangeError('Invalid code point: ' + codePoint);
+    }
 
     if (codePoint <= 0xffff) {
       // BMP code point
@@ -50011,7 +50040,7 @@ function _defineProperty(obj, key, value) {
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -50024,7 +50053,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -50039,24 +50067,25 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -50072,6 +50101,9 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -52606,7 +52638,7 @@ function getElementWithFocus() {
 
 function getSelectionStart() {
   const node = document.getSelection().anchorNode;
-  return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
+  return node?.nodeType == 3 ? node : null;
 }
 
 // @ts-check
@@ -52651,11 +52683,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 = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
+    if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
       const elementWithFocus = getElementWithFocus();
       elementWithFocus.element.parentElement.remove();
     } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -53006,7 +53036,8 @@ function useEventListeners() {
     arrowUp: createObserver(),
     arrowDown: createObserver(),
     enter: createObserver(),
-    focus: createObserver()
+    focus: createObserver(),
+    blur: createObserver()
   }), []);
   /**
    * @template {keyof TextInputListeners} T, K
@@ -53072,6 +53103,7 @@ function usePollute() {
  * @property {(size: {width: number, height: number}) => void} onResize
  * @property {() => void} onClick
  * @property {() => void} onFocus
+ * @property {() => void=} onBlur
  * @property {number} maxLength
  * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
@@ -53101,6 +53133,7 @@ function InputEmoji(props, ref) {
     onResize,
     onClick,
     onFocus,
+    onBlur,
     onKeyDown,
     theme,
     cleanOnEnter,
@@ -53119,7 +53152,7 @@ function InputEmoji(props, ref) {
     fontSize,
     fontFamily
   } = props;
-  /** @type {React.MutableRefObject<import('./text-input').Ref>} */
+  /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
 
   const textInputRef = useRef(null);
   const {
@@ -53136,6 +53169,7 @@ function InputEmoji(props, ref) {
     pollute
   } = usePollute();
   const updateHTML = useCallback((nextValue = "") => {
+    if (textInputRef.current === null) return;
     textInputRef.current.html = replaceAllTextEmojis(nextValue);
     sanitizedTextRef.current = nextValue;
   }, [sanitizedTextRef]);
@@ -53164,11 +53198,11 @@ function InputEmoji(props, ref) {
      * @return {boolean}
      */
     function handleKeydown(event) {
-      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && totalCharacters(textInputRef.current) >= maxLength) {
+      if (typeof maxLength !== "undefined" && event.key !== "Backspace" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
         event.preventDefault();
       }
 
-      if (event.key === "Enter") {
+      if (event.key === "Enter" && textInputRef.current) {
         event.preventDefault();
         const text = sanitize(textInputRef.current.html);
         emitChange(sanitizedTextRef.current);
@@ -53217,6 +53251,19 @@ function InputEmoji(props, ref) {
       unsubscribe();
     };
   }, [addEventListener, onClick, onFocus]);
+  useEffect(() => {
+    /** */
+    function handleBlur() {
+      if (typeof onBlur === 'function') {
+        onBlur();
+      }
+    }
+
+    const unsubscribe = addEventListener('blur', handleBlur);
+    return () => {
+      unsubscribe();
+    };
+  }, [addEventListener, onBlur]);
   /**
    *
    * @param {string} html
@@ -53233,11 +53280,13 @@ function InputEmoji(props, ref) {
 
 
   function appendContent(html) {
-    if (typeof maxLength !== "undefined" && totalCharacters(textInputRef.current) >= maxLength) {
+    if (typeof maxLength !== "undefined" && textInputRef.current !== null && totalCharacters(textInputRef.current) >= maxLength) {
       return;
     }
 
-    textInputRef.current.appendContent(html);
+    if (textInputRef.current !== null) {
+      textInputRef.current.appendContent(html);
+    }
   }
   /**
    * Handle copy of current selected text
@@ -53277,6 +53326,7 @@ function InputEmoji(props, ref) {
     ref: textInputRef,
     onCopy: handleCopy,
     onPaste: handlePaste,
+    onBlur: listeners.blur.publish,
     onFocus: listeners.focus.publish,
     onArrowUp: listeners.arrowUp.publish,
     onArrowDown: listeners.arrowDown.publish,
@@ -53319,5 +53369,5 @@ InputEmojiWithRef.defaultProps = {
   customEmojis: []
 };
 
-export default InputEmojiWithRef;
+export { InputEmojiWithRef as default };
 //# sourceMappingURL=index.es.js.map