trying to implement undo and redo for textareas

[lkrubner]

I know I'm getting it wrong in these few lines, but I can't figure out
where:

var newLength = currentFormIndexValue + 1;
arrayOfPastWork.length = newLength;

var newValue = myField.value;
var currentLength = arrayOfPastFormWork.length;
var indexForNewItems = currentLength - 1;

arrayOfPastFormWork[indexForNewItems] = newValue;
currentFormIndexValue = indexForNewItems;


If you've been adding items to an array then its current index should
be it's length minus 1, yes?

I've a form with a text area where people can write what they want and
then hit submit and their text gets transformed into a webpage (with
some PHP code). I've a bunch of formatting buttons that writes some
basic HTML for them. The idea here is to offer an HTML editor like what
Blogger offers to its customers or like what TypePad offers to its
customers. When I've got this portion of things debugged, I'll offer a
live preview, like Blogger and TypePad do.

All the HTML buttons are working fine, save for the undo and redo
buttons.

I'm including a portion of the form, and the relevant Javascript below.
Any help would be much appreciated.

For now I'm creating these variables as globals:


arrayOfPastFormWork = new Array();
arrayOfPastFormWork[0] = "";
currentFormIndexValue = 0;

I'll make them non-global when my understanding of Javascript is more
solid.



-------------------------------------

Please type the text you'd like to have appear on this web page:

<input class="formattingButtons" type="button" value="save your
work" onclick="saveYourWork(this.form.inputId4)" />
<input class="formattingButtons" type="button" value="undo"
onclick="undoFormWork(this.form.inputId4)" />
<input class="formattingButtons" type="button" value="redo"
onclick="redoFormWork(this.form.inputId4)" />

<input class="formattingButtons" type="button" value="bold"
onclick="insertAtCursor(this.form.inputId4, 'b');" />
<input class="formattingButtons" type="button" value="italic"
onclick="insertAtCursor(this.form.inputId4, 'i');" />
<input class="formattingButtons" type="button" value="blockquote"
onclick="insertAtCursor(this.form.inputId4, 'blockquote');" />
<input class="formattingButtons" type="button" value="big headline"
onclick="insertAtCursor(this.form.inputId4, 'h2');" />
<input class="formattingButtons" type="button" value="small
headline" onclick="insertAtCursor(this.form.inputId4, 'h5');" />
<input class="formattingButtons" type="button" value="make a link"
onclick="insertAtCursorLink(this.form.inputId4)" />
<input class="formattingButtons" type="button" value="add an image"
onclick="insertAtCursorImage(this.form.inputId4)" />

Add an image: <select id="imagesToInsert"
onChange="insertImageFromSelect(this.form.inputId4);">

<option value=""></option>
<option value="">No choice made</option>
<option value="DSCN3581.JPG">Lawrence at work</option>
</select>



<div class="formInput"><textarea id="inputId4"
name="formInputs[cbMainContent]" style="height:200px; width:100%;"
class="textareaInput"
onkeypress="addToArrayOfPastWork(this)"></textarea>
<p><a href="#inputId4" onclick="makeBigger();">Make box
larger?</a></p></div>

</div>






// 12-04-04 - our form functions, especially
McFormsPrintNow, will output text boxes and textareas
// that call addToArrayOfPastWork() whenever the event
onkeypress is called.
// Then elementsAdminShowFormattingButtons() contains an
undo and a
// redo button that lets users step through the array and
bring back
// previous versions of their work.
arrayOfPastFormWork = new Array();
arrayOfPastFormWork[0] = "";
currentFormIndexValue = 0;

function addToArrayOfPastWork(myField) {

// 12-09-04 - the next two lines truncate the array to
whatever the current
// index is. Thus if the user does 9 things and then
goes back 4 and then does
// something new, we want to have an array that is 6
elements long.
//
// 12-17-04 - this needs to happen here and not in the
function undoFormWork()
// because you don't want to erase future states of
work until a new state
// is being added. A user should be able to type 10
things, then hit the undo
// button 10 times, then hit the redo button 10 times,
but they can't do that
// if the undo button erases all the stuff the redo
button would want to redo.
var newLength = currentFormIndexValue + 1;
arrayOfPastWork.length = newLength;

var newValue = myField.value;
var currentLength = arrayOfPastFormWork.length;
var indexForNewItems = currentLength - 1;

arrayOfPastFormWork[indexForNewItems] = newValue;
currentFormIndexValue = indexForNewItems;
}


function undoFormWork(myField) {
// 12-09-04 - this next line should take us back one
step
// in the array of work done so far. It should also
force a cast to an
// integer, good in case this variable has somehow been
turned into
// a string.
currentFormIndexValue = currentFormIndexValue - 1;

if (currentFormIndexValue < 0) currentFormIndexValue =
0;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}


function redoFormWork(myField) {
currentFormIndexValue = currentFormIndexValue + 1;
myField.value =
arrayOfPastFormWork[currentFormIndexValue];
}