I am trying to develop a simple WYSIWYG editor.
document.querySelector('button').addEventListener('click', () => {
const range_of_selected_text = document.getSelection().getRangeAt(0).cloneRange();
const TAG = document.createElement('strong');
range_of_selected_text.surroundContents(TAG);
});
<button>B</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius recusandae vero quasi laborum tempore quis cum eum! Quo temporibus deserunt consequatur laborum magnam, quidem magni, quia id, nisi consequuntur dolorem.</p>
In this case, surroundContents() allows displaying a selected text as bold. But how am I able to remove the <strong> tag if the text is already bold?