My goal is to create an input div that checks whether numeric values are provided a currency tag or not. The content-editable div should locate numeric values and preferably convert them to individual components which each can show an option tooltip for the user to assign a currency value to each value.
Here is what I am currently working on: https://codesandbox.io/s/keen-silence-4uizr
react-contenteditable component, prevents me from rendering anything but pure HTML, but if I use a normal div with attribute contenteditable, the caret f***s around, and overall the callbacks and UX is better using the react-contenteditable component.If you go to Facebook and start writing a new status update, and you start writing out the name of a friend, it will display a list of options and assign these to the element you are currently writing. Knowing how to do that, should make it easy to do the same for numeric values and currency values I believe.
Basically I am just afraid (well also hoping for...) that I am overcomplicating things here, and someone out there can tell me:
Dude! this is like the easiest thing ever! Just do like this!
You could use facebook's draftjs.org, where specifically this example seems very similar to what you are looking for: https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/tweet/tweet.html