react-input-emoji 5.0.2 → 5.1.1

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js CHANGED
@@ -740,6 +740,43 @@ function totalCharacters(_ref2) {
740
740
  var emojisCount = (html.match(/<img/g) || []).length;
741
741
  return textCount + emojisCount;
742
742
  } // eslint-disable-next-line valid-jsdoc
743
+ /**
744
+ * Set caret to the end of text value
745
+ * @param {React.MutableRefObject<HTMLDivElement| null>} input
746
+ */
747
+
748
+ function moveCaretToEnd(input) {
749
+ var range;
750
+ var selection;
751
+
752
+ if (document.createRange && input.current) {
753
+ range = document.createRange();
754
+ range.selectNodeContents(input.current);
755
+ range.collapse(false);
756
+ selection = window.getSelection();
757
+
758
+ if (selection) {
759
+ selection.removeAllRanges();
760
+ selection.addRange(range);
761
+ }
762
+ }
763
+ }
764
+ /**
765
+ *
766
+ * @param {HTMLDivElement} inputDiv
767
+ * @return {string}
768
+ */
769
+
770
+ function removeHtmlExceptBr(inputDiv) {
771
+ var temp = inputDiv.innerHTML.replace(/<br\s*\/?>/gi, '[BR]'); // temporarily replace <br> with placeholder
772
+
773
+ var stripped = temp.replace(/<[^>]+>/g, ''); // strip all html tags
774
+
775
+ var _final = stripped.replace(/\[BR\]/gi, '</br>'); // replace placeholders with <br>
776
+
777
+
778
+ return _final;
779
+ }
743
780
 
744
781
  // @ts-check
745
782
  /**
@@ -747,9 +784,11 @@ function totalCharacters(_ref2) {
747
784
  */
748
785
  // eslint-disable-next-line valid-jsdoc
749
786
 
750
- /** */
787
+ /**
788
+ * @param {boolean} shouldReturn
789
+ */
751
790
 
752
- function useSanitize() {
791
+ function useSanitize(shouldReturn) {
753
792
  /** @type {React.MutableRefObject<SanitizeFn[]>} */
754
793
  var sanitizeFnsRef = React.useRef([]);
755
794
  var sanitizedTextRef = React.useRef("");
@@ -764,7 +803,7 @@ function useSanitize() {
764
803
  var result = sanitizeFnsRef.current.reduce(function (acc, fn) {
765
804
  return fn(acc);
766
805
  }, html);
767
- result = replaceAllHtmlToString(result);
806
+ result = replaceAllHtmlToString(result, shouldReturn);
768
807
  sanitizedTextRef.current = result;
769
808
  return result;
770
809
  }, []);
@@ -777,13 +816,21 @@ function useSanitize() {
777
816
  /**
778
817
  *
779
818
  * @param {string} html
819
+ * @param {boolean} shouldReturn
780
820
  * @return {string}
781
821
  */
782
822
 
783
- function replaceAllHtmlToString(html) {
823
+ function replaceAllHtmlToString(html, shouldReturn) {
784
824
  var container = document.createElement("div");
785
825
  container.innerHTML = html;
786
- var text = container.innerText || ""; // remove all ↵ for safari
826
+ var text;
827
+
828
+ if (shouldReturn) {
829
+ text = removeHtmlExceptBr(container);
830
+ } else {
831
+ text = container.innerText || "";
832
+ } // remove all ↵ for safari
833
+
787
834
 
788
835
  text = text.replace(/\n/gi, "");
789
836
  return text;
@@ -891,6 +938,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
891
938
  * @property {(event: React.KeyboardEvent) => void} onArrowUp
892
939
  * @property {(event: React.KeyboardEvent) => void} onArrowDown
893
940
  * @property {(event: React.KeyboardEvent) => void} onEnter
941
+ * @property {boolean} shouldReturn
894
942
  * @property {(event: React.ClipboardEvent) => void} onCopy
895
943
  * @property {(event: React.ClipboardEvent) => void} onPaste
896
944
  * @property {string} placeholder
@@ -1005,6 +1053,16 @@ var TextInput = function TextInput(_ref, ref) {
1005
1053
  */
1006
1054
 
1007
1055
  function handleKeyDown(event) {
1056
+ if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
1057
+ event.preventDefault();
1058
+
1059
+ if (textInputRef.current) {
1060
+ textInputRef.current.innerHTML = "".concat(textInputRef.current.innerHTML, "</br></br>");
1061
+ moveCaretToEnd(textInputRef);
1062
+ return;
1063
+ }
1064
+ }
1065
+
1008
1066
  if (event.key === "Enter") {
1009
1067
  props.onEnter(event);
1010
1068
  } else if (event.key === "ArrowUp") {
@@ -4728,6 +4786,7 @@ function usePollute() {
4728
4786
  * @property {() => void} onClick
4729
4787
  * @property {() => void} onFocus
4730
4788
  * @property {() => void=} onBlur
4789
+ * @property {boolean} shouldReturn
4731
4790
  * @property {number} maxLength
4732
4791
  * @property {boolean} keepOpened
4733
4792
  * @property {(event: KeyboardEvent) => void} onKeyDown
@@ -4754,6 +4813,7 @@ function usePollute() {
4754
4813
  function InputEmoji(props, ref) {
4755
4814
  var onChange = props.onChange,
4756
4815
  onEnter = props.onEnter,
4816
+ shouldReturn = props.shouldReturn,
4757
4817
  onResize = props.onResize,
4758
4818
  onClick = props.onClick,
4759
4819
  onFocus = props.onFocus,
@@ -4783,7 +4843,7 @@ function InputEmoji(props, ref) {
4783
4843
  addEventListener = _useEventListeners.addEventListener,
4784
4844
  listeners = _useEventListeners.listeners;
4785
4845
 
4786
- var _useSanitize = useSanitize(),
4846
+ var _useSanitize = useSanitize(props.shouldReturn),
4787
4847
  addSanitizeFn = _useSanitize.addSanitizeFn,
4788
4848
  sanitize = _useSanitize.sanitize,
4789
4849
  sanitizedTextRef = _useSanitize.sanitizedTextRef;
@@ -4951,6 +5011,7 @@ function InputEmoji(props, ref) {
4951
5011
  ref: textInputRef,
4952
5012
  onCopy: handleCopy,
4953
5013
  onPaste: handlePaste,
5014
+ shouldReturn: shouldReturn,
4954
5015
  onBlur: listeners.blur.publish,
4955
5016
  onFocus: listeners.focus.publish,
4956
5017
  onArrowUp: listeners.arrowUp.publish,
@@ -4992,6 +5053,7 @@ InputEmojiWithRef.defaultProps = {
4992
5053
  fontSize: 15,
4993
5054
  fontFamily: "sans-serif",
4994
5055
  tabIndex: 0,
5056
+ shouldReturn: false,
4995
5057
  customEmojis: []
4996
5058
  };
4997
5059