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 {