Components system

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

@@ -1,5 +1,5 @@
 class BaseCtrl {
-  constructor($rootScope, $scope, syncManager, dbManager, analyticsManager) {
+  constructor($rootScope, $scope, syncManager, dbManager, analyticsManager, componentManager) {
     dbManager.openDatabase(null, function(){
       // new database, delete syncToken so that items can be refetched entirely from server
       syncManager.clearSyncToken();

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

@@ -17,7 +17,7 @@ angular.module('app.frontend')
       link:function(scope, elem, attrs, ctrl) {
         scope.$watch('ctrl.note', function(note, oldNote){
           if(note) {
-            ctrl.setNote(note, oldNote);
+            ctrl.noteDidChange(note, oldNote);
           }
         });
 
@@ -37,7 +37,10 @@ angular.module('app.frontend')
       }
     }
   })
-  .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager, editorManager, themeManager) {
+  .controller('EditorCtrl', function ($sce, $timeout, authManager, $rootScope, extensionManager, syncManager, modelManager, editorManager, themeManager, componentManager) {
+
+    this.componentManager = componentManager;
+    this.componentStack = [];
 
     $rootScope.$on("theme-changed", function(){
       this.postThemeToExternalEditor();
@@ -51,10 +54,76 @@ angular.module('app.frontend')
       this.loadTagsString();
     }.bind(this));
 
+
+    componentManager.registerHandler({identifier: "editor", areas: ["note-tags", "editor-stack"], activationHandler: function(component){
+
+      if(!component.active) {
+        return;
+      }
+
+      if(component.area === "note-tags") {
+        this.tagsComponent = component;
+      } else {
+        // stack
+        if(!_.find(this.componentStack, component)) {
+          this.componentStack.push(component);
+        }
+      }
+
+      $timeout(function(){
+        var iframe = componentManager.iframeForComponent(component);
+        if(iframe) {
+          iframe.onload = function() {
+            componentManager.registerComponentWindow(component, iframe.contentWindow);
+          }.bind(this);
+        }
+      }.bind(this));
+
+    }.bind(this), contextRequestHandler: function(component){
+      return this.note;
+    }.bind(this), actionHandler: function(component, action, data){
+      if(action === "set-size") {
+        var setSize = function(element, size) {
+          var widthString = typeof size.width === 'string' ? size.width : `${data.width}px`;
+          var heightString = typeof size.height === 'string' ? size.height : `${data.height}px`;
+          element.setAttribute("style", `width:${widthString}; height:${heightString}; `);
+        }
+
+        if(data.type === "content") {
+          var iframe = componentManager.iframeForComponent(component);
+          var width = data.width;
+          var height = data.height;
+          iframe.width  = width;
+          iframe.height = height;
+
+          setSize(iframe, data);
+        } else {
+          if(component.area == "note-tags") {
+            var container = document.getElementById("note-tags-component-container");
+            setSize(container, data);
+          } else {
+            var container = document.getElementById("component-" + component.uuid);
+            setSize(container, data);
+          }
+        }
+      }
+
+      else if(action === "associate-item") {
+        var tag = modelManager.findItem(data.item.uuid);
+        this.addTag(tag);
+      }
+
+      else if(action === "deassociate-item") {
+        var tag = modelManager.findItem(data.item.uuid);
+        this.removeTag(tag);
+      }
+
+    }.bind(this)});
+
     window.addEventListener("message", function(event){
       if(event.data.status) {
         this.postNoteToExternalEditor();
-      } else {
+      } else if(!event.data.api) {
         // console.log("Received message", event.data);
         var id = event.data.id;
         var text = event.data.text;
@@ -75,8 +144,16 @@ angular.module('app.frontend')
       }
     }.bind(this), false);
 
+    this.noteDidChange = function(note, oldNote) {
+      this.setNote(note, oldNote);
+      for(var component of this.componentStack) {
+        componentManager.setEventFlowForComponent(component, component.isActiveForItem(this.note));
+      }
+      componentManager.contextItemDidChangeInArea("note-tags");
+      componentManager.contextItemDidChangeInArea("editor-stack");
+    }
+
     this.setNote = function(note, oldNote) {
-      this.noteReady = false;
       var currentEditor = this.editor;
       this.editor = null;
       this.showExtensions = false;
@@ -90,6 +167,11 @@ angular.module('app.frontend')
       }.bind(this)
 
       var editor = this.editorForNote(note);
+      if(editor && !editor.systemEditor) {
+        // setting note to not ready will remove the editor from view in a flash,
+        // so we only want to do this if switching between external editors
+        this.noteReady = false;
+      }
       if(editor) {
         if(currentEditor !== editor) {
           // switch after timeout, so that note data isnt posted to current editor
@@ -299,6 +381,27 @@ angular.module('app.frontend')
       this.tagsString = string;
     }
 
+    this.addTag = function(tag) {
+      var tags = this.note.tags;
+      var strings = tags.map(function(_tag){
+        return _tag.title;
+      })
+      strings.push(tag.title);
+      this.updateTags()(this.note, strings);
+      this.loadTagsString();
+    }
+
+    this.removeTag = function(tag) {
+      var tags = this.note.tags;
+      var strings = tags.map(function(_tag){
+        return _tag.title;
+      }).filter(function(_tag){
+        return _tag !== tag.title;
+      })
+      this.updateTags()(this.note, strings);
+      this.loadTagsString();
+    }
+
     this.updateTagsFromTagsString = function($event) {
       $event.target.blur();
 
@@ -314,4 +417,40 @@ angular.module('app.frontend')
       this.updateTags()(this.note, tags);
     }
 
+    /* Components */
+
+    let alertKey = "displayed-component-disable-alert";
+
+    this.disableComponent = function(component) {
+      componentManager.disableComponentForItem(component, this.note);
+      componentManager.setEventFlowForComponent(component, false);
+      if(!localStorage.getItem(alertKey)) {
+        alert("This component will be disabled for this note. You can re-enable this component in the 'Menu' of the editor pane.");
+        localStorage.setItem(alertKey, true);
+      }
+    }
+
+    this.hasDisabledComponents = function() {
+      for(var component of this.componentStack) {
+        if(component.ignoreEvents) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    this.restoreDisabledComponents = function() {
+      var relevantComponents = this.componentStack.filter(function(component){
+        return component.ignoreEvents;
+      })
+
+      componentManager.enableComponentsForItem(relevantComponents, this.note);
+
+      for(var component of relevantComponents) {
+        componentManager.setEventFlowForComponent(component, true);
+        componentManager.contextItemDidChangeInArea("editor-stack");
+      }
+    }
+
   });

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

@@ -37,6 +37,7 @@ angular.module('app.frontend')
       themeManager.activateInitialTheme();
       $scope.$apply();
 
+
       syncManager.sync(null);
       // refresh every 30s
       setInterval(function () {
@@ -56,6 +57,7 @@ angular.module('app.frontend')
     */
 
     $scope.updateTagsForNote = function(note, stringTags) {
+      console.log("Updating tags", stringTags);
       var toRemove = [];
       for(var tag of note.tags) {
         if(stringTags.indexOf(tag.title) === -1) {

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

@@ -33,10 +33,39 @@ angular.module('app.frontend')
       }
     }
   })
-  .controller('TagsCtrl', function (modelManager, $timeout) {
+  .controller('TagsCtrl', function ($rootScope, modelManager, $timeout, componentManager) {
 
     var initialLoad = true;
 
+    componentManager.registerHandler({identifier: "tags", areas: ["tags-list"], activationHandler: function(component){
+      this.component = component;
+
+      if(component.active) {
+        $timeout(function(){
+          var iframe = document.getElementById("tags-list-iframe");
+          iframe.onload = function() {
+            componentManager.registerComponentWindow(this.component, iframe.contentWindow);
+          }.bind(this);
+        }.bind(this));
+      }
+
+    }.bind(this), contextRequestHandler: function(component){
+      return null;
+    }.bind(this), actionHandler: function(component, action, data){
+
+      if(action === "select-item") {
+        var tag = modelManager.findItem(data.item.uuid);
+        if(tag) {
+          this.selectTag(tag);
+        }
+      }
+
+      else if(action === "clear-selection") {
+        this.selectTag(this.allTag);
+      }
+
+    }.bind(this)});
+
     this.setAllTag = function(allTag) {
       this.selectTag(this.allTag);
     }

app/assets/javascripts/app/frontend/models/app/component.js

@@ -0,0 +1,59 @@
+class Component extends Item {
+
+  constructor(json_obj) {
+    super(json_obj);
+
+    if(!this.componentData) {
+      this.componentData = {};
+    }
+
+    if(!this.disassociatedItemIds) {
+      this.disassociatedItemIds = [];
+    }
+  }
+
+  mapContentToLocalProperties(contentObject) {
+    super.mapContentToLocalProperties(contentObject)
+    this.url = contentObject.url;
+    this.name = contentObject.name;
+
+    // the location in the view this component is located in. Valid values are currently tags-list, note-tags, and editor-stack`
+    this.area = contentObject.area;
+
+    this.permissions = contentObject.permissions;
+    this.active = contentObject.active;
+
+    // custom data that a component can store in itself
+    this.componentData = contentObject.componentData || {};
+
+    // items that have requested a component to be disabled in its context
+    this.disassociatedItemIds = contentObject.disassociatedItemIds || [];
+  }
+
+  structureParams() {
+    var params = {
+      url: this.url,
+      name: this.name,
+      area: this.area,
+      permissions: this.permissions,
+      active: this.active,
+      componentData: this.componentData,
+      disassociatedItemIds: this.disassociatedItemIds
+    };
+
+    _.merge(params, super.structureParams());
+    return params;
+  }
+
+  toJSON() {
+    return {uuid: this.uuid}
+  }
+
+  get content_type() {
+    return "SN|Component";
+  }
+
+  isActiveForItem(item) {
+    return this.disassociatedItemIds.indexOf(item.uuid) === -1;
+  }
+}

app/assets/javascripts/app/frontend/models/local/itemParams.js

@@ -22,30 +22,26 @@ class ItemParams {
   }
 
   paramsForSync() {
-    return this.__params(null, false);
+    return this.__params();
   }
 
   __params() {
     let encryptionVersion = "001";
 
-    var itemCopy = _.cloneDeep(this.item);
-
     console.assert(!this.item.dummy, "Item is dummy, should not have gotten here.", this.item.dummy)
 
     var params = {uuid: this.item.uuid, content_type: this.item.content_type, deleted: this.item.deleted, created_at: this.item.created_at};
 
     if(this.keys && !this.item.doNotEncrypt()) {
-      EncryptionHelper.encryptItem(itemCopy, this.keys, encryptionVersion);
-      params.content = itemCopy.content;
-      params.enc_item_key = itemCopy.enc_item_key;
-      if(encryptionVersion === "001") {
-        params.auth_hash = itemCopy.auth_hash;
-      } else {
+      var encryptedParams = EncryptionHelper.encryptItem(this.item, this.keys, encryptionVersion);
+      _.merge(params, encryptedParams);
+
+      if(encryptionVersion !== "001") {
         params.auth_hash = null;
       }
     }
     else {
-      params.content = this.forExportFile ? itemCopy.createContentJSONFromProperties() : "000" + Neeto.crypto.base64(JSON.stringify(itemCopy.createContentJSONFromProperties()));
+      params.content = this.forExportFile ? this.item.createContentJSONFromProperties() : "000" + Neeto.crypto.base64(JSON.stringify(this.item.createContentJSONFromProperties()));
       if(!this.forExportFile) {
         params.enc_item_key = null;
         params.auth_hash = null;

app/assets/javascripts/app/services/componentManager.js

@@ -0,0 +1,499 @@
+class ComponentManager {
+
+  constructor($rootScope, modelManager, syncManager, themeManager, $timeout, $compile) {
+    this.$compile = $compile;
+    this.$rootScope = $rootScope;
+    this.modelManager = modelManager;
+    this.syncManager = syncManager;
+    this.themeManager = themeManager;
+    this.timeout = $timeout;
+    this.streamObservers = [];
+    this.contextStreamObservers = [];
+    this.activeComponents = [];
+
+    this.permissionDialogs = [];
+
+    this.handlers = [];
+
+    $rootScope.$on("theme-changed", function(){
+      this.postThemeToComponents();
+    }.bind(this))
+
+    window.addEventListener("message", function(event){
+      if(this.loggingEnabled) {
+        console.log("Web app: received message", event);
+      }
+      this.handleMessage(this.componentForSessionKey(event.data.sessionKey), event.data);
+    }.bind(this), false);
+
+    this.modelManager.addItemSyncObserver("component-manager", "*", function(items) {
+
+      var syncedComponents = items.filter(function(item){return item.content_type === "SN|Component" });
+      for(var component of syncedComponents) {
+        var activeComponent = _.find(this.activeComponents, {uuid: component.uuid});
+        if(component.active && !activeComponent) {
+          this.activateComponent(component);
+        } else if(!component.active && activeComponent) {
+          this.deactivateComponent(component);
+        }
+      }
+
+      for(let observer of this.streamObservers) {
+        var relevantItems = items.filter(function(item){
+          return observer.contentTypes.indexOf(item.content_type) !== -1;
+        })
+
+        var requiredPermissions = [
+          {
+            name: "stream-items",
+            content_types: observer.contentTypes.sort()
+          }
+        ];
+
+        this.runWithPermissions(observer.component, requiredPermissions, observer.originalMessage.permissions, function(){
+          this.sendItemsInReply(observer.component, relevantItems, observer.originalMessage);
+        }.bind(this))
+      }
+
+      var requiredContextPermissions = [
+        {
+          name: "stream-context-item"
+        }
+      ];
+      for(let observer of this.contextStreamObservers) {
+        this.runWithPermissions(observer.component, requiredContextPermissions, observer.originalMessage.permissions, function(){
+          for(let handler of this.handlers) {
+            if(handler.areas.includes(observer.component.area) === false) {
+              continue;
+            }
+            var itemInContext = handler.contextRequestHandler(observer.component);
+            if(itemInContext) {
+              var matchingItem = _.find(items, {uuid: itemInContext.uuid});
+              if(matchingItem) {
+                this.sendContextItemInReply(observer.component, matchingItem, observer.originalMessage);
+              }
+            }
+          }
+        }.bind(this))
+      }
+
+    }.bind(this))
+  }
+
+  postThemeToComponents() {
+    for(var component of this.components) {
+      if(!component.active || !component.window) {
+        continue;
+      }
+      this.postThemeToComponent(component);
+    }
+  }
+
+  postThemeToComponent(component) {
+    var data = {
+      themes: [this.themeManager.currentTheme ? this.themeManager.currentTheme.url : null]
+    }
+
+    this.sendMessageToComponent(component, {action: "themes", data: data})
+  }
+
+  contextItemDidChangeInArea(area) {
+    for(let handler of this.handlers) {
+      if(handler.areas.includes(area) === false) {
+        continue;
+      }
+      var observers = this.contextStreamObservers.filter(function(observer){
+        return observer.component.area === area;
+      })
+
+      for(let observer of observers) {
+        var itemInContext = handler.contextRequestHandler(observer.component);
+        this.sendContextItemInReply(observer.component, itemInContext, observer.originalMessage);
+      }
+    }
+  }
+
+  jsonForItem(item) {
+    var params = {uuid: item.uuid, content_type: item.content_type, created_at: item.created_at, updated_at: item.updated_at, deleted: item.deleted};
+    params.content = item.createContentJSONFromProperties();
+    return params;
+  }
+
+  sendItemsInReply(component, items, message) {
+    var response = {items: {}};
+    var mapped = items.map(function(item) {
+      return this.jsonForItem(item);
+    }.bind(this));
+
+    response.items = mapped;
+    this.replyToMessage(component, message, response);
+  }
+
+  sendContextItemInReply(component, item, originalMessage) {
+    var response = {item: this.jsonForItem(item)};
+    this.replyToMessage(component, originalMessage, response);
+  }
+
+  get components() {
+    return this.modelManager.itemsForContentType("SN|Component");
+  }
+
+  componentsForStack(stack) {
+    return this.components.filter(function(component){
+      return component.area === stack;
+    })
+  }
+
+  componentForSessionKey(key) {
+    return _.find(this.components, {sessionKey: key});
+  }
+
+  handleMessage(component, message) {
+
+    if(!component) {
+      if(this.loggingEnabled) {
+        console.log("Component not defined, returning");
+      }
+      return;
+    }
+
+    /**
+    Possible Messages:
+    set-size
+    stream-items
+    stream-context-item
+    save-items
+    select-item
+    associate-item
+    deassociate-item
+    clear-selection
+    create-item
+    delete-items
+    set-component-data
+    */
+
+    if(message.action === "stream-items") {
+      this.handleStreamItemsMessage(component, message);
+    }
+
+    else if(message.action === "stream-context-item") {
+      this.handleStreamContextItemMessage(component, message);
+    }
+
+    else if(message.action === "set-component-data") {
+      component.componentData = message.data.componentData;
+      component.setDirty(true);
+      this.syncManager.sync();
+    }
+
+    else if(message.action === "delete-items") {
+      var items = message.data.items;
+      var noun = items.length == 1 ? "item" : "items";
+      if(confirm(`Are you sure you want to delete ${items.length} ${noun}?`)) {
+        for(var item of items) {
+          var model = this.modelManager.findItem(item.uuid);
+          this.modelManager.setItemToBeDeleted(model);
+        }
+
+        this.syncManager.sync();
+      }
+    }
+
+    else if(message.action === "create-item") {
+      var item = this.modelManager.createItem(message.data.item);
+      this.modelManager.addItem(item);
+      item.setDirty(true);
+      this.syncManager.sync();
+      this.replyToMessage(component, message, {item: this.jsonForItem(item)})
+    }
+
+    else if(message.action === "save-items") {
+      var responseItems = message.data.items;
+      var localItems = this.modelManager.mapResponseItemsToLocalModels(responseItems);
+
+      for(var item of localItems) {
+        var responseItem = _.find(responseItems, {uuid: item.uuid});
+        _.merge(item.content, responseItem.content);
+        item.setDirty(true);
+      }
+      this.syncManager.sync();
+    }
+
+    for(let handler of this.handlers) {
+      if(handler.areas.includes(component.area)) {
+        this.timeout(function(){
+          handler.actionHandler(component, message.action, message.data);
+        })
+      }
+    }
+  }
+
+  handleStreamItemsMessage(component, message) {
+    var requiredPermissions = [
+      {
+        name: "stream-items",
+        content_types: message.data.content_types.sort()
+      }
+    ];
+
+    this.runWithPermissions(component, requiredPermissions, message.permissions, function(){
+      if(!_.find(this.streamObservers, {identifier: component.url})) {
+        // for pushing laster as changes come in
+        this.streamObservers.push({
+          identifier: component.url,
+          component: component,
+          originalMessage: message,
+          contentTypes: message.data.content_types
+        })
+      }
+
+
+      // push immediately now
+      var items = [];
+      for(var contentType of message.data.content_types) {
+        items = items.concat(this.modelManager.itemsForContentType(contentType));
+      }
+      this.sendItemsInReply(component, items, message);
+    }.bind(this));
+  }
+
+  handleStreamContextItemMessage(component, message) {
+
+    var requiredPermissions = [
+      {
+        name: "stream-context-item"
+      }
+    ];
+
+    this.runWithPermissions(component, requiredPermissions, message.permissions, function(){
+      if(!_.find(this.contextStreamObservers, {identifier: component.url})) {
+        // for pushing laster as changes come in
+        this.contextStreamObservers.push({
+          identifier: component.url,
+          component: component,
+          originalMessage: message
+        })
+      }
+
+      // push immediately now
+      for(let handler of this.handlers) {
+        if(handler.areas.includes(component.area) === false) {
+          continue;
+        }
+        var itemInContext = handler.contextRequestHandler(component);
+        this.sendContextItemInReply(component, itemInContext, message);
+      }
+    }.bind(this))
+  }
+
+  runWithPermissions(component, requiredPermissions, requestedPermissions, runFunction) {
+
+    var acquiredPermissions = component.permissions;
+
+    var requestedMatchesRequired = true;
+
+    for(var required of requiredPermissions) {
+      var matching = _.find(requestedPermissions, required);
+      if(!matching) {
+        requestedMatchesRequired = false;
+        break;
+      }
+    }
+
+    if(!requestedMatchesRequired) {
+      // Error with Component permissions request
+      console.error("You are requesting permissions", requestedPermissions, "when you need to be requesting", requiredPermissions, ". Component:", component);
+      return;
+    }
+
+    if(!component.permissions) {
+      component.permissions = [];
+    }
+
+    var acquiredMatchesRequested = angular.toJson(component.permissions.sort()) === angular.toJson(requestedPermissions.sort());
+
+    if(!acquiredMatchesRequested) {
+      this.promptForPermissions(component, requestedPermissions, function(approved){
+        if(approved) {
+          runFunction();
+        }
+      });
+    } else {
+      runFunction();
+    }
+  }
+
+  promptForPermissions(component, requestedPermissions, callback) {
+    // since these calls are asyncronous, multiple dialogs may be requested at the same time. We only want to present one and trigger all callbacks based on one modal result
+    var existingDialog = _.find(this.permissionDialogs, {component: component});
+
+    component.trusted = component.url.startsWith("https://standardnotes.org") || component.url.startsWith("https://extensions.standardnotes.org");
+    var scope = this.$rootScope.$new(true);
+    scope.component = component;
+    scope.permissions = requestedPermissions;
+    scope.actionBlock = callback;
+
+    scope.callback = function(approved) {
+      if(approved) {
+        component.permissions = requestedPermissions;
+        component.setDirty(true);
+        this.syncManager.sync();
+      }
+
+      for(var existing of this.permissionDialogs) {
+        if(existing.component === component && existing.actionBlock) {
+          existing.actionBlock(approved);
+        }
+      }
+
+      this.permissionDialogs = this.permissionDialogs.filter(function(dialog){
+        return dialog.component !== component;
+      })
+
+    }.bind(this);
+
+    this.permissionDialogs.push(scope);
+
+    if(!existingDialog) {
+      var el = this.$compile( "<permissions-modal component='component' permissions='permissions' callback='callback' class='permissions-modal'></permissions-modal>" )(scope);
+      angular.element(document.body).append(el);
+    } else {
+      console.log("Existing dialog, not presenting.");
+    }
+  }
+
+  replyToMessage(component, originalMessage, replyData) {
+    var reply = {
+      action: "reply",
+      original: originalMessage,
+      data: replyData
+    }
+
+    this.sendMessageToComponent(component, reply);
+  }
+
+  sendMessageToComponent(component, message) {
+    if(component.ignoreEvents && message.action !== "component-registered") {
+      if(this.loggingEnabled) {
+        console.log("Component disabled for current item, not sending any messages.");
+      }
+      return;
+    }
+    component.window.postMessage(message, "*");
+  }
+
+  installComponent(url) {
+    var name = getParameterByName("name", url);
+    var area = getParameterByName("area", url);
+    var component = this.modelManager.createItem({
+      content_type: "SN|Component",
+      url: url,
+      name: name,
+      area: area
+    })
+
+    this.modelManager.addItem(component);
+    component.setDirty(true);
+    this.syncManager.sync();
+  }
+
+  activateComponent(component) {
+    var didChange = component.active != true;
+
+    component.active = true;
+    for(var handler of this.handlers) {
+      if(handler.areas.includes(component.area)) {
+        handler.activationHandler(component);
+      }
+    }
+
+    if(didChange) {
+      component.setDirty(true);
+      this.syncManager.sync();
+    }
+
+    this.activeComponents.push(component);
+  }
+
+  registerHandler(handler) {
+    this.handlers.push(handler);
+  }
+
+  // Called by other views when the iframe is ready
+  registerComponentWindow(component, componentWindow) {
+    component.window = componentWindow;
+    component.sessionKey = Neeto.crypto.generateUUID();
+    this.sendMessageToComponent(component, {action: "component-registered", sessionKey: component.sessionKey, componentData: component.componentData});
+    this.postThemeToComponent(component);
+  }
+
+  deactivateComponent(component) {
+    var didChange = component.active != false;
+    component.active = false;
+    component.sessionKey = null;
+
+    for(var handler of this.handlers) {
+      if(handler.areas.includes(component.area)) {
+        handler.activationHandler(component);
+      }
+    }
+
+    if(didChange) {
+      component.setDirty(true);
+      this.syncManager.sync();
+    }
+
+    _.pull(this.activeComponents, component);
+
+    this.streamObservers = this.streamObservers.filter(function(o){
+      return o.component !== component;
+    })
+
+    this.contextStreamObservers = this.contextStreamObservers.filter(function(o){
+      return o.component !== component;
+    })
+  }
+
+  deleteComponent(component) {
+    this.modelManager.setItemToBeDeleted(component);
+    this.syncManager.sync();
+  }
+
+  isComponentActive(component) {
+    return component.active;
+  }
+
+  disableComponentForItem(component, item) {
+    if(component.disassociatedItemIds.indexOf(item.uuid) !== -1) {
+      return;
+    }
+    component.disassociatedItemIds.push(item.uuid);
+    component.setDirty(true);
+    this.syncManager.sync();
+  }
+
+  enableComponentsForItem(components, item) {
+    for(var component of components) {
+      _.pull(component.disassociatedItemIds, item.uuid);
+      component.setDirty(true);
+    }
+    this.syncManager.sync();
+  }
+
+  setEventFlowForComponent(component, on) {
+    component.ignoreEvents = !on;
+  }
+
+  iframeForComponent(component) {
+    for(var frame of document.getElementsByTagName("iframe")) {
+      var componentId = frame.dataset.componentId;
+      if(componentId === component.uuid) {
+        return frame;
+      }
+    }
+  }
+
+
+}
+
+angular.module('app.frontend').service('componentManager', ComponentManager);

app/assets/javascripts/app/services/directives/functional/permissionsModal.js

@@ -0,0 +1,69 @@
+class PermissionsModal {
+
+  constructor() {
+    this.restrict = "E";
+    this.templateUrl = "frontend/directives/permissions-modal.html";
+    this.scope = {
+      show: "=",
+      component: "=",
+      permissions: "=",
+      callback: "="
+    };
+  }
+
+  link($scope, el, attrs) {
+
+    $scope.dismiss = function() {
+      el.remove();
+    }
+
+    $scope.accept = function() {
+      $scope.callback(true);
+      $scope.dismiss();
+    }
+
+    $scope.deny = function() {
+      $scope.callback(false);
+      $scope.dismiss();
+    }
+
+    $scope.formattedPermissions = $scope.permissions.map(function(permission){
+      if(permission.name === "stream-items") {
+        var title = "Access to ";
+        var types = permission.content_types.map(function(type){
+          return (type + "s").toLowerCase();
+        })
+        var typesString = "";
+        var separator = ", ";
+
+        for(var i = 0;i < types.length;i++) {
+          var type = types[i];
+          if(i == 0) {
+            // first element
+            typesString = typesString + type;
+          } else if(i == types.length - 1) {
+            // last element
+            if(types.length > 2) {
+              typesString += separator + "and " + typesString;
+            } else if(types.length == 2) {
+              typesString = typesString + " and " + type;
+            }
+          } else {
+            typesString += separator + type;
+          }
+        }
+
+        return title + typesString;
+      } else if(permission.name === "stream-context-item") {
+        var mapping = {
+          "editor-stack" : "working note",
+          "note-tags" : "working note"
+        }
+        return "Access to " + mapping[$scope.component.area];
+      }
+    })
+  }
+
+}
+
+angular.module('app.frontend').directive('permissionsModal', () => new PermissionsModal);

app/assets/javascripts/app/services/directives/views/globalExtensionsMenu.js

@@ -7,7 +7,7 @@ class GlobalExtensionsMenu {
     };
   }
 
-  controller($scope, extensionManager, syncManager, modelManager, themeManager, editorManager) {
+  controller($scope, extensionManager, syncManager, modelManager, themeManager, editorManager, componentManager) {
     'ngInject';
 
     $scope.formData = {};
@@ -15,6 +15,7 @@ class GlobalExtensionsMenu {
     $scope.extensionManager = extensionManager;
     $scope.themeManager = themeManager;
     $scope.editorManager = editorManager;
+    $scope.componentManager = componentManager;
 
     $scope.selectedAction = function(action, extension) {
       extensionManager.executeAction(action, extension, null, function(response){
@@ -69,6 +70,21 @@ class GlobalExtensionsMenu {
       editorManager.removeDefaultEditor(editor);
     }
 
+
+    // Components
+
+    $scope.revokePermissions = function(component) {
+      component.permissions = [];
+      component.setDirty(true);
+      syncManager.sync();
+    }
+
+    $scope.deleteComponent = function(component) {
+      if(confirm("Are you sure you want to delete this component?")) {
+        componentManager.deleteComponent(component);
+      }
+    }
+
     // Installation
 
     $scope.submitInstallLink = function() {
@@ -93,7 +109,11 @@ class GlobalExtensionsMenu {
           $scope.handleEditorLink(link, completion);
         } else if(link.indexOf(".css") != -1 || type == "theme") {
           $scope.handleThemeLink(link, completion);
-        } else {
+        } else if(type == "component") {
+          $scope.handleComponentLink(link, completion);
+        }
+
+        else {
           $scope.handleActionLink(link, completion);
         }
       }
@@ -112,6 +132,11 @@ class GlobalExtensionsMenu {
       completion();
     }
 
+    $scope.handleComponentLink = function(link, completion) {
+      componentManager.installComponent(link);
+      completion();
+    }
+
     $scope.handleActionLink = function(link, completion) {
       if(link) {
         extensionManager.addExtension(link, function(response){

app/assets/javascripts/app/services/helpers/encryptionHelper.js

@@ -17,13 +17,14 @@ class EncryptionHelper {
   }
 
   static encryptItem(item, keys, version) {
+    var params = {};
     // encrypt item key
     var item_key = Neeto.crypto.generateRandomEncryptionKey();
     if(version === "001") {
       // legacy
-      item.enc_item_key = Neeto.crypto.encryptText(item_key, keys.mk, null);
+      params.enc_item_key = Neeto.crypto.encryptText(item_key, keys.mk, null);
     } else {
-      item.enc_item_key = this._private_encryptString(item_key, keys.encryptionKey, keys.authKey, version);
+      params.enc_item_key = this._private_encryptString(item_key, keys.encryptionKey, keys.authKey, version);
     }
 
     // encrypt content
@@ -32,10 +33,11 @@ class EncryptionHelper {
     var ciphertext = this._private_encryptString(JSON.stringify(item.createContentJSONFromProperties()), ek, ak, version);
     if(version === "001") {
       var authHash = Neeto.crypto.hmac256(ciphertext, ak);
-      item.auth_hash = authHash;
+      params.auth_hash = authHash;
     }
 
-    item.content = ciphertext;
+    params.content = ciphertext;
+    return params;
   }
 
   static encryptionComponentsFromString(string, baseKey, encryptionKey, authKey) {

app/assets/javascripts/app/services/modelManager.js

@@ -8,7 +8,7 @@ class ModelManager {
     this.itemChangeObservers = [];
     this.items = [];
     this._extensions = [];
-    this.acceptableContentTypes = ["Note", "Tag", "Extension", "SN|Editor", "SN|Theme"];
+    this.acceptableContentTypes = ["Note", "Tag", "Extension", "SN|Editor", "SN|Theme", "SN|Component"];
   }
 
   get allItems() {
@@ -71,29 +71,34 @@ class ModelManager {
   }
 
   mapResponseItemsToLocalModelsOmittingFields(items, omitFields) {
-    var models = [], processedObjects = [];
+    var models = [], processedObjects = [], allModels = [];
 
     // first loop should add and process items
     for (var json_obj of items) {
       json_obj = _.omit(json_obj, omitFields || [])
       var item = this.findItem(json_obj["uuid"]);
+
+      _.omit(json_obj, omitFields);
+
+      if(item) {
+        item.updateFromJSON(json_obj);
+      }
+
       if(json_obj["deleted"] == true || !_.includes(this.acceptableContentTypes, json_obj["content_type"])) {
         if(item) {
+          allModels.push(item);
           this.removeItemLocally(item)
         }
         continue;
       }
 
-      _.omit(json_obj, omitFields);
-
       if(!item) {
         item = this.createItem(json_obj);
-      } else {
-        item.updateFromJSON(json_obj);
       }
 
       this.addItem(item);
 
+      allModels.push(item);
       models.push(item);
       processedObjects.push(json_obj);
     }
@@ -106,14 +111,14 @@ class ModelManager {
       }
     }
 
-    this.notifySyncObserversOfModels(models);
+    this.notifySyncObserversOfModels(allModels);
 
     return models;
   }
 
   notifySyncObserversOfModels(models) {
     for(var observer of this.itemSyncObservers) {
-      var relevantItems = models.filter(function(item){return item.content_type == observer.type});
+      var relevantItems = models.filter(function(item){return item.content_type == observer.type || observer.type == "*"});
       if(relevantItems.length > 0) {
         observer.callback(relevantItems);
       }
@@ -144,7 +149,11 @@ class ModelManager {
       item = new Editor(json_obj);
     } else if(json_obj.content_type == "SN|Theme") {
       item = new Theme(json_obj);
-    }  else {
+    } else if(json_obj.content_type == "SN|Component") {
+      item = new Component(json_obj);
+    }
+
+    else {
       item = new Item(json_obj);
     }