Add tab support to default editor

app/assets/javascripts/app/frontend/controllers/editor.js

@@ -34,6 +34,10 @@ angular.module('app.frontend')
 
           ctrl.postNoteToExternalEditor(ctrl.note);
         })
+
+        scope.$on('$destroy', function(){
+          window.removeEventListener('keydown', handler);
+        })
       }
     }
   })
@@ -54,7 +58,6 @@ angular.module('app.frontend')
       this.loadTagsString();
     }.bind(this));
 
-
     componentManager.registerHandler({identifier: "editor", areas: ["note-tags", "editor-stack"], activationHandler: function(component){
 
       if(!component.active) {
@@ -456,4 +459,40 @@ angular.module('app.frontend')
       }
     }
 
+    this.onSystemEditorLoad = function() {
+      if(this.loadedTabListener) {
+        return;
+      }
+      this.loadedTabListener = true;
+      /**
+       * Insert 4 spaces when a tab key is pressed,
+       * only used when inside of the text editor.
+       * If the shift key is pressed first, this event is
+       * not fired.
+      */
+      var parent = this;
+      var handleTab = function (event) {
+        if (!event.shiftKey && event.which == 9) {
+          event.preventDefault();
+          var start = this.selectionStart;
+          var end = this.selectionEnd;
+          var spaces = "    ";
+
+           // Insert 4 spaces
+          this.value = this.value.substring(0, start)
+            + spaces + this.value.substring(end);
+
+          // Place cursor 4 spaces away from where
+          // the tab key was pressed
+          this.selectionStart = this.selectionEnd = start + 4;
+
+          parent.note.text = this.value;
+          parent.changesMade();
+        }
+      }
+
+      var element = document.getElementById("note-text-editor");
+      element.addEventListener('keydown', handleTab);
+    }
+
   });

app/assets/templates/frontend/editor.html.haml

@@ -37,6 +37,7 @@
       Loading
     %textarea.editable#note-text-editor{"ng-if" => "!ctrl.editor || ctrl.editor.systemEditor", "ng-class" => "{'fullscreen' : ctrl.fullscreen }", "ng-model" => "ctrl.note.text",
      "ng-change" => "ctrl.contentChanged()", "ng-click" => "ctrl.clickedTextArea()", "ng-focus" => "ctrl.onContentFocus()"}
+      {{ctrl.onSystemEditorLoad()}}
 
 
   %section.section{"ng-if" => "ctrl.note.errorDecrypting"}