summernote: how to validate if the user current selection is inside a specific html tag?

Question

i want to add a behavior to a button i made in summernote to add a h4 tag to a selection:

heading: function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
              contents: 'H',
              click: function () {
                var range = context.invoke('editor.createRange');
                  if (range.toString()) {
                    var heading = document.createElement('h4');
                    $(heading).text(range.toString());
                    context.invoke('editor.insertNode', heading);
                  } else {
                    context.invoke('editor.formatH4');
                  }
              }
            });

using the current formatH4 wont work for my use case because i want to add this tag to a user range selection instead of just formating the entire line into h4

now i want to add behavior to my button so it gets selected when your cursor is inside a h4 tag

i tried creating a range with summernote api but i just cant figure out how to use this created range to see if i'm inside a h4 tag

Answer 1

i found a solution:

on click and key pressed i added this:

window.getSelection().anchorNode.parentNode.nodeName

and this gives me the nodeName which i can use to activate or deactivate a button

i found this solution looking here:

How can I get the element in which highlighted text is in?