react-input-emoji 5.6.10 → 5.7.0

package/dist/index.js

@@ -695,9 +695,11 @@ function totalCharacters(_ref2) {
  * @return {string}
  */
 function removeHtmlExceptBr(inputDiv) {
-  var temp = inputDiv.innerHTML.replace(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
-  var stripped = temp.replace(/<[^>]+>/g, ""); // strip all html tags
-  var _final = stripped.replace(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
+  var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
+  var tempContainer = document.createElement("div");
+  tempContainer.innerHTML = temp;
+  var stripped = tempContainer.innerText; // strip all html tags
+  var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
   return _final;
 }
 
@@ -732,7 +734,7 @@ function getSelectionStart$1(range) {
 
 /**
  * 
- * @returns {Object} cursor
+ * @return {Object} cursor
  */
 function getCursor() {
   var selection = window.getSelection();
@@ -839,9 +841,7 @@ function replaceAllHtmlToString(html, shouldReturn) {
 
   // remove all ↵ for safari
   text = text.replace(/\n/gi, "");
-  var tempContainer = document.createElement("div");
-  tempContainer.innerHTML = text;
-  return tempContainer.innerText || "";
+  return text;
 }
 
 // @ts-check
@@ -943,7 +943,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
- * @property {React.CSSProperties} style
+ * @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
  * @property {number} tabIndex
  * @property {string} className
  * @property {(html: string) => void} onChange
@@ -1030,6 +1030,15 @@ var TextInput = function TextInput(_ref, ref) {
     };
   });
 
+  /** @type {React.CSSProperties} */
+  var placeholderStyle = React.useMemo(function () {
+    var placeholderStyle = {};
+    if (style.placeholderColor) {
+      placeholderStyle.color = style.placeholderColor;
+    }
+    return placeholderStyle;
+  }, [style.placeholderColor]);
+
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
   var placeholderRef = React.useRef(null);
   /** @type {React.MutableRefObject<HTMLDivElement | null>} */
@@ -1093,7 +1102,8 @@ var TextInput = function TextInput(_ref, ref) {
     onClick: handleClick
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     ref: placeholderRef,
-    className: "react-input-emoji--placeholder"
+    className: "react-input-emoji--placeholder",
+    style: placeholderStyle
   }, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: textInputRef,
     onKeyDown: handleKeyDown,
@@ -4497,6 +4507,7 @@ function usePollute() {
  * @property {boolean=} cleanOnEnter
  * @property {(text: string) => void=} onEnter
  * @property {string=} placeholder
+ * @property {string=} placeholderColor
  * @property {(size: {width: number, height: number}) => void=} onResize
  * @property {() => void=} onClick
  * @property {() => void=} onFocus
@@ -4513,6 +4524,7 @@ function usePollute() {
  * @property {string=} borderColor
  * @property {number=} fontSize
  * @property {string=} fontFamily
+ * @property {string=} background
  * @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
  * @property {import('./types/types').Languages=} language
  * @property {(text: string) => Promise<MetionUser[]>=} searchMention
@@ -4552,7 +4564,9 @@ function InputEmoji(props, ref) {
     borderRadius = props.borderRadius,
     borderColor = props.borderColor,
     fontSize = props.fontSize,
-    fontFamily = props.fontFamily;
+    fontFamily = props.fontFamily,
+    background = props.background,
+    placeholderColor = props.placeholderColor;
 
   /** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
   var textInputRef = React.useRef(null);
@@ -4721,7 +4735,9 @@ function InputEmoji(props, ref) {
       borderRadius: borderRadius,
       borderColor: borderColor,
       fontSize: fontSize,
-      fontFamily: fontFamily
+      fontFamily: fontFamily,
+      background: background,
+      placeholderColor: placeholderColor
     },
     tabIndex: tabIndex,
     className: inputClass,
@@ -4748,6 +4764,7 @@ InputEmojiWithRef.defaultProps = {
   borderColor: "#EAEAEA",
   fontSize: 15,
   fontFamily: "sans-serif",
+  background: "white",
   tabIndex: 0,
   shouldReturn: false,
   customEmojis: [],