From ad92c0894d6f9bcef95f70db4475df406091f883 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Thu, 20 Apr 2017 09:42:59 -0500
Subject: [PATCH] editor themes

---
 .../app/frontend/controllers/editor.js        | 30 +++++++++++++++++--
 .../javascripts/app/services/themeManager.js  | 18 +++++++++--
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/app/frontend/controllers/editor.js b/app/assets/javascripts/app/frontend/controllers/editor.js
index ff02c8ffa..3b357b4d9 100644
--- a/app/assets/javascripts/app/frontend/controllers/editor.js
+++ b/app/assets/javascripts/app/frontend/controllers/editor.js
@@ -23,7 +23,11 @@ angular.module('app.frontend')
       }
     }
   })
-  .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager, editorManager) {
+  .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager, editorManager, themeManager) {
+
+    $rootScope.$on("theme-changed", function(){
+      this.postThemeToExternalEditor();
+    }.bind(this))
 
     window.addEventListener("message", function(event){
       if(event.data.status) {
@@ -118,13 +122,33 @@ angular.module('app.frontend')
       return _.find(editors, {default: true});
     }
 
-    this.postNoteToExternalEditor = function() {
+    this.postDataToExternalEditor = function(data) {
       var externalEditorElement = document.getElementById("editor-iframe");
       if(externalEditorElement) {
-        externalEditorElement.contentWindow.postMessage({text: this.note.text, data: this.editor.dataForKey(this.note.uuid), id: this.note.uuid}, '*');
+        externalEditorElement.contentWindow.postMessage(data, '*');
       }
     }
 
+    function themeData() {
+      return {
+        themes: [themeManager.currentTheme ? themeManager.currentTheme.url : null]
+      }
+    }
+
+    this.postThemeToExternalEditor = function() {
+      this.postDataToExternalEditor(themeData())
+    }
+
+    this.postNoteToExternalEditor = function() {
+      var data = {
+        text: this.note.text,
+        data: this.editor.dataForKey(this.note.uuid),
+        id: this.note.uuid,
+      }
+      _.merge(data, themeData());
+      this.postDataToExternalEditor(data);
+    }
+
     this.hasAvailableExtensions = function() {
       return extensionManager.extensionsInContextOfItem(this.note).length > 0;
     }
diff --git a/app/assets/javascripts/app/services/themeManager.js b/app/assets/javascripts/app/services/themeManager.js
index f619dabd5..a4698ea6a 100644
--- a/app/assets/javascripts/app/services/themeManager.js
+++ b/app/assets/javascripts/app/services/themeManager.js
@@ -1,14 +1,20 @@
 class ThemeManager {
 
-  constructor(modelManager, syncManager) {
-      this.syncManager = syncManager;
-      this.modelManager = modelManager;
+  constructor(modelManager, syncManager, $rootScope) {
+    this.syncManager = syncManager;
+    this.modelManager = modelManager;
+    this.$rootScope = $rootScope;
   }
 
   get themes() {
     return this.modelManager.itemsForContentType("SN|Theme");
   }
 
+  /*
+    activeTheme: computed property that returns saved theme
+    currentTheme: stored variable that allows other classes to watch changes
+  */
+
   get activeTheme() {
     var activeThemeId = localStorage.getItem("activeTheme");
     if(!activeThemeId) {
@@ -48,6 +54,9 @@ class ThemeManager {
     link.id = theme.uuid;
     document.getElementsByTagName("head")[0].appendChild(link);
     localStorage.setItem("activeTheme", theme.uuid);
+
+    this.currentTheme = theme;
+    this.$rootScope.$broadcast("theme-changed");
   }
 
   deactivateTheme(theme) {
@@ -57,6 +66,9 @@ class ThemeManager {
       element.disabled = true;
       element.parentNode.removeChild(element);
     }
+
+    this.currentTheme = null;
+    this.$rootScope.$broadcast("theme-changed");
   }
 
   isThemeActive(theme) {