title: Detect highlighted text in an html container
body: <p>How can I detect the text being highlighted by the user within a non input/textarea element? I am rendering an array of characters within a span, and would like to be able to detect which elements are being highlighted by the user. However, I cannot see any ref properties that would enable me to do this.</p>
  
  <p><a href="https://codesandbox.io/s/nervous-sound-rk3mf" rel="nofollow noreferrer">https://codesandbox.io/s/nervous-sound-rk3mf</a></p>
  
  <pre><code>import React from "react";
  
  const values = ["a", "b", "c", "d", "e"]
  
  const textRef = React.createRef();
  
  export default function App() {
    return (
      &lt;div ref = {textRef}&gt;
        {values.map(val =&gt; &lt;var&gt; {val} &lt;/var&gt;)}
      &lt;/div&gt;
    );
  }
  </code></pre>