react-input-emoji 5.0.2 → 5.1.0

package/dist/index.js

@@ -740,6 +740,43 @@ function totalCharacters(_ref2) {
   var emojisCount = (html.match(/<img/g) || []).length;
   return textCount + emojisCount;
 } // eslint-disable-next-line valid-jsdoc
+/**
+ * Set caret to the end of text value
+ * @param {React.MutableRefObject<HTMLDivElement| null>} input
+ */
+
+function moveCaretToEnd(input) {
+  var range;
+  var selection;
+
+  if (document.createRange && input.current) {
+    range = document.createRange();
+    range.selectNodeContents(input.current);
+    range.collapse(false);
+    selection = window.getSelection();
+
+    if (selection) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+}
+/**
+ * 
+ * @param {HTMLDivElement} inputDiv 
+ * @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>
+
+
+  return _final;
+}
 
 // @ts-check
 /**
@@ -747,9 +784,11 @@ function totalCharacters(_ref2) {
  */
 // eslint-disable-next-line valid-jsdoc
 
-/** */
+/**
+ * @param {boolean} shouldReturn
+ */
 
-function useSanitize() {
+function useSanitize(shouldReturn) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
   var sanitizeFnsRef = React.useRef([]);
   var sanitizedTextRef = React.useRef("");
@@ -764,7 +803,7 @@ function useSanitize() {
     var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
       return fn(acc);
     }, html);
-    result = replaceAllHtmlToString(result);
+    result = replaceAllHtmlToString(result, shouldReturn);
     sanitizedTextRef.current = result;
     return result;
   }, []);
@@ -777,13 +816,21 @@ function useSanitize() {
 /**
  *
  * @param {string} html
+ * @param {boolean} shouldReturn
  * @return {string}
  */
 
-function replaceAllHtmlToString(html) {
+function replaceAllHtmlToString(html, shouldReturn) {
   var container = document.createElement("div");
   container.innerHTML = html;
-  var text = container.innerText || ""; // remove all ↵ for safari
+  var text;
+
+  if (shouldReturn) {
+    text = removeHtmlExceptBr(container);
+  } else {
+    text = container.innerText || "";
+  } // remove all ↵ for safari
+
 
   text = text.replace(/\n/gi, "");
   return text;
@@ -891,6 +938,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
  * @property {(event: React.KeyboardEvent) => void} onArrowUp
  * @property {(event: React.KeyboardEvent) => void} onArrowDown
  * @property {(event: React.KeyboardEvent) => void} onEnter
+ * @property {boolean} shouldReturn
  * @property {(event: React.ClipboardEvent) => void} onCopy
  * @property {(event: React.ClipboardEvent) => void} onPaste
  * @property {string} placeholder
@@ -1005,6 +1053,16 @@ 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);
+        moveCaretToEnd(textInputRef);
+      }
+
+      return;
+    }
+
     if (event.key === "Enter") {
       props.onEnter(event);
     } else if (event.key === "ArrowUp") {
@@ -4728,6 +4786,7 @@ function usePollute() {
  * @property {() => void} onClick
  * @property {() => void} onFocus
  * @property {() => void=} onBlur
+ * @property {boolean} shouldReturn
  * @property {number} maxLength
  * @property {boolean} keepOpened
  * @property {(event: KeyboardEvent) => void} onKeyDown
@@ -4754,6 +4813,7 @@ function usePollute() {
 function InputEmoji(props, ref) {
   var onChange = props.onChange,
       onEnter = props.onEnter,
+      shouldReturn = props.shouldReturn,
       onResize = props.onResize,
       onClick = props.onClick,
       onFocus = props.onFocus,
@@ -4783,7 +4843,7 @@ function InputEmoji(props, ref) {
       addEventListener = _useEventListeners.addEventListener,
       listeners = _useEventListeners.listeners;
 
-  var _useSanitize = useSanitize(),
+  var _useSanitize = useSanitize(props.shouldReturn),
       addSanitizeFn = _useSanitize.addSanitizeFn,
       sanitize = _useSanitize.sanitize,
       sanitizedTextRef = _useSanitize.sanitizedTextRef;
@@ -4951,6 +5011,7 @@ function InputEmoji(props, ref) {
     ref: textInputRef,
     onCopy: handleCopy,
     onPaste: handlePaste,
+    shouldReturn: shouldReturn,
     onBlur: listeners.blur.publish,
     onFocus: listeners.focus.publish,
     onArrowUp: listeners.arrowUp.publish,
@@ -4992,6 +5053,7 @@ InputEmojiWithRef.defaultProps = {
   fontSize: 15,
   fontFamily: "sans-serif",
   tabIndex: 0,
+  shouldReturn: false,
   customEmojis: []
 };