Insert text to textarea

insertText.js

/**
 * Insert <text> to <areaId>, then [selectedText] will be selected.
 *
 * @export module.insertAtCaret
 * @param {string}  areaId - ID of textarea
 * @param {string} text - text to be inserted
 * @param {string} [selectedText=undefined] - a sub string of param <text>,
 * will be selected after insertion, and also be replaced by the current selected text in textarea
 */
export function insertAtCaret (areaId, text, selectedText = undefined) {
  const txtarea = document.getElementById(areaId)
  if (!txtarea) {
    console.log('Error: insertAtCaret, element not found. id:', areaId)
    return
  }
  const scrollPos = txtarea.scrollTop
  let caretPos = txtarea.selectionStart

  const front = (txtarea.value).substring(0, caretPos)
  const back = (txtarea.value).substring(txtarea.selectionEnd)
  let userSelected
  if ((txtarea.selectionEnd - caretPos) > 0 && selectedText) {
    userSelected = txtarea.value.substring(caretPos, txtarea.selectionEnd)
    text = text.replace(selectedText, userSelected)
  }
  txtarea.value = front + text + back

  if (selectedText === undefined) {
    caretPos = caretPos + text.length
    txtarea.selectionStart = caretPos
    txtarea.selectionEnd = caretPos
  } else if (userSelected) {
    const offset = text.indexOf(userSelected)
    txtarea.selectionStart = caretPos + offset
    txtarea.selectionEnd = caretPos + offset + userSelected.length
  } else {
    const offset = text.indexOf(selectedText)
    txtarea.selectionStart = caretPos + offset
    txtarea.selectionEnd = caretPos + offset + selectedText.length
  }
  txtarea.focus()
  txtarea.scrollTop = scrollPos
}