From 66fc3ee6b9df24c13966761a7b067f4e41b22071 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Sun, 3 Sep 2017 16:29:13 -0500
Subject: [PATCH] Add tab support to default editor

---
 .../app/frontend/controllers/editor.js        | 41 ++++++++++++++++++-
 .../templates/frontend/editor.html.haml       |  1 +
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js
index af682c160..39568fa4e 100644
--- a/app/assets/javascripts/app/frontend/controllers/editor.js
+++ b/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);
+    }
+
   });
diff --git a/app/assets/templates/frontend/editor.html.haml b/app/assets/templates/frontend/editor.html.haml
index e96ff2f7c..6a75e259d 100644
--- a/app/assets/templates/frontend/editor.html.haml
+++ b/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"}