Quill: How to know when an embed blot is deleted

[agustavo87]

Hi,
I'm developing an extension that allows to add references in text in the way.

A is found to be B [1]

And the "[1]" is the blot ("blot/embed") that is linked to information of the reference that is saved and displayed in other part in the way:

References:

1. Doe, J (2010). All about As.

I need to find a way to know when the user deletes the "[1]" reference in the text so i can delete the saved reference. There's any way to do this with the Quill framework? I

[KamilOcean]

Hi, @gustaveco. Your task is very interesting. To be honest I didn't solve something like this before, but I dare to guess that you can store link (reference) to other blot in your current blot dataset.

How I imagine it. Just examples:

<div class="blot-1" data-id="1" data-ref="5"></div>
<div class="blot-2" data-id="5"></div>

// in any place where you need to work with blots references
// for instance, in event handler after click on blot
node.addEventListener('click', e => {
  // ref id in blot which was clicked
  const ref = e.target.dataset.ref
  // do something with your ref
  // for example find it in DOM by data-id
  const refEl = document.querySelector(`.blot-2[data-id="${ref}"]`)
})

[agustavo87]

Thanks @KamilOcean , i used some of your suggestion. But, i didn't wanted to jump over the Quill layer, directly to manipulating/binding to the editor DOM because i was afraid that maybe some unpredictable issues or conflicts could emerge. And that was the case. When trying to listen for the removed Node, when i set a MutationObserver for de editors DOM, it notify that a Blot was removed, when in fact it was not (maybe Quill do something with it, i don't know), So i have to double check if it "really" was removed (find it in the editor). It seems to work:

https://codepen.io/gustaveco/pen/qBbvvaY

But, it seems would better if there was somewhere in Quill where i can hook for listen when the Blot was removed.

[Hideman85]

```js
const Embed = Quill.import('blots/embed')

class MyBlot extends Embed {
static blotName = 'my-blot'
static className = 'my-blot'
static tagName = 'span'

static create (key) {
const node = super.create(key)
node.setAttribute('data-key', key)
return node
}

static value (node) {
return node.dataset.key
}

remove () {
this.domNode.parentNode.dispatchEvent(new CustomEvent('blot-removed', {
bubbles: true,
detail: this
}))
super.remove()
}
}

[agustavo87]

Thx a lot @Hideman85 ! It took me a while to implement it. I had to make some adjustments. 1) The event had to be dispatched from de scroll node, because if the user select multiple lines and deleted them all at once the parent node is also removed and the event is never fired. 2) had to play with the blot's methods because Quill makes a lot of node manipulation/optimization and add/remove the blot's node without 'actually' add/removing them, so had to figure it out how to implement it. And the working code of the blot is the next:

class ReferenceBlot extends Embed {
  static create(ref) {
    let node = super.create();

    let refElement = document.createElement('SPAN');
    refElement.innerText = "[" + ref.number + "]";
    refElement.dataset['ref'] = ref.number;
    refElement.classList.add('reference');
    node.appendChild(refElement);

    return node;
  }

  static value(node) {
    return {
      number: node.querySelector('.reference').dataset.ref
    };
  }

  constructor(node) {
        super(node);
        this.mounted = false;
    }

  attach() {
    super.attach();
    if (!this.mounted) {
      this.mounted = true;
      this.scroll.domNode.dispatchEvent(new CustomEvent('blot-mounted', {
      bubbles: true,
      detail: this
    }))
    }
  }

  detach() {
    this.mounted = false;
    this.scroll.domNode.dispatchEvent(new CustomEvent('blot-unmounted', {
      bubbles: true,
      detail: this
    }))
    super.detach()
  }
}
ReferenceBlot.blotName = 'reference';
ReferenceBlot.tagName = 'span';
ReferenceBlot.className = 'reference-container';

An example implementation in CodePen.