Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle more than one class in ClassApplier::addClass Method #312

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

AdamMcCormick
Copy link

I'm attempting to use rangy to apply highlights and notes to a document reader application. While the library is really good at applying the highlights, I need to add several different classes to each highlight. I can't seem to find any means of doing that with the ClassApplier as-is. This change allows the caller to pass a space-separated list of classes to a ClassApplier and thereby add as many classes as needed.

My apologies if this isn't the right process to make such a suggestion.

@nicholascloud
Copy link

+1 for this feature request.

Rangy used to support this in 1.3alpha.722 because it appended to an element's className property, whereas now classList is used.

// old 1.3alpha.722 function
function addClass(el, cssClass) {
    if (el.className) {
        if (!hasClass(el, cssClass)) {
            el.className += " " + cssClass;
        }
    } else {
        el.className = cssClass;
    }
}

@geirsagberg
Copy link

I am also in need of this functionality, would be awesome is this is merged in.

@LeZuse
Copy link

LeZuse commented Dec 2, 2015

I am using this workaround:

    rangy.createClassApplier('snippet', {
      elementTagName: 'span',
      onElementCreate: el => {
        el.className = cx(el.className, 'another-class');
      },
    });

@MimmyJau
Copy link

MimmyJau commented Feb 21, 2023

A documented solution for adding an extra class is to use the className property in the elementAttributes object.

rangy.createClassApplier('firstClass', {
    elementAttributes: {
        className: 'secondClass'
    }
});

But I wasn't able to get this method to work for more than one extra class since the className property doesn't accept any tokens with whitespace. If anyone knows better let me know. For now, @LeZuse's solution still works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants