How to make user only bolding/italicizing/underlining things that are highlighted?

Question

I was wondering how to bold specific things, as right now my code bolds everything. For example, if a user highlights a word and then selected bold, then the specific word would bold. Right now, it is bolding/italicizing/underlining everything. Thanks!

Jsfiddle

let cssProps = {
  'font-weight': '',
  'font-style': '',
  'text-decoration': ''
}

$('input[name="textStyle"]').change(function() {
  const val = $(this).val()
  if ($(this).is(':checked')) {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = 'bold';
        break;
      case 'italic':
        cssProps['font-style'] = 'italic';
        break;
      case 'underline':
        cssProps['text-decoration'] = 'underline';
        break;
    }
  } else {
    switch (val) {
      case 'bold':
        cssProps['font-weight'] = '';
        break;
      case 'italic':
        cssProps['font-style'] = '';
        break;
      case 'underline':
        cssProps['text-decoration'] = '';
        break;

    }
  }
  $('textarea[name="styledText"]').css(cssProps)
});
var loadFile = function(event) {
   var image = document.getElementById('output');
   image.src = URL.createObjectURL(event.target.files[0]);
};