editor: add support to move arrow up and down between text

4 files changed, 119 insertions, 43 deletions

diff --git a/editor/editor.d.ts b/editor/editor.d.ts
index ff1c307..59f02fa 100644
--- a/editor/editor.d.ts
+++ b/editor/editor.d.ts
@@ -15,6 +15,8 @@ export declare class Editor implements IEditor {
     private rangeBegin;
     private rangeEnd;
     private lines;
+    private sel;
+    private range;
     constructor(opts: IEditor);
     OpenFile(path: string): Response;
     SaveFile(node: IVfsNode): Response;
diff --git a/editor/editor.js b/editor/editor.js
index 540b42c..0bf86d6 100644
--- a/editor/editor.js
+++ b/editor/editor.js
@@ -9,6 +9,7 @@ var Editor = /** @class */ (function () {
         this.rangeBegin = 0;
         this.rangeEnd = 0;
         this.lines = [];
+        this.sel = null;
         this.id = opts.id;
         this.is_editable = opts.is_editable;
         this.el = document.getElementById(opts.id);
@@ -17,6 +18,8 @@ var Editor = /** @class */ (function () {
             return;
         }
         this.el.classList.add("wui-editor");
+        this.sel = window.getSelection();
+        this.range = document.createRange();
     }
     Editor.prototype.OpenFile = function (path) {
         var res = {
@@ -48,7 +51,6 @@ var Editor = /** @class */ (function () {
         return res;
     };
     Editor.prototype.insertNewline = function (x) {
-        console.log("enter new line:", x);
         var newline = new EditorLine(x, "", this);
         for (var y = x; y < this.lines.length; y++) {
             this.lines[y].setNumber(y + 2);
@@ -57,26 +59,60 @@ var Editor = /** @class */ (function () {
         this.render();
     };
     Editor.prototype.onClickText = function (text) {
-        if (this.activeText) {
-            this.activeText.contentEditable = "false";
-            this.activeText.style.borderWidth = "0";
-        }
-        text.contentEditable = "true";
-        text.style.borderWidth = "2px";
-        this.activeText = text;
-        text.focus();
+        this.sel = window.getSelection();
     };
     Editor.prototype.onKeydownText = function (x, text, ev) {
-        if (ev.key === "Escape") {
-            text.contentEditable = "false";
-            text.style.borderWidth = "0";
-            this.activeText = null;
-            return false;
-        }
-        if (ev.key === "Enter") {
-            this.insertNewline(x + 1);
-            ev.preventDefault();
-            return false;
+        switch (ev.key) {
+            case "ArrowUp":
+                if (x == 0) {
+                    return false;
+                }
+                if (!this.sel) {
+                    return false;
+                }
+                var elText = this.lines[x - 1].elText;
+                var 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();
+                break;
+            case "ArrowDown":
+                if (x == this.lines.length - 1) {
+                    return false;
+                }
+                if (!this.sel) {
+                    return false;
+                }
+                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.range.collapse(true);
+                this.sel.removeAllRanges();
+                this.sel.addRange(this.range);
+                ev.preventDefault();
+                break;
+            case "Enter":
+                this.insertNewline(x + 1);
+                ev.preventDefault();
+                break;
         }
         return true;
     };
@@ -85,7 +121,6 @@ var Editor = /** @class */ (function () {
     };
     Editor.prototype.onMouseUpAtLine = function (x) {
         this.rangeEnd = x;
-        console.log("range: ", this.rangeBegin, " - ", this.rangeEnd);
         if (this.rangeEnd < this.rangeBegin) {
             return;
         }
@@ -135,6 +170,7 @@ var EditorLine = /** @class */ (function () {
         this.elText = document.createElement("span");
         this.elText.classList.add("wui-line-text");
         this.elText.innerText = text;
+        this.elText.contentEditable = "true";
         this.elText.onclick = function (ev) {
             ed.onClickText(_this.elText);
         };
@@ -149,4 +185,4 @@ var EditorLine = /** @class */ (function () {
     };
     return EditorLine;
 }());
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiZWRpdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQVVBO0lBVUMsZ0JBQW1CLElBQWE7UUFBYixTQUFJLEdBQUosSUFBSSxDQUFTO1FBTnhCLGVBQVUsR0FBb0IsSUFBSSxDQUFBO1FBQ2xDLGVBQVUsR0FBdUIsSUFBSSxDQUFBO1FBQ3JDLGVBQVUsR0FBVyxDQUFDLENBQUE7UUFDdEIsYUFBUSxHQUFXLENBQUMsQ0FBQTtRQUNwQixVQUFLLEdBQWlCLEVBQUUsQ0FBQTtRQUcvQixJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUE7UUFDakIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFBO1FBRW5DLElBQUksQ0FBQyxFQUFFLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUE7UUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7WUFDYixPQUFPLENBQUMsS0FBSyxDQUFDLCtCQUErQixFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtZQUN2RCxPQUFNO1NBQ047UUFDRCxJQUFJLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUE7SUFDcEMsQ0FBQztJQUVELHlCQUFRLEdBQVIsVUFBUyxJQUFZO1FBQ3BCLElBQUksR0FBRyxHQUFhO1lBQ25CLElBQUksRUFBRSxHQUFHO1NBQ1QsQ0FBQTtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFO1lBQ2IsT0FBTyxHQUFHLENBQUE7U0FDVjtRQUVELEdBQUcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUM5QixJQUFJLEdBQUcsQ0FBQyxJQUFJLElBQUksR0FBRyxFQUFFO1lBQ3BCLE9BQU8sR0FBRyxDQUFBO1NBQ1Y7UUFDRCxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksRUFBRTtZQUNkLE9BQU8sR0FBRyxDQUFBO1NBQ1Y7UUFFRCxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsQ0FBQyxJQUFnQixDQUFBO1FBRXRDLElBQUksT0FBTyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBaUIsQ0FBQTtRQUMvQyxPQUFPLEdBQUcsT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLENBQUE7UUFDdkMsSUFBSSxLQUFLLEdBQUcsT0FBTyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUUvQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUN0QyxJQUFJLElBQUksR0FBRyxJQUFJLFVBQVUsQ0FBQyxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFBO1lBQzVDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFBO1NBQ3JCO1FBRUQsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFBO1FBRWIsT0FBTyxHQUFHLENBQUE7SUFDWCxDQUFDO0lBRUQseUJBQVEsR0FBUixVQUFTLElBQWM7UUFDdEIsSUFBSSxHQUFHLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDbEMsT0FBTyxHQUFHLENBQUE7SUFDWCxDQUFDO0lBRUQsOEJBQWEsR0FBYixVQUFjLENBQVM7UUFDdEIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsRUFBRSxDQUFDLENBQUMsQ0FBQTtRQUNqQyxJQUFJLE9BQU8sR0FBRyxJQUFJLFVBQVUsQ0FBQyxDQUFDLEVBQUUsRUFBRSxFQUFFLElBQUksQ0FBQyxDQUFBO1FBQ3pDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUMzQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUE7U0FDOUI7UUFDRCxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLE9BQU8sQ0FBQyxDQUFBO1FBQ2hDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQTtJQUNkLENBQUM7SUFFRCw0QkFBVyxHQUFYLFVBQVksSUFBaUI7UUFDNUIsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ3BCLElBQUksQ0FBQyxVQUFVLENBQUMsZUFBZSxHQUFHLE9BQU8sQ0FBQTtZQUN6QyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxXQUFXLEdBQUcsR0FBRyxDQUFBO1NBQ3ZDO1FBQ0QsSUFBSSxDQUFDLGVBQWUsR0FBRyxNQUFNLENBQUE7UUFDN0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFBO1FBQzlCLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFBO1FBQ3RCLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQTtJQUNiLENBQUM7SUFFRCw4QkFBYSxHQUFiLFVBQWMsQ0FBUyxFQUFFLElBQWlCLEVBQUUsRUFBaUI7UUFDNUQsSUFBSSxFQUFFLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUN4QixJQUFJLENBQUMsZUFBZSxHQUFHLE9BQU8sQ0FBQTtZQUM5QixJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsR0FBRyxHQUFHLENBQUE7WUFDNUIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUE7WUFDdEIsT0FBTyxLQUFLLENBQUE7U0FDWjtRQUNELElBQUksRUFBRSxDQUFDLEdBQUcsS0FBSyxPQUFPLEVBQUU7WUFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUE7WUFDekIsRUFBRSxDQUFDLGNBQWMsRUFBRSxDQUFBO1lBQ25CLE9BQU8sS0FBSyxDQUFBO1NBQ1o7UUFDRCxPQUFPLElBQUksQ0FBQTtJQUNaLENBQUM7SUFFRCxrQ0FBaUIsR0FBakIsVUFBa0IsQ0FBUztRQUMxQixJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQTtJQUNwQixDQUFDO0lBRUQsZ0NBQWUsR0FBZixVQUFnQixDQUFTO1FBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFBO1FBQ2pCLE9BQU8sQ0FBQyxHQUFHLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQTtRQUM3RCxJQUFJLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNwQyxPQUFNO1NBQ047UUFDRCxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRTtZQUNiLE9BQU07U0FDTjtRQUNELElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQTtRQUNULE9BQU8sQ0FBQyxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDaEMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsQ0FBQTtTQUM3QztRQUNELE9BQU8sQ0FBQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDL0IsSUFBSSxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSw4QkFBOEIsQ0FBQyxDQUFBO1NBQ3pFO1FBQ0QsT0FBTyxDQUFDLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3hDLElBQUksQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLFlBQVksQ0FBQyxPQUFPLEVBQUUsRUFBRSxDQUFDLENBQUE7U0FDN0M7SUFDRixDQUFDO0lBRUQsdUJBQU0sR0FBTjtRQUNDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFO1lBQ2IsT0FBTTtTQUNOO1FBQ0QsSUFBSSxDQUFDLEVBQUUsQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFBO1FBQ3RCLEtBQW1CLFVBQVUsRUFBVixLQUFBLElBQUksQ0FBQyxLQUFLLEVBQVYsY0FBVSxFQUFWLElBQVUsRUFBRTtZQUExQixJQUFNLElBQUksU0FBQTtZQUNkLElBQUksQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtTQUM1QjtJQUNGLENBQUM7SUFDRixhQUFDO0FBQUQsQ0FBQyxBQWpJRCxJQWlJQztBQWpJWSx3QkFBTTtBQW1JbkI7SUFLQyxvQkFBbUIsQ0FBUyxFQUFTLElBQVksRUFBRSxFQUFVO1FBQTdELGlCQTRCQztRQTVCa0IsTUFBQyxHQUFELENBQUMsQ0FBUTtRQUFTLFNBQUksR0FBSixJQUFJLENBQVE7UUFDaEQsSUFBSSxDQUFDLEVBQUUsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3ZDLElBQUksQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFBO1FBRXhDLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUM5QyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsaUJBQWlCLENBQUMsQ0FBQTtRQUM5QyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUUsQ0FBQTtRQUVwQyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsR0FBRyxVQUFDLEVBQWM7WUFDMUMsRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3hCLENBQUMsQ0FBQTtRQUNELElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxHQUFHLFVBQUMsRUFBYztZQUN4QyxFQUFFLENBQUMsZUFBZSxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3RCLENBQUMsQ0FBQTtRQUVELElBQUksQ0FBQyxNQUFNLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUM1QyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsZUFBZSxDQUFDLENBQUE7UUFDMUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFBO1FBRTVCLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxHQUFHLFVBQUMsRUFBYztZQUNwQyxFQUFFLENBQUMsV0FBVyxDQUFDLEtBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUM1QixDQUFDLENBQUE7UUFDRCxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsR0FBRyxVQUFDLEVBQWlCO1lBQ3pDLE9BQU8sRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUFDLEVBQUUsS0FBSSxDQUFDLE1BQU0sRUFBRSxFQUFFLENBQUMsQ0FBQTtRQUM1QyxDQUFDLENBQUE7UUFFRCxJQUFJLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUE7UUFDbEMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFBO0lBQ2pDLENBQUM7SUFFRCw4QkFBUyxHQUFULFVBQVUsQ0FBUztRQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFBO0lBQ2pDLENBQUM7SUFDRixpQkFBQztBQUFELENBQUMsQUF0Q0QsSUFzQ0MifQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiZWRpdG9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQVVBO0lBWUMsZ0JBQW1CLElBQWE7UUFBYixTQUFJLEdBQUosSUFBSSxDQUFTO1FBUnhCLGVBQVUsR0FBb0IsSUFBSSxDQUFBO1FBQ2xDLGVBQVUsR0FBdUIsSUFBSSxDQUFBO1FBQ3JDLGVBQVUsR0FBVyxDQUFDLENBQUE7UUFDdEIsYUFBUSxHQUFXLENBQUMsQ0FBQTtRQUNwQixVQUFLLEdBQWlCLEVBQUUsQ0FBQTtRQUN4QixRQUFHLEdBQXFCLElBQUksQ0FBQTtRQUluQyxJQUFJLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxFQUFFLENBQUE7UUFDakIsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFBO1FBRW5DLElBQUksQ0FBQyxFQUFFLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUE7UUFDMUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7WUFDYixPQUFPLENBQUMsS0FBSyxDQUFDLCtCQUErQixFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtZQUN2RCxPQUFNO1NBQ047UUFDRCxJQUFJLENBQUMsRUFBRSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsWUFBWSxDQUFDLENBQUE7UUFFbkMsSUFBSSxDQUFDLEdBQUcsR0FBRyxNQUFNLENBQUMsWUFBWSxFQUFFLENBQUE7UUFDaEMsSUFBSSxDQUFDLEtBQUssR0FBRyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUE7SUFDcEMsQ0FBQztJQUVELHlCQUFRLEdBQVIsVUFBUyxJQUFZO1FBQ3BCLElBQUksR0FBRyxHQUFhO1lBQ25CLElBQUksRUFBRSxHQUFHO1NBQ1QsQ0FBQTtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFO1lBQ2IsT0FBTyxHQUFHLENBQUE7U0FDVjtRQUVELEdB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
\ No newline at end of file
diff --git a/editor/editor.ts b/editor/editor.ts
index f021db0..1d0f7c2 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -17,6 +17,8 @@ export class Editor implements IEditor {
 	private rangeBegin: number = 0
 	private rangeEnd: number = 0
 	private lines: EditorLine[] = []
+	private sel: Selection | null = null
+	private range!: Range
 
 	constructor(public opts: IEditor) {
 		this.id = opts.id
@@ -28,6 +30,9 @@ export class Editor implements IEditor {
 			return
 		}
 		this.el.classList.add("wui-editor")
+
+		this.sel = window.getSelection()
+		this.range = document.createRange()
 	}
 
 	OpenFile(path: string): Response {
@@ -68,7 +73,6 @@ export class Editor implements IEditor {
 	}
 
 	insertNewline(x: number) {
-		console.log("enter new line:", x)
 		let newline = new EditorLine(x, "", this)
 		for (let y = x; y < this.lines.length; y++) {
 			this.lines[y].setNumber(y + 2)
@@ -78,27 +82,59 @@ export class Editor implements IEditor {
 	}
 
 	onClickText(text: HTMLElement) {
-		if (this.activeText) {
-			this.activeText.contentEditable = "false"
-			this.activeText.style.borderWidth = "0"
-		}
-		text.contentEditable = "true"
-		text.style.borderWidth = "2px"
-		this.activeText = text
-		text.focus()
+		this.sel = window.getSelection()
 	}
 
 	onKeydownText(x: number, text: HTMLElement, ev: KeyboardEvent) {
-		if (ev.key === "Escape") {
-			text.contentEditable = "false"
-			text.style.borderWidth = "0"
-			this.activeText = null
-			return false
-		}
-		if (ev.key === "Enter") {
-			this.insertNewline(x + 1)
-			ev.preventDefault()
-			return false
+		switch (ev.key) {
+			case "ArrowUp":
+				if (x == 0) {
+					return false
+				}
+				if (!this.sel) {
+					return false
+				}
+				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()
+				break
+			case "ArrowDown":
+				if (x == this.lines.length - 1) {
+					return false
+				}
+				if (!this.sel) {
+					return false
+				}
+				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.range.collapse(true)
+				this.sel.removeAllRanges()
+				this.sel.addRange(this.range)
+				ev.preventDefault()
+				break
+			case "Enter":
+				this.insertNewline(x + 1)
+				ev.preventDefault()
+				break
 		}
 		return true
 	}
@@ -109,7 +145,6 @@ export class Editor implements IEditor {
 
 	onMouseUpAtLine(x: number) {
 		this.rangeEnd = x
-		console.log("range: ", this.rangeBegin, " - ", this.rangeEnd)
 		if (this.rangeEnd < this.rangeBegin) {
 			return
 		}
@@ -162,10 +197,12 @@ class EditorLine {
 		this.elText = document.createElement("span")
 		this.elText.classList.add("wui-line-text")
 		this.elText.innerText = text
+		this.elText.contentEditable = "true"
 
 		this.elText.onclick = (ev: MouseEvent) => {
 			ed.onClickText(this.elText)
 		}
+
 		this.elText.onkeydown = (ev: KeyboardEvent) => {
 			return ed.onKeydownText(x, this.elText, ev)
 		}
diff --git a/editor/example.html b/editor/example.html
index ac45e60..6688435 100644
--- a/editor/example.html
+++ b/editor/example.html
@@ -35,6 +35,7 @@
 				border-color: lightblue;
 				border-width: 0px;
 				border-style: solid;
+				white-space: pre-wrap;
 			}
 		</style>
 	</head>
@@ -66,10 +67,10 @@
 						path: path,
 						content: `mkdir -p \${HOME}/aur/stackdriver-collectd
 
-git -C \${HOME}/aur/stackdriver-collectd clone \
+git -C \${HOME}/aur/stackdriver-collectd clone \\
 	ssh://aur@aur.archlinux.org/stackdriver-collectd.git .
 
-sh -c "cd \${HOME}/aur/stackdriver-collectd; \
+sh -c "cd \${HOME}/aur/stackdriver-collectd; \\
 	makepkg --force --install --noconfirm"
 pacman -Ql stackdriver-collectd