summernote format user selection with a heading

Question

So far i was easily able to format a paragraph as H4 using:

$('#summernote').summernote('formatH4');

but what if i want to format just a selection or a range?

i have right now inside a custom heading button:

function heading(context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-header"/>',
    click: function () {
      var range = $('#summernote').summernote('createRange');
    }
  });
  return button.render();
}

what i want to do is format that range but i cant find a way to format a selection of letters/words

thanks!

Answer 1

I found a solution myself, here is it:

var range = sSCaption.wysiwygWrapper.summernote('createRange');
var heading = document.createElement('h4');
$(heading).text(range.toString());
$('#summernote').summernote('insertNode', heading);

i hope someone finds it useful, what i do is i use the created range, create a node with the tag i want and add the text of that range into the node and insert the node with summernote API