react-mentions 4.4.4 → 4.4.5
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +6 -0
- package/README.md +7 -19
- package/dist/react-mentions.cjs.dev.js +1 -1
- package/dist/react-mentions.cjs.prod.js +1 -1
- package/dist/react-mentions.esm.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
# [React Mentions](https://react-mentions.now.sh)
|
|
2
2
|
|
|
3
|
-
[![CircleCI][build-badge]][build]
|
|
4
|
-
[![codecov][codecov-badge]][codecov]
|
|
5
3
|
[![npm package][npm-badge]][npm]
|
|
6
|
-
[](https://github.com/semantic-release/semantic-release)
|
|
7
4
|
|
|
8
5
|
A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter.
|
|
9
6
|
|
|
@@ -58,14 +55,16 @@ The `MentionsInput` supports the following props for configuring the widget:
|
|
|
58
55
|
| --------------------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
|
|
59
56
|
| value | string | `''` | The value containing markup for mentions |
|
|
60
57
|
| onChange | function (event, newValue, newPlainTextValue, mentions) | empty function | A callback that is invoked when the user changes the value in the mentions input |
|
|
58
|
+
| onKeyDown | function (event) | empty function | A callback that is invoked when the user presses a key in the mentions input |
|
|
61
59
|
| singleLine | boolean | `false` | Renders a single line text input instead of a textarea, if set to `true` |
|
|
62
60
|
| onBlur | function (event, clickedSuggestion) | empty function | Passes `true` as second argument if the blur was caused by a mousedown on a suggestion |
|
|
63
61
|
| allowSpaceInQuery | boolean | false | Keep suggestions open even if the user separates keywords with spaces. |
|
|
64
62
|
| suggestionsPortalHost | DOM Element | undefined | Render suggestions into the DOM in the supplied host element. |
|
|
65
63
|
| inputRef | React ref | undefined | Accepts a React ref to forward to the underlying input element |
|
|
66
64
|
| allowSuggestionsAboveCursor | boolean | false | Renders the SuggestionList above the cursor if there is not enough space below |
|
|
65
|
+
| forceSuggestionsAboveCursor | boolean | false | Forces the SuggestionList to be rendered above the cursor |
|
|
67
66
|
| a11ySuggestionsListLabel | string | `''` | This label would be exposed to screen readers when suggestion popup appears |
|
|
68
|
-
| customSuggestionsContainer
|
|
67
|
+
| customSuggestionsContainer | function(children) | empty function | Allows customizing the container of the suggestions |
|
|
69
68
|
|
|
70
69
|
Each data source is configured using a `Mention` component, which has the following props:
|
|
71
70
|
|
|
@@ -77,7 +76,7 @@ Each data source is configured using a `Mention` component, which has the follow
|
|
|
77
76
|
| markup | string | `'@[__display__](__id__)'` | A template string for the markup to use for mentions |
|
|
78
77
|
| displayTransform | function (id, display) | returns `display` | Accepts a function for customizing the string that is displayed for a mention |
|
|
79
78
|
| regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | |
|
|
80
|
-
| onAdd | function (id, display, startPos, endPos)
|
|
79
|
+
| onAdd | function (id, display, startPos, endPos) | empty function | Callback invoked when a suggestion has been added (optional) |
|
|
81
80
|
| appendSpaceOnAdd | boolean | `false` | Append a space when a suggestion has been added (optional) |
|
|
82
81
|
|
|
83
82
|
If a function is passed as the `data` prop, that function will be called with the current search query as first, and a callback function as second argument. The callback can be used to provide results asynchronously, e.g., after fetch requests. (It can even be called multiple times to update the list of suggestions.)
|
|
@@ -97,18 +96,7 @@ You can also assign `className` and `style` props to the `Mention` elements to d
|
|
|
97
96
|
Due to react-mentions' internal cursor tracking it is not good enough to simulate the editing of the textarea value using `ReactTestUtils.Simulate.change`.
|
|
98
97
|
We recommend using [@testing-library/user-event](https://github.com/testing-library/user-event) for a realistic simulation of events as they would happen in the browser as the user interacts the textarea.
|
|
99
98
|
|
|
100
|
-
|
|
99
|
+
---
|
|
101
100
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
```
|
|
105
|
-
yarn start
|
|
106
|
-
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
[build-badge]: https://circleci.com/gh/signavio/react-mentions/tree/master.svg?style=shield&circle-token=:circle-token
|
|
110
|
-
[build]: https://circleci.com/gh/signavio/react-mentions/tree/master
|
|
111
|
-
[npm-badge]: https://img.shields.io/npm/v/react-mentions.png?style=flat-square
|
|
112
|
-
[npm]: https://www.npmjs.org/package/react-mentions
|
|
113
|
-
[codecov-badge]: https://img.shields.io/codecov/c/github/signavio/react-mentions.svg
|
|
114
|
-
[codecov]: https://codecov.io/gh/signavio/react-mentions
|
|
101
|
+
If you want to contribute, first of all: thank you ❤️.
|
|
102
|
+
Please check [CONTRIBUTING.md](/CONTRIBUTING.md) and/or create an issue.
|
|
@@ -1734,7 +1734,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
|
1734
1734
|
// is small enough to NOT cover up the caret
|
|
1735
1735
|
|
|
1736
1736
|
|
|
1737
|
-
if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop) {
|
|
1737
|
+
if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop || forceSuggestionsAboveCursor) {
|
|
1738
1738
|
position.top = _top - suggestions.offsetHeight - caretHeight;
|
|
1739
1739
|
} else {
|
|
1740
1740
|
position.top = _top;
|
|
@@ -1107,7 +1107,7 @@ var makeTriggerRegex = function(trigger) {
|
|
|
1107
1107
|
} else {
|
|
1108
1108
|
var _left = caretPosition.left - highlighter.scrollLeft, _top = caretPosition.top - highlighter.scrollTop;
|
|
1109
1109
|
_left + suggestions.offsetWidth > _this.containerElement.offsetWidth ? position.right = 0 : position.left = _left,
|
|
1110
|
-
allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop ? position.top = _top - suggestions.offsetHeight - caretHeight : position.top = _top;
|
|
1110
|
+
allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop || forceSuggestionsAboveCursor ? position.top = _top - suggestions.offsetHeight - caretHeight : position.top = _top;
|
|
1111
1111
|
}
|
|
1112
1112
|
position.left === _this.state.suggestionsPosition.left && position.top === _this.state.suggestionsPosition.top && position.position === _this.state.suggestionsPosition.position || _this.setState({
|
|
1113
1113
|
suggestionsPosition: position
|
|
@@ -1726,7 +1726,7 @@ var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
|
|
1726
1726
|
// is small enough to NOT cover up the caret
|
|
1727
1727
|
|
|
1728
1728
|
|
|
1729
|
-
if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop) {
|
|
1729
|
+
if (allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop || forceSuggestionsAboveCursor) {
|
|
1730
1730
|
position.top = _top - suggestions.offsetHeight - caretHeight;
|
|
1731
1731
|
} else {
|
|
1732
1732
|
position.top = _top;
|