How to insert text into a textarea using JavaScript without messing up edit history?

Question

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.

so basically what I want is :

1) textarea content : "hello this is some text"

2) user selects some text and presses ctrl + b "hello this is some text" (assume the bolded part is a text selection)

3) so I want the textarea content to be : "hello this *is some* text"

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"

I have tried How can i use javascript to insert text into a textarea? and Insert text into textarea at cursor position (Javascript) 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

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

Twister

The answers below suggest execCommand which is deprecated. See https://mcmap.net/q/108418/-execcommand-is-now-obsolete-what-39-s-the-alternative/1066234 – Probably one way would be to track the edit states by yourself (in HTML5's localstorage) and load the former state of the textarea with each CTRL Z. – Kew

Or you use a global JS variable to store the different states. For example, SCEditor does it like this with the undo.js plugin, see var undoStates = []; and function storeState(). – Kew

Answer 1

Updated Version

To save user history when changing a textarea's overall value, instead of:

textarea.value = newText;

Use:

textarea.focus();
document.execCommand('selectAll',false);

var el = document.createElement('p');
el.innerText = newText;

document.execCommand('insertHTML',false,el.innerHTML);

It takes about ~1 second on my mid-end gaming rig with a string a little over 4,000 characters, so you'll have to figure out if that's acceptable for your use case.

Old Version

Maybe you're familiar with execCommand and wonder why we don't just use this:

textarea.focus();
document.execCommand('selectAll',false);
document.execCommand('insertText',false,newText);

On Chromium insertText is extremely slow, especially for longer strings. For an example over 4,000 characters, on my mid-gaming compy the same string as used in the Updated Version takes ~10 seconds.

It does save user history too though, and moving between history states is still an acceptable speed (~0.5 seconds).

Does it make sense that this is slower, since I would assume what I'm doing explicitly in the Updated Version Chromium's doing in the background anyway? No. But this is where Chromium's at today, I guess. Comment below if the Old Version becomes better.

General Notes

Unfortunately, execCommand doesn't work inside of textarea elements in Firefox. This may be fixed in an upcoming version.

Tested in Chromium and Firefox.

If I find a still faster solution (and/or one that works in Firefox), I will definitely share it.

Heterochromous

Interesting, if you use insertHTML instead of insertText, it runs much faster. However, if anything could be read as HTML, it will be cut out. I'll do further testing. – Heterochromous

I have also experienced that execCommand("insertText") with Chrome (not with Firefox) is extremely slow (I use a contenteditable pre). Your solution makes it better. The bottleneck is then the el.innerText = newText. This can be made faster with el.appendChild(document.createTextNode(newText)) – Renown

Answer 2

I got the below code from: http://www.javascriptsource.com/forms/undo-redo.html and you can check its working example as well.
Though you might need to implement your own functionalities such as Bold, Italic etc.

function iObject() {
  this.i;
  return this;
}

var myObject=new iObject();
myObject.i=0;
var myObject2=new iObject();
myObject2.i=0;
store_text=new Array();

//store_text[0] store initial textarea value
store_text[0]="";

function countclik(tag) {
  myObject.i++;
  var y=myObject.i;
  var x=tag.value;
  store_text[y]=x;
}

function undo(tag) {
  if ((myObject2.i)<(myObject.i)) {
    myObject2.i++;
  } else {
    alert("Finish Undo Action");
  }
  var z=store_text.length;
  z=z-myObject2.i;
  if (store_text[z]) {
  	tag.value=store_text[z];
  } else {
  	tag.value=store_text[0];
  }
}

function redo(tag) {
  if((myObject2.i)>1) {
    myObject2.i--;
  } else {
    alert("Finish Redo Action");
  }
  var z=store_text.length;
  z=z-myObject2.i;
  if (store_text[z]) {
    tag.value=store_text[z];
  } else {
  tag.value=store_text[0];
  }
 }

<form name=form1>
  <input type="button"  class="red" value="Undo" onmousedown="undo(document.form1.text1);">
  <input type="button" class="red" value="Redo" onmousedown="redo(document.form1.text1);">
  <br>
  <textarea rows=7 cols=50  name=text1 onkeydown="countclik(document.form1.text1);" >
  </textarea>
</form>


<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

I have used ckeditor in the past and would recommend to use it. You could also use niceditor

Malarkey

well thanks for the answer :) . but as I mentioned in the question I was hoping to do this without resorting to building own undo redo functionality :) – Twister

You could use plugins such as ckeditor, I believe it would cut down a lot of your work when it comes to adding in functionalities :) – Malarkey