From c860e7605ec6a240d68d5536c5426b4a7a472983 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Mon, 24 May 2021 13:09:45 +0530 Subject: [PATCH 1/4] Adding start and end position to onAdd method --- README.md | 2 +- src/MentionsInput.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a8165a21..1bfe227f 100755 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Each data source is configured using a `Mention` component, which has the follow | markup | string | `'@[__display__](__id__)'` | A template string for the markup to use for mentions | | displayTransform | function (id, display) | returns `display` | Accepts a function for customizing the string that is displayed for a mention | | regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | | -| onAdd | function (id, display) | empty function | Callback invoked when a suggestion has been added (optional) | +| onAdd | function (id, display, startPos, endPos) | empty function | Callback invoked when a suggestion has been added (optional) | | appendSpaceOnAdd | boolean | `false` | Append a space when a suggestion has been added (optional) | 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.) diff --git a/src/MentionsInput.js b/src/MentionsInput.js index 7d9883cc..e89b48b8 100755 --- a/src/MentionsInput.js +++ b/src/MentionsInput.js @@ -993,7 +993,7 @@ class MentionsInput extends React.Component { this.executeOnChange(eventMock, newValue, newPlainTextValue, mentions) if (onAdd) { - onAdd(id, display) + onAdd(id, display, start, end) } // Make sure the suggestions overlay is closed From ccacc1423321a7a8e7d97e77f565cd712e6349ca Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Sat, 29 May 2021 20:40:40 +0530 Subject: [PATCH 2/4] Adding render function to mention --- README.md | 1 + demo/src/examples/CustomMentionRenderer.js | 41 ++++++++++++++++++++++ demo/src/examples/Examples.js | 2 ++ src/Mention.js | 7 +++- 4 files changed, 50 insertions(+), 1 deletion(-) create mode 100644 demo/src/examples/CustomMentionRenderer.js diff --git a/README.md b/README.md index 1bfe227f..1dac0e8f 100755 --- a/README.md +++ b/README.md @@ -78,6 +78,7 @@ Each data source is configured using a `Mention` component, which has the follow | regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | | | onAdd | function (id, display, startPos, endPos) | empty function | Callback invoked when a suggestion has been added (optional) | | appendSpaceOnAdd | boolean | `false` | Append a space when a suggestion has been added (optional) | +| render | function (display) | `null` | Accepts a function for customizing the mention rendering (optional) | 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.) diff --git a/demo/src/examples/CustomMentionRenderer.js b/demo/src/examples/CustomMentionRenderer.js new file mode 100644 index 00000000..34bf3724 --- /dev/null +++ b/demo/src/examples/CustomMentionRenderer.js @@ -0,0 +1,41 @@ +import React from 'react' + +import { Mention, MentionsInput } from '../../../src' + +import { provideExampleValue } from './higher-order' +import defaultStyle from './defaultStyle' +import defaultMentionStyle from './defaultMentionStyle' + +const style = { + fontWeight: 'bold', + backgroundColor: '#cee4e5', +} + +function CustomMentionRenderer({ value, data, onChange, onAdd }) { + return ( +
+

Custom mention renderer

+ + + ( + {display} + )} /> + +
+ ) +} + +const asExample = provideExampleValue('') + +export default asExample(CustomMentionRenderer) diff --git a/demo/src/examples/Examples.js b/demo/src/examples/Examples.js index a9ee75d0..bf2b00e7 100644 --- a/demo/src/examples/Examples.js +++ b/demo/src/examples/Examples.js @@ -6,6 +6,7 @@ import AsyncGithubUserMentions from './AsyncGithubUserMentions' import CssModules from './CssModules' import Emojis from './Emojis' import CutCopyPaste from './CutCopyPaste' +import CustomMentionRenderer from './CustomMentionRenderer' import MultipleTrigger from './MultipleTrigger' import Scrollable from './Scrollable' import SingleLine from './SingleLine' @@ -63,6 +64,7 @@ export default function Examples() { + ) diff --git a/src/Mention.js b/src/Mention.js index 36bdc687..6f63758a 100644 --- a/src/Mention.js +++ b/src/Mention.js @@ -6,7 +6,10 @@ const defaultStyle = { fontWeight: 'inherit', } -const Mention = ({ display, style, className, classNames }) => { +const Mention = ({ display, style, className, classNames, render }) => { + if(render) { + return render(display); + } const styles = useStyles(defaultStyle, { style, className, classNames }) return {display} } @@ -40,6 +43,7 @@ Mention.propTypes = { allowSpaceInQuery: PropTypes.bool, isLoading: PropTypes.bool, + render: PropTypes.func } Mention.defaultProps = { @@ -53,6 +57,7 @@ Mention.defaultProps = { renderSuggestion: null, isLoading: false, appendSpaceOnAdd: false, + render: null } export default Mention From 4c941375537a844ff77506357560f548309c8250 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Sat, 29 May 2021 23:24:22 +0530 Subject: [PATCH 3/4] Updating readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1dac0e8f..d65f5792 100755 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ Each data source is configured using a `Mention` component, which has the follow | regex | RegExp | automatically derived from `markup` pattern | Allows providing a custom regular expression for parsing your markup and extracting the placeholder interpolations (optional) | | | onAdd | function (id, display, startPos, endPos) | empty function | Callback invoked when a suggestion has been added (optional) | | appendSpaceOnAdd | boolean | `false` | Append a space when a suggestion has been added (optional) | -| render | function (display) | `null` | Accepts a function for customizing the mention rendering (optional) | +| render | function (display) | `null` | Allows customizing how mention value is rendered (optional) | 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.) From df4385cc6ab2a982f0c7f75fdc8abe7294b612ee Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 15 Jun 2022 22:57:28 +0530 Subject: [PATCH 4/4] Removing unused import --- demo/src/examples/Examples.js | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/examples/Examples.js b/demo/src/examples/Examples.js index 89573c9c..1e1e7e82 100644 --- a/demo/src/examples/Examples.js +++ b/demo/src/examples/Examples.js @@ -6,7 +6,6 @@ import AsyncGithubUserMentions from './AsyncGithubUserMentions' import CssModules from './CssModules' import Emojis from './Emojis' import CutCopyPaste from './CutCopyPaste' -import CustomMentionRenderer from './CustomMentionRenderer' import MultipleTrigger from './MultipleTrigger' import Scrollable from './Scrollable' import SingleLine from './SingleLine'