react-mentions 3.3.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/react-mentions.cjs.dev.js +273 -199
- package/dist/react-mentions.cjs.prod.js +178 -195
- package/dist/react-mentions.esm.js +272 -198
- package/package.json +5 -7
@@ -7,17 +7,13 @@ import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
|
|
7
7
|
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
|
8
8
|
import _inherits from '@babel/runtime/helpers/esm/inherits';
|
9
9
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
10
|
-
import isEqual from 'lodash/isEqual';
|
11
|
-
import isNumber from 'lodash/isNumber';
|
12
|
-
import keys from 'lodash/keys';
|
13
|
-
import omit from 'lodash/omit';
|
14
|
-
import values from 'lodash/values';
|
15
|
-
import PropTypes from 'prop-types';
|
16
10
|
import React, { Children, Component } from 'react';
|
17
|
-
import ReactDOM from 'react-dom';
|
18
|
-
import substyle, { defaultStyle } from 'substyle';
|
19
11
|
import invariant from 'invariant';
|
20
12
|
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
|
13
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
14
|
+
import useStyles, { inline } from 'substyle';
|
15
|
+
import PropTypes from 'prop-types';
|
16
|
+
import ReactDOM from 'react-dom';
|
21
17
|
|
22
18
|
// escape RegExp special characters https://stackoverflow.com/a/9310752/5142490
|
23
19
|
var escapeRegex = function escapeRegex(str) {
|
@@ -621,9 +617,58 @@ var getSubstringIndex = function getSubstringIndex(str, substr, ignoreAccents) {
|
|
621
617
|
return normalizeString(str).indexOf(normalizeString(substr));
|
622
618
|
};
|
623
619
|
|
624
|
-
|
620
|
+
var isNumber = function isNumber(val) {
|
621
|
+
return typeof val === 'number';
|
622
|
+
};
|
625
623
|
|
626
|
-
|
624
|
+
var keys = function keys(obj) {
|
625
|
+
return obj === Object(obj) ? Object.keys(obj) : [];
|
626
|
+
};
|
627
|
+
|
628
|
+
var omit = function omit(obj) {
|
629
|
+
var _ref;
|
630
|
+
|
631
|
+
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
632
|
+
rest[_key - 1] = arguments[_key];
|
633
|
+
}
|
634
|
+
|
635
|
+
var keys = (_ref = []).concat.apply(_ref, rest);
|
636
|
+
|
637
|
+
return Object.keys(obj).reduce(function (acc, k) {
|
638
|
+
if (obj.hasOwnProperty(k) && !keys.includes(k) && obj[k] !== undefined) {
|
639
|
+
acc[k] = obj[k];
|
640
|
+
}
|
641
|
+
|
642
|
+
return acc;
|
643
|
+
}, {});
|
644
|
+
};
|
645
|
+
|
646
|
+
function createDefaultStyle(defaultStyle, getModifiers) {
|
647
|
+
var enhance = function enhance(ComponentToWrap) {
|
648
|
+
var DefaultStyleEnhancer = function DefaultStyleEnhancer(_ref) {
|
649
|
+
var style = _ref.style,
|
650
|
+
className = _ref.className,
|
651
|
+
classNames = _ref.classNames,
|
652
|
+
rest = _objectWithoutProperties(_ref, ["style", "className", "classNames"]);
|
653
|
+
|
654
|
+
var modifiers = getModifiers ? getModifiers(rest) : undefined;
|
655
|
+
var styles = useStyles(defaultStyle, {
|
656
|
+
style: style,
|
657
|
+
className: className,
|
658
|
+
classNames: classNames
|
659
|
+
}, modifiers);
|
660
|
+
return React.createElement(ComponentToWrap, _extends({}, rest, {
|
661
|
+
style: styles
|
662
|
+
}));
|
663
|
+
};
|
664
|
+
|
665
|
+
var displayName = ComponentToWrap.displayName || ComponentToWrap.name || 'Component';
|
666
|
+
DefaultStyleEnhancer.displayName = "defaultStyle(".concat(displayName, ")");
|
667
|
+
return DefaultStyleEnhancer;
|
668
|
+
};
|
669
|
+
|
670
|
+
return enhance;
|
671
|
+
}
|
627
672
|
|
628
673
|
var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
|
629
674
|
if (!usedKeys.hasOwnProperty(id)) {
|
@@ -646,8 +691,14 @@ function (_Component) {
|
|
646
691
|
_classCallCheck(this, Highlighter);
|
647
692
|
|
648
693
|
_this = _possibleConstructorReturn(this, _getPrototypeOf(Highlighter).apply(this, arguments));
|
694
|
+
|
695
|
+
_defineProperty(_assertThisInitialized(_this), "setCaretElement", function (el) {
|
696
|
+
_this.caretElement = el;
|
697
|
+
});
|
698
|
+
|
649
699
|
_this.state = {
|
650
|
-
|
700
|
+
left: undefined,
|
701
|
+
top: undefined
|
651
702
|
};
|
652
703
|
return _this;
|
653
704
|
}
|
@@ -665,24 +716,24 @@ function (_Component) {
|
|
665
716
|
}, {
|
666
717
|
key: "notifyCaretPosition",
|
667
718
|
value: function notifyCaretPosition() {
|
668
|
-
if (!this.
|
719
|
+
if (!this.caretElement) {
|
669
720
|
return;
|
670
721
|
}
|
671
722
|
|
672
|
-
var
|
673
|
-
|
674
|
-
|
675
|
-
};
|
676
|
-
var lastPosition = this.state.lastPosition;
|
723
|
+
var _this$caretElement = this.caretElement,
|
724
|
+
offsetLeft = _this$caretElement.offsetLeft,
|
725
|
+
offsetTop = _this$caretElement.offsetTop;
|
677
726
|
|
678
|
-
if (
|
727
|
+
if (this.state.left === offsetLeft && this.state.top === offsetTop) {
|
679
728
|
return;
|
680
729
|
}
|
681
730
|
|
682
|
-
|
683
|
-
|
684
|
-
|
685
|
-
|
731
|
+
var newPosition = {
|
732
|
+
left: offsetLeft,
|
733
|
+
top: offsetTop
|
734
|
+
};
|
735
|
+
this.setState(newPosition);
|
736
|
+
this.props.onCaretPositionChange(newPosition);
|
686
737
|
}
|
687
738
|
}, {
|
688
739
|
key: "render",
|
@@ -690,17 +741,18 @@ function (_Component) {
|
|
690
741
|
var _this2 = this;
|
691
742
|
|
692
743
|
var _this$props = this.props,
|
693
|
-
|
744
|
+
selectionStart = _this$props.selectionStart,
|
745
|
+
selectionEnd = _this$props.selectionEnd,
|
694
746
|
value = _this$props.value,
|
695
747
|
style = _this$props.style,
|
696
|
-
|
697
|
-
|
748
|
+
children = _this$props.children,
|
749
|
+
containerRef = _this$props.containerRef;
|
698
750
|
var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
|
699
751
|
|
700
752
|
var caretPositionInMarkup;
|
701
753
|
|
702
|
-
if (
|
703
|
-
caretPositionInMarkup = mapPlainTextIndex(value, config,
|
754
|
+
if (selectionStart === selectionEnd) {
|
755
|
+
caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
|
704
756
|
}
|
705
757
|
|
706
758
|
var resultComponents = [];
|
@@ -742,7 +794,7 @@ function (_Component) {
|
|
742
794
|
}
|
743
795
|
|
744
796
|
return React.createElement("div", _extends({}, style, {
|
745
|
-
|
797
|
+
ref: containerRef
|
746
798
|
}), resultComponents);
|
747
799
|
}
|
748
800
|
}, {
|
@@ -769,12 +821,8 @@ function (_Component) {
|
|
769
821
|
}, {
|
770
822
|
key: "renderHighlighterCaret",
|
771
823
|
value: function renderHighlighterCaret(children) {
|
772
|
-
var _this3 = this;
|
773
|
-
|
774
824
|
return React.createElement("span", _extends({}, this.props.style('caret'), {
|
775
|
-
ref:
|
776
|
-
_this3.caretRef = el;
|
777
|
-
},
|
825
|
+
ref: this.setCaretElement,
|
778
826
|
key: "caret"
|
779
827
|
}), children);
|
780
828
|
}
|
@@ -784,28 +832,30 @@ function (_Component) {
|
|
784
832
|
}(Component);
|
785
833
|
|
786
834
|
_defineProperty(Highlighter, "propTypes", {
|
787
|
-
|
788
|
-
|
789
|
-
end: PropTypes.number
|
790
|
-
}).isRequired,
|
835
|
+
selectionStart: PropTypes.number,
|
836
|
+
selectionEnd: PropTypes.number,
|
791
837
|
value: PropTypes.string.isRequired,
|
792
838
|
onCaretPositionChange: PropTypes.func.isRequired,
|
793
|
-
|
839
|
+
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
840
|
+
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
841
|
+
})]),
|
794
842
|
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
|
795
843
|
});
|
796
844
|
|
797
845
|
_defineProperty(Highlighter, "defaultProps", {
|
798
|
-
value: ''
|
799
|
-
inputStyle: {}
|
846
|
+
value: ''
|
800
847
|
});
|
801
848
|
|
802
|
-
var styled =
|
849
|
+
var styled = createDefaultStyle({
|
803
850
|
position: 'relative',
|
804
|
-
|
851
|
+
boxSizing: 'border-box',
|
852
|
+
width: '100%',
|
805
853
|
color: 'transparent',
|
806
854
|
overflow: 'hidden',
|
807
855
|
whiteSpace: 'pre-wrap',
|
808
856
|
wordWrap: 'break-word',
|
857
|
+
border: '1px solid transparent',
|
858
|
+
textAlign: 'start',
|
809
859
|
'&singleLine': {
|
810
860
|
whiteSpace: 'pre',
|
811
861
|
wordWrap: null
|
@@ -834,7 +884,8 @@ function (_Component) {
|
|
834
884
|
_createClass(Suggestion, [{
|
835
885
|
key: "render",
|
836
886
|
value: function render() {
|
837
|
-
var rest = omit(this.props, 'style',
|
887
|
+
var rest = omit(this.props, ['style', 'classNames', 'className'], // substyle props
|
888
|
+
keys(Suggestion.propTypes));
|
838
889
|
return React.createElement("li", _extends({}, rest, this.props.style), this.renderContent());
|
839
890
|
}
|
840
891
|
}, {
|
@@ -906,7 +957,7 @@ _defineProperty(Suggestion, "propTypes", {
|
|
906
957
|
focused: PropTypes.bool
|
907
958
|
});
|
908
959
|
|
909
|
-
var styled$1 =
|
960
|
+
var styled$1 = createDefaultStyle({
|
910
961
|
cursor: 'pointer'
|
911
962
|
}, function (props) {
|
912
963
|
return {
|
@@ -915,75 +966,98 @@ var styled$1 = defaultStyle({
|
|
915
966
|
});
|
916
967
|
var Suggestion$1 = styled$1(Suggestion);
|
917
968
|
|
918
|
-
function LoadingIndicator(
|
919
|
-
var
|
920
|
-
var
|
921
|
-
return React.createElement("div",
|
969
|
+
function LoadingIndicator() {
|
970
|
+
var styles = useStyles();
|
971
|
+
var spinnerStyles = styles('spinner');
|
972
|
+
return React.createElement("div", styles, React.createElement("div", spinnerStyles, React.createElement("div", spinnerStyles(['element', 'element1'])), React.createElement("div", spinnerStyles(['element', 'element2'])), React.createElement("div", spinnerStyles(['element', 'element3'])), React.createElement("div", spinnerStyles(['element', 'element4'])), React.createElement("div", spinnerStyles(['element', 'element5']))));
|
922
973
|
}
|
923
974
|
|
924
|
-
var LoadingIndicator$1 = substyle(LoadingIndicator);
|
925
|
-
|
926
|
-
function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
927
|
-
|
928
|
-
function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
929
|
-
|
930
975
|
var SuggestionsOverlay =
|
931
976
|
/*#__PURE__*/
|
932
977
|
function (_Component) {
|
933
978
|
_inherits(SuggestionsOverlay, _Component);
|
934
979
|
|
935
980
|
function SuggestionsOverlay() {
|
981
|
+
var _getPrototypeOf2;
|
982
|
+
|
983
|
+
var _this;
|
984
|
+
|
936
985
|
_classCallCheck(this, SuggestionsOverlay);
|
937
986
|
|
938
|
-
|
987
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
988
|
+
args[_key] = arguments[_key];
|
989
|
+
}
|
990
|
+
|
991
|
+
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SuggestionsOverlay)).call.apply(_getPrototypeOf2, [this].concat(args)));
|
992
|
+
|
993
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (index, ev) {
|
994
|
+
if (_this.props.onMouseEnter) {
|
995
|
+
_this.props.onMouseEnter(index);
|
996
|
+
}
|
997
|
+
});
|
998
|
+
|
999
|
+
_defineProperty(_assertThisInitialized(_this), "select", function (suggestion, queryInfo) {
|
1000
|
+
_this.props.onSelect(suggestion, queryInfo);
|
1001
|
+
});
|
1002
|
+
|
1003
|
+
_defineProperty(_assertThisInitialized(_this), "setUlElement", function (el) {
|
1004
|
+
_this.ulElement = el;
|
1005
|
+
});
|
1006
|
+
|
1007
|
+
return _this;
|
939
1008
|
}
|
940
1009
|
|
941
1010
|
_createClass(SuggestionsOverlay, [{
|
942
1011
|
key: "componentDidUpdate",
|
943
1012
|
value: function componentDidUpdate() {
|
944
|
-
if (!this.
|
1013
|
+
if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
|
945
1014
|
return;
|
946
1015
|
}
|
947
1016
|
|
948
|
-
var scrollTop = this.
|
1017
|
+
var scrollTop = this.ulElement.scrollTop;
|
949
1018
|
|
950
|
-
var _this$
|
951
|
-
top = _this$
|
952
|
-
bottom = _this$
|
1019
|
+
var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
|
1020
|
+
top = _this$ulElement$child.top,
|
1021
|
+
bottom = _this$ulElement$child.bottom;
|
953
1022
|
|
954
|
-
var _this$
|
955
|
-
topContainer = _this$
|
1023
|
+
var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
|
1024
|
+
topContainer = _this$ulElement$getBo.top;
|
956
1025
|
|
957
1026
|
top = top - topContainer + scrollTop;
|
958
1027
|
bottom = bottom - topContainer + scrollTop;
|
959
1028
|
|
960
1029
|
if (top < scrollTop) {
|
961
|
-
this.
|
962
|
-
} else if (bottom > this.
|
963
|
-
this.
|
1030
|
+
this.ulElement.scrollTop = top;
|
1031
|
+
} else if (bottom > this.ulElement.offsetHeight) {
|
1032
|
+
this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
|
964
1033
|
}
|
965
1034
|
}
|
966
1035
|
}, {
|
967
1036
|
key: "render",
|
968
1037
|
value: function render() {
|
969
|
-
var _this = this;
|
970
|
-
|
971
1038
|
var _this$props = this.props,
|
972
1039
|
suggestions = _this$props.suggestions,
|
973
1040
|
isLoading = _this$props.isLoading,
|
974
1041
|
style = _this$props.style,
|
975
|
-
onMouseDown = _this$props.onMouseDown
|
1042
|
+
onMouseDown = _this$props.onMouseDown,
|
1043
|
+
containerRef = _this$props.containerRef,
|
1044
|
+
position = _this$props.position,
|
1045
|
+
left = _this$props.left,
|
1046
|
+
top = _this$props.top; // do not show suggestions until there is some data
|
976
1047
|
|
977
1048
|
if (countSuggestions(suggestions) === 0 && !isLoading) {
|
978
1049
|
return null;
|
979
1050
|
}
|
980
1051
|
|
981
|
-
return React.createElement("div", _extends({},
|
982
|
-
|
1052
|
+
return React.createElement("div", _extends({}, inline({
|
1053
|
+
position: position || 'absolute',
|
1054
|
+
left: left,
|
1055
|
+
top: top
|
1056
|
+
}, style), {
|
1057
|
+
onMouseDown: onMouseDown,
|
1058
|
+
ref: containerRef
|
983
1059
|
}), React.createElement("ul", _extends({
|
984
|
-
ref:
|
985
|
-
_this.suggestionsRef = el;
|
986
|
-
}
|
1060
|
+
ref: this.setUlElement
|
987
1061
|
}, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
|
988
1062
|
}
|
989
1063
|
}, {
|
@@ -1004,7 +1078,7 @@ function (_Component) {
|
|
1004
1078
|
value: function renderSuggestion(result, queryInfo, index) {
|
1005
1079
|
var _this3 = this;
|
1006
1080
|
|
1007
|
-
var id =
|
1081
|
+
var id = getID(result);
|
1008
1082
|
var isFocused = index === this.props.focusIndex;
|
1009
1083
|
var childIndex = queryInfo.childIndex,
|
1010
1084
|
query = queryInfo.query;
|
@@ -1028,15 +1102,6 @@ function (_Component) {
|
|
1028
1102
|
}
|
1029
1103
|
});
|
1030
1104
|
}
|
1031
|
-
}, {
|
1032
|
-
key: "getID",
|
1033
|
-
value: function getID(suggestion) {
|
1034
|
-
if (suggestion instanceof String) {
|
1035
|
-
return suggestion;
|
1036
|
-
}
|
1037
|
-
|
1038
|
-
return suggestion.id;
|
1039
|
-
}
|
1040
1105
|
}, {
|
1041
1106
|
key: "renderLoadingIndicator",
|
1042
1107
|
value: function renderLoadingIndicator() {
|
@@ -1044,22 +1109,10 @@ function (_Component) {
|
|
1044
1109
|
return;
|
1045
1110
|
}
|
1046
1111
|
|
1047
|
-
return React.createElement(LoadingIndicator
|
1112
|
+
return React.createElement(LoadingIndicator, {
|
1048
1113
|
style: this.props.style('loadingIndicator')
|
1049
1114
|
});
|
1050
1115
|
}
|
1051
|
-
}, {
|
1052
|
-
key: "handleMouseEnter",
|
1053
|
-
value: function handleMouseEnter(index, ev) {
|
1054
|
-
if (this.props.onMouseEnter) {
|
1055
|
-
this.props.onMouseEnter(index);
|
1056
|
-
}
|
1057
|
-
}
|
1058
|
-
}, {
|
1059
|
-
key: "select",
|
1060
|
-
value: function select(suggestion, queryInfo) {
|
1061
|
-
this.props.onSelect(suggestion, queryInfo);
|
1062
|
-
}
|
1063
1116
|
}]);
|
1064
1117
|
|
1065
1118
|
return SuggestionsOverlay;
|
@@ -1068,10 +1121,16 @@ function (_Component) {
|
|
1068
1121
|
_defineProperty(SuggestionsOverlay, "propTypes", {
|
1069
1122
|
suggestions: PropTypes.object.isRequired,
|
1070
1123
|
focusIndex: PropTypes.number,
|
1124
|
+
position: PropTypes.string,
|
1125
|
+
left: PropTypes.number,
|
1126
|
+
top: PropTypes.number,
|
1071
1127
|
scrollFocusedIntoView: PropTypes.bool,
|
1072
1128
|
isLoading: PropTypes.bool,
|
1073
1129
|
onSelect: PropTypes.func,
|
1074
1130
|
ignoreAccents: PropTypes.bool,
|
1131
|
+
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
1132
|
+
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
1133
|
+
})]),
|
1075
1134
|
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
|
1076
1135
|
});
|
1077
1136
|
|
@@ -1082,27 +1141,30 @@ _defineProperty(SuggestionsOverlay, "defaultProps", {
|
|
1082
1141
|
}
|
1083
1142
|
});
|
1084
1143
|
|
1085
|
-
var
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1090
|
-
|
1091
|
-
|
1092
|
-
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1144
|
+
var getID = function getID(suggestion) {
|
1145
|
+
if (suggestion instanceof String) {
|
1146
|
+
return suggestion;
|
1147
|
+
}
|
1148
|
+
|
1149
|
+
return suggestion.id;
|
1150
|
+
};
|
1151
|
+
|
1152
|
+
var styled$2 = createDefaultStyle({
|
1153
|
+
zIndex: 1,
|
1154
|
+
backgroundColor: 'white',
|
1155
|
+
marginTop: 14,
|
1156
|
+
minWidth: 100,
|
1157
|
+
list: {
|
1158
|
+
margin: 0,
|
1159
|
+
padding: 0,
|
1160
|
+
listStyleType: 'none'
|
1161
|
+
}
|
1100
1162
|
});
|
1101
1163
|
var SuggestionsOverlay$1 = styled$2(SuggestionsOverlay);
|
1102
1164
|
|
1103
|
-
function ownKeys
|
1165
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
1104
1166
|
|
1105
|
-
function _objectSpread
|
1167
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
1106
1168
|
var makeTriggerRegex = function makeTriggerRegex(trigger) {
|
1107
1169
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
1108
1170
|
|
@@ -1154,7 +1216,6 @@ var propTypes = {
|
|
1154
1216
|
*/
|
1155
1217
|
singleLine: PropTypes.bool,
|
1156
1218
|
allowSpaceInQuery: PropTypes.bool,
|
1157
|
-
EXPERIMENTAL_cutCopyPaste: PropTypes.bool,
|
1158
1219
|
allowSuggestionsAboveCursor: PropTypes.bool,
|
1159
1220
|
ignoreAccents: PropTypes.bool,
|
1160
1221
|
value: PropTypes.string,
|
@@ -1181,14 +1242,19 @@ function (_React$Component) {
|
|
1181
1242
|
|
1182
1243
|
_this = _possibleConstructorReturn(this, _getPrototypeOf(MentionsInput).call(this, _props));
|
1183
1244
|
|
1184
|
-
_defineProperty(_assertThisInitialized(_this), "
|
1245
|
+
_defineProperty(_assertThisInitialized(_this), "setContainerElement", function (el) {
|
1246
|
+
_this.containerElement = el;
|
1247
|
+
});
|
1248
|
+
|
1249
|
+
_defineProperty(_assertThisInitialized(_this), "getInputProps", function () {
|
1185
1250
|
var _this$props = _this.props,
|
1186
1251
|
readOnly = _this$props.readOnly,
|
1187
1252
|
disabled = _this$props.disabled,
|
1188
|
-
style = _this$props.style; // pass all props that we
|
1253
|
+
style = _this$props.style; // pass all props that neither we, nor substyle, consume through to the input control
|
1189
1254
|
|
1190
|
-
var props = omit(_this.props, 'style',
|
1191
|
-
|
1255
|
+
var props = omit(_this.props, ['style', 'classNames', 'className'], // substyle props
|
1256
|
+
keys(propTypes));
|
1257
|
+
return _objectSpread({}, props, {}, style('input'), {
|
1192
1258
|
value: _this.getPlainText()
|
1193
1259
|
}, !readOnly && !disabled && {
|
1194
1260
|
onChange: _this.handleChange,
|
@@ -1206,9 +1272,9 @@ function (_React$Component) {
|
|
1206
1272
|
singleLine = _this$props2.singleLine,
|
1207
1273
|
style = _this$props2.style;
|
1208
1274
|
|
1209
|
-
var inputProps = _this.getInputProps(
|
1275
|
+
var inputProps = _this.getInputProps();
|
1210
1276
|
|
1211
|
-
return React.createElement("div", style('control'), _this.renderHighlighter(
|
1277
|
+
return React.createElement("div", style('control'), _this.renderHighlighter(), singleLine ? _this.renderInput(inputProps) : _this.renderTextarea(inputProps));
|
1212
1278
|
});
|
1213
1279
|
|
1214
1280
|
_defineProperty(_assertThisInitialized(_this), "renderInput", function (props) {
|
@@ -1225,7 +1291,7 @@ function (_React$Component) {
|
|
1225
1291
|
});
|
1226
1292
|
|
1227
1293
|
_defineProperty(_assertThisInitialized(_this), "setInputRef", function (el) {
|
1228
|
-
_this.
|
1294
|
+
_this.inputElement = el;
|
1229
1295
|
var inputRef = _this.props.inputRef;
|
1230
1296
|
|
1231
1297
|
if (typeof inputRef === 'function') {
|
@@ -1235,29 +1301,32 @@ function (_React$Component) {
|
|
1235
1301
|
}
|
1236
1302
|
});
|
1237
1303
|
|
1304
|
+
_defineProperty(_assertThisInitialized(_this), "setSuggestionsElement", function (el) {
|
1305
|
+
_this.suggestionsElement = el;
|
1306
|
+
});
|
1307
|
+
|
1238
1308
|
_defineProperty(_assertThisInitialized(_this), "renderSuggestionsOverlay", function () {
|
1239
1309
|
if (!isNumber(_this.state.selectionStart)) {
|
1240
1310
|
// do not show suggestions when the input does not have the focus
|
1241
1311
|
return null;
|
1242
1312
|
}
|
1243
1313
|
|
1314
|
+
var _this$state$suggestio = _this.state.suggestionsPosition,
|
1315
|
+
position = _this$state$suggestio.position,
|
1316
|
+
left = _this$state$suggestio.left,
|
1317
|
+
top = _this$state$suggestio.top;
|
1244
1318
|
var suggestionsNode = React.createElement(SuggestionsOverlay$1, {
|
1245
1319
|
style: _this.props.style('suggestions'),
|
1246
|
-
position:
|
1320
|
+
position: position,
|
1321
|
+
left: left,
|
1322
|
+
top: top,
|
1247
1323
|
focusIndex: _this.state.focusIndex,
|
1248
1324
|
scrollFocusedIntoView: _this.state.scrollFocusedIntoView,
|
1249
|
-
|
1250
|
-
_this.suggestionsRef = el;
|
1251
|
-
},
|
1325
|
+
containerRef: _this.setSuggestionsElement,
|
1252
1326
|
suggestions: _this.state.suggestions,
|
1253
1327
|
onSelect: _this.addMention,
|
1254
1328
|
onMouseDown: _this.handleSuggestionsMouseDown,
|
1255
|
-
onMouseEnter:
|
1256
|
-
return _this.setState({
|
1257
|
-
focusIndex: focusIndex,
|
1258
|
-
scrollFocusedIntoView: false
|
1259
|
-
});
|
1260
|
-
},
|
1329
|
+
onMouseEnter: _this.handleSuggestionsMouseEnter,
|
1261
1330
|
isLoading: _this.isLoading(),
|
1262
1331
|
ignoreAccents: _this.props.ignoreAccents
|
1263
1332
|
}, _this.props.children);
|
@@ -1269,7 +1338,7 @@ function (_React$Component) {
|
|
1269
1338
|
}
|
1270
1339
|
});
|
1271
1340
|
|
1272
|
-
_defineProperty(_assertThisInitialized(_this), "renderHighlighter", function (
|
1341
|
+
_defineProperty(_assertThisInitialized(_this), "renderHighlighter", function () {
|
1273
1342
|
var _this$state = _this.state,
|
1274
1343
|
selectionStart = _this$state.selectionStart,
|
1275
1344
|
selectionEnd = _this$state.selectionEnd;
|
@@ -1279,25 +1348,26 @@ function (_React$Component) {
|
|
1279
1348
|
value = _this$props3.value,
|
1280
1349
|
style = _this$props3.style;
|
1281
1350
|
return React.createElement(Highlighter$1, {
|
1282
|
-
|
1283
|
-
_this.highlighterRef = el;
|
1284
|
-
},
|
1351
|
+
containerRef: _this.setHighlighterElement,
|
1285
1352
|
style: style('highlighter'),
|
1286
|
-
inputStyle: inputStyle,
|
1287
1353
|
value: value,
|
1288
1354
|
singleLine: singleLine,
|
1289
|
-
|
1290
|
-
|
1291
|
-
|
1292
|
-
},
|
1293
|
-
onCaretPositionChange: function onCaretPositionChange(position) {
|
1294
|
-
return _this.setState({
|
1295
|
-
caretPosition: position
|
1296
|
-
});
|
1297
|
-
}
|
1355
|
+
selectionStart: selectionStart,
|
1356
|
+
selectionEnd: selectionEnd,
|
1357
|
+
onCaretPositionChange: _this.handleCaretPositionChange
|
1298
1358
|
}, children);
|
1299
1359
|
});
|
1300
1360
|
|
1361
|
+
_defineProperty(_assertThisInitialized(_this), "setHighlighterElement", function (el) {
|
1362
|
+
_this.highlighterElement = el;
|
1363
|
+
});
|
1364
|
+
|
1365
|
+
_defineProperty(_assertThisInitialized(_this), "handleCaretPositionChange", function (position) {
|
1366
|
+
_this.setState({
|
1367
|
+
caretPosition: position
|
1368
|
+
});
|
1369
|
+
});
|
1370
|
+
|
1301
1371
|
_defineProperty(_assertThisInitialized(_this), "getPlainText", function () {
|
1302
1372
|
return getPlainText(_this.props.value || '', readConfigFromChildren(_this.props.children));
|
1303
1373
|
});
|
@@ -1321,7 +1391,8 @@ function (_React$Component) {
|
|
1321
1391
|
});
|
1322
1392
|
|
1323
1393
|
_defineProperty(_assertThisInitialized(_this), "handleChange", function (ev) {
|
1324
|
-
// if we are inside iframe, we need to find activeElement within its contentDocument
|
1394
|
+
isComposing = false; // if we are inside iframe, we need to find activeElement within its contentDocument
|
1395
|
+
|
1325
1396
|
var currentDocument = document.activeElement && document.activeElement.contentDocument || document;
|
1326
1397
|
|
1327
1398
|
if (currentDocument.activeElement !== ev.target) {
|
@@ -1383,7 +1454,7 @@ function (_React$Component) {
|
|
1383
1454
|
|
1384
1455
|
if (isComposing) return; // refresh suggestions queries
|
1385
1456
|
|
1386
|
-
var el = _this.
|
1457
|
+
var el = _this.inputElement;
|
1387
1458
|
|
1388
1459
|
if (ev.target.selectionStart === ev.target.selectionEnd) {
|
1389
1460
|
_this.updateMentionsQueries(el.value, ev.target.selectionStart);
|
@@ -1400,15 +1471,14 @@ function (_React$Component) {
|
|
1400
1471
|
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (ev) {
|
1401
1472
|
// do not intercept key events if the suggestions overlay is not shown
|
1402
1473
|
var suggestionsCount = countSuggestions(_this.state.suggestions);
|
1403
|
-
var suggestionsComp = _this.suggestionsRef;
|
1404
1474
|
|
1405
|
-
if (suggestionsCount === 0 || !
|
1475
|
+
if (suggestionsCount === 0 || !_this.suggestionsElement) {
|
1406
1476
|
_this.props.onKeyDown(ev);
|
1407
1477
|
|
1408
1478
|
return;
|
1409
1479
|
}
|
1410
1480
|
|
1411
|
-
if (values(KEY).indexOf(ev.keyCode) >= 0) {
|
1481
|
+
if (Object.values(KEY).indexOf(ev.keyCode) >= 0) {
|
1412
1482
|
ev.preventDefault();
|
1413
1483
|
}
|
1414
1484
|
|
@@ -1511,18 +1581,25 @@ function (_React$Component) {
|
|
1511
1581
|
_this._suggestionsMouseDown = true;
|
1512
1582
|
});
|
1513
1583
|
|
1584
|
+
_defineProperty(_assertThisInitialized(_this), "handleSuggestionsMouseEnter", function (focusIndex) {
|
1585
|
+
_this.setState({
|
1586
|
+
focusIndex: focusIndex,
|
1587
|
+
scrollFocusedIntoView: false
|
1588
|
+
});
|
1589
|
+
});
|
1590
|
+
|
1514
1591
|
_defineProperty(_assertThisInitialized(_this), "updateSuggestionsPosition", function () {
|
1515
1592
|
var caretPosition = _this.state.caretPosition;
|
1516
1593
|
var _this$props5 = _this.props,
|
1517
1594
|
suggestionsPortalHost = _this$props5.suggestionsPortalHost,
|
1518
1595
|
allowSuggestionsAboveCursor = _this$props5.allowSuggestionsAboveCursor;
|
1519
1596
|
|
1520
|
-
if (!caretPosition || !_this.
|
1597
|
+
if (!caretPosition || !_this.suggestionsElement) {
|
1521
1598
|
return;
|
1522
1599
|
}
|
1523
1600
|
|
1524
|
-
var suggestions =
|
1525
|
-
var highlighter =
|
1601
|
+
var suggestions = _this.suggestionsElement;
|
1602
|
+
var highlighter = _this.highlighterElement; // first get viewport-relative position (highlighter is offsetParent of caret):
|
1526
1603
|
|
1527
1604
|
var caretOffsetParentRect = highlighter.getBoundingClientRect();
|
1528
1605
|
var caretHeight = getComputedStyleLengthProp(highlighter, 'font-size');
|
@@ -1571,7 +1648,7 @@ function (_React$Component) {
|
|
1571
1648
|
var _top = caretPosition.top - highlighter.scrollTop; // guard for mentions suggestions list clipped by right edge of window
|
1572
1649
|
|
1573
1650
|
|
1574
|
-
if (_left + suggestions.offsetWidth > _this.
|
1651
|
+
if (_left + suggestions.offsetWidth > _this.containerElement.offsetWidth) {
|
1575
1652
|
position.right = 0;
|
1576
1653
|
} else {
|
1577
1654
|
position.left = _left;
|
@@ -1587,7 +1664,7 @@ function (_React$Component) {
|
|
1587
1664
|
}
|
1588
1665
|
}
|
1589
1666
|
|
1590
|
-
if (
|
1667
|
+
if (position.left === _this.state.suggestionsPosition.left && position.top === _this.state.suggestionsPosition.top && position.position === _this.state.suggestionsPosition.position) {
|
1591
1668
|
return;
|
1592
1669
|
}
|
1593
1670
|
|
@@ -1597,14 +1674,15 @@ function (_React$Component) {
|
|
1597
1674
|
});
|
1598
1675
|
|
1599
1676
|
_defineProperty(_assertThisInitialized(_this), "updateHighlighterScroll", function () {
|
1600
|
-
|
1677
|
+
var input = _this.inputElement;
|
1678
|
+
var highlighter = _this.highlighterElement;
|
1679
|
+
|
1680
|
+
if (!input || !highlighter) {
|
1601
1681
|
// since the invocation of this function is deferred,
|
1602
1682
|
// the whole component may have been unmounted in the meanwhile
|
1603
1683
|
return;
|
1604
1684
|
}
|
1605
1685
|
|
1606
|
-
var input = _this.inputRef;
|
1607
|
-
var highlighter = ReactDOM.findDOMNode(_this.highlighterRef);
|
1608
1686
|
highlighter.scrollLeft = input.scrollLeft;
|
1609
1687
|
highlighter.scrollTop = input.scrollTop;
|
1610
1688
|
highlighter.height = input.height;
|
@@ -1620,7 +1698,7 @@ function (_React$Component) {
|
|
1620
1698
|
|
1621
1699
|
_defineProperty(_assertThisInitialized(_this), "setSelection", function (selectionStart, selectionEnd) {
|
1622
1700
|
if (selectionStart === null || selectionEnd === null) return;
|
1623
|
-
var el = _this.
|
1701
|
+
var el = _this.inputElement;
|
1624
1702
|
|
1625
1703
|
if (el.setSelectionRange) {
|
1626
1704
|
el.setSelectionRange(selectionStart, selectionEnd);
|
@@ -1701,7 +1779,7 @@ function (_React$Component) {
|
|
1701
1779
|
if (queryId !== _this._queryId) return; // save in property so that multiple sync state updates from different mentions sources
|
1702
1780
|
// won't overwrite each other
|
1703
1781
|
|
1704
|
-
_this.suggestions = _objectSpread
|
1782
|
+
_this.suggestions = _objectSpread({}, _this.suggestions, _defineProperty({}, childIndex, {
|
1705
1783
|
queryInfo: {
|
1706
1784
|
childIndex: childIndex,
|
1707
1785
|
query: query,
|
@@ -1746,7 +1824,7 @@ function (_React$Component) {
|
|
1746
1824
|
|
1747
1825
|
var newValue = spliceString(value, start, end, insert); // Refocus input and set caret position to end of mention
|
1748
1826
|
|
1749
|
-
_this.
|
1827
|
+
_this.inputElement.focus();
|
1750
1828
|
|
1751
1829
|
var displayValue = displayTransform(id, display);
|
1752
1830
|
|
@@ -1801,7 +1879,7 @@ function (_React$Component) {
|
|
1801
1879
|
selectionEnd: null,
|
1802
1880
|
suggestions: {},
|
1803
1881
|
caretPosition: null,
|
1804
|
-
suggestionsPosition:
|
1882
|
+
suggestionsPosition: {}
|
1805
1883
|
};
|
1806
1884
|
return _this;
|
1807
1885
|
}
|
@@ -1809,14 +1887,9 @@ function (_React$Component) {
|
|
1809
1887
|
_createClass(MentionsInput, [{
|
1810
1888
|
key: "componentDidMount",
|
1811
1889
|
value: function componentDidMount() {
|
1812
|
-
|
1813
|
-
|
1814
|
-
|
1815
|
-
document.addEventListener('copy', this.handleCopy);
|
1816
|
-
document.addEventListener('cut', this.handleCut);
|
1817
|
-
document.addEventListener('paste', this.handlePaste);
|
1818
|
-
}
|
1819
|
-
|
1890
|
+
document.addEventListener('copy', this.handleCopy);
|
1891
|
+
document.addEventListener('cut', this.handleCut);
|
1892
|
+
document.addEventListener('paste', this.handlePaste);
|
1820
1893
|
this.updateSuggestionsPosition();
|
1821
1894
|
}
|
1822
1895
|
}, {
|
@@ -1840,29 +1913,21 @@ function (_React$Component) {
|
|
1840
1913
|
}, {
|
1841
1914
|
key: "componentWillUnmount",
|
1842
1915
|
value: function componentWillUnmount() {
|
1843
|
-
|
1844
|
-
|
1845
|
-
|
1846
|
-
document.removeEventListener('copy', this.handleCopy);
|
1847
|
-
document.removeEventListener('cut', this.handleCut);
|
1848
|
-
document.removeEventListener('paste', this.handlePaste);
|
1849
|
-
}
|
1916
|
+
document.removeEventListener('copy', this.handleCopy);
|
1917
|
+
document.removeEventListener('cut', this.handleCut);
|
1918
|
+
document.removeEventListener('paste', this.handlePaste);
|
1850
1919
|
}
|
1851
1920
|
}, {
|
1852
1921
|
key: "render",
|
1853
1922
|
value: function render() {
|
1854
|
-
var _this2 = this;
|
1855
|
-
|
1856
1923
|
return React.createElement("div", _extends({
|
1857
|
-
ref:
|
1858
|
-
_this2.containerRef = el;
|
1859
|
-
}
|
1924
|
+
ref: this.setContainerElement
|
1860
1925
|
}, this.props.style), this.renderControl(), this.renderSuggestionsOverlay());
|
1861
1926
|
}
|
1862
1927
|
}, {
|
1863
1928
|
key: "handlePaste",
|
1864
1929
|
value: function handlePaste(event) {
|
1865
|
-
if (event.target !== this.
|
1930
|
+
if (event.target !== this.inputElement) {
|
1866
1931
|
return;
|
1867
1932
|
}
|
1868
1933
|
|
@@ -1882,10 +1947,10 @@ function (_React$Component) {
|
|
1882
1947
|
var markupEndIndex = mapPlainTextIndex(value, config, selectionEnd, 'END');
|
1883
1948
|
var pastedMentions = event.clipboardData.getData('text/react-mentions');
|
1884
1949
|
var pastedData = event.clipboardData.getData('text/plain');
|
1885
|
-
var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData);
|
1950
|
+
var newValue = spliceString(value, markupStartIndex, markupEndIndex, pastedMentions || pastedData).replace(/\r/g, '');
|
1886
1951
|
var newPlainTextValue = getPlainText(newValue, config);
|
1887
1952
|
var eventMock = {
|
1888
|
-
target: _objectSpread
|
1953
|
+
target: _objectSpread({}, event.target, {
|
1889
1954
|
value: newValue
|
1890
1955
|
})
|
1891
1956
|
};
|
@@ -1914,7 +1979,7 @@ function (_React$Component) {
|
|
1914
1979
|
}, {
|
1915
1980
|
key: "handleCopy",
|
1916
1981
|
value: function handleCopy(event) {
|
1917
|
-
if (event.target !== this.
|
1982
|
+
if (event.target !== this.inputElement) {
|
1918
1983
|
return;
|
1919
1984
|
}
|
1920
1985
|
|
@@ -1928,7 +1993,7 @@ function (_React$Component) {
|
|
1928
1993
|
}, {
|
1929
1994
|
key: "handleCut",
|
1930
1995
|
value: function handleCut(event) {
|
1931
|
-
if (event.target !== this.
|
1996
|
+
if (event.target !== this.inputElement) {
|
1932
1997
|
return;
|
1933
1998
|
}
|
1934
1999
|
|
@@ -1950,7 +2015,7 @@ function (_React$Component) {
|
|
1950
2015
|
var newValue = [value.slice(0, markupStartIndex), value.slice(markupEndIndex)].join('');
|
1951
2016
|
var newPlainTextValue = getPlainText(newValue, config);
|
1952
2017
|
var eventMock = {
|
1953
|
-
target: _objectSpread
|
2018
|
+
target: _objectSpread({}, event.target, {
|
1954
2019
|
value: newPlainTextValue
|
1955
2020
|
})
|
1956
2021
|
};
|
@@ -1990,24 +2055,24 @@ var getComputedStyleLengthProp = function getComputedStyleLengthProp(forElement,
|
|
1990
2055
|
};
|
1991
2056
|
|
1992
2057
|
var isMobileSafari = typeof navigator !== 'undefined' && /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
1993
|
-
var styled$3 =
|
2058
|
+
var styled$3 = createDefaultStyle({
|
1994
2059
|
position: 'relative',
|
1995
2060
|
overflowY: 'visible',
|
1996
2061
|
input: {
|
1997
2062
|
display: 'block',
|
2063
|
+
width: '100%',
|
1998
2064
|
position: 'absolute',
|
2065
|
+
margin: 0,
|
1999
2066
|
top: 0,
|
2000
2067
|
left: 0,
|
2001
2068
|
boxSizing: 'border-box',
|
2002
2069
|
backgroundColor: 'transparent',
|
2003
|
-
width: 'inherit',
|
2004
2070
|
fontFamily: 'inherit',
|
2005
2071
|
fontSize: 'inherit',
|
2006
2072
|
letterSpacing: 'inherit'
|
2007
2073
|
},
|
2008
2074
|
'&multiLine': {
|
2009
|
-
input: _objectSpread
|
2010
|
-
width: '100%',
|
2075
|
+
input: _objectSpread({
|
2011
2076
|
height: '100%',
|
2012
2077
|
bottom: 0,
|
2013
2078
|
overflow: 'hidden',
|
@@ -2026,14 +2091,23 @@ var styled$3 = defaultStyle({
|
|
2026
2091
|
});
|
2027
2092
|
var MentionsInput$1 = styled$3(MentionsInput);
|
2028
2093
|
|
2029
|
-
var
|
2094
|
+
var defaultStyle = {
|
2030
2095
|
fontWeight: 'inherit'
|
2031
|
-
}
|
2032
|
-
|
2096
|
+
};
|
2097
|
+
|
2098
|
+
var Mention = function Mention(_ref) {
|
2033
2099
|
var display = _ref.display,
|
2034
|
-
style = _ref.style
|
2035
|
-
|
2036
|
-
|
2100
|
+
style = _ref.style,
|
2101
|
+
className = _ref.className,
|
2102
|
+
classNames = _ref.classNames;
|
2103
|
+
var styles = useStyles(defaultStyle, {
|
2104
|
+
style: style,
|
2105
|
+
className: className,
|
2106
|
+
classNames: classNames
|
2107
|
+
});
|
2108
|
+
return React.createElement("strong", styles, display);
|
2109
|
+
};
|
2110
|
+
|
2037
2111
|
Mention.propTypes = {
|
2038
2112
|
/**
|
2039
2113
|
* Called when a new mention is added in the input
|