window.getSelection“重新选择” /“刷新”

Question

I try build toolbar for editable html elements. I have toolbar with "bold","italic" and others.

When user was selected any text and clicked "bold" I check does exists span and insert if not.

let hasWrap = (selectionObject.node==='SPAN');

if(!isBold){

  this.addClassToSelection('bold', !hasWrap, selectionObject);

}

addClassToSelection(className, wrapSpan = false, selectionObject = {}){

if(wrapSpan){
  let wrapper = document.createElement('SPAN');
  wrapper.className = className;
  wrapper.textContent = selectionObject.text;

  selectionObject.range.deleteContents();
  selectionObject.range.insertNode(wrapper);
}else{
  let selection = window.getSelection();
  selection.anchorNode.parentNode.classList.add(className);
}

}

And it works. Also it works perfect if user will deselect text and select again.

But when user add bold (and js insert span element) and next click again "bold" to remove bold. System doesn't detect "span" element because still remember old window.getSelection() .

I've been tried use window.getSelection() directly without wrap in method but still I see "p" or "div" as parent node. "span" is after select this text again.

How can I "reselect" this text to detect span but without user action.

What I'd like

1. user is selecting text
2. User is clicking "bold" button
3. system wrap text in span with bold class
4. user click "bold" button again and window.getSelection detect this span inserted in point 3

I use React in ES6 and I'd like use plain js without jQuery (wrap,unwrap).

Answer 1

 <div contenteditable="true">Make bold with Ctrl+b</div> 

Would be much better to use document.execCommand - window.getSelection is much harder

HTML

<div contenteditable="true">Some Text</div>

JS - when custom event handling is required

document.execCommand('bold',false,true);

see the list of commands here : https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

and an "How To Use" here : http://codepen.io/netsi1964/full/QbLLGW/