Bold/unbold selected text using Window.getSelection()

Question

I'm trying to make a simple text editor so users can be able to bold/unbold selected text. I want to use Window.getSelection() not Document.execCommand(). It does exactly what I want but when you bold any text, you can't unbold it. I want it in a way that I can bold and unbold any selected text. I tried several things but no success.

function addBold(){
const selection = window.getSelection().getRangeAt(0);
const selectedText = selection.extractContents();
const span = document.createElement("span");
span.classList.toggle("bold-span");
span.appendChild(selectedText);
selection.insertNode(span);
};

.bold-span {font-weight: bold;}

<p contentEditable>Bold anything here and unbold it</p>
<button onclick="addBold()">Bold</button>

Does my answer work for you? – Unmitigated Aug 11 '20 at 22:39 — Unmitigated, Aug 11 '20 at 22:39

score 6 · Answer 1 · answered Aug 11 '20 at 20:21

This is close to what you want but groups words together so an unselect will remove from whole word. I have not been able to complete this as I have to go, but should be a good starting point.

function addBold(){
  const selection = window.getSelection().getRangeAt(0);
  
  let selectedParent = selection.commonAncestorContainer.parentElement;
  
  //console.log(parent.classList.contains("bold-span"))
  //console.log(parent)
  let mainParent = selectedParent;
  if(selectedParent.classList.contains("bold-span"))
  {
    var text = document.createTextNode(selectedParent.textContent);
    mainParent = selectedParent.parentElement;
    mainParent.insertBefore(text, selectedParent);
    mainParent.removeChild(selectedParent);
    mainParent.normalize();
  }
  else
  {
    const span = document.createElement("span");
    span.classList.toggle("bold-span");
    span.appendChild(selection.extractContents());
    //selection.surroundContents(span);
    selection.insertNode(span);
    mainParent.normalize();
  }
  
  //selection is set to body after clicking button for some reason
  //https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript
  if (window.getSelection) {
    if (window.getSelection().empty) {  // Chrome
      window.getSelection().empty();
    } else if (window.getSelection().removeAllRanges) {  // Firefox
      window.getSelection().removeAllRanges();
    }
  } else if (document.selection) {  // IE?
    document.selection.empty();
  }

};

.bold-span {font-weight: bold;}

<p contentEditable>Bold anything here and unbold it</p>
<button onclick="addBold()">Bold</button>

Yes this is close. Let me see if I can build on this. – BigBros Aug 12 '20 at 07:16 — BigBros, Aug 12 '20 at 07:16

score 0 · Answer 2 · answered Aug 11 '20 at 18:33

var span = '';

jQuery(function($) {
    $('.embolden').click(function(){
        var highlight = window.getSelection();
        if(highlight != ""){
            span = '<span class="bold">' + highlight + '</span>';
        }else{
            highlight = span;
            span = $('span.bold').html();
        }
        var text = $('.textEditor').html();
        $('.textEditor').html(text.replace(highlight, span));
    });
});

You could define a function like this where the name of your class is "embolden"

I will love to do it in only Vanilla Javascript. – BigBros Aug 11 '20 at 20:21 — BigBros, Aug 11 '20 at 20:21

Bold/unbold selected text using Window.getSelection()

2 Answers2

Linked