react-input-emoji 5.9.0-beta.1 → 5.9.0-beta.3

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.js CHANGED
@@ -86,6 +86,7 @@ function getAllEmojisFromText(text) {
86
86
  * @return {string}
87
87
  */
88
88
  function getImageEmoji(emoji) {
89
+ var _emojiPickerEl$shadow;
89
90
  /** @type {HTMLElement | null} */
90
91
  const emojiPickerEl = document.querySelector('em-emoji-picker');
91
92
  if (!emojiPickerEl) {
@@ -93,7 +94,7 @@ function getImageEmoji(emoji) {
93
94
  }
94
95
 
95
96
  /** @type {HTMLSpanElement | null=} */
96
- const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
97
+ const emojiSpanEl = emojiPickerEl === null || emojiPickerEl === void 0 || (_emojiPickerEl$shadow = emojiPickerEl.shadowRoot) === null || _emojiPickerEl$shadow === void 0 ? void 0 : _emojiPickerEl$shadow.querySelector("[title=\"".concat(emoji.name, "\"] > span > span"));
97
98
  if (!emojiSpanEl) {
98
99
  return getInputEmojiNativeHTML(emoji.native);
99
100
  }
@@ -109,7 +110,7 @@ function getImageEmoji(emoji) {
109
110
  * @returns
110
111
  */
111
112
  function getInputEmojiHTML(style, emoji) {
112
- return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
113
+ return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
113
114
  }
114
115
 
115
116
  /**
@@ -118,7 +119,7 @@ function getInputEmojiHTML(style, emoji) {
118
119
  * @returns
119
120
  */
120
121
  function getInputEmojiNativeHTML(emoji) {
121
- return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
122
+ return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
122
123
  }
123
124
 
124
125
  /**
@@ -165,7 +166,7 @@ let currentRangeCached;
165
166
  */
166
167
  function cacheCurrentRange() {
167
168
  const selection = window.getSelection();
168
- if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
169
+ if (!selection.rangeCount || (selection === null || selection === void 0 ? void 0 : selection.anchorNode['className']) !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
169
170
  const range = selection.getRangeAt(0);
170
171
  currentRangeCached = range.cloneRange();
171
172
  }
@@ -181,7 +182,8 @@ function handlePasteHtmlAtCaret(html) {
181
182
  sel = window.getSelection();
182
183
  if (sel === null) return;
183
184
  if (sel.getRangeAt && sel.rangeCount) {
184
- range = currentRangeCached ?? sel.getRangeAt(0);
185
+ var _currentRangeCached;
186
+ range = (_currentRangeCached = currentRangeCached) !== null && _currentRangeCached !== void 0 ? _currentRangeCached : sel.getRangeAt(0);
185
187
  range.deleteContents();
186
188
 
187
189
  // Range.createContextualFragment() would be useful here but is
@@ -227,10 +229,11 @@ function replaceEmojiToString(container) {
227
229
  * @param {{text: string, html: string}} props
228
230
  * @return {number}
229
231
  */
230
- function totalCharacters({
231
- text,
232
- html
233
- }) {
232
+ function totalCharacters(_ref2) {
233
+ let {
234
+ text,
235
+ html
236
+ } = _ref2;
234
237
  const textCount = text.length;
235
238
  const emojisCount = (html.match(/<img/g) || []).length;
236
239
  return textCount + emojisCount;
@@ -638,13 +641,14 @@ function handleEmoji(text) {
638
641
  *
639
642
  * @param {Props} props
640
643
  */
641
- function useExpose({
642
- ref,
643
- textInputRef,
644
- setValue,
645
- emitChange,
646
- shouldConvertEmojiToImage
647
- }) {
644
+ function useExpose(_ref) {
645
+ let {
646
+ ref,
647
+ textInputRef,
648
+ setValue,
649
+ emitChange,
650
+ shouldConvertEmojiToImage
651
+ } = _ref;
648
652
  const {
649
653
  sanitize,
650
654
  sanitizedTextRef
@@ -708,7 +712,84 @@ function useEmit(textInputRef, onResize, onChange) {
708
712
  return emitChange;
709
713
  }
710
714
 
711
- // @ts-check
715
+ function ownKeys(e, r) {
716
+ var t = Object.keys(e);
717
+ if (Object.getOwnPropertySymbols) {
718
+ var o = Object.getOwnPropertySymbols(e);
719
+ r && (o = o.filter(function (r) {
720
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
721
+ })), t.push.apply(t, o);
722
+ }
723
+ return t;
724
+ }
725
+ function _objectSpread2(e) {
726
+ for (var r = 1; r < arguments.length; r++) {
727
+ var t = null != arguments[r] ? arguments[r] : {};
728
+ r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
729
+ _defineProperty(e, r, t[r]);
730
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
731
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
732
+ });
733
+ }
734
+ return e;
735
+ }
736
+ function _defineProperty(obj, key, value) {
737
+ key = _toPropertyKey(key);
738
+ if (key in obj) {
739
+ Object.defineProperty(obj, key, {
740
+ value: value,
741
+ enumerable: true,
742
+ configurable: true,
743
+ writable: true
744
+ });
745
+ } else {
746
+ obj[key] = value;
747
+ }
748
+ return obj;
749
+ }
750
+ function _objectWithoutPropertiesLoose(source, excluded) {
751
+ if (source == null) return {};
752
+ var target = {};
753
+ var sourceKeys = Object.keys(source);
754
+ var key, i;
755
+ for (i = 0; i < sourceKeys.length; i++) {
756
+ key = sourceKeys[i];
757
+ if (excluded.indexOf(key) >= 0) continue;
758
+ target[key] = source[key];
759
+ }
760
+ return target;
761
+ }
762
+ function _objectWithoutProperties(source, excluded) {
763
+ if (source == null) return {};
764
+ var target = _objectWithoutPropertiesLoose(source, excluded);
765
+ var key, i;
766
+ if (Object.getOwnPropertySymbols) {
767
+ var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
768
+ for (i = 0; i < sourceSymbolKeys.length; i++) {
769
+ key = sourceSymbolKeys[i];
770
+ if (excluded.indexOf(key) >= 0) continue;
771
+ if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
772
+ target[key] = source[key];
773
+ }
774
+ }
775
+ return target;
776
+ }
777
+ function _toPrimitive(input, hint) {
778
+ if (typeof input !== "object" || input === null) return input;
779
+ var prim = input[Symbol.toPrimitive];
780
+ if (prim !== undefined) {
781
+ var res = prim.call(input, hint || "default");
782
+ if (typeof res !== "object") return res;
783
+ throw new TypeError("@@toPrimitive must return a primitive value.");
784
+ }
785
+ return (hint === "string" ? String : Number)(input);
786
+ }
787
+ function _toPropertyKey(arg) {
788
+ var key = _toPrimitive(arg, "string");
789
+ return typeof key === "symbol" ? key : String(key);
790
+ }
791
+
792
+ const _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
712
793
 
713
794
  /**
714
795
  * @typedef {Object} Props
@@ -742,14 +823,15 @@ function useEmit(textInputRef, onResize, onChange) {
742
823
 
743
824
  // eslint-disable-next-line valid-jsdoc
744
825
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
745
- const TextInput = ({
746
- placeholder,
747
- style,
748
- tabIndex,
749
- className,
750
- onChange,
751
- ...props
752
- }, ref) => {
826
+ const TextInput = (_ref, ref) => {
827
+ let {
828
+ placeholder,
829
+ style,
830
+ tabIndex,
831
+ className,
832
+ onChange
833
+ } = _ref,
834
+ props = _objectWithoutProperties(_ref, _excluded);
753
835
  React.useImperativeHandle(ref, () => ({
754
836
  appendContent: html => {
755
837
  if (textInputRef.current) {
@@ -817,7 +899,7 @@ const TextInput = ({
817
899
  placeholderStyle.color = style.placeholderColor;
818
900
  }
819
901
  return placeholderStyle;
820
- }, [style?.placeholderColor]);
902
+ }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
821
903
 
822
904
  /** @type {React.CSSProperties} */
823
905
  const inputStyle = React.useMemo(() => {
@@ -826,7 +908,7 @@ const TextInput = ({
826
908
  inputStyle.color = style.color;
827
909
  }
828
910
  return inputStyle;
829
- }, [style?.color]);
911
+ }, [style === null || style === void 0 ? void 0 : style.color]);
830
912
 
831
913
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
832
914
  const placeholderRef = React.useRef(null);
@@ -899,7 +981,7 @@ const TextInput = ({
899
981
  onKeyUp: handleKeyUp,
900
982
  tabIndex: tabIndex,
901
983
  contentEditable: true,
902
- className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
984
+ className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
903
985
  onBlur: props.onBlur,
904
986
  onCopy: props.onCopy,
905
987
  onPaste: props.onPaste,
@@ -924,27 +1006,29 @@ const TextInputWithRef = /*#__PURE__*/React.forwardRef(TextInput);
924
1006
  * @param {Props} props
925
1007
  * @return {JSX.Element}
926
1008
  */
927
- function EmojiPickerButton({
928
- showPicker,
929
- toggleShowPicker,
930
- buttonElement,
931
- buttonRef
932
- }) {
1009
+ function EmojiPickerButton(_ref) {
1010
+ let {
1011
+ showPicker,
1012
+ toggleShowPicker,
1013
+ buttonElement,
1014
+ buttonRef
1015
+ } = _ref;
933
1016
  const localButtonRef = React.useRef(null);
934
1017
  const [showCustomButtonContent, setShowCustomButtonContent] = React.useState(false);
935
1018
  React.useEffect(() => {
936
- if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
1019
+ var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
1020
+ if (((_buttonRef$current$ch = buttonRef === null || buttonRef === void 0 || (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || (_buttonRef$current = _buttonRef$current.childNodes) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.length) !== null && _buttonRef$current$ch !== void 0 ? _buttonRef$current$ch : 0) > 2) {
937
1021
  localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
938
1022
  setShowCustomButtonContent(true);
939
- } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
940
- localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
1023
+ } else if (((_buttonElement$childN = buttonElement === null || buttonElement === void 0 || (_buttonElement$childN2 = buttonElement.childNodes) === null || _buttonElement$childN2 === void 0 ? void 0 : _buttonElement$childN2.length) !== null && _buttonElement$childN !== void 0 ? _buttonElement$childN : 0) > 2) {
1024
+ localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
941
1025
  setShowCustomButtonContent(true);
942
1026
  }
943
- }, [buttonElement?.childNodes]);
1027
+ }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
944
1028
  return /*#__PURE__*/React__default["default"].createElement("button", {
945
1029
  ref: localButtonRef,
946
1030
  type: "button",
947
- className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
1031
+ className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
948
1032
  onClick: toggleShowPicker
949
1033
  }, !showCustomButtonContent && /*#__PURE__*/React__default["default"].createElement("svg", {
950
1034
  xmlns: "http://www.w3.org/2000/svg",
@@ -3441,7 +3525,7 @@ function EmojiPicker(props) {
3441
3525
  }
3442
3526
 
3443
3527
  // @ts-ignore
3444
- fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
3528
+ fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(async data => {
3445
3529
  const translations = await data.json();
3446
3530
  setI18n(translations);
3447
3531
  cacheI18n.en = translations;
@@ -3456,7 +3540,7 @@ function EmojiPicker(props) {
3456
3540
  }
3457
3541
 
3458
3542
  // @ts-ignore
3459
- fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
3543
+ fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(async data => {
3460
3544
  const translations = await data.json();
3461
3545
  setI18n(translations);
3462
3546
  cacheI18n[language] = translations;
@@ -3496,15 +3580,16 @@ var EmojiPicker$1 = /*#__PURE__*/React.memo(EmojiPicker);
3496
3580
  * @param {Props} props
3497
3581
  * @return {JSX.Element}
3498
3582
  */
3499
- function EmojiPickerContainer({
3500
- showPicker,
3501
- theme,
3502
- handleSelectEmoji,
3503
- disableRecent,
3504
- customEmojis,
3505
- position,
3506
- language
3507
- }) {
3583
+ function EmojiPickerContainer(_ref) {
3584
+ let {
3585
+ showPicker,
3586
+ theme,
3587
+ handleSelectEmoji,
3588
+ disableRecent,
3589
+ customEmojis,
3590
+ position,
3591
+ language
3592
+ } = _ref;
3508
3593
  return /*#__PURE__*/React__default["default"].createElement("div", {
3509
3594
  className: "react-emoji-picker--container"
3510
3595
  }, showPicker && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3643,10 +3728,11 @@ const EmojiPickerWrapper = props => {
3643
3728
  }
3644
3729
  }
3645
3730
  React.useEffect(() => {
3646
- if (buttonRef?.current?.style) {
3731
+ var _buttonRef$current;
3732
+ if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
3647
3733
  buttonRef.current.style.position = "relative";
3648
3734
  setCustomButton(buttonRef.current);
3649
- } else if (buttonElement?.style) {
3735
+ } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
3650
3736
  buttonElement.style.position = "relative";
3651
3737
  setCustomButton(buttonElement);
3652
3738
  }
@@ -3768,7 +3854,7 @@ function getElementWithFocus() {
3768
3854
  */
3769
3855
  function getSelectionStart() {
3770
3856
  const node = document.getSelection().anchorNode;
3771
- return node?.nodeType == 3 ? node : null;
3857
+ return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
3772
3858
  }
3773
3859
 
3774
3860
  // @ts-check
@@ -3812,8 +3898,9 @@ function useMention(searchMention) {
3812
3898
 
3813
3899
  /** @type {(event: React.KeyboardEvent) => void} */
3814
3900
  const onKeyUp = React.useCallback(async event => {
3901
+ var _getElementWithFocus;
3815
3902
  if (typeof searchMention !== "function") return;
3816
- if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
3903
+ if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
3817
3904
  const elementWithFocus = getElementWithFocus();
3818
3905
  elementWithFocus.element.parentElement.remove();
3819
3906
  } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -3833,8 +3920,6 @@ function useMention(searchMention) {
3833
3920
  };
3834
3921
  }
3835
3922
 
3836
- // @ts-check
3837
-
3838
3923
  /**
3839
3924
  * @typedef {import('../types/types').MentionUser} MentionUser
3840
3925
  */
@@ -3857,12 +3942,13 @@ function useMention(searchMention) {
3857
3942
 
3858
3943
  // eslint-disable-next-line valid-jsdoc
3859
3944
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
3860
- const MentionUserList = ({
3861
- users,
3862
- mentionSearchText,
3863
- onSelect,
3864
- addEventListener
3865
- }, ref) => {
3945
+ const MentionUserList = (_ref, ref) => {
3946
+ let {
3947
+ users,
3948
+ mentionSearchText,
3949
+ onSelect,
3950
+ addEventListener
3951
+ } = _ref;
3866
3952
  const [selectedUser, setSelectedUser] = React.useState(0);
3867
3953
  React.useImperativeHandle(ref, () => ({
3868
3954
  prevUser: () => {
@@ -3893,7 +3979,7 @@ const MentionUserList = ({
3893
3979
  * @return {string}
3894
3980
  */
3895
3981
  function getMentionSelectedNameEl(selectedText, rest) {
3896
- return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
3982
+ return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
3897
3983
  }
3898
3984
 
3899
3985
  /** @type {(MentionUser & {nameHtml: string})[]} */
@@ -3914,10 +4000,9 @@ const MentionUserList = ({
3914
4000
  }).join(" ");
3915
4001
  }
3916
4002
  }
3917
- return {
3918
- ...user,
4003
+ return _objectSpread2(_objectSpread2({}, user), {}, {
3919
4004
  nameHtml
3920
- };
4005
+ });
3921
4006
  });
3922
4007
  }, [mentionSearchText, users]);
3923
4008
 
@@ -3952,7 +4037,7 @@ const MentionUserList = ({
3952
4037
  }, /*#__PURE__*/React__default["default"].createElement("button", {
3953
4038
  type: "button",
3954
4039
  onClick: handleClick(user),
3955
- className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
4040
+ className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
3956
4041
  onMouseOver: () => setSelectedUser(index)
3957
4042
  }, /*#__PURE__*/React__default["default"].createElement("img", {
3958
4043
  className: "react-input-emoji--mention--item--img",
@@ -3990,12 +4075,13 @@ const MentionUserListWithRef = /*#__PURE__*/React.forwardRef(MentionUserList);
3990
4075
 
3991
4076
  // eslint-disable-next-line valid-jsdoc
3992
4077
  /** @type {React.FC<Props>} */
3993
- const MentionWrapper = ({
3994
- searchMention,
3995
- addEventListener,
3996
- appendContent,
3997
- addSanitizeFn
3998
- }) => {
4078
+ const MentionWrapper = _ref => {
4079
+ let {
4080
+ searchMention,
4081
+ addEventListener,
4082
+ appendContent,
4083
+ addSanitizeFn
4084
+ } = _ref;
3999
4085
  /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
4000
4086
  const metionUserListRef = React.useRef(null);
4001
4087
  const [showUserList, setShowUserList] = React.useState(false);
@@ -4013,7 +4099,7 @@ const MentionWrapper = ({
4013
4099
  container.innerHTML = html;
4014
4100
  const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4015
4101
  mentionsEl.forEach(mentionEl => {
4016
- container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
4102
+ container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
4017
4103
  });
4018
4104
  return container.innerHTML;
4019
4105
  });
@@ -4086,7 +4172,7 @@ const MentionWrapper = ({
4086
4172
  */
4087
4173
  function handleSelect(user) {
4088
4174
  onSelectUser();
4089
- appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
4175
+ appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
4090
4176
  }
4091
4177
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
4092
4178
  className: "react-input-emoji--mention--container"
@@ -4296,7 +4382,8 @@ function InputEmoji(props, ref) {
4296
4382
  addPolluteFn,
4297
4383
  pollute
4298
4384
  } = usePollute();
4299
- const updateHTML = React.useCallback((nextValue = "") => {
4385
+ const updateHTML = React.useCallback(function () {
4386
+ let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
4300
4387
  if (textInputRef.current === null) return;
4301
4388
  textInputRef.current.html = replaceAllTextEmojis(nextValue);
4302
4389
  sanitizedTextRef.current = nextValue;