editor: listen on key Escape on document to clear selection

Previously, to clear selection, user must set the editor to active
by selecting any line.

This commit allow user to clear selection by pressing "Escape" anywhere
on the document.

While at it, add methods to turn on or off the editor editability.

1 files changed, 48 insertions, 13 deletions

diff --git a/editor/editor.ts b/editor/editor.ts
index daa5cd2..56a3ece 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -60,6 +60,10 @@ export class WuiEditor {
 		}
 		this.sel = sel
 		this.range = document.createRange()
+
+		document.onkeyup = (ev: KeyboardEvent) => {
+			this.onKeyupDocument(this, ev)
+		}
 	}
 
 	// GetContent return content of file.
@@ -176,7 +180,7 @@ export class WuiEditor {
 		return true
 	}
 
-	OnKeydown(x: number, el_text: HTMLElement, ev: KeyboardEvent) {
+	OnKeydownOnLine(x: number, el_text: HTMLElement, ev: KeyboardEvent) {
 		let text_before: string
 		let text_after: string
 		let off: number
@@ -239,24 +243,19 @@ export class WuiEditor {
 				this.raw_lines[x] = text_before
 
 				this.insertNewline(x + 1, text_after)
-				console.log("scroll", x, this.raw_lines.length)
 				if (x + 3 >= this.raw_lines.length) {
 					this.el.scrollTop = this.el.scrollHeight
 				}
 				break
 
-			case "Escape":
-				ev.preventDefault()
-				this.clearSelection()
-				break
-
 			case "Tab":
 				ev.preventDefault()
 
 				el_text = this.lines[x].el_text
 				off = this.sel.focusOffset
 				text_before = el_text.innerText
-				text_after = text_before.slice(0, off) + "\t" + text_before.slice(off, text_before.length)
+				text_after =
+					text_before.slice(0, off) + "\t" + text_before.slice(off, text_before.length)
 
 				this.unre.DoUpdate(x, text_before, text_after)
 				el_text.innerText = text_after
@@ -318,6 +317,24 @@ export class WuiEditor {
 		}
 	}
 
+	//
+	// SetEditOff make the content not editable.
+	//
+	SetEditOff() {
+		for (let x = 0; x < this.lines.length; x++) {
+			this.lines[x].SetEditOff()
+		}
+	}
+
+	//
+	// SetEditOn make the content to be editable.
+	//
+	SetEditOn() {
+		for (let x = 0; x < this.lines.length; x++) {
+			this.lines[x].SetEditOn()
+		}
+	}
+
 	async OpenFile(path: string): Promise<WuiResponseInterface> {
 		let res = await this.opts.OpenFile(path)
 		if (!res) {
@@ -348,7 +365,7 @@ export class WuiEditor {
 	}
 
 	private clearSelection() {
-		if (this.range_end == 0) {
+		if (this.range_begin < 0 || this.range_end == 0) {
 			return
 		}
 		for (let x = this.range_begin; x <= this.range_end; x++) {
@@ -459,7 +476,7 @@ export class WuiEditor {
 
 		// Reset the line numbers.
 		for (; x < this.lines.length; x++) {
-			this.lines[x].setNumber(x)
+			this.lines[x].SetNumber(x)
 		}
 		this.render()
 	}
@@ -467,7 +484,7 @@ export class WuiEditor {
 	private insertNewline(x: number, text: string) {
 		let newline = new WuiEditorLine(x, text, this)
 		for (let y = x; y < this.lines.length; y++) {
-			this.lines[y].setNumber(y + 1)
+			this.lines[y].SetNumber(y + 1)
 		}
 
 		this.lines.splice(x, 0, newline)
@@ -477,6 +494,16 @@ export class WuiEditor {
 		this.setCaret(newline.el_text, 0)
 	}
 
+	private onKeyupDocument(ed: WuiEditor, ev: KeyboardEvent) {
+		switch (ev.key) {
+			case "Escape":
+				ev.preventDefault()
+				ed.clearSelection()
+				break
+		}
+		return true
+	}
+
 	private render() {
 		this.el.innerHTML = ""
 		for (const line of this.lines) {
@@ -528,7 +555,7 @@ class WuiEditorLine {
 		}
 
 		this.el_text.onkeydown = (ev: KeyboardEvent) => {
-			return ed.OnKeydown(this.line_num, this.el_text, ev)
+			return ed.OnKeydownOnLine(this.line_num, this.el_text, ev)
 		}
 		this.el_text.onkeyup = (ev: KeyboardEvent) => {
 			return ed.OnKeyup(this.line_num, this.el_text, ev)
@@ -547,10 +574,18 @@ class WuiEditorLine {
 		this.el.appendChild(this.el_text)
 	}
 
-	setNumber(x: number) {
+	SetNumber(x: number) {
 		this.line_num = x
 		this.el_number.innerText = x + 1 + ""
 	}
+
+	SetEditOn() {
+		this.el_text.contentEditable = "true"
+	}
+
+	SetEditOff() {
+		this.el_text.contentEditable = "false"
+	}
 }
 
 //