react-input-emoji 5.1.0 → 5.2.1

package/dist/index.js

@@ -772,7 +772,7 @@ function removeHtmlExceptBr(inputDiv) {
 
   var stripped = temp.replace(/<[^>]+>/g, ''); // strip all html tags
 
-  var _final = stripped.replace(/\[BR\]/gi, '<br>'); // replace placeholders with <br>
+  var _final = stripped.replace(/\[BR\]/gi, '</br>'); // replace placeholders with <br>
 
 
   return _final;
@@ -1054,13 +1054,13 @@ var TextInput = function TextInput(_ref, ref) {
 
   function handleKeyDown(event) {
     if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
-      if (!event.shiftKey && event.ctrlKey && textInputRef.current) {
-        textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "<br><br>");
-        console.log('asjda', textInputRef.current.innerHTML);
+      event.preventDefault();
+
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
         moveCaretToEnd(textInputRef);
+        return;
       }
-
-      return;
     }
 
     if (event.key === "Enter") {
@@ -3985,6 +3985,7 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
  * @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
  * @property {boolean} disableRecent
  * @property {import("emoji-mart").CustomEmoji[]=} customEmojis
+ * @property {('above' | 'below')=} position
  */
 
 /**
@@ -3998,14 +3999,18 @@ function EmojiPickerContainer(_ref) {
       theme = _ref.theme,
       handleSelectEmoji = _ref.handleSelectEmoji,
       disableRecent = _ref.disableRecent,
-      customEmojis = _ref.customEmojis;
+      customEmojis = _ref.customEmojis,
+      position = _ref.position;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker--container"
   }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker--wrapper",
     onClick: function onClick(evt) {
       return evt.stopPropagation();
-    }
+    },
+    style: position === 'below' ? {
+      top: '40px'
+    } : {}
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "react-emoji-picker"
   }, /*#__PURE__*/React__default["default"].createElement(EmojiPicker$1, {
@@ -4016,6 +4021,7 @@ function EmojiPickerContainer(_ref) {
   }))));
 }
 
+var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
 /**
  * @typedef {import('../types/types').SanitizeFn} SanitizeFn
  */
@@ -4060,6 +4066,13 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
       _useState4 = _slicedToArray(_useState3, 2),
       customButton = _useState4[0],
       setCustomButton = _useState4[1];
+  /** @type {['above' | 'below' | undefined, React.Dispatch<React.SetStateAction<'above' | 'below' | undefined>>]} */
+
+
+  var _useState5 = React.useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      emojiPickerPosition = _useState6[0],
+      setEmojiPickerPosition = _useState6[1];
 
   React.useEffect(function () {
     addSanitizeFn(replaceAllTextEmojiToString);
@@ -4097,9 +4110,30 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
   function toggleShowPicker(event) {
     event.stopPropagation();
     event.preventDefault();
+    setEmojiPickerPosition(calcTopPosition(event));
     setShowPicker(function (currentShowPicker) {
       return !currentShowPicker;
     });
+  }
+  /**
+   * 
+   * @param {React.MouseEvent} event
+   * @return {'above' | 'below'}
+   */
+
+
+  function calcTopPosition(event) {
+    var btn = event.currentTarget;
+    var btnRect = btn.getBoundingClientRect();
+    var popoverHeight = EMOJI_PICKER_CONTAINER_HEIGHT; // Decide to display above or below based on available space
+
+    if (btnRect.top >= popoverHeight) {
+      // Display above
+      return 'above';
+    } else {
+      // Display below
+      return 'below';
+    }
   } // eslint-disable-next-line valid-jsdoc
 
   /**
@@ -4129,7 +4163,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     theme: theme,
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    position: emojiPickerPosition
   }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker,
@@ -4139,7 +4174,8 @@ var EmojiPickerWrapper = function EmojiPickerWrapper(props) {
     theme: theme,
     handleSelectEmoji: handleSelectEmoji,
     disableRecent: disableRecent,
-    customEmojis: customEmojis
+    customEmojis: customEmojis,
+    position: emojiPickerPosition
   }), /*#__PURE__*/React__default["default"].createElement(EmojiPickerButton, {
     showPicker: showPicker,
     toggleShowPicker: toggleShowPicker