Custom inline blot with <span> and className not working.

I’m creating a custom inline blot. I want to use span and style it with css. I read in the: “Cloning Medium with Parchment” tutorial the following:

Note Inline blots use <span> and Block Blots use <p> by default, so if you would like to use these tags for your custom Blots, you will have to specify a className in addition to a tagName.

And I’m creating this:

class TestBlot extends Inline { }
TestBlot.blotName = 'thick';
TestBlot.tagName = 'span';
TestBlot.className = 'test-class';
Quill.register(TestBlot);

And it’s not working. But if I change the tagName to spann it does work! What am I missing here?! What’s the right way of doing this?

Thanks!

[benbro]

Duplicate: https://stackoverflow.com/questions/47811541/custom-inline-blot-with-span-and-classname-not-working/47820727#47820727

[scrimothy]

Adding to what @dkreft said (which completely fixed my same issue):

Looking at that codeblock (from https://github.com/quilljs/parchment/blob/master/src/blot/abstract/format.ts#L11-L18)

static formats(domNode: HTMLElement): any {
    if (typeof this.tagName === 'string') {
      return true;
    } else if (Array.isArray(this.tagName)) {
      return domNode.tagName.toLowerCase();
    }
    return undefined;
  }

Because the first check in formats is to determine if tagName is a string, and thus returns true, then since my tagName = 'span', then I just added my own formats function like this:

static formats(): boolean {
  return true;
}

Still seems silly for this to be required, but until there’s a legit fix internally, this seems to be working properly. I can’t think of any possible side effects this would have since in my case (with tagName = 'span') this function should’ve normally returned true. Only thing I don’t quite understand why the InlineBlot would first do this if (domNode.tagName === InlineBlot.tagName) return undefined; in its formats function.

So, my stripped down blot class looks like this:

export class TagBlot extends Inline {
  static blotName = 'tag';
  static className = 'aur-tag';
  static tagName = 'span';

  static formats(): boolean {
    return true;
  }
}

And it’s finally appending the span.aur-tag element to the selection in my editor