reactjs环境下document.getSelection是如何工作的？

Question

I was working on a electron-react project for epub file. Right now, I am planning to make the app capable of selecting text field and highlight it.

To achieve it, I was trying to use web's Window.getSelection api . However, there are some really weird things come up like in this .

In short, I am unable to capture the Selection object. It seems like even if I log the Selection object, this object could somehow jump to something else. Also, I cannot even serialize the Selection object with JSON.stringfy . This is super surprising, and this is my first time seeing something like this (I will get empty object to stringfy the Selection object).

So how to use Window.getSelection properly under react-electron environment? Or this api will not work well for text content which is generated by react's dangerouslySetInnerHTML?

Answer 1

Looks like the window.getSelection api needs to toString the selected object.

const getSelectionHandler = () => {
  const selection = window.getSelection();
  console.log("Got selection", selection.toString());
};

Super simple textarea and button to get selection react demo

Answer 2

this solution might help someone, catch last selection

const selection = useRef('');
        
const handleSelection = () => {
  const text = document.getSelection().toString();
  if (text) {
    selection.current = text;
  }
 }
    
 useEffect(() => {
   document.addEventListener('selectionchange', handleSelection);
   return () => {
     document.removeEventListener('selectionchange', handleSelection);
   };
  });