react-input-emoji 5.0.2 → 5.1.1

package/README.md

@@ -46,7 +46,7 @@ export default function Example() {
 ## Props
 
 | Prop           | Type     | Default          | Description                                                                                                              |
-|----------------|----------|------------------|--------------------------------------------------------------------------------------------------------------------------|
+| -------------- | -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | `value`        | string   | ""               | The input value.                                                                                                         |
 | `onChange`     | function | -                | This function is called when the value of the input changes. The first argument is the current value.                    |
 | `onResize`     | function | -                | This function is called when the width or the height of the input changes. The first argument is the current size value. |
@@ -62,6 +62,7 @@ export default function Example() {
 | `borderColor`  | string   | "#EAEAEA"        | The border color of the input container.                                                                                 |
 | `fontSize`     | number   | 15               | The font size of the placeholder and input container.                                                                    |
 | `fontFamily`   | string   | "sans-serif"     | The font family of the placeholder and input container.                                                                  |
+| `shouldReturn` | boolean  | -                | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line.                     |
 
 ## License
 

package/dist/index.es.js

@@ -732,6 +732,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
 /**
@@ -739,9 +776,11 @@ function totalCharacters(_ref2) {
  */
 // eslint-disable-next-line valid-jsdoc
 
-/** */
+/**
+ * @param {boolean} shouldReturn
+ */
 
-function useSanitize() {
+function useSanitize(shouldReturn) {
   /** @type {React.MutableRefObject<SanitizeFn[]>} */
   var sanitizeFnsRef = useRef([]);
   var sanitizedTextRef = useRef("");
@@ -756,7 +795,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;
   }, []);
@@ -769,13 +808,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;
@@ -883,6 +930,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
@@ -997,6 +1045,16 @@ var TextInput = function TextInput(_ref, ref) {
    */
 
   function handleKeyDown(event) {
+    if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
+      event.preventDefault();
+
+      if (textInputRef.current) {
+        textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
+        moveCaretToEnd(textInputRef);
+        return;
+      }
+    }
+
     if (event.key === "Enter") {
       props.onEnter(event);
     } else if (event.key === "ArrowUp") {
@@ -4720,6 +4778,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
@@ -4746,6 +4805,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,
@@ -4775,7 +4835,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;
@@ -4943,6 +5003,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,
@@ -4984,6 +5045,7 @@ InputEmojiWithRef.defaultProps = {
   fontSize: 15,
   fontFamily: "sans-serif",
   tabIndex: 0,
+  shouldReturn: false,
   customEmojis: []
 };