hooked up undo/redo

Author: grantnelson-wf

playground/internal/common/selection.go

@@ -19,3 +19,18 @@ type Selection struct {
 func (sel Selection) IsCaret() bool {
 	return sel.Start == sel.End
 }
+
+// Reversed returns true if the selection is backwards
+// (i.e. start is greater than end).
+// This occurs when a user selects text from right to left or from bottom to top.
+func (sel Selection) Reversed() bool {
+	return sel.Start > sel.End
+}
+
+// Normalize returns a new Selection with Start less than or equal to End.
+func (sel Selection) Normalize() Selection {
+	if sel.Reversed() {
+		return Selection{Start: sel.End, End: sel.Start}
+	}
+	return sel
+}

playground/internal/common/undoRedo.go

@@ -17,7 +17,10 @@ type UndoRedoStack interface {
 
 	// RecordSelectionChange records a selection change without a code change
 	// and adds a break to prevent joining with prior changes.
-	RecordSelectionChange(cb CodeBoxWrapper)
+	RecordSelectionChange(newSel Selection)
 
-	RecordCodeChange(cb CodeBoxWrapper, priorCode string)
+	// RecordCodeChange records a code change along with the new selection.
+	// It should be called whenever the code in the editor changes.
+	// The oldCode in the next call should match the newCode of the prior call.
+	RecordCodeChange(newSel Selection, oldCode, newCode string)
 }

playground/internal/react/bindings.go

@@ -229,6 +229,9 @@ func UseStateLazy[T any](initialFn func() T) (T, Setter) {
 // UseRef creates a mutable ref object that persists for the lifetime of the component.
 // The ref object has a `current` property that can hold any value.
 // See: https://react.dev/reference/react/useRef
+//
+// TODO(grantnelson-wf): Having a `holder` feild doesn't seem to work when
+// passing Refs through the props. Investigate a better way to do this.
 func UseRef() *Ref {
 	return &Ref{holder: react().Call(`useRef`, nil)}
 }

playground/internal/react/codeBox.go

@@ -29,22 +29,28 @@ func codeBoxComponent(props Props) *Element {
 		lineNumsRef = UseRef()
 	)
 
-	onInput := UseCallback(func(e *js.Object) {
-		setCode(e.Get(`target`).Get(`value`).String())
-	}, []any{})
-
-	onKeyDown := UseCallback(func(e *js.Object) {
-		key := e.Get(`key`).String()
-		shift := e.Get(`shiftKey`).Bool()
-		ctrl := e.Get(`metaKey`).Bool() || e.Get(`ctrlKey`).Bool()
-		cba := &codeBoxAssistant{
+	newCBA := func() *codeBoxAssistant {
+		return &codeBoxAssistant{
 			curCode:     curCode,
 			setCode:     setCode,
 			onSave:      onSave,
 			onEscape:    onEscape,
 			textAreaRef: textAreaRef,
 		}
-		if editor.ProcessKeyDown(cba, key, shift, ctrl) {
+	}
+
+	onInput := UseCallback(func(e *js.Object) {
+		code := e.Get(`target`).Get(`value`).String()
+		sel := getSelection(textAreaRef)
+		globals.UndoRedo().RecordCodeChange(sel, curCode, code)
+		setCode(code)
+	}, []any{curCode})
+
+	onKeyDown := UseCallback(func(e *js.Object) {
+		key := e.Get(`key`).String()
+		shift := e.Get(`shiftKey`).Bool()
+		ctrl := e.Get(`metaKey`).Bool() || e.Get(`ctrlKey`).Bool()
+		if editor.ProcessKeyDown(newCBA(), key, shift, ctrl) {
 			e.Call(`preventDefault`)
 			e.Call(`stopPropagation`)
 		}
@@ -55,14 +61,19 @@ func codeBoxComponent(props Props) *Element {
 		lineNumsRef.Set(`scrollTop`, scrollTop)
 	}, []any{})
 
+	onSelect := UseCallback(func(e *js.Object) {
+		// Don't normalize the selection so that the direction is preserved.
+		globals.UndoRedo().RecordSelectionChange(getSelection(textAreaRef))
+	}, []any{})
+
 	// TODO(grantnelson-wf): If it is possible to detect a paste event,
-	// then we could indent the pasted code automatically.
+	// then maybe we could indent the pasted code automatically to match
+	// the indent of where it is being pasted.
 
 	UseEffect(func() {
 		// On first render, focus the code textarea.
 		textAreaRef.Call(`focus`)
-		textAreaRef.Set(`selectionStart`, 0)
-		textAreaRef.Set(`selectionEnd`, 0)
+		setSelection(textAreaRef, common.Selection{})
 	}, []any{})
 
 	lineCount := strings.Count(curCode, "\n") + 1
@@ -87,6 +98,7 @@ func codeBoxComponent(props Props) *Element {
 			`onInput`:        onInput,
 			`onKeyDown`:      onKeyDown,
 			`onScroll`:       onScroll,
+			`onSelect`:       onSelect,
 			`autoFocus`:      true,
 			`autoCorrect`:    `off`,
 			`autoComplete`:   `off`,
@@ -124,16 +136,19 @@ func (cba *codeBoxAssistant) EmitEvent(event common.Event) {
 }
 
 func (cba *codeBoxAssistant) GetSelection() common.Selection {
-	start := cba.textAreaRef.Get(`selectionStart`).Int()
-	end := cba.textAreaRef.Get(`selectionEnd`).Int()
-	if start > end {
-		// Reverse selection so start is always <= end.
-		return common.Selection{Start: end, End: start}
-	}
-	return common.Selection{Start: start, End: end}
+	return getSelection(cba.textAreaRef).Normalize()
 }
 
 func (cba *codeBoxAssistant) SetCode(sel common.Selection, code string) {
+	// Record the code change for undo/redo.
+	// Since this is used mostly for when the editor is doing some kind of edit
+	// (otherwise the key down would be use the default behavior), we can
+	// assume the code change should not be joined with other changes.
+	// Use AddBreak to issolate this change.
+	globals.UndoRedo().AddBreak()
+	globals.UndoRedo().RecordCodeChange(sel, cba.curCode, code)
+	globals.UndoRedo().AddBreak()
+
 	// Update the code state for react.
 	cba.setCode(code)
 
@@ -142,15 +157,12 @@ func (cba *codeBoxAssistant) SetCode(sel common.Selection, code string) {
 	cba.textAreaRef.Set(`value`, code)
 
 	// Match the diretionallity of the prior selection.
-	oldStart := cba.textAreaRef.Get(`selectionStart`).Int()
-	oldEnd := cba.textAreaRef.Get(`selectionEnd`).Int()
-	if oldStart > oldEnd {
+	if getSelection(cba.textAreaRef).Reversed() {
 		sel.Start, sel.End = sel.End, sel.Start
 	}
 
 	// Set selections
-	cba.textAreaRef.Set(`selectionStart`, sel.Start)
-	cba.textAreaRef.Set(`selectionEnd`, sel.End)
+	setSelection(cba.textAreaRef, sel)
 
 	// Auto-scroll to keep caret in view.
 	verticallyAutoScroll(cba.textAreaRef, sel.End, code)
@@ -196,6 +208,18 @@ func horizontallyAutoScroll(textAreaRef *Ref, caret int, code string) {
 	}
 }
 
+func getSelection(textAreaRef *Ref) common.Selection {
+	start := textAreaRef.Get(`selectionStart`).Int()
+	end := textAreaRef.Get(`selectionEnd`).Int()
+	return common.Selection{Start: start, End: end}
+}
+
+// setSelection sets the selection on the given textarea ref.
+func setSelection(textAreaRef *Ref, sel common.Selection) {
+	textAreaRef.Set(`selectionStart`, sel.Start)
+	textAreaRef.Set(`selectionEnd`, sel.End)
+}
+
 func getLineNumbers(lineCount int) string {
 	lines := make([]string, lineCount)
 	for i := 0; i < lineCount; i++ {

playground/internal/undoRedo/stateChange.go

@@ -1,6 +1,8 @@
 package undoRedo
 
-import "github.com/gopherjs/gopherjs.github.io/playground/internal/common"
+import (
+	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
+)
 
 type stateChange struct {
 	// prefix the length of the unchanged prefix

playground/internal/undoRedo/undoRedo.go

@@ -12,11 +12,17 @@ type undoRedoStackImp struct {
 
 	// getTime gets the current time.
 	// It can be replaced when testing.
-	getTime func() time.Time
-	joinDur time.Duration
+	getTime   func() time.Time
+	joinDur   time.Duration
+	joinLimit int
 
 	lastChange time.Time
 	lastSel    common.Selection
+
+	// doNotRecord prevents recording changes when true.
+	// This is set to true when performing undo/redo operations
+	// so that the undo/redo operations themselves are not recorded.
+	doNotRecord bool
 }
 
 func NewUndoRedoStack() common.UndoRedoStack {
@@ -27,39 +33,49 @@ func NewUndoRedoStack() common.UndoRedoStack {
 }
 
 func (s *undoRedoStackImp) PerformUndo(cb common.CodeBoxWrapper) {
-	if maxIndex := len(s.undos) - 1; maxIndex >= 0 {
-		undoChange := s.undos[maxIndex]
-		s.undos = s.undos[:maxIndex]
-		s.redos = append(s.redos, revertChange(cb, undoChange))
-	}
+	s.performRevert(cb, &s.undos, &s.redos)
 }
 
 func (s *undoRedoStackImp) PerformRedo(cb common.CodeBoxWrapper) {
-	if maxIndex := len(s.redos) - 1; maxIndex >= 0 {
-		redoChange := s.redos[maxIndex]
-		s.redos = s.redos[:maxIndex]
-		s.undos = append(s.undos, revertChange(cb, redoChange))
+	s.performRevert(cb, &s.redos, &s.undos)
+}
+
+func (s *undoRedoStackImp) performRevert(cb common.CodeBoxWrapper, fromStack, toStack *[]*stateChange) {
+	if maxIndex := len(*fromStack) - 1; maxIndex >= 0 {
+		s.doNotRecord = true
+		defer func() { s.doNotRecord = false }()
+
+		redoChange := (*fromStack)[maxIndex]
+		(*fromStack) = (*fromStack)[:maxIndex]
+		(*toStack) = append((*toStack), revertChange(cb, redoChange))
 	}
 }
 
 func (s *undoRedoStackImp) AddBreak() {
+	if s.doNotRecord {
+		return
+	}
 	// zeroing time prevents joining with prior changes.
 	s.lastChange = time.Time{}
 }
 
-func (s *undoRedoStackImp) RecordSelectionChange(cb common.CodeBoxWrapper) {
-	s.lastSel = cb.GetSelection()
+func (s *undoRedoStackImp) RecordSelectionChange(newSel common.Selection) {
+	if s.doNotRecord || newSel == s.lastSel {
+		return
+	}
+	s.lastSel = newSel
 	s.AddBreak()
 }
 
-func (s *undoRedoStackImp) RecordCodeChange(cb common.CodeBoxWrapper, priorCode string) {
+func (s *undoRedoStackImp) RecordCodeChange(newSel common.Selection, oldCode, newCode string) {
+	if s.doNotRecord {
+		return
+	}
 	now := s.getTime()
-	newSel := cb.GetSelection()
-	newer := newState(priorCode, cb.Code(), s.lastSel, newSel)
+	newer := newState(oldCode, newCode, s.lastSel, newSel)
 
 	defer func() {
-		s.lastChange = now
-		s.lastSel = newSel
+		// clear the redo stack on new changes
 		s.redos = nil
 	}()
 
@@ -68,10 +84,15 @@ func (s *undoRedoStackImp) RecordCodeChange(cb common.CodeBoxWrapper, priorCode
 		maxIndex := len(s.undos) - 1
 		if joined := joinStates(s.undos[maxIndex], newer); joined != nil {
 			s.undos[maxIndex] = joined
+			// don't update the last change time so that a fast diligent typer
+			// will still have the continuous changes broken up periodically.
+			s.lastSel = newSel
 			return
 		}
 	}
 
 	// cannot join, just add the new state
 	s.undos = append(s.undos, newer)
+	s.lastChange = now
+	s.lastSel = newSel
 }