react-input-emoji 5.6.4 → 5.6.6

package/dist/index.js

@@ -607,6 +607,24 @@ function replaceAllTextEmojiToString(html) {
 
 // @ts-check
 
+/**
+ * Handle copy of current selected text
+ * @param {React.ClipboardEvent} event
+ */
+function handleCopy(event) {
+  var selectedText = window.getSelection();
+  if (selectedText === null) {
+    return;
+  }
+  var container = document.createElement("div");
+  for (var i = 0, len = selectedText.rangeCount; i < len; ++i) {
+    container.appendChild(selectedText.getRangeAt(i).cloneContents());
+  }
+  container = replaceEmojiToString(container);
+  event.clipboardData.setData("text", container.innerText);
+  event.preventDefault();
+}
+
 /**
  *
  * @param {string} html
@@ -646,6 +664,19 @@ function handlePasteHtmlAtCaret(html) {
   }
 }
 
+/**
+ * Replace emoji img to its string value
+ * @param {HTMLDivElement} container
+ * @return {HTMLDivElement}
+ */
+function replaceEmojiToString(container) {
+  var images = Array.prototype.slice.call(container.querySelectorAll("img"));
+  images.forEach(function (image) {
+    image.outerHTML = image.dataset.emoji;
+  });
+  return container;
+}
+
 /**
  *
  * @param {{text: string, html: string}} props
@@ -658,35 +689,100 @@ function totalCharacters(_ref2) {
   var emojisCount = (html.match(/<img/g) || []).length;
   return textCount + emojisCount;
 }
+/**
+ *
+ * @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;
+}
 
 /**
- * Set caret to the end of text value
- * @param {React.MutableRefObject<HTMLDivElement| null>} input
+ * 
+ * @param {*} range 
+ * @returns 
  */
-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);
+function getSelectionStart$1(range) {
+  var node = range.startContainer;
+  var offset = range.startOffset;
+
+  // Handle cases where the selection start node is not a text node
+  if (node.nodeType !== Node.TEXT_NODE) {
+    while (node.nodeType !== Node.TEXT_NODE) {
+      node = node.nextSibling;
+      if (!node) break;
     }
+    if (!node) {
+      node = range.commonAncestorContainer;
+      while (node.nodeType !== Node.TEXT_NODE) {
+        node = node.firstChild;
+      }
+    }
+    offset = 0;
   }
+  return {
+    node: node,
+    offset: offset
+  };
 }
+
 /**
  * 
- * @param {HTMLDivElement} inputDiv 
- * @return {string}
+ * @returns {Object} cursor
  */
-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;
+function getCursor() {
+  var selection = window.getSelection();
+  var range = selection.getRangeAt(0);
+  var selectionStart = getSelectionStart$1(range);
+  return {
+    selection: selection,
+    range: range,
+    selectionStart: selectionStart
+  };
+}
+
+/**
+ *
+ */
+function addLineBreak() {
+  var _getCursor = getCursor(),
+    selection = _getCursor.selection,
+    range = _getCursor.range,
+    selectionStart = _getCursor.selectionStart;
+
+  // If cursor is at the end of the text content, add one more line break
+  if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
+    var br = document.createElement("br");
+    range.insertNode(br);
+    range.setStartAfter(br);
+    range.setEndAfter(br);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    var br2 = document.createElement("br");
+    range.insertNode(br2);
+    range.setStartAfter(br2);
+    range.setEndAfter(br2);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  } else {
+    var _br = document.createElement("br");
+    range.insertNode(_br);
+    range.setStartAfter(_br);
+    range.setEndAfter(_br);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Set cursor position right before the first letter after the line break
+    if (selectionStart.node.nextSibling && selectionStart.node.nextSibling.nodeType === Node.TEXT_NODE) {
+      range.setStart(selectionStart.node.nextSibling, 1);
+      range.setEnd(selectionStart.node.nextSibling, 1);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
 }
 
 // @ts-check
@@ -945,8 +1041,7 @@ var TextInput = function TextInput(_ref, ref) {
     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);
+        addLineBreak();
         return;
       }
     }
@@ -4522,27 +4617,6 @@ function InputEmoji(props, ref) {
     }
   }
 
-  /**
-   * Handle copy of current selected text
-   * @param {React.ClipboardEvent} event
-   */
-  function handleCopy(event) {
-    var selection = window.getSelection();
-    if (selection !== null) {
-      var selectedText = '';
-      if (selection.anchorNode && selection.anchorNode.nodeType === Node.ELEMENT_NODE) {
-        // @ts-ignore
-        selectedText = selection.anchorNode.innerHTML;
-      } else if (selection.anchorNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
-        var _selection$anchorNode;
-        selectedText = (_selection$anchorNode = selection.anchorNode.textContent) !== null && _selection$anchorNode !== void 0 ? _selection$anchorNode : '';
-      }
-      var text = replaceAllTextEmojiToString(selectedText);
-      event.clipboardData.setData("text", text);
-      event.preventDefault();
-    }
-  }
-
   /**
    * Handle past on input
    * @param {React.ClipboardEvent} event