Add contenteditable property for Emoji component

[kafeltz]

This works as expected:

<span dangerouslySetInnerHTML={{
  __html: Emoji({
    html: true
    set: 'apple'
    emoji: '+1'
    size: 24
  })
}}></span>

But I'm using the generated code inside a <div contenteditable="true"> and the caret enters inside de <span ... > instead jumping the emote icon.

What happens is this:
<span style="..." class="emoji-mart-emoji">CARRET ENTERS HERE AND ADD TYPED TEXT</span>

The solution to fix this is simple. The <span> generated with the attribute html: true needs to output <span style="..." class="emoji-mart-emoji" CONTENTEDITABLE="FALSE">. Maybe this should be optional.

[kafeltz]

I forgot to mention that my workaround at the moment to inject this property was this:

const emojiCreator = tag => {
    return Emoji({ emoji: tag, html: true, size: 16, fallback: emoji => `:${emoji.short_names[0]}:` }).replace(/>/, ' contenteditable="false">')
}

[EtienneLem]

👋

I was actually implementing that as you suggested, but I realized that it could leave an empty <span> (the one that has dangerouslySetInnerHTML in your example) and it could be bugish when typing in that span or trying to remove it. Not that I mind adding contenteditable=false, but the bulletproof way to fix your issue would be to add contentEditable={false} to your span with dangerouslySetInnerHTML

<span contentEditable={false} dangerouslySetInnerHTML={{
  __html: Emoji({
    html: true
    set: 'apple'
    emoji: '+1'
    size: 24
  })
}}></span>

Then the <span class="emoji-mart-emoji"> inside won’t be editable. I added a section in the README, thanks for pointing that out! 🤘