$editor.insertText doesn't work without focus

[tre-dev]

I'm trying to add emojis via emoji-picker programmatically via this.$editor.insertText(emoji).

But it only works once or twice after I add the focus manually, afterwards the focus is gone and emojis can't be added unless I add focus manually again. Adding focus programmatically doesn't work as it resets the cursor position.

[marsprince]

@tre-dev
Any simple example that I can reproduce it ?
I guess that when you use emoji-picker, you lose selection in slate.So slate doesn't know where to insert.

[tre-dev]

Hm, that could be. Here is a rough example.

<template>
  <div>
    <Slate ref="slate" :value="value">
      <Editable ref="editor"" />
    </Slate>
    <Button @click="addEmoji">
      Add Emoji
    </Button>
  </div>
</template>

// script

value = JSON.stringify({children: [{text: ''}]})

addEmoji() {
    this.$editor.insertText('😊')
  }

[tre-dev]

Maybe it's possible to get the current/last cursor position and then insert the Text at that position?

Code below is adding an emoji like this but at an incorrect position

text1

!<EMOJI_WAS_ADDED_HERE> text 2

addEmoji(emoji) {
    const slateChildren = document.querySelector('[data-slate-editor]').children
    const range = new Range()
    range.setStartAfter(slateChildren[slateChildren.length - 1])
    Transforms.insertText(this.$editor, emoji, {
      at: VueEditor.toSlateRange(this.$editor, range),
    })
  }

[marsprince]

@tre-dev
I wrote a rough example with library vue-emoji-picker in emoji-picker branch
f241ef2

If it's not what's you want, look at this issue ianstormtaylor/slate#3412. I use the final solution and you can try others.

[tre-dev]

The example you wrote worked! Thanks!

Magic code was this:

 Transforms.insertNodes(
      this.$editor,
      {
        text: emoji,
        emoji: true,
      },
      {
        at: this.$editor.savedSelection,
      },
    )

PS: FYI, I actually prefer this emoji-picker https://github.com/serebrov/emoji-mart-vue