@lumel/mention 5.2.4 → 5.2.6

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.
Files changed (7) hide show
  1. package/lib/MentionSuggestions/MentionSuggestions.d.ts +18 -2
  2. package/lib/MentionSuggestions/Popover.d.ts +4 -3
  3. package/lib/MentionSuggestions/__test__/MentionSuggestions.test.d.ts +1 -1
  4. package/lib/index.cjs.js +132 -107
  5. package/lib/index.esm.js +132 -107
  6. package/package.json +6 -7
  7. package/CHANGELOG.md +0 -290
package/lib/MentionSuggestions/MentionSuggestions.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import { AriaProps, EditorCommand } from '@draft-js-plugins/editor';
2
2
  import { DraftHandleValue, EditorState, SelectionState } from 'draft-js';
3
3
  import PropTypes from 'prop-types';
4
- import { Component, ComponentType, KeyboardEvent, ReactElement, RefAttributes } from 'react';
4
+ import { Iterable } from 'immutable';
5
+ import React, { Component, ComponentType, KeyboardEvent, ReactElement, RefAttributes } from 'react';
5
6
  import { MentionData, MentionPluginStore, PopperOptions } from '..';
6
7
  import { MentionPluginTheme } from '../theme';
7
8
  import { PositionSuggestionsFn } from '../utils/positionSuggestions';
@@ -31,6 +32,8 @@ export interface MentionSuggestionsPubProps {
31
32
  entryComponent?: ComponentType<EntryComponentProps>;
32
33
  popoverContainer?: ComponentType<PopoverProps>;
33
34
  renderEmptyPopup?: boolean;
35
+ handleScroll?: React.UIEventHandler<HTMLElement>;
36
+ isMentionLoading?: boolean;
34
37
  }
35
38
  export interface MentionSuggestionsProps extends MentionSuggestionsPubProps {
36
39
  callbacks: MentionSuggestionCallbacks;
@@ -43,6 +46,16 @@ export interface MentionSuggestionsProps extends MentionSuggestionsPubProps {
43
46
  entityMutability: 'SEGMENTED' | 'IMMUTABLE' | 'MUTABLE';
44
47
  popperOptions?: PopperOptions;
45
48
  }
49
+ interface RenderSuggestionsProps {
50
+ suggestions: MentionData[];
51
+ focusedOptionIndex: number;
52
+ onMentionSelect: (mention: MentionData | null) => void;
53
+ onMentionFocus: (index: number) => void;
54
+ theme: MentionPluginTheme;
55
+ lastSearchValue?: string;
56
+ entryComponent?: ComponentType<EntryComponentProps>;
57
+ isMentionLoading?: boolean;
58
+ }
46
59
  export declare class MentionSuggestions extends Component<MentionSuggestionsProps> {
47
60
  static propTypes: {
48
61
  open: PropTypes.Validator<boolean>;
@@ -51,6 +64,8 @@ export declare class MentionSuggestions extends Component<MentionSuggestionsProp
51
64
  entryComponent: PropTypes.Requireable<(...args: any[]) => any>;
52
65
  onAddMention: PropTypes.Requireable<(...args: any[]) => any>;
53
66
  suggestions: PropTypes.Validator<any[]>;
67
+ handleScroll: PropTypes.Requireable<(...args: any[]) => any>;
68
+ isMentionLoading: PropTypes.Requireable<boolean>;
54
69
  };
55
70
  state: {
56
71
  focusedOptionIndex: number;
@@ -60,7 +75,7 @@ export declare class MentionSuggestions extends Component<MentionSuggestionsProp
60
75
  activeOffsetKey?: string;
61
76
  lastSearchValue?: string;
62
77
  lastActiveTrigger?: string;
63
- lastSelectionIsInsideWord?: Immutable.Iterable<string, boolean>;
78
+ lastSelectionIsInsideWord?: Iterable<string, boolean>;
64
79
  constructor(props: MentionSuggestionsProps);
65
80
  componentDidUpdate(): void;
66
81
  componentWillUnmount(): void;
@@ -76,6 +91,7 @@ export declare class MentionSuggestions extends Component<MentionSuggestionsProp
76
91
  openDropdown: () => void;
77
92
  closeDropdown: () => void;
78
93
  private getMentionKey;
94
+ renderSuggestionsList: (props: RenderSuggestionsProps) => ReactElement;
79
95
  render(): ReactElement | null;
80
96
  }
81
97
  export default MentionSuggestions;
package/lib/MentionSuggestions/Popover.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import { ReactElement, ReactNode } from 'react';
1
+ import React, { ReactElement, ReactNode } from 'react';
2
2
  import { MentionPluginStore, PopperOptions } from '..';
3
3
  import { MentionPluginTheme } from '../theme';
4
4
  export interface PopoverProps {
5
5
  store: MentionPluginStore;
6
6
  children: ReactNode;
7
- popperOptions?: PopperOptions;
8
7
  theme: MentionPluginTheme;
8
+ popperOptions?: PopperOptions;
9
+ handleScroll?: React.UIEventHandler<HTMLElement>;
9
10
  }
10
- export default function Popover({ store, children, theme, popperOptions, }: PopoverProps): ReactElement;
11
+ export default function Popover({ store, children, theme, popperOptions, handleScroll, }: PopoverProps): ReactElement;
package/lib/MentionSuggestions/__test__/MentionSuggestions.test.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ import '@testing-library/jest-dom';
package/lib/index.cjs.js CHANGED
@@ -11,75 +11,61 @@ var escapeRegExp = require('lodash/escapeRegExp');
11
11
  var once = require('lodash/once');
12
12
  var reactPopper = require('react-popper');
13
13
 
14
- function _extends() {
15
- _extends = Object.assign ? Object.assign.bind() : function (target) {
16
- for (var i = 1; i < arguments.length; i++) {
17
- var source = arguments[i];
18
- for (var key in source) {
19
- if (Object.prototype.hasOwnProperty.call(source, key)) {
20
- target[key] = source[key];
21
- }
22
- }
23
- }
24
- return target;
25
- };
26
- return _extends.apply(this, arguments);
27
- }
28
- function _inheritsLoose(subClass, superClass) {
29
- subClass.prototype = Object.create(superClass.prototype);
30
- subClass.prototype.constructor = subClass;
31
- _setPrototypeOf(subClass, superClass);
32
- }
33
- function _setPrototypeOf(o, p) {
34
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
35
- o.__proto__ = p;
36
- return o;
37
- };
38
- return _setPrototypeOf(o, p);
39
- }
40
- function _objectWithoutPropertiesLoose(source, excluded) {
41
- if (source == null) return {};
42
- var target = {};
43
- var sourceKeys = Object.keys(source);
44
- var key, i;
45
- for (i = 0; i < sourceKeys.length; i++) {
46
- key = sourceKeys[i];
47
- if (excluded.indexOf(key) >= 0) continue;
48
- target[key] = source[key];
49
- }
50
- return target;
51
- }
52
- function _unsupportedIterableToArray(o, minLen) {
53
- if (!o) return;
54
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
55
- var n = Object.prototype.toString.call(o).slice(8, -1);
56
- if (n === "Object" && o.constructor) n = o.constructor.name;
57
- if (n === "Map" || n === "Set") return Array.from(o);
58
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
59
- }
60
- function _arrayLikeToArray(arr, len) {
61
- if (len == null || len > arr.length) len = arr.length;
62
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
63
- return arr2;
14
+ function _arrayLikeToArray(r, a) {
15
+ (null == a || a > r.length) && (a = r.length);
16
+ for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
17
+ return n;
64
18
  }
65
- function _createForOfIteratorHelperLoose(o, allowArrayLike) {
66
- var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
67
- if (it) return (it = it.call(o)).next.bind(it);
68
- if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
69
- if (it) o = it;
70
- var i = 0;
19
+ function _createForOfIteratorHelperLoose(r, e) {
20
+ var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
21
+ if (t) return (t = t.call(r)).next.bind(t);
22
+ if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
23
+ t && (r = t);
24
+ var o = 0;
71
25
  return function () {
72
- if (i >= o.length) return {
26
+ return o >= r.length ? {
73
27
  done: true
74
- };
75
- return {
28
+ } : {
76
29
  done: false,
77
- value: o[i++]
30
+ value: r[o++]
78
31
  };
79
32
  };
80
33
  }
81
34
  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
82
35
  }
36
+ function _extends() {
37
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
38
+ for (var e = 1; e < arguments.length; e++) {
39
+ var t = arguments[e];
40
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
41
+ }
42
+ return n;
43
+ }, _extends.apply(null, arguments);
44
+ }
45
+ function _inheritsLoose(t, o) {
46
+ t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
47
+ }
48
+ function _objectWithoutPropertiesLoose(r, e) {
49
+ if (null == r) return {};
50
+ var t = {};
51
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
52
+ if (-1 !== e.indexOf(n)) continue;
53
+ t[n] = r[n];
54
+ }
55
+ return t;
56
+ }
57
+ function _setPrototypeOf(t, e) {
58
+ return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
59
+ return t.__proto__ = e, t;
60
+ }, _setPrototypeOf(t, e);
61
+ }
62
+ function _unsupportedIterableToArray(r, a) {
63
+ if (r) {
64
+ if ("string" == typeof r) return _arrayLikeToArray(r, a);
65
+ var t = {}.toString.call(r).slice(8, -1);
66
+ return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
67
+ }
68
+ }
83
69
 
84
70
  function MentionLink(_ref) {
85
71
  var mention = _ref.mention,
@@ -267,7 +253,7 @@ function getTriggerForMention(editorState, searches, mentionTriggers) {
267
253
  };
268
254
  }
269
255
 
270
- var getRelativeParent = function getRelativeParent(element) {
256
+ var _getRelativeParent = function getRelativeParent(element) {
271
257
  if (!element) {
272
258
  return null;
273
259
  }
@@ -275,13 +261,13 @@ var getRelativeParent = function getRelativeParent(element) {
275
261
  if (position !== 'static') {
276
262
  return element;
277
263
  }
278
- return getRelativeParent(element.parentElement);
264
+ return _getRelativeParent(element.parentElement);
279
265
  };
280
266
  function positionSuggestions(_ref) {
281
267
  var decoratorRect = _ref.decoratorRect,
282
268
  popover = _ref.popover,
283
269
  props = _ref.props;
284
- var relativeParent = getRelativeParent(popover.parentElement);
270
+ var relativeParent = _getRelativeParent(popover.parentElement);
285
271
  var relativeRect;
286
272
  if (relativeParent) {
287
273
  var relativeParentRect = relativeParent.getBoundingClientRect();
@@ -433,7 +419,8 @@ function Popover(_ref) {
433
419
  _ref$popperOptions = _ref.popperOptions,
434
420
  popperOptions = _ref$popperOptions === void 0 ? {
435
421
  placement: 'bottom-start'
436
- } : _ref$popperOptions;
422
+ } : _ref$popperOptions,
423
+ handleScroll = _ref.handleScroll;
437
424
  var _useState = React.useState(function () {
438
425
  return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
439
426
  }),
@@ -455,21 +442,25 @@ function Popover(_ref) {
455
442
  style: styles.popper
456
443
  }, attributes.popper, {
457
444
  className: className,
458
- role: "listbox"
445
+ role: "listbox",
446
+ onScroll: handleScroll
459
447
  }), children);
460
448
  }
461
449
 
462
- var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix"];
450
+ var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix", "handleScroll", "isMentionLoading"];
463
451
  var MentionSuggestions = /*#__PURE__*/function (_Component) {
464
- _inheritsLoose(MentionSuggestions, _Component);
465
- function MentionSuggestions(props) {
452
+ function MentionSuggestions(_props) {
466
453
  var _this;
467
- _this = _Component.call(this, props) || this;
454
+ _this = _Component.call(this, _props) || this;
468
455
  _this.state = {
469
456
  focusedOptionIndex: 0
470
457
  };
471
458
  _this.key = draftJs.genKey();
459
+ _this.popover = void 0;
460
+ _this.activeOffsetKey = void 0;
461
+ _this.lastSearchValue = void 0;
472
462
  _this.lastActiveTrigger = '';
463
+ _this.lastSelectionIsInsideWord = void 0;
473
464
  _this.onEditorStateChange = function (editorState) {
474
465
  var searches = _this.props.store.getAllSearches();
475
466
  // if no search portal is active there is no need to show the popover
@@ -623,9 +614,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
623
614
  _this.props.ariaProps.ariaOwneeID = undefined;
624
615
  _this.props.onOpenChange(false);
625
616
  };
617
+ _this.renderSuggestionsList = function (props) {
618
+ var suggestions = props.suggestions,
619
+ focusedOptionIndex = props.focusedOptionIndex,
620
+ onMentionSelect = props.onMentionSelect,
621
+ onMentionFocus = props.onMentionFocus,
622
+ theme = props.theme,
623
+ lastSearchValue = props.lastSearchValue,
624
+ entryComponent = props.entryComponent,
625
+ isMentionLoading = props.isMentionLoading;
626
+ return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.map(function (mention, index) {
627
+ return /*#__PURE__*/React.createElement(Entry, {
628
+ key: _this.getMentionKey(mention, index),
629
+ onMentionSelect: onMentionSelect,
630
+ onMentionFocus: onMentionFocus,
631
+ isFocused: focusedOptionIndex === index,
632
+ mention: mention,
633
+ index: index,
634
+ id: "mention-option-" + index,
635
+ theme: theme,
636
+ searchValue: lastSearchValue,
637
+ entryComponent: entryComponent || DefaultEntryComponent
638
+ });
639
+ }), isMentionLoading && /*#__PURE__*/React.createElement("div", {
640
+ className: "list-title",
641
+ style: {
642
+ padding: '8px 8px',
643
+ marginTop: '8px',
644
+ marginLeft: '40px'
645
+ }
646
+ }, "Loading..."));
647
+ };
626
648
  _this.props.callbacks.onChange = _this.onEditorStateChange;
627
649
  return _this;
628
650
  }
651
+ _inheritsLoose(MentionSuggestions, _Component);
629
652
  var _proto = MentionSuggestions.prototype;
630
653
  _proto.componentDidUpdate = function componentDidUpdate() {
631
654
  if (this.popover) {
@@ -685,17 +708,19 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
685
708
  _this$props.onOpenChange;
686
709
  _this$props.onAddMention;
687
710
  _this$props.onSearchChange;
688
- _this$props.suggestions;
711
+ var suggestions = _this$props.suggestions;
689
712
  _this$props.ariaProps;
690
713
  _this$props.callbacks;
691
714
  var _this$props$theme = _this$props.theme,
692
- theme = _this$props$theme === void 0 ? {} : _this$props$theme;
693
- _this$props.store;
715
+ theme = _this$props$theme === void 0 ? {} : _this$props$theme,
716
+ store = _this$props.store;
694
717
  _this$props.entityMutability;
695
718
  var positionSuggestions = _this$props.positionSuggestions;
696
719
  _this$props.mentionTriggers;
697
720
  _this$props.mentionPrefix;
698
- var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
721
+ var handleScroll = _this$props.handleScroll,
722
+ isMentionLoading = _this$props.isMentionLoading,
723
+ elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
699
724
  if (popoverComponent || positionSuggestions) {
700
725
  warning('The properties `popoverComponent` and `positionSuggestions` are deprecated and will be removed in @draft-js-plugins/mentions 6.0 . Use `popperOptions` instead');
701
726
  return /*#__PURE__*/React.cloneElement(popoverComponent || /*#__PURE__*/React.createElement("div", null), _extends({}, elementProps, {
@@ -704,43 +729,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
704
729
  id: "mentions-list-" + this.key,
705
730
  ref: function ref(element) {
706
731
  _this2.popover = element;
707
- }
708
- }), this.props.suggestions.map(function (mention, index) {
709
- return /*#__PURE__*/React.createElement(Entry, {
710
- key: _this2.getMentionKey(mention, index),
711
- onMentionSelect: _this2.onMentionSelect,
712
- onMentionFocus: _this2.onMentionFocus,
713
- isFocused: _this2.state.focusedOptionIndex === index,
714
- mention: mention,
715
- index: index,
716
- id: "mention-option-" + _this2.key + "-" + index,
717
- theme: theme,
718
- searchValue: _this2.lastSearchValue,
719
- entryComponent: entryComponent || DefaultEntryComponent
720
- });
721
- }));
732
+ },
733
+ handleScroll: handleScroll
734
+ }), /*#__PURE__*/React.createElement("div", {
735
+ id: 'mention-suggestion-popoverComponent'
736
+ }, this.renderSuggestionsList({
737
+ suggestions: suggestions,
738
+ focusedOptionIndex: this.state.focusedOptionIndex,
739
+ onMentionSelect: this.onMentionSelect,
740
+ onMentionFocus: this.onMentionFocus,
741
+ theme: theme,
742
+ lastSearchValue: this.lastSearchValue,
743
+ entryComponent: entryComponent,
744
+ isMentionLoading: isMentionLoading
745
+ })));
722
746
  }
723
- if (!this.props.renderEmptyPopup && this.props.suggestions.length === 0) {
747
+ if (!this.props.renderEmptyPopup && suggestions.length === 0 && !isMentionLoading) {
724
748
  return null;
725
749
  }
726
750
  return /*#__PURE__*/React.createElement(PopoverContainer, {
727
- store: this.props.store,
751
+ store: store,
728
752
  popperOptions: popperOptions,
729
- theme: theme
730
- }, this.props.suggestions.map(function (mention, index) {
731
- return /*#__PURE__*/React.createElement(Entry, {
732
- key: _this2.getMentionKey(mention, index),
733
- onMentionSelect: _this2.onMentionSelect,
734
- onMentionFocus: _this2.onMentionFocus,
735
- isFocused: _this2.state.focusedOptionIndex === index,
736
- mention: mention,
737
- index: index,
738
- id: "mention-option-" + _this2.key + "-" + index,
739
- theme: theme,
740
- searchValue: _this2.lastSearchValue,
741
- entryComponent: entryComponent || DefaultEntryComponent
742
- });
743
- }));
753
+ theme: theme,
754
+ handleScroll: handleScroll
755
+ }, /*#__PURE__*/React.createElement("div", {
756
+ id: 'mention-suggestion-PopoverContainer'
757
+ }, this.renderSuggestionsList({
758
+ suggestions: suggestions,
759
+ focusedOptionIndex: this.state.focusedOptionIndex,
760
+ onMentionSelect: this.onMentionSelect,
761
+ onMentionFocus: this.onMentionFocus,
762
+ theme: theme,
763
+ lastSearchValue: this.lastSearchValue,
764
+ entryComponent: entryComponent,
765
+ isMentionLoading: isMentionLoading
766
+ })));
744
767
  };
745
768
  return MentionSuggestions;
746
769
  }(React.Component);
@@ -750,12 +773,14 @@ MentionSuggestions.propTypes = {
750
773
  entityMutability: PropTypes.oneOf(['SEGMENTED', 'IMMUTABLE', 'MUTABLE']),
751
774
  entryComponent: PropTypes.func,
752
775
  onAddMention: PropTypes.func,
753
- suggestions: PropTypes.array.isRequired
776
+ suggestions: PropTypes.array.isRequired,
777
+ handleScroll: PropTypes.func,
778
+ isMentionLoading: PropTypes.bool
754
779
  };
755
780
 
756
781
  var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
757
782
  function MentionSuggestionsPortal(props) {
758
- var searchPortal = React.useRef();
783
+ var searchPortal = React.useRef(null);
759
784
 
760
785
  // Note: this is a workaround for an obscure issue: https://github.com/draft-js-plugins/draft-js-plugins/pull/667/files
761
786
  // Ideally we can remove this in the future.
package/lib/index.esm.js CHANGED
@@ -7,75 +7,61 @@ import escapeRegExp from 'lodash-es/escapeRegExp';
7
7
  import once from 'lodash-es/once';
8
8
  import { usePopper } from 'react-popper';
9
9
 
10
- function _extends() {
11
- _extends = Object.assign ? Object.assign.bind() : function (target) {
12
- for (var i = 1; i < arguments.length; i++) {
13
- var source = arguments[i];
14
- for (var key in source) {
15
- if (Object.prototype.hasOwnProperty.call(source, key)) {
16
- target[key] = source[key];
17
- }
18
- }
19
- }
20
- return target;
21
- };
22
- return _extends.apply(this, arguments);
23
- }
24
- function _inheritsLoose(subClass, superClass) {
25
- subClass.prototype = Object.create(superClass.prototype);
26
- subClass.prototype.constructor = subClass;
27
- _setPrototypeOf(subClass, superClass);
28
- }
29
- function _setPrototypeOf(o, p) {
30
- _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
31
- o.__proto__ = p;
32
- return o;
33
- };
34
- return _setPrototypeOf(o, p);
35
- }
36
- function _objectWithoutPropertiesLoose(source, excluded) {
37
- if (source == null) return {};
38
- var target = {};
39
- var sourceKeys = Object.keys(source);
40
- var key, i;
41
- for (i = 0; i < sourceKeys.length; i++) {
42
- key = sourceKeys[i];
43
- if (excluded.indexOf(key) >= 0) continue;
44
- target[key] = source[key];
45
- }
46
- return target;
47
- }
48
- function _unsupportedIterableToArray(o, minLen) {
49
- if (!o) return;
50
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
51
- var n = Object.prototype.toString.call(o).slice(8, -1);
52
- if (n === "Object" && o.constructor) n = o.constructor.name;
53
- if (n === "Map" || n === "Set") return Array.from(o);
54
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
55
- }
56
- function _arrayLikeToArray(arr, len) {
57
- if (len == null || len > arr.length) len = arr.length;
58
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
59
- return arr2;
10
+ function _arrayLikeToArray(r, a) {
11
+ (null == a || a > r.length) && (a = r.length);
12
+ for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
13
+ return n;
60
14
  }
61
- function _createForOfIteratorHelperLoose(o, allowArrayLike) {
62
- var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
63
- if (it) return (it = it.call(o)).next.bind(it);
64
- if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
65
- if (it) o = it;
66
- var i = 0;
15
+ function _createForOfIteratorHelperLoose(r, e) {
16
+ var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
17
+ if (t) return (t = t.call(r)).next.bind(t);
18
+ if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
19
+ t && (r = t);
20
+ var o = 0;
67
21
  return function () {
68
- if (i >= o.length) return {
22
+ return o >= r.length ? {
69
23
  done: true
70
- };
71
- return {
24
+ } : {
72
25
  done: false,
73
- value: o[i++]
26
+ value: r[o++]
74
27
  };
75
28
  };
76
29
  }
77
30
  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
78
31
  }
32
+ function _extends() {
33
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
34
+ for (var e = 1; e < arguments.length; e++) {
35
+ var t = arguments[e];
36
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37
+ }
38
+ return n;
39
+ }, _extends.apply(null, arguments);
40
+ }
41
+ function _inheritsLoose(t, o) {
42
+ t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
43
+ }
44
+ function _objectWithoutPropertiesLoose(r, e) {
45
+ if (null == r) return {};
46
+ var t = {};
47
+ for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
48
+ if (-1 !== e.indexOf(n)) continue;
49
+ t[n] = r[n];
50
+ }
51
+ return t;
52
+ }
53
+ function _setPrototypeOf(t, e) {
54
+ return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
55
+ return t.__proto__ = e, t;
56
+ }, _setPrototypeOf(t, e);
57
+ }
58
+ function _unsupportedIterableToArray(r, a) {
59
+ if (r) {
60
+ if ("string" == typeof r) return _arrayLikeToArray(r, a);
61
+ var t = {}.toString.call(r).slice(8, -1);
62
+ return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
63
+ }
64
+ }
79
65
 
80
66
  function MentionLink(_ref) {
81
67
  var mention = _ref.mention,
@@ -263,7 +249,7 @@ function getTriggerForMention(editorState, searches, mentionTriggers) {
263
249
  };
264
250
  }
265
251
 
266
- var getRelativeParent = function getRelativeParent(element) {
252
+ var _getRelativeParent = function getRelativeParent(element) {
267
253
  if (!element) {
268
254
  return null;
269
255
  }
@@ -271,13 +257,13 @@ var getRelativeParent = function getRelativeParent(element) {
271
257
  if (position !== 'static') {
272
258
  return element;
273
259
  }
274
- return getRelativeParent(element.parentElement);
260
+ return _getRelativeParent(element.parentElement);
275
261
  };
276
262
  function positionSuggestions(_ref) {
277
263
  var decoratorRect = _ref.decoratorRect,
278
264
  popover = _ref.popover,
279
265
  props = _ref.props;
280
- var relativeParent = getRelativeParent(popover.parentElement);
266
+ var relativeParent = _getRelativeParent(popover.parentElement);
281
267
  var relativeRect;
282
268
  if (relativeParent) {
283
269
  var relativeParentRect = relativeParent.getBoundingClientRect();
@@ -429,7 +415,8 @@ function Popover(_ref) {
429
415
  _ref$popperOptions = _ref.popperOptions,
430
416
  popperOptions = _ref$popperOptions === void 0 ? {
431
417
  placement: 'bottom-start'
432
- } : _ref$popperOptions;
418
+ } : _ref$popperOptions,
419
+ handleScroll = _ref.handleScroll;
433
420
  var _useState = useState(function () {
434
421
  return clsx(theme.mentionSuggestions, theme.mentionSuggestionsPopup);
435
422
  }),
@@ -451,21 +438,25 @@ function Popover(_ref) {
451
438
  style: styles.popper
452
439
  }, attributes.popper, {
453
440
  className: className,
454
- role: "listbox"
441
+ role: "listbox",
442
+ onScroll: handleScroll
455
443
  }), children);
456
444
  }
457
445
 
458
- var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix"];
446
+ var _excluded = ["entryComponent", "popoverComponent", "popperOptions", "popoverContainer", "onOpenChange", "onAddMention", "onSearchChange", "suggestions", "ariaProps", "callbacks", "theme", "store", "entityMutability", "positionSuggestions", "mentionTriggers", "mentionPrefix", "handleScroll", "isMentionLoading"];
459
447
  var MentionSuggestions = /*#__PURE__*/function (_Component) {
460
- _inheritsLoose(MentionSuggestions, _Component);
461
- function MentionSuggestions(props) {
448
+ function MentionSuggestions(_props) {
462
449
  var _this;
463
- _this = _Component.call(this, props) || this;
450
+ _this = _Component.call(this, _props) || this;
464
451
  _this.state = {
465
452
  focusedOptionIndex: 0
466
453
  };
467
454
  _this.key = genKey();
455
+ _this.popover = void 0;
456
+ _this.activeOffsetKey = void 0;
457
+ _this.lastSearchValue = void 0;
468
458
  _this.lastActiveTrigger = '';
459
+ _this.lastSelectionIsInsideWord = void 0;
469
460
  _this.onEditorStateChange = function (editorState) {
470
461
  var searches = _this.props.store.getAllSearches();
471
462
  // if no search portal is active there is no need to show the popover
@@ -619,9 +610,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
619
610
  _this.props.ariaProps.ariaOwneeID = undefined;
620
611
  _this.props.onOpenChange(false);
621
612
  };
613
+ _this.renderSuggestionsList = function (props) {
614
+ var suggestions = props.suggestions,
615
+ focusedOptionIndex = props.focusedOptionIndex,
616
+ onMentionSelect = props.onMentionSelect,
617
+ onMentionFocus = props.onMentionFocus,
618
+ theme = props.theme,
619
+ lastSearchValue = props.lastSearchValue,
620
+ entryComponent = props.entryComponent,
621
+ isMentionLoading = props.isMentionLoading;
622
+ return /*#__PURE__*/React.createElement(React.Fragment, null, suggestions.map(function (mention, index) {
623
+ return /*#__PURE__*/React.createElement(Entry, {
624
+ key: _this.getMentionKey(mention, index),
625
+ onMentionSelect: onMentionSelect,
626
+ onMentionFocus: onMentionFocus,
627
+ isFocused: focusedOptionIndex === index,
628
+ mention: mention,
629
+ index: index,
630
+ id: "mention-option-" + index,
631
+ theme: theme,
632
+ searchValue: lastSearchValue,
633
+ entryComponent: entryComponent || DefaultEntryComponent
634
+ });
635
+ }), isMentionLoading && /*#__PURE__*/React.createElement("div", {
636
+ className: "list-title",
637
+ style: {
638
+ padding: '8px 8px',
639
+ marginTop: '8px',
640
+ marginLeft: '40px'
641
+ }
642
+ }, "Loading..."));
643
+ };
622
644
  _this.props.callbacks.onChange = _this.onEditorStateChange;
623
645
  return _this;
624
646
  }
647
+ _inheritsLoose(MentionSuggestions, _Component);
625
648
  var _proto = MentionSuggestions.prototype;
626
649
  _proto.componentDidUpdate = function componentDidUpdate() {
627
650
  if (this.popover) {
@@ -681,17 +704,19 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
681
704
  _this$props.onOpenChange;
682
705
  _this$props.onAddMention;
683
706
  _this$props.onSearchChange;
684
- _this$props.suggestions;
707
+ var suggestions = _this$props.suggestions;
685
708
  _this$props.ariaProps;
686
709
  _this$props.callbacks;
687
710
  var _this$props$theme = _this$props.theme,
688
- theme = _this$props$theme === void 0 ? {} : _this$props$theme;
689
- _this$props.store;
711
+ theme = _this$props$theme === void 0 ? {} : _this$props$theme,
712
+ store = _this$props.store;
690
713
  _this$props.entityMutability;
691
714
  var positionSuggestions = _this$props.positionSuggestions;
692
715
  _this$props.mentionTriggers;
693
716
  _this$props.mentionPrefix;
694
- var elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
717
+ var handleScroll = _this$props.handleScroll,
718
+ isMentionLoading = _this$props.isMentionLoading,
719
+ elementProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
695
720
  if (popoverComponent || positionSuggestions) {
696
721
  warning('The properties `popoverComponent` and `positionSuggestions` are deprecated and will be removed in @draft-js-plugins/mentions 6.0 . Use `popperOptions` instead');
697
722
  return /*#__PURE__*/React.cloneElement(popoverComponent || /*#__PURE__*/React.createElement("div", null), _extends({}, elementProps, {
@@ -700,43 +725,41 @@ var MentionSuggestions = /*#__PURE__*/function (_Component) {
700
725
  id: "mentions-list-" + this.key,
701
726
  ref: function ref(element) {
702
727
  _this2.popover = element;
703
- }
704
- }), this.props.suggestions.map(function (mention, index) {
705
- return /*#__PURE__*/React.createElement(Entry, {
706
- key: _this2.getMentionKey(mention, index),
707
- onMentionSelect: _this2.onMentionSelect,
708
- onMentionFocus: _this2.onMentionFocus,
709
- isFocused: _this2.state.focusedOptionIndex === index,
710
- mention: mention,
711
- index: index,
712
- id: "mention-option-" + _this2.key + "-" + index,
713
- theme: theme,
714
- searchValue: _this2.lastSearchValue,
715
- entryComponent: entryComponent || DefaultEntryComponent
716
- });
717
- }));
728
+ },
729
+ handleScroll: handleScroll
730
+ }), /*#__PURE__*/React.createElement("div", {
731
+ id: 'mention-suggestion-popoverComponent'
732
+ }, this.renderSuggestionsList({
733
+ suggestions: suggestions,
734
+ focusedOptionIndex: this.state.focusedOptionIndex,
735
+ onMentionSelect: this.onMentionSelect,
736
+ onMentionFocus: this.onMentionFocus,
737
+ theme: theme,
738
+ lastSearchValue: this.lastSearchValue,
739
+ entryComponent: entryComponent,
740
+ isMentionLoading: isMentionLoading
741
+ })));
718
742
  }
719
- if (!this.props.renderEmptyPopup && this.props.suggestions.length === 0) {
743
+ if (!this.props.renderEmptyPopup && suggestions.length === 0 && !isMentionLoading) {
720
744
  return null;
721
745
  }
722
746
  return /*#__PURE__*/React.createElement(PopoverContainer, {
723
- store: this.props.store,
747
+ store: store,
724
748
  popperOptions: popperOptions,
725
- theme: theme
726
- }, this.props.suggestions.map(function (mention, index) {
727
- return /*#__PURE__*/React.createElement(Entry, {
728
- key: _this2.getMentionKey(mention, index),
729
- onMentionSelect: _this2.onMentionSelect,
730
- onMentionFocus: _this2.onMentionFocus,
731
- isFocused: _this2.state.focusedOptionIndex === index,
732
- mention: mention,
733
- index: index,
734
- id: "mention-option-" + _this2.key + "-" + index,
735
- theme: theme,
736
- searchValue: _this2.lastSearchValue,
737
- entryComponent: entryComponent || DefaultEntryComponent
738
- });
739
- }));
749
+ theme: theme,
750
+ handleScroll: handleScroll
751
+ }, /*#__PURE__*/React.createElement("div", {
752
+ id: 'mention-suggestion-PopoverContainer'
753
+ }, this.renderSuggestionsList({
754
+ suggestions: suggestions,
755
+ focusedOptionIndex: this.state.focusedOptionIndex,
756
+ onMentionSelect: this.onMentionSelect,
757
+ onMentionFocus: this.onMentionFocus,
758
+ theme: theme,
759
+ lastSearchValue: this.lastSearchValue,
760
+ entryComponent: entryComponent,
761
+ isMentionLoading: isMentionLoading
762
+ })));
740
763
  };
741
764
  return MentionSuggestions;
742
765
  }(Component);
@@ -746,12 +769,14 @@ MentionSuggestions.propTypes = {
746
769
  entityMutability: PropTypes.oneOf(['SEGMENTED', 'IMMUTABLE', 'MUTABLE']),
747
770
  entryComponent: PropTypes.func,
748
771
  onAddMention: PropTypes.func,
749
- suggestions: PropTypes.array.isRequired
772
+ suggestions: PropTypes.array.isRequired,
773
+ handleScroll: PropTypes.func,
774
+ isMentionLoading: PropTypes.bool
750
775
  };
751
776
 
752
777
  var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
753
778
  function MentionSuggestionsPortal(props) {
754
- var searchPortal = useRef();
779
+ var searchPortal = useRef(null);
755
780
 
756
781
  // Note: this is a workaround for an obscure issue: https://github.com/draft-js-plugins/draft-js-plugins/pull/667/files
757
782
  // Ideally we can remove this in the future.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lumel/mention",
3
- "version": "5.2.4",
3
+ "version": "5.2.6",
4
4
  "sideEffects": [
5
5
  "*.css"
6
6
  ],
@@ -43,12 +43,11 @@
43
43
  "@popperjs/core": "^2.11.8",
44
44
  "@types/lodash": "^4.14.195",
45
45
  "clsx": "^2.0.0",
46
- "immutable": "~3.7.4",
47
- "lodash": "^4.17.21",
48
- "lodash-es": "^4.17.21",
46
+ "immutable": "^3.8.3",
47
+ "lodash": "^4.18.0",
48
+ "lodash-es": "^4.18.0",
49
49
  "prop-types": "^15.8.1",
50
- "react-popper": "^2.3.0",
51
- "rollup": "^4.53.3"
50
+ "react-popper": "^2.3.0"
52
51
  },
53
52
  "peerDependencies": {
54
53
  "draft-js": "^0.10.1 || ^0.11.0",
@@ -58,4 +57,4 @@
58
57
  "publishConfig": {
59
58
  "access": "public"
60
59
  }
61
- }
60
+ }
package/CHANGELOG.md DELETED
@@ -1,290 +0,0 @@
1
- # Change Log
2
-
3
- All notable changes to this project will be documented in this file.
4
- This project adheres to [Semantic Versioning](http://semver.org/).
5
-
6
- ## To Be Released
7
-
8
- ## 5.2.2
9
-
10
- - adjust react peer dependency
11
-
12
- ## 5.2.1
13
-
14
- - support react 18 in peer dependencies [#2701](https://github.com/draft-js-plugins/draft-js-plugins/issues/2701)
15
-
16
- ## 5.2.0
17
-
18
- - Export `Popover` component for `MentionSuggestions` prop `popoverContainer` without lose of Popper.js functionally [#2684](https://github.com/draft-js-plugins/draft-js-plugins/issues/2684)
19
-
20
- ## 5.1.2
21
-
22
- - Fixing `popoverContainer` type for `MentionSuggestions` [#2633](https://github.com/draft-js-plugins/draft-js-plugins/issues/2633)
23
-
24
- ## 5.1.1
25
-
26
- - Add Japanese symbol to default regExp
27
- - Fixing lodash import to reduce bundle size [#2530](https://github.com/draft-js-plugins/draft-js-plugins/issues/2530)
28
-
29
- ## 5.1.0
30
-
31
- - Use current inline style for mention [#2414](https://github.com/draft-js-plugins/draft-js-plugins/issues/2414)
32
-
33
- ## 5.0.0
34
-
35
- - reset selected item on search change for mention suggestion [#2348](https://github.com/draft-js-plugins/draft-js-plugins/issues/2348)
36
- - add `selectMention` to `EntryComponentProps` [#2363](https://github.com/draft-js-plugins/draft-js-plugins/issues/2363)
37
-
38
- ## 4.6.1
39
-
40
- - delay scrolling into view for selected item in mention list [#2233](https://github.com/draft-js-plugins/draft-js-plugins/issues/2233)
41
- - add animation for `popper.js` [#2209](https://github.com/draft-js-plugins/draft-js-plugins/issues/2209)
42
-
43
- ## 4.6.0
44
-
45
- - sroll focused `Entry` component into view [#997](https://github.com/draft-js-plugins/draft-js-plugins/issues/997)
46
-
47
- ## 4.5.2
48
-
49
- - add `sideEffects` for css files [#1833](https://github.com/draft-js-plugins/draft-js-plugins/issues/1833)
50
-
51
- ## 4.5.1
52
-
53
- - do not render popover if there are no mentions, add `renderEmptyPopup` prop [#2049](https://github.com/draft-js-plugins/draft-js-plugins/issues/2049)
54
- - remove the trigger from the search value [#2047](https://github.com/draft-js-plugins/draft-js-plugins/issues/2047)
55
-
56
- ## 4.5.0
57
-
58
- - fixing multi-character trigger [#2017](https://github.com/draft-js-plugins/draft-js-plugins/issues/2017)
59
- - change MentionSuggestions to popper.js with option `popperOptions`, `popoverContainer` and deprecate `popoverComponent` and `positionSuggestions` [#1933](https://github.com/draft-js-plugins/draft-js-plugins/issues/1933)
60
- - Fix @-mentions to work when the trigger character appears within the search string, for instance an email address.
61
-
62
- ## 4.4.1
63
-
64
- - fixing issue that line does not work [#2004](https://github.com/draft-js-plugins/draft-js-plugins/issues/2004)
65
-
66
- ## 4.4.0
67
-
68
- - fixing issue with build for commen js bundels [#1976](https://github.com/draft-js-plugins/draft-js-plugins/issues/1976)
69
-
70
- ## 4.3.2
71
-
72
- - Add store to PositionSuggestionsParams types [#1945](https://github.com/draft-js-plugins/draft-js-plugins/issues/1945)
73
- - Fixing issue if trigger is first character and cursor if before trigger [#1957](https://github.com/draft-js-plugins/draft-js-plugins/issues/1957)
74
-
75
- ## 4.3.1
76
-
77
- - Fix the @ mentions to actually work. Right now they don't work in the middle of a line. If you start a line with "@" it works but if you start typing text then type "@" it doesn't work.
78
- - Extend the support for chinese symbols [#1888](https://github.com/draft-js-plugins/draft-js-plugins/issues/1888)
79
-
80
- ## 4.3.0
81
-
82
- - fixing trigger range for suggestion strategy [#1772](https://github.com/draft-js-plugins/draft-js-plugins/issues/1772)
83
- - fixing lookahead RegExp which is not supported in Safari [#1844](https://github.com/draft-js-plugins/draft-js-plugins/issues/1844)
84
- - added support for multiple triggers
85
-
86
- ## 4.2.0
87
-
88
- - remove `entryComponent` from plugin config [#1736](https://github.com/draft-js-plugins/draft-js-plugins/issues/1736)
89
-
90
- ## 4.1.0
91
-
92
- - add "sideEffects": false for tree shaking
93
- - Fix regex to ignore trigger in text with supportWhitespace [#1723](https://github.com/draft-js-plugins/draft-js-plugins/issues/1723)
94
-
95
- ## 4.0.2
96
-
97
- - Fix key bindings issue if dropdown is open but there's no suggestion [#1696](https://github.com/draft-js-plugins/draft-js-plugins/issues/1696)
98
- - Fix popoverComponent types
99
-
100
- ## 4.0.1
101
-
102
- - fixing issue Failed to execute 'removeChild' on 'Node' [#1697](https://github.com/draft-js-plugins/draft-js-plugins/issues/1697)
103
-
104
- ## 4.0.0
105
-
106
- - Add Arabic Support
107
- - Remove legacy lifecycle hooks
108
- - Require react 16.3 and above version
109
- - Migrate styles to linaria
110
- - Hide internals in single bundle
111
- - Add esm support
112
- - Use lodash-es in esm bundle
113
- - Added open and onOpenChange required props to make state controlled outside and prevent reacting on suggestions list
114
- - onOpen and onClose callbacks are removed in favour of onOpenChange
115
- - Made suggestions prop required (pass empty array for async suggestions)
116
- - Remove prevState and state from positionSuggestions
117
- - add entryComponent to mention plugin
118
- - convert to typescript
119
- - use the setEditorState and getEditorState functions from props.store in EmojiSuggestionsPortal
120
-
121
- ## 3.1.5
122
-
123
- - removed deprecated draft-js hooks (onUpArrow, onDownArrow, onEscape, onTab) usage
124
-
125
- ## 3.1.4
126
-
127
- - Allow draft-js v0.11
128
- - Remove unused dependencies
129
-
130
- ## 3.1.3
131
-
132
- - Force update regex's `lastIndex` to avoid infinite loop
133
- - Fixed replace issue while `mentionTrigger` is empty
134
-
135
- ## 3.1.2
136
-
137
- - Allow empty `mentionTrigger` with `supportWhitespace: true` #1182
138
-
139
- ## 3.1.1
140
-
141
- - Fix regression for special characters in mention strategy.
142
-
143
- ## 3.1.0
144
-
145
- - Added `supportWhitespace` option to allow more precise matching of mentions containing spaces
146
-
147
- ## 3.0.4
148
-
149
- - Added an `id` attribute on the listbox options so the `aria-activedescendant` value refers to the focused option.
150
-
151
- ## 3.0.2 - 3.0.3
152
-
153
- - bumped find-with-regex
154
-
155
- ## 3.0.1
156
-
157
- - Added `aria-selected="true"` for the suggestions listbox focused option.
158
- - Update aria attributes to use booleans
159
-
160
- ## 3.0.0
161
-
162
- - Deprecate immutable suggestions (breaking change), use arrays from now on
163
- - export default theme (in case we want to extend it)
164
-
165
- ## 2.0.2
166
-
167
- (Much thanks to "dem" aka "Michael Deryugin" - https://github.com/dem)
168
-
169
- - fix suggestions dropdown position in case of line wrap
170
- - Allow mention popup for styled text
171
- - Fixed bug where a user typed not existing mention @xxx and cursor is not moved with up/down arrow key
172
- - Updated dependencies to support react 16
173
-
174
- ## 2.0 alpha
175
-
176
- ### Added
177
-
178
- - Passing through `isFocused` prop to `entryComponent`. Thanks to @thomas88
179
- - Added support for Latin-1 Supplement and Latin Extended-A characters. Thanks to @thomas88
180
- - Fixed incorrect opening of suggestions. Thanks to @thomas88
181
- - Added multiple character support for mentionTrigger
182
- - Added config option `mentionSuggestionsComponent`. If provided the passed component replaces the default `MentionSuggestions` component. The provided component must implement the same interface like `MentionSuggestions`.
183
- - Added support popoverComponent on the `MentionSuggestions` component. Thanks to @samdroid-apps
184
- - Introduced a new configuration option `mentionTrigger`. By default it is set to `@`. As before by default typing `@` will trigger the search for mentions. You can provide a custom character or string to change when the search is triggered. [#320](https://github.com/draft-js-plugins/draft-js-plugins/pull/320) Thanks to @yjang1031
185
- - MentionSuggestions accepts a new prop `entryComponent`. The passed component is used as the template for each of the suggestions' entry. [#317](https://github.com/draft-js-plugins/draft-js-plugins/pull/327). Thanks to @Zhouzi
186
- - `defaultEntryComponent` component is passed `searchValue` prop to enable more customizations when displaying the the MentionSuggestions. Thanks to @nishp1
187
- - The config now accepts a new prop `mentionComponent`. If provided the passed component is used to render a Mention. [#271](https://github.com/draft-js-plugins/draft-js-plugins/pull/271). Thanks to @alexkuz
188
- - Introduced the `mentionRegExp` configuration to overwrite the regular expression for initiating the dropdown. By default this supports any alphanumeric character as well as Chinese, Japanese & Korean characters.
189
- - Added support for Chinese words. Thanks to @mzbac
190
- - Added support for Japanese characters (hiragana & katakana).
191
- - Added support for Korean characters (Hangul Syllables & Hangul Compatibility Jamo). Thanks to @FourwingsY
192
- - Added support for Cyrillic characters. Thanks to @imamatory
193
- - Added `onAddMention` prop to MentionSuggestions. The first argument of this callback will contain the mention entry.
194
-
195
- ### Fixed
196
-
197
- - Escape spaces before mention trigger properly
198
- - Escape mention trigger regex properly
199
- - Fix bug that selects candidate on hitting return key even if the dropdown was closed. Thanks to @ngs [#720](https://github.com/draft-js-plugins/draft-js-plugins/pull/720)
200
- - Fix issue with: add two mentions in the Custom Mention Component Example editor, then press backspace key, will remove the first one. Thanks to @chenyuejie [#693](https://github.com/draft-js-plugins/draft-js-plugins/pull/693)
201
- - Prevents inserting the selected item on Enter or Tab when there's no trigger in sight and dropdown is not rendered. Thanks to @alexfedoseev [#706](https://github.com/draft-js-plugins/draft-js-plugins/pull/706)
202
- - Reopens mentions dropdown if new suggestions are available. Thanks to @jameskraus [#659](https://github.com/draft-js-plugins/draft-js-plugins/pull/659)
203
- - Solved a bug with @ being placed in the beginning. Thanks to @hjyue1 [#621](https://github.com/draft-js-plugins/draft-js-plugins/pull/621)
204
- - Fixed "Cannot read property 'getBoundingClientRect' of null" issue. Thanks to @ismyrnow [#666](https://github.com/draft-js-plugins/draft-js-plugins/pull/667)
205
- - Mentions popover showed up when typing before a @ [#323](https://github.com/draft-js-plugins/draft-js-plugins/issues/323) Thanks to @nishp1
206
- - Only pass element properties to the root Div of MentionSuggestions to remove the "Unknown prop warning" in React 15.2.0
207
- - Fixed bug where a user typed @xxx (invalid mention) and hit Enter. [#416](https://github.com/draft-js-plugins/draft-js-plugins/pull/416)
208
- - Fixed bug where press up arrow would not cycle back to the bottom of suggestions
209
- - Fixed race condition where the SuggestionPortal would unregister and not register again when inputting Japanese, etc.
210
- - Fixed bug where `mentionPrefix` does not appear in `editorState`. `mentionPrefix` is no longer passed to `mentionComponent`.
211
- - Fixed bug where `onSearchChange` didn't fire when a user switched between two different mention autocompletions with the same search value. Now it will trigger `onSearchChange` in such a case.
212
- - Fixed unrecognized `isFocused` React prop.
213
-
214
- ## 1.1.2 - 2016-06-26
215
-
216
- ### Fixed
217
-
218
- - Accepts plain JavaScript Objects for mentions from now on. Until now it only accepted an `Immutable.Map`. This change would make it play nicer together with `convertFromRaw` by default. Thanks to @anderslemke [#326](https://github.com/draft-js-plugins/draft-js-plugins/pull/326)
219
- - `positionSuggestions` now works by default with non-static parents. Thanks to @Zhouzi
220
- [#309](https://github.com/draft-js-plugins/draft-js-plugins/pull/309)
221
- [#206](https://github.com/draft-js-plugins/draft-js-plugins/issues/206)
222
- [#283](https://github.com/draft-js-plugins/draft-js-plugins/issues/283)
223
- [#289](https://github.com/draft-js-plugins/draft-js-plugins/issues/289)
224
-
225
- ## 1.1.1 - 2016-06-05
226
-
227
- ### Fixed
228
-
229
- - Close mention suggestions when suggestions filtered results are empty [#291](https://github.com/draft-js-plugins/draft-js-plugins/pull/291) [#265](https://github.com/draft-js-plugins/draft-js-plugins/issues/265)
230
-
231
- ## 1.1.0 - 2016-05-27
232
-
233
- ### Added
234
-
235
- - `MentionSuggestions` now accepts `onOpen`and `onClose` props. These callbacks are triggered when the popover has opened or closed.
236
-
237
- ## 1.0.2 - 2016-05-24
238
-
239
- ### Fixed
240
-
241
- - Fix rendering the MentionSuggestions in IE11 by avoiding to render an Immutable List [#266](https://github.com/draft-js-plugins/draft-js-plugins/issues/266) [#270](https://github.com/draft-js-plugins/draft-js-plugins/pull/270)
242
- - Fix React 0.14.x support by returning `<noscript />` instead of `null` [#267](https://github.com/draft-js-plugins/draft-js-plugins/pull/267)
243
-
244
- ## 1.0.1 - 2016-04-29
245
-
246
- ### Fixed
247
-
248
- - Make sure there is no autocomplete on tab after deleting a mention [#234](https://github.com/draft-js-plugins/draft-js-plugins/issues/234)
249
-
250
- ## 1.0.0 - 2016-04-20
251
-
252
- ### Changed
253
-
254
- - Instead of the popover inline it is now exported as `MentionSuggestions` and can be placed anywhere in the DOM. It's recommended to place it right after the Editor. This change was important to avoid selection issues trigged by `contentEditable={false}`.
255
- - `mentions` has been renamed to `suggestions` and now has to be directly provided to the `MentionSuggestions` component as property.
256
- - Moved to a flat configuration. Instead of plugin properties (decorators & hooks) being stored within pluginProps they now moved to the root object. See the changes here [#150](https://github.com/draft-js-plugins/draft-js-plugins/pull/150/files) as well as the initial discussion here [#143](https://github.com/draft-js-plugins/draft-js-plugins/issues/143)
257
- - Improved the regex and now test for a whitespace in front of the `@` to make sure it doesn't match on normal text like an email [#104](https://github.com/draft-js-plugins/draft-js-plugins/issues/104)
258
- - Moved the option `theme` from an Immutable Map to a JavaScript object. This is more likely to become a standard.
259
- - Improved styling and added animations for the Suggestions overlay as well as the hover on a single suggestion.
260
- - Updated the theme properties.
261
-
262
- ### Fixed
263
-
264
- - Fix using backspace to close the autocomplete suggestions after typing an `@` [#110](https://github.com/draft-js-plugins/draft-js-plugins/issues/110)
265
-
266
- ### Added
267
-
268
- - The config now takes a property `entityMutability`. A developer can choose between 'IMMUTABLE', 'SEGMENTED' & 'MUTABLE'. Read in detail about it [here](https://draftjs.org/docs/advanced-topics-entities/#mutability).
269
- - The config now takes a property `positionSuggestions`. The function can be used to manipulate the position of the popover containing the suggestions. It receives one object as arguments containing the visible rectangle surrounding the decorated search string including the @. In addition the object contains prevProps, prevState, state & props. An object should be returned which can contain all sorts of styles. The defined properties will be applied as inline-styles.
270
- - Introduce a new config property: `mentionPrefix`. By default it is an empty String. For Twitter or Slack like mention behaviour you can provide an `@`.
271
-
272
- ```
273
- const mentionPlugin = createMentionPlugin({ entityMutability: 'IMMUTABLE' });
274
- ```
275
-
276
- - The `MentionSuggestions` component now takes a property `onSearchChange` which will trigger whenever the search value of changes.
277
- - The module now exports `defaultSuggestionsFilter` for convenience. As first argument it takes the search term as a String. The second argument is the Immutable list of mentions. The function returns the filter list based on substring matches.
278
-
279
- ## 0.0.4 - 2016-03-29
280
-
281
- ### Fixed
282
-
283
- - Fix issue with showing two menus at the same time [#132](https://github.com/draft-js-plugins/draft-js-plugins/issues/132)
284
- - When typing ahead to 0 results and then back the first item must be still selected. [#149](https://github.com/draft-js-plugins/draft-js-plugins/pull/149)
285
-
286
- ## 0.0.3 - 2016-03-25
287
-
288
- ### Released the first working version of DraftJS Mention Plugin
289
-
290
- It's not recommended to use the version 0.0.0 - 0.0.2