How to add custom inline blot (or any blot whatsoever)?

[falk-stefan]

I'm getting out of ideas. After trying for an eternity I'd like to ask directly how it's possible to add a blot in Angular.

I want the user to be able to annotate text. Ideally it would be possible to add overlapping annotation but I'd be happy if adding a simple blot would work for a start.

I'm essentially creating an Annotation:

import {InlineBlot} from "parchment";
import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;

class Annotation extends InlineBlot {
  blotName = "annotation";
  tagName = "SPAN";
  className = "annotation-class";
  static create(node: Node){
    console.log("CREATE");
    return node;
  }
  static formats() {
    return true as any;
  }
}

Quill.register(Annotation, true);

which I try to add like this:

this.quill.on('selection-change', function(range: RangeStatic) {
  if (range) {
    if (range.length > 0) {
      quill.formatText(range, Annotation.tagName, true);
    }
  }
});

However, nothing really happens. There's nothing crashing but there's nothing added as well.

What am I missing here?

[ramarivera]

Absolutely late to the party, but since your blot is using both a tag and class name, I believe you need to use both somehow.

I had some experience with embeds, and for those there is a special method.

Did you manage to solve this somehow? If not, I could try to take a look :)

[ramarivera]

https://quilljs.com/guides/cloning-medium-with-parchment/

I'm theory you should use blot name, not tag name I think?

[slaesh]

hey @falk-stefan.. had the same issue and after nearly a day fiddling around I found this issue here.. slab/quill#4224

we should not import from "parchment" for some reason, we should do:

import InlineBlot from 'quill/blots/inline';

instead.

[h10-mohit]

Does anyone tried with Nested tables

[kalluu-ck]

For the sample code of Angular 19 and ngx-quill, you can check this article
https://kalcancode.wordpress.com/2025/03/31/how-to-implement-custom-embed-blot-in-ngx-quill/