react-input-emoji 5.6.2 → 5.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -21
- package/dist/__mocks__/getSelectionMock.d.ts +5 -0
- package/dist/fixtures/examples.d.ts +5 -0
- package/dist/index.es.js +5 -10
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +5 -11
- package/dist/index.js.map +1 -1
- package/dist/src/components/emoji-picker-button.d.ts +21 -0
- package/dist/src/components/emoji-picker-container.d.ts +26 -0
- package/dist/src/components/emoji-picker-wrapper.d.ts +37 -0
- package/dist/src/components/emoji-picker.d.ts +23 -0
- package/dist/src/components/mention-user-list.d.ts +15 -0
- package/dist/src/components/mention-wrapper.d.ts +29 -0
- package/dist/src/components/mention-wrapper.test.d.ts +1 -0
- package/dist/src/hooks/use-emit.d.ts +10 -0
- package/dist/src/hooks/use-event-listeners.d.ts +9 -0
- package/dist/src/hooks/use-event-listeners.test.d.ts +1 -0
- package/dist/src/hooks/use-expose.d.ts +18 -0
- package/dist/src/hooks/use-mention.d.ts +17 -0
- package/dist/src/hooks/use-mention.test.d.ts +1 -0
- package/dist/src/hooks/use-sanitize.d.ts +19 -0
- package/dist/src/hooks/user-pollute.d.ts +9 -0
- package/dist/src/index.d.ts +48 -0
- package/dist/src/text-input.d.ts +30 -0
- package/dist/src/utils/emoji-utils.d.ts +20 -0
- package/dist/src/utils/input-event-utils.d.ts +95 -0
- package/dist/src/utils/mention-utils.d.ts +15 -0
- package/dist/src/utils/observer.d.ts +5 -0
- package/dist/src/utils/use-debounce.d.ts +1 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -45,27 +45,27 @@ export default function Example() {
|
|
|
45
45
|
|
|
46
46
|
## Props
|
|
47
47
|
|
|
48
|
-
| Prop
|
|
49
|
-
|
|
|
50
|
-
| `
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
54
|
-
| `
|
|
55
|
-
| `
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `maxLength`
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
| ------------------ | ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
50
|
+
| `borderColor` | string | "#EAEAEA" | The border color of the input container. |
|
|
51
|
+
| `borderRadius` | number | 21 | The border radius of the input container. |
|
|
52
|
+
| `buttonElement` | HTMLElement | - | An HTMLElement that, when clicked, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
|
53
|
+
| `buttonRef` | React.MutableRefObject | - | A React mutable ref object that, when referenced, triggers the emoji picker. If this prop is provided, the default emoji picker button is removed. |
|
|
54
|
+
| `cleanOnEnter` | boolean | false | Clean the input value after the keydown event. |
|
|
55
|
+
| `fontSize` | number | 15 | The font size of the placeholder and input container. |
|
|
56
|
+
| `fontFamily` | string | "sans-serif" | The font family of the placeholder and input container. |
|
|
57
|
+
| `height` | number | 40 | The total height of the area in which the element is rendered. |
|
|
58
|
+
| `keepOpened` | boolean | false | If set to true, the emoji picker will remain open after selecting an emoji. Defaults to false. |
|
|
59
|
+
| `maxLength` | number | - | The maximum number of characters allowed in the element. |
|
|
60
|
+
| `onChange` | function | - | This function is called when the value of the input changes. The first argument is the current value. |
|
|
61
|
+
| `onClick` | function | - | This function is called when the input is clicked. |
|
|
62
|
+
| `onEnter` | function | - | This function is called after the keydown event is fired with the `keyCode === 13` returning the last value. |
|
|
63
|
+
| `onFocus` | function | - | This function is called when the input has received focus. |
|
|
64
|
+
| `onResize` | function | - | This function is called when the width or the height of the input changes. The first argument is the current size value. |
|
|
65
|
+
| `placeholder` | string | "Type a message" | Set the placeholder of the input. |
|
|
66
|
+
| `shouldReturn` | boolean | - | Allows the user to use the `Shift + Enter` or `Ctrl + Enter` keyboard shortcut to create a new line. |
|
|
67
|
+
| `theme` | string | - | Set theme for emoji popup. Available values "light", "dark", "auto" |
|
|
68
|
+
| `value` | string | "" | The input value. |
|
|
69
69
|
|
|
70
70
|
## License
|
|
71
71
|
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useCallback, useImperativeHandle, useEffect, forwardRef, useState, memo, useMemo } from 'react';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
|
-
import t from 'prop-types';
|
|
4
3
|
|
|
5
4
|
function styleInject(css, ref) {
|
|
6
5
|
if (ref === void 0) ref = {};
|
|
@@ -515,7 +514,7 @@ function replaceAllTextEmojis(text) {
|
|
|
515
514
|
allEmojis = _toConsumableArray(new Set(allEmojis)); // remove duplicates
|
|
516
515
|
|
|
517
516
|
allEmojis.forEach(function (emoji) {
|
|
518
|
-
text = replaceAll(text, emoji, getInputEmojiHTML(emoji));
|
|
517
|
+
text = replaceAll(text, emoji, getInputEmojiHTML('', emoji));
|
|
519
518
|
});
|
|
520
519
|
}
|
|
521
520
|
return text;
|
|
@@ -759,7 +758,7 @@ function useExpose(_ref) {
|
|
|
759
758
|
textInputRef = _ref.textInputRef,
|
|
760
759
|
setValue = _ref.setValue,
|
|
761
760
|
emitChange = _ref.emitChange;
|
|
762
|
-
var _useSanitize = useSanitize(),
|
|
761
|
+
var _useSanitize = useSanitize(false),
|
|
763
762
|
sanitize = _useSanitize.sanitize,
|
|
764
763
|
sanitizedTextRef = _useSanitize.sanitizedTextRef;
|
|
765
764
|
useImperativeHandle(ref, function () {
|
|
@@ -3494,14 +3493,13 @@ function $e5534fc185f7111e$export$2e2bcd8739ae039(props) {
|
|
|
3494
3493
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3495
3494
|
* @property {function(import("../types/types").EmojiMartItem): void} onSelectEmoji
|
|
3496
3495
|
* @property {boolean} disableRecent
|
|
3497
|
-
* @property {
|
|
3496
|
+
* @property {any[]=} customEmojis
|
|
3498
3497
|
* @property {import('../types/types').Languages=} language
|
|
3499
3498
|
*/
|
|
3500
3499
|
|
|
3501
3500
|
/**
|
|
3502
3501
|
* Emoji Picker Component
|
|
3503
3502
|
* @param {Props} props
|
|
3504
|
-
* @return {React.FC}
|
|
3505
3503
|
*/
|
|
3506
3504
|
function EmojiPicker(props) {
|
|
3507
3505
|
var theme = props.theme,
|
|
@@ -3545,7 +3543,7 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
|
|
|
3545
3543
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3546
3544
|
* @property {(emoji: import("../types/types").EmojiMartItem) => void} handleSelectEmoji
|
|
3547
3545
|
* @property {boolean} disableRecent
|
|
3548
|
-
* @property {
|
|
3546
|
+
* @property {any[]=} customEmojis
|
|
3549
3547
|
* @property {('above' | 'below')=} position
|
|
3550
3548
|
* @property {import('../types/types').Languages=} language
|
|
3551
3549
|
*/
|
|
@@ -3599,7 +3597,7 @@ var EMOJI_PICKER_CONTAINER_HEIGHT = 435;
|
|
|
3599
3597
|
* @property {'light' | 'dark' | 'auto'} theme
|
|
3600
3598
|
* @property {boolean} keepOpened
|
|
3601
3599
|
* @property {boolean} disableRecent
|
|
3602
|
-
* @property {
|
|
3600
|
+
* @property {any[]=} customEmojis
|
|
3603
3601
|
* @property {(fn: SanitizeFn) => void} addSanitizeFn
|
|
3604
3602
|
* @property {(fn: PolluteFn) => void} addPolluteFn
|
|
3605
3603
|
* @property {(html: string) => void} appendContent
|
|
@@ -4075,9 +4073,6 @@ var MentionUserList = function MentionUserList(_ref, ref) {
|
|
|
4075
4073
|
}));
|
|
4076
4074
|
};
|
|
4077
4075
|
var MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
|
|
4078
|
-
MentionUserListWithRef.propTypes = {
|
|
4079
|
-
users: t.array.isRequired
|
|
4080
|
-
};
|
|
4081
4076
|
|
|
4082
4077
|
/**
|
|
4083
4078
|
* @typedef {import('../types/types').MentionUser} MetionUser
|