I ran into lots of crossbrowser issues and actually don't think I found a consistent way to do highlighting across multiple browsers (doing single seems doable, though).
npm i sudodoki/react-textarea-highlight
See examples
- Controlled value
- Browser support list
- Describe API
- Add example umbrella page for direct link
- publish
-
Proxy dblclick and scroll from div to textareafixed via css thanks to @shvaikalesh - 🤔 less awkward styling and description of how to do it
- 🤔 Consider not wrapping everything, but only highlighted things
- 🤔 Consider passing position if it's necessary using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter
-
.split(/\b/)and unicode
- TBA
Initially it was something on its own. But now it's actually fork of keustma/react-highlighted-textarea
Some other interesting places to look at this problems solution:
- keustma/react-highlighted-textarea
- lonekorean/highlight-within-textarea
- phil3903/react-textarea-highlighter
- Contenteditable presentation by @kigorw
This repo is based on react-component-boilerplate.