react-input-emoji 5.6.4 → 5.6.6
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +117 -43
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +117 -43
- package/dist/index.js.map +1 -1
- package/dist/src/types/types.d.ts +32 -0
- package/dist/src/utils/input-event-utils.d.ts +19 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -607,6 +607,24 @@ function replaceAllTextEmojiToString(html) {
|
|
607
607
|
|
608
608
|
// @ts-check
|
609
609
|
|
610
|
+
/**
|
611
|
+
* Handle copy of current selected text
|
612
|
+
* @param {React.ClipboardEvent} event
|
613
|
+
*/
|
614
|
+
function handleCopy(event) {
|
615
|
+
var selectedText = window.getSelection();
|
616
|
+
if (selectedText === null) {
|
617
|
+
return;
|
618
|
+
}
|
619
|
+
var container = document.createElement("div");
|
620
|
+
for (var i = 0, len = selectedText.rangeCount; i < len; ++i) {
|
621
|
+
container.appendChild(selectedText.getRangeAt(i).cloneContents());
|
622
|
+
}
|
623
|
+
container = replaceEmojiToString(container);
|
624
|
+
event.clipboardData.setData("text", container.innerText);
|
625
|
+
event.preventDefault();
|
626
|
+
}
|
627
|
+
|
610
628
|
/**
|
611
629
|
*
|
612
630
|
* @param {string} html
|
@@ -646,6 +664,19 @@ function handlePasteHtmlAtCaret(html) {
|
|
646
664
|
}
|
647
665
|
}
|
648
666
|
|
667
|
+
/**
|
668
|
+
* Replace emoji img to its string value
|
669
|
+
* @param {HTMLDivElement} container
|
670
|
+
* @return {HTMLDivElement}
|
671
|
+
*/
|
672
|
+
function replaceEmojiToString(container) {
|
673
|
+
var images = Array.prototype.slice.call(container.querySelectorAll("img"));
|
674
|
+
images.forEach(function (image) {
|
675
|
+
image.outerHTML = image.dataset.emoji;
|
676
|
+
});
|
677
|
+
return container;
|
678
|
+
}
|
679
|
+
|
649
680
|
/**
|
650
681
|
*
|
651
682
|
* @param {{text: string, html: string}} props
|
@@ -658,35 +689,100 @@ function totalCharacters(_ref2) {
|
|
658
689
|
var emojisCount = (html.match(/<img/g) || []).length;
|
659
690
|
return textCount + emojisCount;
|
660
691
|
}
|
692
|
+
/**
|
693
|
+
*
|
694
|
+
* @param {HTMLDivElement} inputDiv
|
695
|
+
* @return {string}
|
696
|
+
*/
|
697
|
+
function removeHtmlExceptBr(inputDiv) {
|
698
|
+
var temp = inputDiv.innerHTML.replace(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
|
699
|
+
var stripped = temp.replace(/<[^>]+>/g, ""); // strip all html tags
|
700
|
+
var _final = stripped.replace(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
|
701
|
+
return _final;
|
702
|
+
}
|
661
703
|
|
662
704
|
/**
|
663
|
-
*
|
664
|
-
* @param {
|
705
|
+
*
|
706
|
+
* @param {*} range
|
707
|
+
* @returns
|
665
708
|
*/
|
666
|
-
function
|
667
|
-
var range;
|
668
|
-
var
|
669
|
-
|
670
|
-
|
671
|
-
|
672
|
-
|
673
|
-
|
674
|
-
|
675
|
-
selection.removeAllRanges();
|
676
|
-
selection.addRange(range);
|
709
|
+
function getSelectionStart$1(range) {
|
710
|
+
var node = range.startContainer;
|
711
|
+
var offset = range.startOffset;
|
712
|
+
|
713
|
+
// Handle cases where the selection start node is not a text node
|
714
|
+
if (node.nodeType !== Node.TEXT_NODE) {
|
715
|
+
while (node.nodeType !== Node.TEXT_NODE) {
|
716
|
+
node = node.nextSibling;
|
717
|
+
if (!node) break;
|
677
718
|
}
|
719
|
+
if (!node) {
|
720
|
+
node = range.commonAncestorContainer;
|
721
|
+
while (node.nodeType !== Node.TEXT_NODE) {
|
722
|
+
node = node.firstChild;
|
723
|
+
}
|
724
|
+
}
|
725
|
+
offset = 0;
|
678
726
|
}
|
727
|
+
return {
|
728
|
+
node: node,
|
729
|
+
offset: offset
|
730
|
+
};
|
679
731
|
}
|
732
|
+
|
680
733
|
/**
|
681
734
|
*
|
682
|
-
* @
|
683
|
-
* @return {string}
|
735
|
+
* @returns {Object} cursor
|
684
736
|
*/
|
685
|
-
function
|
686
|
-
var
|
687
|
-
var
|
688
|
-
var
|
689
|
-
return
|
737
|
+
function getCursor() {
|
738
|
+
var selection = window.getSelection();
|
739
|
+
var range = selection.getRangeAt(0);
|
740
|
+
var selectionStart = getSelectionStart$1(range);
|
741
|
+
return {
|
742
|
+
selection: selection,
|
743
|
+
range: range,
|
744
|
+
selectionStart: selectionStart
|
745
|
+
};
|
746
|
+
}
|
747
|
+
|
748
|
+
/**
|
749
|
+
*
|
750
|
+
*/
|
751
|
+
function addLineBreak() {
|
752
|
+
var _getCursor = getCursor(),
|
753
|
+
selection = _getCursor.selection,
|
754
|
+
range = _getCursor.range,
|
755
|
+
selectionStart = _getCursor.selectionStart;
|
756
|
+
|
757
|
+
// If cursor is at the end of the text content, add one more line break
|
758
|
+
if (selection.isCollapsed && selectionStart.offset === selectionStart.node.textContent.length) {
|
759
|
+
var br = document.createElement("br");
|
760
|
+
range.insertNode(br);
|
761
|
+
range.setStartAfter(br);
|
762
|
+
range.setEndAfter(br);
|
763
|
+
selection.removeAllRanges();
|
764
|
+
selection.addRange(range);
|
765
|
+
var br2 = document.createElement("br");
|
766
|
+
range.insertNode(br2);
|
767
|
+
range.setStartAfter(br2);
|
768
|
+
range.setEndAfter(br2);
|
769
|
+
selection.removeAllRanges();
|
770
|
+
selection.addRange(range);
|
771
|
+
} else {
|
772
|
+
var _br = document.createElement("br");
|
773
|
+
range.insertNode(_br);
|
774
|
+
range.setStartAfter(_br);
|
775
|
+
range.setEndAfter(_br);
|
776
|
+
selection.removeAllRanges();
|
777
|
+
selection.addRange(range);
|
778
|
+
// Set cursor position right before the first letter after the line break
|
779
|
+
if (selectionStart.node.nextSibling && selectionStart.node.nextSibling.nodeType === Node.TEXT_NODE) {
|
780
|
+
range.setStart(selectionStart.node.nextSibling, 1);
|
781
|
+
range.setEnd(selectionStart.node.nextSibling, 1);
|
782
|
+
}
|
783
|
+
selection.removeAllRanges();
|
784
|
+
selection.addRange(range);
|
785
|
+
}
|
690
786
|
}
|
691
787
|
|
692
788
|
// @ts-check
|
@@ -945,8 +1041,7 @@ var TextInput = function TextInput(_ref, ref) {
|
|
945
1041
|
if (event.key === "Enter" && (event.shiftKey === true || event.ctrlKey === true) && props.shouldReturn) {
|
946
1042
|
event.preventDefault();
|
947
1043
|
if (textInputRef.current) {
|
948
|
-
|
949
|
-
moveCaretToEnd(textInputRef);
|
1044
|
+
addLineBreak();
|
950
1045
|
return;
|
951
1046
|
}
|
952
1047
|
}
|
@@ -4522,27 +4617,6 @@ function InputEmoji(props, ref) {
|
|
4522
4617
|
}
|
4523
4618
|
}
|
4524
4619
|
|
4525
|
-
/**
|
4526
|
-
* Handle copy of current selected text
|
4527
|
-
* @param {React.ClipboardEvent} event
|
4528
|
-
*/
|
4529
|
-
function handleCopy(event) {
|
4530
|
-
var selection = window.getSelection();
|
4531
|
-
if (selection !== null) {
|
4532
|
-
var selectedText = '';
|
4533
|
-
if (selection.anchorNode && selection.anchorNode.nodeType === Node.ELEMENT_NODE) {
|
4534
|
-
// @ts-ignore
|
4535
|
-
selectedText = selection.anchorNode.innerHTML;
|
4536
|
-
} else if (selection.anchorNode && selection.anchorNode.nodeType === Node.TEXT_NODE) {
|
4537
|
-
var _selection$anchorNode;
|
4538
|
-
selectedText = (_selection$anchorNode = selection.anchorNode.textContent) !== null && _selection$anchorNode !== void 0 ? _selection$anchorNode : '';
|
4539
|
-
}
|
4540
|
-
var text = replaceAllTextEmojiToString(selectedText);
|
4541
|
-
event.clipboardData.setData("text", text);
|
4542
|
-
event.preventDefault();
|
4543
|
-
}
|
4544
|
-
}
|
4545
|
-
|
4546
4620
|
/**
|
4547
4621
|
* Handle past on input
|
4548
4622
|
* @param {React.ClipboardEvent} event
|