I have created a plugin for Suneditor which integrates Emoji button. The Idea is to insert the emoji where the cursor is and then keep the cursor at the same position (following the newly inserted emoji). But I am getting the issue where the cursor gets reset to the beginning of the document, which is terrible UX, any ideas how to keep the cursor from jumping to the start? https://jsfiddle.net/na3yxb51/4/
I've looked over the docs but haven't been able to find much about the cursor placement.
action: function (core) {
const editor = this;
function handleEmoji(emoji) {
const tag = editor.util.createElement("span");
tag.textContent = emoji;
editor.insertNode(tag, null);
picker.off('emoji', handleEmoji);
};
picker.on('emoji', handleEmoji);
picker.togglePicker(document.querySelector('#emojianchor'));
}
Solution: https://jsfiddle.net/r7p92m8d/1/
function resetCursorPos() {
const core = editor.core;
const editorNode = core.context.element.wysiwyg;
const lastChild = editorNode.lastChild;
const range = document.createRange();
const selection = window.getSelection();
setTimeout(function() {
range.setStartAfter(lastChild);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
editor.core.focus();
}, 100);
}