CODEWITHSUNDEEP
quillparchment
Brian Barton
Brian Barton

Reputation: 33

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

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?

Upvotes: 2

Views: 1053

Answers (0)

Related Questions