How to insert new text to last caret position?

[kunimasu]

Hi,

Is there any way to insert text such as emoji or something with click other component?
In my case, when I click emoji on emoji UI component, I would like to insert caret position on MDEditor which is before clicking emoji.

Thanks.

[kunimasu]

  const editorRef = React.useRef(null);
  const editorCaretPositionRef = React.useRef(0);

  const updateEditorCaretPositionRef = React.useCallback(() => {

    const el = editorRef.current.textarea;
    let pos = 0;
    if ('selectionStart' in el) {
      pos = el.selectionStart;
    } else if ('selection' in document) {

      el.focus();
      const sel = document.selection.createRange();
      const selLength = document.selection.createRange().text.length;
      sel.moveStart('character', -el.value.length);
      pos = sel.text.length - selLength;

    }
    editorCaretPositionRef.current = pos;

  }, []);

I could get caret by calling above updateEditorCaretPositionRef() from onChange onBlur .
editorRef is set to MDEditor's ref.

I inserted emoji if I selected it on Picker like this.

  const [value, setValue] = React.useState("**Hello world!!!**");

  const handleSelectEmoji = React.useCallback((event, emoji) => {

    const textarea = editorRef.current.textarea;
    const caretPosition = editorCaretPositionRef.current;

    textarea.focus();
    textarea.selectionStart = caretPosition;
    textarea.selectionEnd = caretPosition;

    const text = textarea.value;
    const nextText = text.substring(0, caretPosition) + emoji.emoji + text.substring(caretPosition, textarea.length);
    setValue(nextText);

  }, []);

Thanks.