Why does custom inline blot merge/combined with previous inserted blot

897 Views Asked by At

I created my own custom inline blot for Quilljs below:

import Quill from 'quill'
var Inline = Quill.import('blots/inline')
class EmojiBlot extends Inline {
static create(colons) {
    let node = super.create()
    node.dataset.emoji = colons
    node.setAttribute('contenteditable', false)
    return node
}

static formats(node) {
    return node.getAttribute('data-emoji')
}
}
EmojiBlot.blotName = 'emoji'
EmojiBlot.tagName = 'span'
Quill.register(EmojiBlot, true)

It works, but if I select the same one consecutively they merge into one inline span blot? I would like them to be separate.

Here is the output to quill editor:

<div>
<span data-emoji=":joy:" contenteditable="false"></span>
<span data-emoji=":heart_eyes:" contenteditable="false"></span>
<span data-emoji=":sunglasses:" contenteditable="false"></span>
</div>

I selected the sunglasses emoji 3 times in a row but its grouped into one span tag. If I selected different emojis between each sunglasses emoji, they won't be grouped.

Is there a setting for the create method of the Inline class to prevent this?

0

There are 0 best solutions below