updating code area

Author: grantnelson-wf

playground/internal/react/codeBox.go

@@ -11,21 +11,32 @@ const tabWidth = 4
 
 // CodeBox creates a code editor box React element for editing
 // the given code state.
-func CodeBox(code string, setCode func(any)) *Element {
+func CodeBox(code string, setCode func(any), onSave func(), onEscape func()) *Element {
 	return CreateElement(codeBoxComponent, Props{
-		`curCode`: code,
-		`setCode`: setCode,
+		`curCode`:  code,
+		`setCode`:  setCode,
+		`onSave`:   onSave,
+		`onEscape`: onEscape,
 	})
 }
 
 func codeBoxComponent(props Props) *Element {
 	cba := &codeBoxAssistant{
 		curCode:     As[string](props, `curCode`),
 		setCode:     AsSetter(props, `setCode`),
+		onSave:      AsFunc(props, `onSave`),
+		onEscape:    AsFunc(props, `onEscape`),
 		textAreaRef: UseRef(),
 		lineNumsRef: UseRef(),
 	}
 
+	UseEffect(func() {
+		// On first render, focus the code textarea.
+		cba.textAreaRef.Call(`focus`)
+		cba.textAreaRef.Set(`selectionStart`, 0)
+		cba.textAreaRef.Set(`selectionEnd`, 0)
+	}, []any{})
+
 	lineCount := strings.Count(cba.curCode, "\n") + 1
 	lineNumbers := UseMemo(func() string {
 		return getLineNumbers(lineCount)
@@ -60,6 +71,8 @@ func codeBoxComponent(props Props) *Element {
 type codeBoxAssistant struct {
 	curCode     string
 	setCode     func(any)
+	onSave      Func
+	onEscape    Func
 	textAreaRef *Ref
 	lineNumsRef *Ref
 }
@@ -69,8 +82,6 @@ func (cba *codeBoxAssistant) onInput(e *js.Object) {
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
-	// TODO(grantnelson-wf): Maybe we should handle Ctrl+S for saving the code, just run formatting, or just ignore it.
-	// TODO(grantnelson-wf): If possible, make escape focus out of the code box since tabs won't switch focus anymore.
 	key := e.Get(`key`).String()
 	shift := e.Get(`shiftKey`).Bool()
 	ctrl := e.Get(`metaKey`).Bool() || e.Get(`ctrlKey`).Bool()
@@ -91,6 +102,8 @@ func (cba *codeBoxAssistant) handleKeyDown(key string, shift, ctrl bool) bool {
 		return cba.handleTab(shift, ctrl)
 	case `Enter`:
 		return cba.handleNewline(shift, ctrl)
+	case "s":
+		return cba.handleSave(shift, ctrl)
 	case "*":
 		return cba.handleMultilineComment(shift, ctrl)
 	case "/":
@@ -107,6 +120,9 @@ func (cba *codeBoxAssistant) handleKeyDown(key string, shift, ctrl bool) bool {
 		return cba.insertPair(ctrl, `{`, `}`)
 	case "[":
 		return cba.insertPair(ctrl, `[`, `]`)
+	case "Escape":
+		cba.onEscape()
+		return false
 	default:
 		return false
 	}
@@ -185,20 +201,26 @@ func (cba *codeBoxAssistant) handleNewline(shift, ctrl bool) bool {
 	if end >= 0 && end < len(cba.curCode) {
 		switch cba.curCode[end] {
 		case '}', ')', ']':
-			opening := cba.findMatchingOpeningBrace(end)
-			println("Found matching opening brace at:", opening) // TODO(grantnelson-wf): Remove
-			if opening >= 0 {
+			if opening := cba.findMatchingOpeningBrace(end); opening >= 0 {
 				after = "\n" + cba.indentAt(opening)
 			}
 		}
 	}
 
-	println("before:", strconv.Quote(before)) // TODO(grantnelson-wf): Remove
-	println("after: ", strconv.Quote(after))  // TODO(grantnelson-wf): Remove
 	cba.insertAtSelection(before, after, false)
 	return true
 }
 
+func (cba *codeBoxAssistant) handleSave(shift, ctrl bool) bool {
+	if !ctrl || shift {
+		// Allow default behavior for 's' without a Ctrl or Shift+Ctrl+S.
+		return false
+	}
+
+	cba.onSave()
+	return true
+}
+
 // handleCommentToggle handles toggling comments on the current line or selection.
 func (cba *codeBoxAssistant) handleCommentToggle(shift, ctrl bool) bool {
 	if !ctrl || shift {

playground/internal/react/playground.go

@@ -69,7 +69,7 @@ func Playground() *Element {
 				Div(Props{
 					`id`: `code-box-container`,
 				},
-					CodeBox(code, setCode),
+					CodeBox(code, setCode, pa.onSaveKeyPress, pa.onEscapeCode),
 				),
 				OutputBox(output),
 			),
@@ -115,6 +115,14 @@ func (pa *playgroundAssistant) initCode() {
 	pa.setCode(code)
 }
 
+func (pa *playgroundAssistant) onSaveKeyPress() {
+	println("Save key pressed") // TODO(grantnelson-wf): Implement
+}
+
+func (pa *playgroundAssistant) onEscapeCode() {
+	println("Escape code pressed") // TODO(grantnelson-wf): Implement to change focus to the run button or something
+}
+
 func (pa *playgroundAssistant) onRunClick() {
 	println("Run clicked") // TODO(grantnelson-wf): Implement
 }