editor: fix enter and support for backspace

Enter on middle of line now will cut the text and move the rest text
after caret to the next line.

Pressing backspace on the beginning of line will merge the line with
previous one.

1 files changed, 70 insertions, 38 deletions

diff --git a/editor/editor.ts b/editor/editor.ts
index 048440e..b428e87 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -90,19 +90,20 @@ export class Editor implements IEditor {
 			.wui-editor-line {
 				display: table;
 			}
-			.wui-line-number:hover {
-				background-color: lightsalmon;
-			}
 			.wui-line-number {
+				-moz-user-select: none;
+				-ms-user-select: none;
+				-webkit-user-select: none;
+				color: dimgrey;
+				cursor: pointer;
 				display: table-cell;
 				padding: 4px 1em 4px 4px;
 				text-align: right;
-				width: 3em;
-				cursor: pointer;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
 				user-select: none;
+				width: 3em;
+			}
+			.wui-line-number:hover {
+				background-color: lightsalmon;
 			}
 			.wui-line-text {
 				display: table-cell;
@@ -116,13 +117,14 @@ export class Editor implements IEditor {
 		document.head.appendChild(style)
 	}
 
-	insertNewline(x: number) {
-		let newline = new EditorLine(x, "", this)
+	insertNewline(x: number, text: string) {
+		let newline = new EditorLine(x, text, this)
 		for (let y = x; y < this.lines.length; y++) {
 			this.lines[y].setNumber(y + 2)
 		}
 		this.lines.splice(x, 0, newline)
 		this.render()
+		this.setCaret(newline.elText, 0)
 	}
 
 	onClickText(text: HTMLElement) {
@@ -138,21 +140,15 @@ export class Editor implements IEditor {
 				if (!this.sel) {
 					return false
 				}
+				ev.preventDefault()
 				let elText = this.lines[x - 1].elText
 				let off = this.sel.focusOffset
 				if (off > elText.innerText.length) {
 					off = elText.innerText.length
 				}
-				if (elText.firstChild) {
-					this.range.setStart(elText.firstChild, off)
-				} else {
-					this.range.setStart(elText, off)
-				}
-				this.range.collapse(true)
-				this.sel.removeAllRanges()
-				this.sel.addRange(this.range)
-				ev.preventDefault()
+				this.setCaret(elText, off)
 				break
+
 			case "ArrowDown":
 				if (x == this.lines.length - 1) {
 					return false
@@ -160,25 +156,56 @@ export class Editor implements IEditor {
 				if (!this.sel) {
 					return false
 				}
+				ev.preventDefault()
 				elText = this.lines[x + 1].elText
 				off = this.sel.focusOffset
 				if (off > elText.innerText.length) {
 					off = elText.innerText.length
 				}
-				if (elText.firstChild) {
-					this.range.setStart(elText.firstChild, off)
-				} else {
-					this.range.setStart(elText, off)
+				this.setCaret(elText, off)
+				break
+
+			case "Backspace":
+				if (x == 0) {
+					return
+				}
+				if (!this.sel) {
+					return
+				}
+				off = this.sel.focusOffset
+				if (off > 0) {
+					return
 				}
-				this.range.collapse(true)
-				this.sel.removeAllRanges()
-				this.sel.addRange(this.range)
 				ev.preventDefault()
+
+				// Join current line with previous.
+				let lineCurr = this.lines[x].elText
+				let linePrev = this.lines[x - 1].elText
+				off = linePrev.innerText.length
+				linePrev.innerText = linePrev.innerText + lineCurr.innerText
+
+				// Remove the current line
+				this.lines.splice(x, 1)
+
+				// Reset the line numbers.
+				for (; x < this.lines.length; x++) {
+					this.lines[x].setNumber(x + 1)
+				}
+				this.render()
+				this.setCaret(linePrev, off)
 				break
 
 			case "Enter":
-				this.insertNewline(x + 1)
+				if (!this.sel) {
+					return
+				}
 				ev.preventDefault()
+
+				off = this.sel.focusOffset
+				let text = this.lines[x].elText.innerText
+				let newText = text.slice(off, text.length)
+				this.lines[x].elText.innerText = text.slice(0, off)
+				this.insertNewline(x + 1, newText)
 				break
 
 			case "Tab":
@@ -188,20 +215,11 @@ export class Editor implements IEditor {
 
 				elText = this.lines[x].elText
 				off = this.sel.focusOffset
-				let text = elText.innerText
+				text = elText.innerText
 				elText.innerText = text.slice(0, off) + "\t" + text.slice(off, text.length)
 
-				off += 1
-				if (elText.firstChild) {
-					this.range.setStart(elText.firstChild, off)
-				} else {
-					this.range.setStart(elText, off)
-				}
-				this.range.collapse(true)
-				this.sel.removeAllRanges()
-				this.sel.addRange(this.range)
+				this.setCaret(elText, off + 1)
 				ev.preventDefault()
-
 				break
 		}
 		return true
@@ -240,6 +258,20 @@ export class Editor implements IEditor {
 			this.el.appendChild(line.el)
 		}
 	}
+
+	setCaret(elText: HTMLElement, off: number) {
+		if (!this.sel) {
+			return
+		}
+		if (elText.firstChild) {
+			this.range.setStart(elText.firstChild, off)
+		} else {
+			this.range.setStart(elText, off)
+		}
+		this.range.collapse(true)
+		this.sel.removeAllRanges()
+		this.sel.addRange(this.range)
+	}
 }
 
 class EditorLine {