title: How to insert text into a textarea using JavaScript without messing up edit history?
body: <p>Basically what i want is if a user selects some text in a textarea and presses ctrl + b then the text within the selection should be surrounded by stars.</p>
  
  <p>so basically what I want is : </p>
  
  <blockquote>
    <p>1) textarea content : "hello this is some text"</p>
    
    <p>2) user selects some text and presses ctrl + b "hello this <strong>is some</strong> text" (assume the bolded part is a text selection)</p>
    
    <p>3) so I want the textarea content to be :
          "hello this *is some* text"</p>
    
    <p>4) and if the user presses ctrl + z(or whatever the undo action) the
    textarea content should go back to being "hello this is some text"</p>
  </blockquote>
  
  <p>I have tried <a href="https://stackoverflow.com/questions/2204580/how-can-i-use-javascript-to-insert-text-into-a-textarea">How can i use javascript to insert text into a textarea?</a> and <a href="https://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript">Insert text into textarea at cursor position (Javascript)</a> and similar but the issue is that on doing undo (ctrl + z) for most browsers I expect the text to go back to go to the value in step 1. but this does not happen. I understand stackoverflow implements own undo redo functionality in its editor. but I was hoping not to go to that much complexity.
  Have to support chrome and safari </p>
  
  <p>An approach I am thinking about would be to position the cursor and issue a synthetic key event. I don't know if it will work and if it would be free of issues</p>