React component which ensures a token is always present in content

I would like a React component which appears as a text input on the page but requires a token (or tokens) which are supplied as a property which are allowed to be present on each line of text input. The user will be able to edit the contents of the text input, but will not be able to edit the tokens without removing them as described below. The tokens will be highlighted in the display, and will not allow their internal HTML content to be modified. The display of the text input should likely use a HTML element which is editable, similar to how Facebook allows for names to be embedded within user posts, but obviously not as complex as that functionality. - The text input should appear analogous to a similarly-styled text input using Bootstrap v3. - I should be able to modify the display of the tokens within the component using standard CSS - Selecting a portion of the token and hitting the backspace or delete character will remove the token completely from the current line - Placing the cursor inside a token and hitting backspace or delete will remove the token completely - Allow for a shortcut keys to be used to insert the token into a line (e.g. the "." character) - Only allow a single token to be on each line of input. Inserting a duplicate token on the line will remove the previous token and insert it at the current cursor position. - Component should allow for single-line or multi-line input - Allow blank lines for multi-line inputs - The component should be independent of other components on the page, and there should be no issues embedding multiple components on the same page - The component should be free of any software which requires a license which is not open source or MIT-licensed. - The editing capabilities of the input area should not be adversely affected by the new functionality - selection of multiple lines and deleting, or copy/paste should all work correctly with the constraints described aboe. As an example, if I supplied token="phrase" as the prop, then the display would appear similar to the image shown below. Ideally, the component will be wired up via Redux, with the ability to extract raw text (not HTML) from the redux state which includes the token or an appropriate replacement (e.g. {token} or some other string is fine)