insert At Cursor

[AleDiias]

Currently the emoji is only inserted at the end of the text, would it be possible to adjust it so that the user can place it in any part of the text?

here is a solution with jquery that I found in another emoji component

util.insertAtCursor = function (text, el) { text = ' ' + text var val = el.value, endIndex, startIndex, range if (typeof el.selectionStart !== 'undefined' && typeof el.selectionEnd !== 'undefined') { startIndex = el.selectionStart endIndex = el.selectionEnd el.value = val.substring(0, startIndex) + text + val.substring(el.selectionEnd) el.selectionStart = el.selectionEnd = startIndex + text.length } else if (typeof document.selection !== 'undefined' && typeof document.selection.createRange !== 'undefined') { el.focus() range = document.selection.createRange() range.text = text range.select() } }

[serebrov]

Currently the emoji is only inserted at the end of the text

@AleDiias Actually, this library does not insert emojis, this happens in the external code. The picker responsibility ends when the user clicks the emoji and the picker emits the select event.

This is the part of the "not opinionated"" idea:

Emoji Mart doesn’t automatically insert anything into a text input, nor does it show or hide itself. It simply returns an emoji object. It’s up to the developer to mount/unmount (it’s fast!) and position the picker. You can use the returned object as props for the EmojiMart.Emoji component. You could also use emoji.colons to insert text into a textarea or emoji.native to use the emoji.

There is also related information in the Picker Usage And Native Emoji vs Images readme section.