CODEWITHSUNDEEP
rangy
Amir A.Eitan
Amir A.Eitan

Reputation: 193

highlightselection function in rangy overrides previous getselection

I'm using Rangy for highlighting text and stumbled upon a problem when calling the highlightSelection function. 

highlightSelection: function(className, options) {
    var converter = this.converter;
    var classApplier = className ?      this.classAppliers[className] : false;

    options = createOptions(options, {
        containerElementId: null,
        selection:  api.getSelection(this.doc),
        exclusive: true
    });

    var containerElementId = options.containerElementId;
    var exclusive = options.exclusive;
    var selection = selection || options.selection;
    var doc = selection.win.document;
    var containerElement = getContainerElement(doc, containerElementId);

    if (!classApplier && className !== false) {
        throw new Error("No class applier found for class '" + className + "'");
        }

    // Store the existing selection as character ranges
    var serializedSelection = converter.serializeSelection(selection, containerElement);

    // Create an array of selected character ranges
    var selCharRanges = [];
    forEach(serializedSelection, function(rangeInfo) {
        selCharRanges.push( CharacterRange.fromCharacterRange(rangeInfo.characterRange) );
    });

    var newHighlights = this.highlightCharacterRanges(className, selCharRanges, {
        containerElementId: containerElementId,
        exclusive: exclusive
    });

    // Restore selection
    converter.restoreSelection(selection, serializedSelection, containerElement);

    return newHighlights;
},

It looks like the selection object is being overridden with another call to getSelection().

What's the best way to stop it from doing that?

Upvotes: 0

Views: 401

Answers (2)

Ricardo Serrano
Ricardo Serrano

Reputation: 1

I am building a custom tool tip when someone highlights text, and I came across this issue. The way I solved it, was by creating a global variable range, and setting it to rangy.getSelection().getRangeAt(0). This will get you the range object for the selection, afterwards you can set the selection back to your saved value like this: rangy.getSelection().addRange(this.range)

Upvotes: 0

Amir A.Eitan
Amir A.Eitan

Reputation: 193

After doing further research, I came a cross an update by the creator of Rangy, to specifically address this issue. So,

  1. Download the latest version of the files and make sure this is what you have in rangy-highlighter.js file under highlightSelection: function:

options = createOptions(options, { containerElementId: null, exclusive: true });

            var containerElementId = options.containerElementId;
            var exclusive = options.exclusive;
            var selection = options.selection || api.getSelection(this.doc);
            var doc = selection.win.document;
            var containerElement = getContainerElement(doc, containerElementId);
  1. call the highlightSelection function like:

'highlighter.highlightSelection("highlight", {selection: sel});'

So you're setting your selection key with the value sel. 'selection' is just the name of the key expected by this function (read the github docs for more options and information) and sel should be the object your are trying to highlight and be called prior like:

'sel = rangy.getSelection();'

Upvotes: 0

Related Questions