Подскажите, пожалуйста, у меня есть функция которая берет смайл и вставляет его в textarea в то место где был расположен курсор. Проблема заключается в том что после применения первый смайл вставляется туда куда нужно, но последующее становиться в конец текста. Как можно зафиксировать положение курсора. Думаю что его можно сохранить но как сфокусировать опять после вставки на этом textarea В примере хочу вернуться на 4 позицию.
const valueContent = textareaRef.current.value.split('');
if (textareaRef.current.selectionEnd !== textareaRef.current.selectionStart) {
valueContent.splice(textareaRef.current.selectionStart, textareaRef.current.selectionEnd, emojiObject.emoji);
saveName(valueContent.join(''));
setShowPicker(false);
textareaRef.current.focus();
return;
}
valueContent.splice(textareaRef.current.selectionStart, 0, emojiObject.emoji);
saveName(valueContent.join(''));
setShowPicker(false);
textareaRef.current.focus();
///textareaRef.current.selectionEnd = 4;
Рабочая функция с учетом ответа от @bitvalser Принимаем эмоцию:
- Так же работает выделение текста и замена его символом
const onEmojiClick = React.useCallback((emojiObject) => {
const valueContent = textareaRef.current.value.split('');
const number = textareaRef.current.selectionStart;
if (textareaRef.current.selectionEnd !== textareaRef.current.selectionStart) {
valueContent.splice(textareaRef.current.selectionStart, textareaRef.current.selectionEnd, emojiObject.emoji);
saveName(valueContent.join(''));
setShowPicker(false);
textareaRef.current.focus();
return;
}
valueContent.splice(textareaRef.current.selectionStart, 0, emojiObject.emoji);
saveName(valueContent.join(''));
setShowPicker(false);
textareaRef.current.focus();
textareaRef.current.setRangeText(emojiObject.emoji, number, number);
textareaRef.current.setSelectionRange(number + 2, number + 2);
}, [showPicker]);