Highlight selected text in code

code.jsx

function Code() {
  const ref = React.useRef()
  React.useEffect(() => {
    const handler = e => {
      const selected = document.getSelection().toString().trim()
      ref.current.querySelectorAll("span:not(:has(*))").forEach(element => {
        if (element.textContent === selected) {
          element.classList.add("selected")
        } else {
          element.classList.remove("selected")
        }
      })
    }
    document.addEventListener("selectionchange", handler)
    return () => {
      document.removeEventListener("selectionchange", handler)
    }
  }, [])
  
  return <pre ref={ref}>...</pre>
}

See https://twitter.com/pomber/status/1713872576286753123