Привязка данных

let textarea1 = document.querySelector("#area1"), 
    textarea2 = document.querySelector("#area2"), 
    selectionStart, selectionEnd, selectedText, beforeString, afterString; 
     
function selectionHandler() { 
 
    selectionStart = Math.min(textarea1.selectionStart, textarea1.selectionEnd); 
    selectionEnd = Math.max(textarea1.selectionStart, textarea1.selectionEnd); 
         
    if (selectionStart < selectionEnd) { 
        selectedText = textarea1.value.substring(selectionStart, selectionEnd); 
        textarea2.value = selectedText; 
        textarea2.removeAttribute("disabled"); 
        beforeString = textarea1.value.slice(0, selectionStart); 
        afterString = textarea1.value.slice(selectionEnd); 
    } 
     
    if (selectionStart === selectionEnd) { 
        textarea2.setAttribute("disabled", true); 
        textarea2.value = ""; 
    } 
} 
 
function changeHandler() { 
    let newString = beforeString + textarea2.value + afterString; 
         
    textarea1.value = newString; 
} 
     
textarea1.addEventListener("click", selectionHandler); 
textarea2.addEventListener("input", changeHandler);

.textarea { 
  width: 100%; 
  height: 70px; 
}

<textarea id="area1" class="textarea"></textarea> 
<textarea id="area2" class="textarea" disabled></textarea>