Support for multiple class names on InlineBlot

[chrisronline]

Hi!

My use case calls to add multiple classes to a custom inline blot:

class Note extends Inline {};
Note.blotName = 'note';
Note.tagName = 'spann';
Note.className = `selection ${styles.selection} ${styles[`selection--note`]}`;
Quill.register(Note);

With the current code, I get an error when trying to use this:

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('selection selection--1LM1N selection--note--2E3D2') contains HTML space characters, which are not valid in tokens.

It seems this line does not support multiple classes. It seems trivial to split the string by spaces then potentially add multiple. I'd be happy to contribute a PR but I wanted to make sure there wasn't a reason why this support does not already exist.

Thanks

[chrisronline]

On a separate note, the reason I'm using spann is because of this issue in quill and I don't know a better way around it. Feedback/thoughts are more than welcome!

[jhchen]

Why do you need multiple classes as opposed to one unique one?

[chrisronline]

It’s just how our CSS heirarchy is setup - we could possibly change that but I don’t see why multiple class names isn’t a valid use case and something that is seemingly easy to support

[jhchen]

It's not easy to support. All features require ongoing maintenance and tests and all future features would have to consider interaction with this feature. Second it is not correct that just turning that line into a loop is all it would take.

[chrisronline]

Thanks for clarifying! I’m sorry if I assumed it was a simple request but I appreciate your time and patience. I’ve been using Quill/Parchment for just a short time and it’s been great so far!

[marclave]

hey @chrisronline I did this to register multiple class names to a blot

class HeaderBlot extends Block {
  static create() {
    const node = super.create();
    node.classList.add('subheading');
    node.classList.add('secondary-color');
    return node;
  }
}

Hope this helps!