React Markdown Previewer Problem

Hi folks,

I’ve been working on extending my FCC Markdown Previewer project to include a functioning toolbar and I appear to have broken something that was working!

I have two methods defined:

handleSelect (which saves selectionStart and selectionEnd to state)

and buttonClick (which handles toolbar button clicks)

Both of the methods are set to ‘do stuff’ as long as the selection is not an empty string. This was working as expected, however, if the string is empty, it is now inserting stuff at the cursor postion and not doing what should be done if the selection string empty.

I can not for the life of me see what I have done to cause this and really need and would very much appreciate some help.

My code is this:

handleSelect(event){
    let target = event.target;
    let startPos = target.selectionStart;
    let endPos = target.selectionEnd;
    
    if(startPos !== '' && endPos !== '') {
      this.setState({
        startPos: startPos,
        endPos: endPos
      })
    } 
  } 

and

buttonClick(event){
    {/* var to hold 'which button clicked?' */}
    let buttonTitle = event.target.title;
    {console.log("button clicked was", event.target.title)}

    {/* text selection store */}
    let textValue = this.state.input;
    let startPos = this.state.startPos;
    let endPos = this.state.endPos;
    let editedText = this.state.editedText;
    
    if(startPos !== '' && endPos !== '') {
      let selectedText = textValue.substring(startPos, endPos);
      {console.log("selected text is:", selectedText)};
      
      if(buttonTitle == 'bold') {
        {console.log("make it bold!")}
        editedText = textValue.slice(0, startPos) + "**" + selectedText + "**" + textValue.slice(endPos, textValue.length)
        {console.log("edited text is:", editedText )}
        /* save 'editedtext' to this.state.input and clear startPos / endPos */
        this.setState({
        input: editedText,
        startPos: '',
        endPos: ''
      });
      }
      if(buttonTitle == 'italic') {
        {console.log("make it italic!")}
        editedText = textValue.slice(0, startPos) + "_" + selectedText + "_" + textValue.slice(endPos, textValue.length)
        {console.log("edited text is:", editedText )}
        this.setState({
        input: editedText,
        startPos: '',
        endPos: ''
      });
      }
    } else if(startPos == '' && endPos == '') {
      {console.log("Nothing Selected")}
    }
  }

and the link to the pen is here: MD Previewer

If you click at some place in the editor, then click the Bold or Italic button you can see it is inserting **** or __ rather than skipping on to console.log that should happen if the selection string is empty.

I’m baffled because I was actually working on inserting stuff at the cursor position if the selection string was empty. Totally bizarre.

Thanks in advance and appologies for asking this.

There are console logs so that you can see which bits of code are running, but they’re not helping me solve this :confounded:
LT

OK! I fixed the problem which was in this line in the handleSelect method

It should be this:

if(startPos !== endPos)

Now the toolbar functions as it should!