react-input-emoji 5.6.10 → 5.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +42 -26
- package/dist/index.es.js +29 -12
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +28 -11
- package/dist/index.js.map +1 -1
- package/dist/src/index.d.ts +2 -0
- package/dist/src/text-input.d.ts +8 -1
- package/dist/src/utils/input-event-utils.d.ts +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -695,9 +695,11 @@ function totalCharacters(_ref2) {
|
|
695
695
|
* @return {string}
|
696
696
|
*/
|
697
697
|
function removeHtmlExceptBr(inputDiv) {
|
698
|
-
var temp = inputDiv.innerHTML.
|
699
|
-
var
|
700
|
-
|
698
|
+
var temp = inputDiv.innerHTML.replaceAll(/<br\s*\/?>/gi, "[BR]"); // temporarily replace <br> with placeholder
|
699
|
+
var tempContainer = document.createElement("div");
|
700
|
+
tempContainer.innerHTML = temp;
|
701
|
+
var stripped = tempContainer.innerText; // strip all html tags
|
702
|
+
var _final = stripped.replaceAll(/\[BR\]/gi, "</br>"); // replace placeholders with <br>
|
701
703
|
return _final;
|
702
704
|
}
|
703
705
|
|
@@ -732,7 +734,7 @@ function getSelectionStart$1(range) {
|
|
732
734
|
|
733
735
|
/**
|
734
736
|
*
|
735
|
-
* @
|
737
|
+
* @return {Object} cursor
|
736
738
|
*/
|
737
739
|
function getCursor() {
|
738
740
|
var selection = window.getSelection();
|
@@ -839,9 +841,7 @@ function replaceAllHtmlToString(html, shouldReturn) {
|
|
839
841
|
|
840
842
|
// remove all ↵ for safari
|
841
843
|
text = text.replace(/\n/gi, "");
|
842
|
-
|
843
|
-
tempContainer.innerHTML = text;
|
844
|
-
return tempContainer.innerText || "";
|
844
|
+
return text;
|
845
845
|
}
|
846
846
|
|
847
847
|
// @ts-check
|
@@ -943,7 +943,7 @@ var _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
|
|
943
943
|
* @property {(event: React.ClipboardEvent) => void} onCopy
|
944
944
|
* @property {(event: React.ClipboardEvent) => void} onPaste
|
945
945
|
* @property {string} placeholder
|
946
|
-
* @property {
|
946
|
+
* @property {{borderRadius?: number; borderColor?: string; fontSize?: number; fontFamily?: string; background: string; placeholderColor?: string;}} style
|
947
947
|
* @property {number} tabIndex
|
948
948
|
* @property {string} className
|
949
949
|
* @property {(html: string) => void} onChange
|
@@ -1030,6 +1030,15 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1030
1030
|
};
|
1031
1031
|
});
|
1032
1032
|
|
1033
|
+
/** @type {React.CSSProperties} */
|
1034
|
+
var placeholderStyle = React.useMemo(function () {
|
1035
|
+
var placeholderStyle = {};
|
1036
|
+
if (style.placeholderColor) {
|
1037
|
+
placeholderStyle.color = style.placeholderColor;
|
1038
|
+
}
|
1039
|
+
return placeholderStyle;
|
1040
|
+
}, [style.placeholderColor]);
|
1041
|
+
|
1033
1042
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
1034
1043
|
var placeholderRef = React.useRef(null);
|
1035
1044
|
/** @type {React.MutableRefObject<HTMLDivElement | null>} */
|
@@ -1093,7 +1102,8 @@ var TextInput = function TextInput(_ref, ref) {
|
|
1093
1102
|
onClick: handleClick
|
1094
1103
|
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
1095
1104
|
ref: placeholderRef,
|
1096
|
-
className: "react-input-emoji--placeholder"
|
1105
|
+
className: "react-input-emoji--placeholder",
|
1106
|
+
style: placeholderStyle
|
1097
1107
|
}, placeholder), /*#__PURE__*/React__default["default"].createElement("div", {
|
1098
1108
|
ref: textInputRef,
|
1099
1109
|
onKeyDown: handleKeyDown,
|
@@ -4497,6 +4507,7 @@ function usePollute() {
|
|
4497
4507
|
* @property {boolean=} cleanOnEnter
|
4498
4508
|
* @property {(text: string) => void=} onEnter
|
4499
4509
|
* @property {string=} placeholder
|
4510
|
+
* @property {string=} placeholderColor
|
4500
4511
|
* @property {(size: {width: number, height: number}) => void=} onResize
|
4501
4512
|
* @property {() => void=} onClick
|
4502
4513
|
* @property {() => void=} onFocus
|
@@ -4513,6 +4524,7 @@ function usePollute() {
|
|
4513
4524
|
* @property {string=} borderColor
|
4514
4525
|
* @property {number=} fontSize
|
4515
4526
|
* @property {string=} fontFamily
|
4527
|
+
* @property {string=} background
|
4516
4528
|
* @property {{id: string; name: string; emojis: {id: string; name: string; keywords: string[], skins: {src: string}[]}}[]=} customEmojis
|
4517
4529
|
* @property {import('./types/types').Languages=} language
|
4518
4530
|
* @property {(text: string) => Promise<MetionUser[]>=} searchMention
|
@@ -4552,7 +4564,9 @@ function InputEmoji(props, ref) {
|
|
4552
4564
|
borderRadius = props.borderRadius,
|
4553
4565
|
borderColor = props.borderColor,
|
4554
4566
|
fontSize = props.fontSize,
|
4555
|
-
fontFamily = props.fontFamily
|
4567
|
+
fontFamily = props.fontFamily,
|
4568
|
+
background = props.background,
|
4569
|
+
placeholderColor = props.placeholderColor;
|
4556
4570
|
|
4557
4571
|
/** @type {React.MutableRefObject<import('./text-input').Ref | null>} */
|
4558
4572
|
var textInputRef = React.useRef(null);
|
@@ -4721,7 +4735,9 @@ function InputEmoji(props, ref) {
|
|
4721
4735
|
borderRadius: borderRadius,
|
4722
4736
|
borderColor: borderColor,
|
4723
4737
|
fontSize: fontSize,
|
4724
|
-
fontFamily: fontFamily
|
4738
|
+
fontFamily: fontFamily,
|
4739
|
+
background: background,
|
4740
|
+
placeholderColor: placeholderColor
|
4725
4741
|
},
|
4726
4742
|
tabIndex: tabIndex,
|
4727
4743
|
className: inputClass,
|
@@ -4748,6 +4764,7 @@ InputEmojiWithRef.defaultProps = {
|
|
4748
4764
|
borderColor: "#EAEAEA",
|
4749
4765
|
fontSize: 15,
|
4750
4766
|
fontFamily: "sans-serif",
|
4767
|
+
background: "white",
|
4751
4768
|
tabIndex: 0,
|
4752
4769
|
shouldReturn: false,
|
4753
4770
|
customEmojis: [],
|