2 files changed, 58 insertions, 0 deletions
diff --git a/editor/editor.js b/editor/editor.js
index e80e147..090b7fe 100644
--- a/editor/editor.js
+++ b/editor/editor.js
@@ -11,6 +11,7 @@ export class WuiEditor {
         this.elLineNumber = document.createElement("div");
         this.elContent = document.createElement("div");
         this.isKeyControl = false;
+        this.isKeyShift = false;
         this.id = opts.id;
         this.isEditable = opts.isEditable;
         const el = document.getElementById(opts.id);
@@ -102,6 +103,7 @@ export class WuiEditor {
             };
             this.elContent.addEventListener("blur", () => {
                 this.isKeyControl = false;
+                this.isKeyShift = false;
             });
         }
         this.elContent.classList.add(WUI_EDITOR_CLASS_CONTENT);
@@ -146,6 +148,16 @@ export class WuiEditor {
     `;
         document.head.appendChild(style);
     }
+    insert(text) {
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount) {
+            console.error(`insert: failed to get selection`);
+            return;
+        }
+        selection.deleteFromDocument();
+        selection.getRangeAt(0).insertNode(document.createTextNode(text));
+        selection.collapseToEnd();
+    }
     onKeydownDocument(ed, ev) {
         switch (ev.key) {
             case "Control":
@@ -164,6 +176,18 @@ export class WuiEditor {
                 }
                 this.addNewLine();
                 return false;
+            case "Shift":
+                ed.isKeyShift = true;
+                break;
+            case "Tab":
+                if (ed.isKeyShift) {
+                    // Pressing Shift+Tab should move focus out of editor,
+                    // which focus to the previous component on the page or browser.
+                    return true;
+                }
+                ev.preventDefault();
+                this.insert("\t");
+                return false;
         }
         return true;
     }
@@ -172,6 +196,9 @@ export class WuiEditor {
             case "Control":
                 ed.isKeyControl = false;
                 return true;
+            case "Shift":
+                ed.isKeyShift = false;
+                break;
         }
         return true;
     }
diff --git a/editor/editor.ts b/editor/editor.ts
index a036311..d524a52 100644
--- a/editor/editor.ts
+++ b/editor/editor.ts
@@ -24,6 +24,7 @@ export class WuiEditor {
   private elLineNumber: HTMLElement = document.createElement("div");
   private elContent: HTMLElement = document.createElement("div");
   private isKeyControl: boolean = false;
+  private isKeyShift: boolean = false;
 
   constructor(public opts: WuiEditorOptions) {
     this.id = opts.id;
@@ -133,6 +134,7 @@ export class WuiEditor {
       };
       this.elContent.addEventListener("blur", () => {
         this.isKeyControl = false;
+        this.isKeyShift = false;
       });
     }
     this.elContent.classList.add(WUI_EDITOR_CLASS_CONTENT);
@@ -179,6 +181,17 @@ export class WuiEditor {
     document.head.appendChild(style);
   }
 
+  private insert(text: string) {
+    const selection = window.getSelection();
+    if (!selection || !selection.rangeCount) {
+      console.error(`insert: failed to get selection`);
+      return;
+    }
+    selection.deleteFromDocument();
+    selection.getRangeAt(0).insertNode(document.createTextNode(text));
+    selection.collapseToEnd();
+  }
+
   private onKeydownDocument(ed: WuiEditor, ev: KeyboardEvent) {
     switch (ev.key) {
       case "Control":
@@ -199,6 +212,20 @@ export class WuiEditor {
 
         this.addNewLine();
         return false;
+
+      case "Shift":
+        ed.isKeyShift = true;
+        break;
+
+      case "Tab":
+        if (ed.isKeyShift) {
+          // Pressing Shift+Tab should move focus out of editor,
+          // which focus to the previous component on the page or browser.
+          return true;
+        }
+        ev.preventDefault();
+        this.insert("\t");
+        return false;
     }
     return true;
   }
@@ -208,6 +235,10 @@ export class WuiEditor {
       case "Control":
         ed.isKeyControl = false;
         return true;
+
+      case "Shift":
+        ed.isKeyShift = false;
+        break;
     }
     return true;
   }