react-mentions | @ mention people in a textarea | Frontend Framework library

I am on a problem. I have a string that look like this @[name1](2) some Text... @[name2](3) some Text.... I want to rearrange this string like this name1 some Text... name2 some Text.... How can I do this. The above pattern is from react-mentions output. Basically, the names and the numbers next to them inside the parenthesis () can be changed but the pattern will be the same.. How can I remove that special characters and display the names and text correctly.. Please help.

I am using 'react-mentions' library for mentioning name from database. but the data format comes in a weird format. Now i want to make this in a json format.This is my code:

I'm currently trying to track the event.target.selectionStart and event.target.selectionEnd for a react-mentions component using an onchange handler. How can I get access to selectionStart and selectionEnd of this input?

I am using react mentions in my application. I am having more items in suggesstions list. Is it possible to fix a height and add scrollbar to it?

https://github.com/signavio/react-mentions

Question: Is it possible for us to check for the new build deployed on firebase hosting on changing route(or on focusing the tab) and reloading the page so user can view new features?

Currently user have to refresh the site to see new feature deployed in the build.

The following are the dependencies installed currently in my project:

It's now clear to me that mixins and inheritance are generally considered bad and composition is the way to go, this from:

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html

Now, what to do when you find two components that specialize in different things and you want a component that is the result of both behaviors mixed? For instance, I want a textarea that both grows automatically when text goes beyond initial rows, and allow mentions inside (aka. mix react-mentions with react-textarea-autosize)

• How am I supposed to compose both in a way that works?
• Am I supposed to code a brand new component copying/merging the inner code from both components?
• What's the ReactJs way to compose in such scenarios?

I'm trying to implement react mentions text area that starts with one row and if the user types enough text the text area height will grow with the text size, but when I'm using MultipleTrigger example and adding to default styles height: "20px" (to start with one line) the text area doesn't grow with the text... here is an example: https://codesandbox.io/s/2300p17zvn

when I'm trying to fix this with some javascript and adding height by myself you can see the that the text area is not acting as usual and when a line is added all the text goes up and then down here is an example: https://codesandbox.io/s/7mrvon4vpj

I am using redux-form But When I am start typing focus goes out first time in react.

In my component below, the input field loses focus after typing a character. While using Chrome's Inspector, it looks like the whole form is being re-rendered instead of just the value attribute of the input field when typing.

Please see below code: