2

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?

Brian Barton
  • 33
  • 1
  • 6
  • It seems using the Embed blot instead of Inline blot doesn't produce this result. It keeps them as individual tags and the backspace/delete button work better too. – Brian Barton Jan 17 '20 at 00:57
  • I agree with you. And I believe this may be the solution. I also suggest you to visit [this link](https://github.com/loagit/Quill-Examples-and-FAQ), it can be very helpful. – Loa Jan 17 '20 at 01:45

0 Answers0