editor: init the style sheet using javascript and add support for tab

1 files changed, 68 insertions, 0 deletions

diff --git a/editor/editor.ts b/editor/editor.ts
index 1d0f7c2..048440e 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -29,6 +29,9 @@ export class Editor implements IEditor {
 			console.error("Editor: element ID not found:", opts.id)
 			return
 		}
+
+		this.initStyle()
+
 		this.el.classList.add("wui-editor")
 
 		this.sel = window.getSelection()
@@ -72,6 +75,47 @@ export class Editor implements IEditor {
 		return res
 	}
 
+	initStyle() {
+		let style = document.createElement("style")
+		style.type = "text/css"
+		style.innerText = `
+			[contenteditable] {
+				outline: 0px solid transparent;
+			}
+			.wui-editor {
+				background-color: cornsilk;
+				font-family: monospace;
+				width: 100%;
+			}
+			.wui-editor-line {
+				display: table;
+			}
+			.wui-line-number:hover {
+				background-color: lightsalmon;
+			}
+			.wui-line-number {
+				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;
+			}
+			.wui-line-text {
+				display: table-cell;
+				padding: 4px;
+				border-color: lightblue;
+				border-width: 0px;
+				border-style: solid;
+				white-space: pre-wrap;
+			}
+		`
+		document.head.appendChild(style)
+	}
+
 	insertNewline(x: number) {
 		let newline = new EditorLine(x, "", this)
 		for (let y = x; y < this.lines.length; y++) {
@@ -131,10 +175,34 @@ export class Editor implements IEditor {
 				this.sel.addRange(this.range)
 				ev.preventDefault()
 				break
+
 			case "Enter":
 				this.insertNewline(x + 1)
 				ev.preventDefault()
 				break
+
+			case "Tab":
+				if (!this.sel) {
+					return false
+				}
+
+				elText = this.lines[x].elText
+				off = this.sel.focusOffset
+				let 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)
+				ev.preventDefault()
+
+				break
 		}
 		return true
 	}