Adding line numbers

Author: grantnelson-wf

playground/internal/react/codeBox.go

@@ -1,23 +1,28 @@
 package react
 
 import (
+	"fmt"
+	"strconv"
 	"strings"
 
 	"github.com/gopherjs/gopherjs/js"
 )
 
+// CodeBox creates a code editor box React element for editing
+// the given code state.
 func CodeBox(code string, setCode func(string)) *Element {
 	return CreateElement(codeBoxComponent, Props{
-		`code`:    code,
+		`curCode`: code,
 		`setCode`: setCode,
 	})
 }
 
 func codeBoxComponent(props Props) *Element {
 	cba := &codeBoxAssistant{
-		code:        As[string](props, `code`),
+		curCode:     As[string](props, `curCode`),
 		setCode:     AsFunc(props, `setCode`),
 		textAreaRef: UseRef(),
+		lineNumsRef: UseRef(),
 	}
 
 	return Div(Props{
@@ -29,11 +34,20 @@ func codeBoxComponent(props Props) *Element {
 			`id`:        `input`,
 		},
 			CreateElement(`textarea`, Props{
+				`id`:       `line-nums`,
+				`ref`:      cba.lineNumsRef,
+				`value`:    cba.getLineNumbers(cba.curCode),
+				`readOnly`: true,
+				`disable`:  `true`,
+			}),
+			CreateElement(`textarea`, Props{
+				`id`:             `code`,
 				`ref`:            cba.textAreaRef,
-				`defaultValue`:   cba.code,
+				`value`:          cba.curCode,
 				`onInput`:        cba.onInput,
 				`onKeyDown`:      cba.onKeyDown,
-				`id`:             `code`,
+				`onScroll`:       cba.onScroll,
+				`autoFocus`:      true,
 				`autoCorrect`:    `off`,
 				`autoComplete`:   `off`,
 				`autoCapitalize`: `off`,
@@ -44,13 +58,16 @@ func codeBoxComponent(props Props) *Element {
 }
 
 type codeBoxAssistant struct {
-	code        string
+	curCode     string
 	setCode     Func
 	textAreaRef *Ref
+	lineNumsRef *Ref
 }
 
 func (cba *codeBoxAssistant) onInput(e *js.Object) {
-	cba.setCode(e.Get(`target`).Get(`value`).String())
+	code := e.Get(`target`).Get(`value`).String()
+	cba.setCode(code)
+	//cba.updateLineNumbers(code)
 }
 
 func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
@@ -59,6 +76,12 @@ func (cba *codeBoxAssistant) onKeyDown(e *js.Object) {
 	}
 }
 
+func (cba *codeBoxAssistant) onScroll(e *js.Object) {
+	scrollTop := e.Get("target").Get("scrollTop").Int()
+	println("curScrollTop:", scrollTop)
+	cba.lineNumsRef.Set("scrollTop", scrollTop)
+}
+
 func (cba *codeBoxAssistant) handleKeyDown(keyCode int) bool {
 	toInsert := ``
 	switch keyCode {
@@ -71,9 +94,8 @@ func (cba *codeBoxAssistant) handleKeyDown(keyCode int) bool {
 		return false
 	}
 
-	start := cba.textAreaRef.Get(`selectionStart`).Int()
-	end := cba.textAreaRef.Get(`selectionEnd`).Int()
-	code := cba.code
+	start, end := cba.getSelection()
+	code := cba.curCode
 
 	if toInsert == "\n" {
 		// Add auto-indent for new line.
@@ -92,8 +114,7 @@ func (cba *codeBoxAssistant) handleKeyDown(keyCode int) bool {
 	newCaret := start + len(toInsert)
 
 	cba.setCode(code)
-	cba.textAreaRef.Set(`selectionStart`, newCaret)
-	cba.textAreaRef.Set(`selectionEnd`, newCaret)
+	cba.setSelection(newCaret, code)
 	return true
 }
 
@@ -109,3 +130,63 @@ func (cba *codeBoxAssistant) currentIndent(start int, code string) string {
 	}
 	return code[par:i]
 }
+
+func (cba *codeBoxAssistant) getLineNumbers(code string) string {
+	lines := strings.Count(code, "\n") + 1
+	size := len(fmt.Sprintf("%d", lines))
+	var sb strings.Builder
+	for i := 1; i <= lines; i++ {
+		sb.WriteString(fmt.Sprintf("%*d", size, i))
+		if i < lines {
+			sb.WriteString("\n")
+		}
+	}
+	return sb.String()
+}
+
+func (cba *codeBoxAssistant) getSelection() (int, int) {
+	start := cba.textAreaRef.Get(`selectionStart`).Int()
+	end := cba.textAreaRef.Get(`selectionEnd`).Int()
+	return start, end
+}
+
+func (cba *codeBoxAssistant) getLineHeight() int {
+	style := js.Global.Get("window").Call("getComputedStyle", cba.textAreaRef.Current())
+	// Get line-height property (returns string like "15px")
+	lineHeightStr := style.Call("getPropertyValue", "line-height").String()
+	lineHeightStr = strings.TrimSuffix(lineHeightStr, "px")
+	lineHeight, err := strconv.Atoi(lineHeightStr)
+	if err != nil {
+		// Fallback to default if parsing fails (15px is about right for 11pt font)
+		return 15
+	}
+	return lineHeight
+}
+
+func (cba *codeBoxAssistant) setSelection(caret int, code string) {
+	// Pre-update the textarea value so that the caret and scroll can be set
+	// correctly before the next render so that the next render doesn't reset them.
+	cba.textAreaRef.Set(`value`, code)
+
+	// Set selections
+	cba.textAreaRef.Set(`selectionStart`, caret)
+	cba.textAreaRef.Set(`selectionEnd`, caret)
+
+	// Auto-scroll to keep caret in view.
+	curLineNum := strings.Count(code[:caret], "\n")
+	lineHeight := cba.getLineHeight()
+	scrollTop := curLineNum * lineHeight
+
+	curTop := cba.textAreaRef.Get("scrollTop").Int()
+	if scrollTop < curTop {
+		cba.textAreaRef.Set("scrollTop", scrollTop)
+	} else {
+		height := cba.textAreaRef.Get("clientHeight").Int()
+		scrollTop = scrollTop - height + lineHeight
+
+		println("curLineNum:", curLineNum, "lineHeight:", lineHeight, "scrollTop:", scrollTop, "curTop:", curTop, "height:", height)
+		if scrollTop > curTop {
+			cba.textAreaRef.Set("scrollTop", scrollTop)
+		}
+	}
+}

playground/internal/react/playground.go

@@ -6,12 +6,21 @@ func Playground() *Element {
 	return CreateElement(playgroundComponent, nil)
 }
 
+var initText = func() string {
+	const lines = 40
+	init := ""
+	for i := 1; i <= lines; i++ {
+		init += fmt.Sprintf("Hello %d\n", i)
+	}
+	return init
+}()
+
 func playgroundComponent() *Element {
-	code, setCode := UseState("Hello World")
+	code, setCode := UseState(initText)
 
-	UseEffect(func() {
-		println(fmt.Sprintf(`Code: %q`, code))
-	}, code)
+	//UseEffect(func() {
+	//	println(fmt.Sprintf(`Code: %q`, code))
+	//}, code)
 
 	return Div(Props{
 		`id`: `playground`,

playground/playground.css

@@ -15,6 +15,8 @@ a {
 }
 
 .box {
+	display: flex;
+	align-items: stretch;
 	position: absolute;
 	left: 0px;
 	top: 0px;
@@ -45,6 +47,7 @@ a {
 }
 
 #code,
+#line-nums,
 #output,
 pre,
 .lines {
@@ -54,16 +57,30 @@ pre,
 }
 
 #code {
-	width: 100%;
-	height: 100%;
+	flex: 1;
 	background: inherit;
 	border: none;
 	float: right;
 	margin: 0;
 	outline: none;
 	padding: 0;
+	padding-left: 5px;
+	resize: none;
+	white-space: nowrap;
+}
+
+#line-nums {
+	padding-right: 5px;
+	background: inherit;
+	text-align: right;
+	user-select: none;
+	min-width: 2em;
+	border: none;
+	outline: none;
+	border-right: 1px solid #000;
+	white-space: pre-line;
+	overflow: hidden;
 	resize: none;
-	wrap: off;
 }
 
 #output {