I have been learning to make a custom markdown editor. However I just ran into the problem of getting the highlighted text before wrapping it with the markdowns. Here's my example

class TextArea extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        ment:'He oppose at thrown desire of no. Announcing impression unaffected day his are unreserved indulgence.She oppose at thrown desire of no..'
    };
    this.onClickMakeBold = this.onClickMakeBold.bind(this);
  }

  render(){
    return <div>
       <button onClick={this.onClickMakeBold}>Bold</button> 
         <div>
           <textarea ref="textarea">{this.statement}</textarea>
        </div>
    </div>
  }

  onClickMakeBold(){
    console.log(getSelectionText()) 
  }
}
function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control"){
        text = document.selection.createRange().text;
    }else{
            alert('no')
    }
    return text;
}

React.render(<TextArea />, document.getElementById('container'));

The result from getSelectionText() function doesn't return any text at all. How can I get the highlighted text in ReactJS?

I have been learning to make a custom markdown editor. However I just ran into the problem of getting the highlighted text before wrapping it with the markdowns. Here's my example

class TextArea extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        ment:'He oppose at thrown desire of no. Announcing impression unaffected day his are unreserved indulgence.She oppose at thrown desire of no..'
    };
    this.onClickMakeBold = this.onClickMakeBold.bind(this);
  }

  render(){
    return <div>
       <button onClick={this.onClickMakeBold}>Bold</button> 
         <div>
           <textarea ref="textarea">{this.state.ment}</textarea>
        </div>
    </div>
  }

  onClickMakeBold(){
    console.log(getSelectionText()) 
  }
}
function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control"){
        text = document.selection.createRange().text;
    }else{
            alert('no')
    }
    return text;
}

React.render(<TextArea />, document.getElementById('container'));

The result from getSelectionText() function doesn't return any text at all. How can I get the highlighted text in ReactJS?

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Aug 7, 2016 at 4:10 RedGiant asked Aug 7, 2016 at 4:03 RedGiantRedGiant 4,7491111 gold badges6363 silver badges151151 bronze badges 1

• You should try DraftJS, super cool editor from Facebook. – vijayst Commented Aug 7, 2016 at 5:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

By clicking on the button, you deselect the text before the event is triggered.

Pass the callback to your button as onMouseDown, as this event happens before the standard click side effects take place.

Also: if you want the text to remain selected after the event has been processed, use event.preventDefault() in your callback function.

here is solution with react hook pure without any library!

to clone and the small package or any question you can check: https://github./Farbod29/React-text-highlighter-with-hook-

import React, { useState, useEffect } from 'react';
import './highlight.css';

export default function Highlighter() {
  const [highlightedText, setHighlightedText] = useState(
    'highlighted text will be shown here!'
  );
  useEffect(() => {
    const saveSelection = () => {
      setHighlightedText(window.getSelection().toString());
    };
    document.addEventListener('mouseup', saveSelection);
    return () => document.removeEventListener('mouseup', saveSelection);
  }, []);
  return (
    <>
      <section className="card">
        <div>
          <div className="margin-top-zero txt">
            Here is react text highlighter with hook and use state/Effect, 
            understand if you have any question just email or add issue in above git ripo!
         
          </div>
          {/* {ghasem} */}
          <div className="txt">{highlightedText}</div>
          <div // parent of button
          >
            <button className="btn"> Add Highlighted text </button>
          </div>
        </div>
      </section>
    </>
  );
}