React MarkDown Previewer Toolbar Problems

Hi there folks,

I’m reaching out to anyone who wants pair up on the development of a toolbar for my React Markdown Previewer. Or, someone who would like to guide / mentor me somewhat in it’s development. Please reply or indeed PM me if you are interested in assisting this old fool!

I have the first two buttons of my previewer (bold & italic) working when the user has selected some text in the editor.

MD Previewer with toolbar

Method handling cursor postition is:
handleSelect(event)
and the one handling toolbar clicks is:
buttonClick(event)

I’m now trying to handle the case where the user has NOT selected any text but just placed the cursor postion within the editor.

I have that working in a fashion for the ‘bold button’ but am experiencing some very wierd behaviour. For instance, if I click on the italic toolbar button I get this console log:

"button clicked was" "italic"

"startPos with nothing selected:" 114

"Nothing Selected"

"startPos before insert bold:" 114

"startPos after bold insert:" 114

So this tells me that the correct button is registered, the start position is correct, but then it is running the code that should only happen when the ‘bold button’ is clicked and I am seeing this text inserted into the editor:

**BoldTextHere**

which is what does happen whenthe bold button iteself is clicked.

Now, when I program stuff to happen when the either the bold or italic button is clicked things get very strange. For instance, I get:
**BoldTextHere** when I should get "_ItalicTextHere_" when the two variables holding the strings are clearly defined and separate from each other:
let insertBold = "**BoldTextHere**";
let insertItalic = "_ItalicTextHere_";

The more I look into this the more I realise that achieving what I and is far less simple than I had first thought.

So please, if someone would like to help or join me in trying to develop this further I would be very thankful.

Thanks in advance.
LT

Hello,

Don’t know if this is helpful, but there’s an assignment in your condition;

...
 else if(startPos) {
      {alert("Please  select something to make bold or italic")}
      {console.log("startPos with nothing selected:", startPos)}
      {console.log("Nothing Selected")}
      if(buttonTitle = 'bold') {
        {console.log("startPos before insert bold:", startPos)}
        let insertBold = "**BoldTextHere**";
        }
       }
...
1 Like

Oh! Doh!

I should have spotted that!

Thank you for taking the time to look at my code, I’ll see if that fixes anything.

You want to see smth like _italic text_ when ‘I’ button is clicked with no selection? Heres a sloppy smth

if(!(startPos&&endPos)){
	selectedText=''; //if nothing  selected   selectedText is  an empty  string

	//think this can be a function like  function editString(type, selectedText){return editedString;}

	if(buttonTitle === 'bold'){//and  button bold is  clicked 	
		selectedText==='bold text'; 
		editedText = `**${selectedText}**`
	} else if (buttonTitle === 'italic'){//or  button bold is clicked 
		selectedText==='italic text';
		editedText = `_${selectedText}_`
	}
} else {
	//pretty much the same  but  with selected text, there'd  definitely   a  more DRY way 
}

It’s not a solution obviously, just couple of thoughts, and template literals would make your code more readable

1 Like

@Annestezia

This was very helpful! Thank you, as soon as I changed the conditional statement to:

if(buttonTitle == 'bold')

…the tool bar worked as I expected :smile:

Yup! This is what it does now I changed the assignment to a comparison, wow! I was so stuck on what was causing the problems.
I originally had a re-used variable textToInsert which was supposed to insert "**Bold Text**" or _Italic Text_ similar to your suggestion of:

but I changed the code so that each button had it’s own variable insertItalic & insertBold this was just for trouble shooting purposes. I can change that back now!

I really like your idea of using template literals (which I shall implement) it definately would make the code cleaner.

Just one question though, I have my function in the order of:

if text has been selected
........ Do some stuff
else if text is not selected
........ Do some thing else
and you have written it so that it is doing stuff if nothing is selected first:

There’s something nagging my brain that say’s the order you have it in is more correct, is that right?

Your input to my post has been most valuable and I greatly appreciate your time spent on this. I can now move on to the other buttons which seem slightly more challenging! I may have cause to call on your scrutinizing :eye: again if I may?

Thanks again.
Speak soon.
LT