Rangy.js - Saving a comment to highlighted text

Question

I'm currently implementing the very cool range and selection library Rangy.js. I want to implement a function that can highlight some text and then add and save a comment to the highlight. In the demos it is shown how to add a note to the selection - but only an ID is attached to the selection.

I'm trying something like this, where I create a comment property on the element:

highlighter.addClassApplier(rangy.createCssClassApplier("highlight", {
    ignoreWhiteSpace: true,
    elementTagName: "span",
    elementProperties: {
        comment: "",
        onclick: function() {             
            var highlight = highlighter.getHighlightForElement(this);
            $('#myModal p').text( highlight.classApplier.elementProperties.comment );
            $('#myModal').modal('show');
        }
    }
}));

And then when highlighting the text, the comment is stored in the "comment" property:

function highlightSelectedText( event ) {
    event.preventDefault();

    var highlight = highlighter.highlightSelection("highlight");

    $('#myModal').modal('show');

    $('#save-comment').on('click', function () {
        var comment = $('#comment-text');
        highlight[0].classApplier.elementProperties.comment = comment.val();
    });
  }

When I serialize my highlights, the comments are not included.

Has anyone tried this or something similar with Rangy.js?

Any help appreciated, thanks in advance!