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

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.es.js CHANGED
@@ -79,6 +79,7 @@ function getAllEmojisFromText(text) {
79
79
  * @return {string}
80
80
  */
81
81
  function getImageEmoji(emoji) {
82
+ var _emojiPickerEl$shadow;
82
83
  /** @type {HTMLElement | null} */
83
84
  const emojiPickerEl = document.querySelector('em-emoji-picker');
84
85
  if (!emojiPickerEl) {
@@ -86,7 +87,7 @@ function getImageEmoji(emoji) {
86
87
  }
87
88
 
88
89
  /** @type {HTMLSpanElement | null=} */
89
- const emojiSpanEl = emojiPickerEl?.shadowRoot?.querySelector(`[title="${emoji.name}"] > span > span`);
90
+ 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"));
90
91
  if (!emojiSpanEl) {
91
92
  return getInputEmojiNativeHTML(emoji.native);
92
93
  }
@@ -102,7 +103,7 @@ function getImageEmoji(emoji) {
102
103
  * @returns
103
104
  */
104
105
  function getInputEmojiHTML(style, emoji) {
105
- return `<img style="${style}; display: inline-block" data-emoji="${emoji}" src="${TRANSPARENT_GIF}" />`;
106
+ return "<img style=\"".concat(style, "; display: inline-block\" data-emoji=\"").concat(emoji, "\" src=\"").concat(TRANSPARENT_GIF, "\" />");
106
107
  }
107
108
 
108
109
  /**
@@ -111,7 +112,7 @@ function getInputEmojiHTML(style, emoji) {
111
112
  * @returns
112
113
  */
113
114
  function getInputEmojiNativeHTML(emoji) {
114
- return `<span class="width: 18px; height: 18px; display: inline-block; margin: 0 1px;">${emoji}</span>`;
115
+ return "<span class=\"width: 18px; height: 18px; display: inline-block; margin: 0 1px;\">".concat(emoji, "</span>");
115
116
  }
116
117
 
117
118
  /**
@@ -158,7 +159,7 @@ let currentRangeCached;
158
159
  */
159
160
  function cacheCurrentRange() {
160
161
  const selection = window.getSelection();
161
- if (!selection.rangeCount || selection?.anchorNode['className'] !== 'react-input-emoji--input' && selection.anchorNode.parentNode['className'] !== 'react-input-emoji--input') return;
162
+ 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;
162
163
  const range = selection.getRangeAt(0);
163
164
  currentRangeCached = range.cloneRange();
164
165
  }
@@ -174,7 +175,8 @@ function handlePasteHtmlAtCaret(html) {
174
175
  sel = window.getSelection();
175
176
  if (sel === null) return;
176
177
  if (sel.getRangeAt && sel.rangeCount) {
177
- range = currentRangeCached ?? sel.getRangeAt(0);
178
+ var _currentRangeCached;
179
+ range = (_currentRangeCached = currentRangeCached) !== null && _currentRangeCached !== void 0 ? _currentRangeCached : sel.getRangeAt(0);
178
180
  range.deleteContents();
179
181
 
180
182
  // Range.createContextualFragment() would be useful here but is
@@ -220,10 +222,11 @@ function replaceEmojiToString(container) {
220
222
  * @param {{text: string, html: string}} props
221
223
  * @return {number}
222
224
  */
223
- function totalCharacters({
224
- text,
225
- html
226
- }) {
225
+ function totalCharacters(_ref2) {
226
+ let {
227
+ text,
228
+ html
229
+ } = _ref2;
227
230
  const textCount = text.length;
228
231
  const emojisCount = (html.match(/<img/g) || []).length;
229
232
  return textCount + emojisCount;
@@ -631,13 +634,14 @@ function handleEmoji(text) {
631
634
  *
632
635
  * @param {Props} props
633
636
  */
634
- function useExpose({
635
- ref,
636
- textInputRef,
637
- setValue,
638
- emitChange,
639
- shouldConvertEmojiToImage
640
- }) {
637
+ function useExpose(_ref) {
638
+ let {
639
+ ref,
640
+ textInputRef,
641
+ setValue,
642
+ emitChange,
643
+ shouldConvertEmojiToImage
644
+ } = _ref;
641
645
  const {
642
646
  sanitize,
643
647
  sanitizedTextRef
@@ -701,7 +705,84 @@ function useEmit(textInputRef, onResize, onChange) {
701
705
  return emitChange;
702
706
  }
703
707
 
704
- // @ts-check
708
+ function ownKeys(e, r) {
709
+ var t = Object.keys(e);
710
+ if (Object.getOwnPropertySymbols) {
711
+ var o = Object.getOwnPropertySymbols(e);
712
+ r && (o = o.filter(function (r) {
713
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
714
+ })), t.push.apply(t, o);
715
+ }
716
+ return t;
717
+ }
718
+ function _objectSpread2(e) {
719
+ for (var r = 1; r < arguments.length; r++) {
720
+ var t = null != arguments[r] ? arguments[r] : {};
721
+ r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
722
+ _defineProperty(e, r, t[r]);
723
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
724
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
725
+ });
726
+ }
727
+ return e;
728
+ }
729
+ function _defineProperty(obj, key, value) {
730
+ key = _toPropertyKey(key);
731
+ if (key in obj) {
732
+ Object.defineProperty(obj, key, {
733
+ value: value,
734
+ enumerable: true,
735
+ configurable: true,
736
+ writable: true
737
+ });
738
+ } else {
739
+ obj[key] = value;
740
+ }
741
+ return obj;
742
+ }
743
+ function _objectWithoutPropertiesLoose(source, excluded) {
744
+ if (source == null) return {};
745
+ var target = {};
746
+ var sourceKeys = Object.keys(source);
747
+ var key, i;
748
+ for (i = 0; i < sourceKeys.length; i++) {
749
+ key = sourceKeys[i];
750
+ if (excluded.indexOf(key) >= 0) continue;
751
+ target[key] = source[key];
752
+ }
753
+ return target;
754
+ }
755
+ function _objectWithoutProperties(source, excluded) {
756
+ if (source == null) return {};
757
+ var target = _objectWithoutPropertiesLoose(source, excluded);
758
+ var key, i;
759
+ if (Object.getOwnPropertySymbols) {
760
+ var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
761
+ for (i = 0; i < sourceSymbolKeys.length; i++) {
762
+ key = sourceSymbolKeys[i];
763
+ if (excluded.indexOf(key) >= 0) continue;
764
+ if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
765
+ target[key] = source[key];
766
+ }
767
+ }
768
+ return target;
769
+ }
770
+ function _toPrimitive(input, hint) {
771
+ if (typeof input !== "object" || input === null) return input;
772
+ var prim = input[Symbol.toPrimitive];
773
+ if (prim !== undefined) {
774
+ var res = prim.call(input, hint || "default");
775
+ if (typeof res !== "object") return res;
776
+ throw new TypeError("@@toPrimitive must return a primitive value.");
777
+ }
778
+ return (hint === "string" ? String : Number)(input);
779
+ }
780
+ function _toPropertyKey(arg) {
781
+ var key = _toPrimitive(arg, "string");
782
+ return typeof key === "symbol" ? key : String(key);
783
+ }
784
+
785
+ const _excluded = ["placeholder", "style", "tabIndex", "className", "onChange"];
705
786
 
706
787
  /**
707
788
  * @typedef {Object} Props
@@ -735,14 +816,15 @@ function useEmit(textInputRef, onResize, onChange) {
735
816
 
736
817
  // eslint-disable-next-line valid-jsdoc
737
818
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
738
- const TextInput = ({
739
- placeholder,
740
- style,
741
- tabIndex,
742
- className,
743
- onChange,
744
- ...props
745
- }, ref) => {
819
+ const TextInput = (_ref, ref) => {
820
+ let {
821
+ placeholder,
822
+ style,
823
+ tabIndex,
824
+ className,
825
+ onChange
826
+ } = _ref,
827
+ props = _objectWithoutProperties(_ref, _excluded);
746
828
  useImperativeHandle(ref, () => ({
747
829
  appendContent: html => {
748
830
  if (textInputRef.current) {
@@ -810,7 +892,7 @@ const TextInput = ({
810
892
  placeholderStyle.color = style.placeholderColor;
811
893
  }
812
894
  return placeholderStyle;
813
- }, [style?.placeholderColor]);
895
+ }, [style === null || style === void 0 ? void 0 : style.placeholderColor]);
814
896
 
815
897
  /** @type {React.CSSProperties} */
816
898
  const inputStyle = useMemo(() => {
@@ -819,7 +901,7 @@ const TextInput = ({
819
901
  inputStyle.color = style.color;
820
902
  }
821
903
  return inputStyle;
822
- }, [style?.color]);
904
+ }, [style === null || style === void 0 ? void 0 : style.color]);
823
905
 
824
906
  /** @type {React.MutableRefObject<HTMLDivElement | null>} */
825
907
  const placeholderRef = useRef(null);
@@ -892,7 +974,7 @@ const TextInput = ({
892
974
  onKeyUp: handleKeyUp,
893
975
  tabIndex: tabIndex,
894
976
  contentEditable: true,
895
- className: `react-input-emoji--input${className ? ` ${className}` : ""}`,
977
+ className: "react-input-emoji--input".concat(className ? " ".concat(className) : ""),
896
978
  onBlur: props.onBlur,
897
979
  onCopy: props.onCopy,
898
980
  onPaste: props.onPaste,
@@ -917,27 +999,29 @@ const TextInputWithRef = /*#__PURE__*/forwardRef(TextInput);
917
999
  * @param {Props} props
918
1000
  * @return {JSX.Element}
919
1001
  */
920
- function EmojiPickerButton({
921
- showPicker,
922
- toggleShowPicker,
923
- buttonElement,
924
- buttonRef
925
- }) {
1002
+ function EmojiPickerButton(_ref) {
1003
+ let {
1004
+ showPicker,
1005
+ toggleShowPicker,
1006
+ buttonElement,
1007
+ buttonRef
1008
+ } = _ref;
926
1009
  const localButtonRef = useRef(null);
927
1010
  const [showCustomButtonContent, setShowCustomButtonContent] = useState(false);
928
1011
  useEffect(() => {
929
- if ((buttonRef?.current?.childNodes?.length ?? 0) > 2) {
1012
+ var _buttonRef$current$ch, _buttonRef$current, _buttonElement$childN, _buttonElement$childN2;
1013
+ 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) {
930
1014
  localButtonRef.current.appendChild(buttonRef.current.childNodes[0]);
931
1015
  setShowCustomButtonContent(true);
932
- } else if ((buttonElement?.childNodes?.length ?? 0) > 2) {
933
- localButtonRef.current.appendChild(buttonElement?.childNodes[0]);
1016
+ } 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) {
1017
+ localButtonRef.current.appendChild(buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes[0]);
934
1018
  setShowCustomButtonContent(true);
935
1019
  }
936
- }, [buttonElement?.childNodes]);
1020
+ }, [buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.childNodes]);
937
1021
  return /*#__PURE__*/React.createElement("button", {
938
1022
  ref: localButtonRef,
939
1023
  type: "button",
940
- className: `react-input-emoji--button${showPicker ? " react-input-emoji--button__show" : ""}`,
1024
+ className: "react-input-emoji--button".concat(showPicker ? " react-input-emoji--button__show" : ""),
941
1025
  onClick: toggleShowPicker
942
1026
  }, !showCustomButtonContent && /*#__PURE__*/React.createElement("svg", {
943
1027
  xmlns: "http://www.w3.org/2000/svg",
@@ -3434,7 +3518,7 @@ function EmojiPicker(props) {
3434
3518
  }
3435
3519
 
3436
3520
  // @ts-ignore
3437
- fetch(`${EMOJI_MART_DATA_URL}/i18n/en.json`).then(async data => {
3521
+ fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/en.json")).then(async data => {
3438
3522
  const translations = await data.json();
3439
3523
  setI18n(translations);
3440
3524
  cacheI18n.en = translations;
@@ -3449,7 +3533,7 @@ function EmojiPicker(props) {
3449
3533
  }
3450
3534
 
3451
3535
  // @ts-ignore
3452
- fetch(`${EMOJI_MART_DATA_URL}/i18n/${language}.json`).then(async data => {
3536
+ fetch("".concat(EMOJI_MART_DATA_URL, "/i18n/").concat(language, ".json")).then(async data => {
3453
3537
  const translations = await data.json();
3454
3538
  setI18n(translations);
3455
3539
  cacheI18n[language] = translations;
@@ -3489,15 +3573,16 @@ var EmojiPicker$1 = /*#__PURE__*/memo(EmojiPicker);
3489
3573
  * @param {Props} props
3490
3574
  * @return {JSX.Element}
3491
3575
  */
3492
- function EmojiPickerContainer({
3493
- showPicker,
3494
- theme,
3495
- handleSelectEmoji,
3496
- disableRecent,
3497
- customEmojis,
3498
- position,
3499
- language
3500
- }) {
3576
+ function EmojiPickerContainer(_ref) {
3577
+ let {
3578
+ showPicker,
3579
+ theme,
3580
+ handleSelectEmoji,
3581
+ disableRecent,
3582
+ customEmojis,
3583
+ position,
3584
+ language
3585
+ } = _ref;
3501
3586
  return /*#__PURE__*/React.createElement("div", {
3502
3587
  className: "react-emoji-picker--container"
3503
3588
  }, showPicker && /*#__PURE__*/React.createElement("div", {
@@ -3636,10 +3721,11 @@ const EmojiPickerWrapper = props => {
3636
3721
  }
3637
3722
  }
3638
3723
  useEffect(() => {
3639
- if (buttonRef?.current?.style) {
3724
+ var _buttonRef$current;
3725
+ if (buttonRef !== null && buttonRef !== void 0 && (_buttonRef$current = buttonRef.current) !== null && _buttonRef$current !== void 0 && _buttonRef$current.style) {
3640
3726
  buttonRef.current.style.position = "relative";
3641
3727
  setCustomButton(buttonRef.current);
3642
- } else if (buttonElement?.style) {
3728
+ } else if (buttonElement !== null && buttonElement !== void 0 && buttonElement.style) {
3643
3729
  buttonElement.style.position = "relative";
3644
3730
  setCustomButton(buttonElement);
3645
3731
  }
@@ -3761,7 +3847,7 @@ function getElementWithFocus() {
3761
3847
  */
3762
3848
  function getSelectionStart() {
3763
3849
  const node = document.getSelection().anchorNode;
3764
- return node?.nodeType == 3 ? node : null;
3850
+ return (node === null || node === void 0 ? void 0 : node.nodeType) == 3 ? node : null;
3765
3851
  }
3766
3852
 
3767
3853
  // @ts-check
@@ -3805,8 +3891,9 @@ function useMention(searchMention) {
3805
3891
 
3806
3892
  /** @type {(event: React.KeyboardEvent) => void} */
3807
3893
  const onKeyUp = useCallback(async event => {
3894
+ var _getElementWithFocus;
3808
3895
  if (typeof searchMention !== "function") return;
3809
- if (event.key === "Backspace" && getElementWithFocus()?.element.parentElement.hasAttribute("data-mention-id")) {
3896
+ if (event.key === "Backspace" && (_getElementWithFocus = getElementWithFocus()) !== null && _getElementWithFocus !== void 0 && _getElementWithFocus.element.parentElement.hasAttribute("data-mention-id")) {
3810
3897
  const elementWithFocus = getElementWithFocus();
3811
3898
  elementWithFocus.element.parentElement.remove();
3812
3899
  } else if (!["ArrowUp", "ArrowDown", "Esc", "Escape"].includes(event.key)) {
@@ -3826,8 +3913,6 @@ function useMention(searchMention) {
3826
3913
  };
3827
3914
  }
3828
3915
 
3829
- // @ts-check
3830
-
3831
3916
  /**
3832
3917
  * @typedef {import('../types/types').MentionUser} MentionUser
3833
3918
  */
@@ -3850,12 +3935,13 @@ function useMention(searchMention) {
3850
3935
 
3851
3936
  // eslint-disable-next-line valid-jsdoc
3852
3937
  /** @type {React.ForwardRefRenderFunction<Ref, Props>} */
3853
- const MentionUserList = ({
3854
- users,
3855
- mentionSearchText,
3856
- onSelect,
3857
- addEventListener
3858
- }, ref) => {
3938
+ const MentionUserList = (_ref, ref) => {
3939
+ let {
3940
+ users,
3941
+ mentionSearchText,
3942
+ onSelect,
3943
+ addEventListener
3944
+ } = _ref;
3859
3945
  const [selectedUser, setSelectedUser] = useState(0);
3860
3946
  useImperativeHandle(ref, () => ({
3861
3947
  prevUser: () => {
@@ -3886,7 +3972,7 @@ const MentionUserList = ({
3886
3972
  * @return {string}
3887
3973
  */
3888
3974
  function getMentionSelectedNameEl(selectedText, rest) {
3889
- return `<span class="react-input-emoji--mention--item--name__selected" data-testid="metion-selected-word">${selectedText}</span>${rest}`;
3975
+ return "<span class=\"react-input-emoji--mention--item--name__selected\" data-testid=\"metion-selected-word\">".concat(selectedText, "</span>").concat(rest);
3890
3976
  }
3891
3977
 
3892
3978
  /** @type {(MentionUser & {nameHtml: string})[]} */
@@ -3907,10 +3993,9 @@ const MentionUserList = ({
3907
3993
  }).join(" ");
3908
3994
  }
3909
3995
  }
3910
- return {
3911
- ...user,
3996
+ return _objectSpread2(_objectSpread2({}, user), {}, {
3912
3997
  nameHtml
3913
- };
3998
+ });
3914
3999
  });
3915
4000
  }, [mentionSearchText, users]);
3916
4001
 
@@ -3945,7 +4030,7 @@ const MentionUserList = ({
3945
4030
  }, /*#__PURE__*/React.createElement("button", {
3946
4031
  type: "button",
3947
4032
  onClick: handleClick(user),
3948
- className: `react-input-emoji--mention--item${selectedUser === index ? " react-input-emoji--mention--item__selected" : ""}`,
4033
+ className: "react-input-emoji--mention--item".concat(selectedUser === index ? " react-input-emoji--mention--item__selected" : ""),
3949
4034
  onMouseOver: () => setSelectedUser(index)
3950
4035
  }, /*#__PURE__*/React.createElement("img", {
3951
4036
  className: "react-input-emoji--mention--item--img",
@@ -3983,12 +4068,13 @@ const MentionUserListWithRef = /*#__PURE__*/forwardRef(MentionUserList);
3983
4068
 
3984
4069
  // eslint-disable-next-line valid-jsdoc
3985
4070
  /** @type {React.FC<Props>} */
3986
- const MentionWrapper = ({
3987
- searchMention,
3988
- addEventListener,
3989
- appendContent,
3990
- addSanitizeFn
3991
- }) => {
4071
+ const MentionWrapper = _ref => {
4072
+ let {
4073
+ searchMention,
4074
+ addEventListener,
4075
+ appendContent,
4076
+ addSanitizeFn
4077
+ } = _ref;
3992
4078
  /** @type {React.MutableRefObject<import('./mention-user-list').Ref | null>} */
3993
4079
  const metionUserListRef = useRef(null);
3994
4080
  const [showUserList, setShowUserList] = useState(false);
@@ -4006,7 +4092,7 @@ const MentionWrapper = ({
4006
4092
  container.innerHTML = html;
4007
4093
  const mentionsEl = Array.prototype.slice.call(container.querySelectorAll(".react-input-emoji--mention--text"));
4008
4094
  mentionsEl.forEach(mentionEl => {
4009
- container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, `@[${mentionEl.dataset.mentionName}](userId:${mentionEl.dataset.mentionId})`);
4095
+ container.innerHTML = container.innerHTML.replace(mentionEl.outerHTML, "@[".concat(mentionEl.dataset.mentionName, "](userId:").concat(mentionEl.dataset.mentionId, ")"));
4010
4096
  });
4011
4097
  return container.innerHTML;
4012
4098
  });
@@ -4079,7 +4165,7 @@ const MentionWrapper = ({
4079
4165
  */
4080
4166
  function handleSelect(user) {
4081
4167
  onSelectUser();
4082
- appendContent(`<span class="react-input-emoji--mention--text" data-mention-id="${user.id}" data-mention-name="${user.name}">@${user.name}</span> `);
4168
+ appendContent("<span class=\"react-input-emoji--mention--text\" data-mention-id=\"".concat(user.id, "\" data-mention-name=\"").concat(user.name, "\">@").concat(user.name, "</span> "));
4083
4169
  }
4084
4170
  return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
4085
4171
  className: "react-input-emoji--mention--container"
@@ -4289,7 +4375,8 @@ function InputEmoji(props, ref) {
4289
4375
  addPolluteFn,
4290
4376
  pollute
4291
4377
  } = usePollute();
4292
- const updateHTML = useCallback((nextValue = "") => {
4378
+ const updateHTML = useCallback(function () {
4379
+ let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
4293
4380
  if (textInputRef.current === null) return;
4294
4381
  textInputRef.current.html = replaceAllTextEmojis(nextValue);
4295
4382
  sanitizedTextRef.current = nextValue;