update(examples): Update examples to use new ExtensionRegistry api

- Remove deprecated use of DraftStoreExtension and DraftStore.register

examples/N1-Composer-Templates/lib/main.es6

@@ -1,29 +1,27 @@
-import {PreferencesUIStore, ComponentRegistry, DraftStore} from 'nylas-exports';
+import {PreferencesUIStore, ComponentRegistry, ExtensionRegistry} from 'nylas-exports';
 import TemplatePicker from './template-picker';
 import TemplateStatusBar from './template-status-bar';
-import Extension from './template-draft-extension';
+import TemplateComposerExtension from './template-composer-extension';
 
 module.exports = {
-  item: null, // The DOM item the main React component renders into
-
   activate(state = {}) {
     this.state = state;
     this.preferencesTab = new PreferencesUIStore.TabItem({
-      tabId: "Quick Replies",
-      displayName: "Quick Replies",
-      component: require("./preferences-templates"),
+      tabId: 'Quick Replies',
+      displayName: 'Quick Replies',
+      component: require('./preferences-templates'),
     });
     ComponentRegistry.register(TemplatePicker, {role: 'Composer:ActionButton'});
     ComponentRegistry.register(TemplateStatusBar, {role: 'Composer:Footer'});
     PreferencesUIStore.registerPreferencesTab(this.preferencesTab);
-    return DraftStore.registerExtension(Extension);
+    ExtensionRegistry.Composer.register(TemplateComposerExtension);
   },
 
   deactivate() {
     ComponentRegistry.unregister(TemplatePicker);
     ComponentRegistry.unregister(TemplateStatusBar);
     PreferencesUIStore.unregisterPreferencesTab(this.preferencesTab.sectionId);
-    return DraftStore.unregisterExtension(Extension);
+    ExtensionRegistry.Composer.unregister(TemplateComposerExtension);
   },
 
   serialize() { return this.state; },

examples/N1-Composer-Templates/lib/preferences-templates.cjsx

@@ -1,13 +1,13 @@
 _ = require 'underscore'
 {Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
 {AccountStore, Utils, React} = require 'nylas-exports'
-TemplateStore = require './template-store';
+TemplateStore = require './template-store'
 
 class PreferencesTemplates extends React.Component
   @displayName: 'PreferencesTemplates'
 
   constructor: (@props) ->
-    TemplateStore.init();
+    TemplateStore.init()
     @_templateSaveQueue = {}
 
     @state =

examples/N1-Composer-Templates/lib/template-composer-extension.es6

@@ -1,6 +1,6 @@
-import {DraftStoreExtension} from 'nylas-exports';
+import {DOMUtils, ComposerExtension} from 'nylas-exports';
 
-class TemplatesDraftStoreExtension extends DraftStoreExtension {
+class TemplatesComposerExtension extends ComposerExtension {
 
   static warningsForSending(draft) {
     const warnings = [];
@@ -18,7 +18,7 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
     }
   }
 
-  static onMouseUp(editableNode, range) {
+  static onClick(editableNode, range) {
     const ref = range.startContainer;
     let parent = (ref != null) ? ref.parentNode : undefined;
     let parentCodeNode = null;
@@ -42,11 +42,14 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
     }
   }
 
-  static onTabDown(editableNode, range, event) {
+  static onTabDown(editableNode, selection, event) {
+    if (event.key === 'Tab') {
+      const range = DOMUtils.getRangeInScope(editableNode);
       if (event.shiftKey) {
-      return this.onTabSelectNextVar(editableNode, range, event, -1);
+        this.onTabSelectNextVar(editableNode, range, event, -1);
+      }
+      this.onTabSelectNextVar(editableNode, range, event, 1);
     }
-    return this.onTabSelectNextVar(editableNode, range, event, 1);
   }
 
   static onTabSelectNextVar(editableNode, range, event, delta) {
@@ -96,9 +99,7 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
     }
   }
 
-  static onInput(editableNode) {
-    const selection = document.getSelection();
-
+  static onContentChanged(editableNode, selection) {
     const isWithinNode = (node)=> {
       let test = selection.baseNode;
       while (test !== editableNode) {
@@ -125,4 +126,4 @@ class TemplatesDraftStoreExtension extends DraftStoreExtension {
 }
 
 
-module.exports = TemplatesDraftStoreExtension;
+module.exports = TemplatesComposerExtension;

examples/N1-Quick-Schedule/docs/availability-composer-extension.html

@@ -59,10 +59,10 @@
             </div>
 
             <div class="content"><div class='highlight'><pre>
-{DraftStoreExtension} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>
+{ComposerExtension} = <span class="hljs-built_in">require</span> <span class="hljs-string">'nylas-exports'</span>
 request = <span class="hljs-built_in">require</span> <span class="hljs-string">'request'</span>
 
-<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AvailabilityDraftExtension</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">DraftStoreExtension</span></span></pre></div></div>
+<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AvailabilityDraftExtension</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ComposerExtension</span></span></pre></div></div>
 
         </li>
 
@@ -73,7 +73,7 @@ request = <span class="hljs-built_in">require</span> <span class="hljs-string">'
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-2">&#182;</a>
               </div>
-              <p>When subclassing the DraftStoreExtension, you can add your own custom logic
+              <p>When subclassing the ComposerExtension, you can add your own custom logic
 to execute before a draft is sent in the @finalizeSessionBeforeSending
 method. Here, we’re registering the events before we send the draft.</p>
 

examples/N1-Quick-Schedule/docs/main.html

@@ -182,12 +182,12 @@ application, to sit along with the other React components already inside
                 <a class="pilcrow" href="#section-6">&#182;</a>
               </div>
               <p>You can add your own extensions to the N1 Composer view and the original
-DraftStore by invoking <code>DraftStore.registerExtension</code> with a subclass of
-<code>DraftStoreExtension</code>.</p>
+Composer by invoking <code>ExtensionRegistry.Composer.register</code> with a subclass of
+<code>ComposerExtension</code>.</p>
 
             </div>
 
-            <div class="content"><div class='highlight'><pre>    DraftStore.registerExtension AvailabilityDraftExtension</pre></div></div>
+            <div class="content"><div class='highlight'><pre>    ExtensionRegistry.Composer.register AvailabilityDraftExtension</pre></div></div>
 
         </li>
 
@@ -240,7 +240,7 @@ subscribing to events, release them here.</p>
 
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">deactivate</span>: <span class="hljs-function">-&gt;</span>
     ComponentRegistry.unregister CalendarButton
-    DraftStore.unregister AvailabilityDraftExtension</pre></div></div>
+    ExtensionRegistry.Composer.unregister AvailabilityDraftExtension</pre></div></div>
 
         </li>
 

examples/N1-Quick-Schedule/lib/availability-composer-extension.cjsx

@@ -1,10 +1,9 @@
-
-{DraftStoreExtension} = require 'nylas-exports'
+{ComposerExtension} = require 'nylas-exports'
 request = require 'request'
 
-class AvailabilityDraftExtension extends DraftStoreExtension
+class AvailabilityComposerExtension extends ComposerExtension
 
-  # When subclassing the DraftStoreExtension, you can add your own custom logic
+  # When subclassing the ComposerExtension, you can add your own custom logic
   # to execute before a draft is sent in the @finalizeSessionBeforeSending
   # method. Here, we're registering the events before we send the draft.
   @finalizeSessionBeforeSending: (session) ->
@@ -24,4 +23,4 @@ class AvailabilityDraftExtension extends DraftStoreExtension
         console.log(error,resp,data)
 
 
-module.exports = AvailabilityDraftExtension
+module.exports = AvailabilityComposerExtension

examples/N1-Quick-Schedule/lib/main.cjsx

@@ -8,13 +8,14 @@
  DatabaseStore,
  DraftStore,
  QuotedHTMLParser,
+ ExtensionRegistry,
  Event} = require 'nylas-exports'
 
 url = require('url')
 qs = require("querystring")
 
 CalendarButton = require './calendar-button'
-AvailabilityDraftExtension = require './availability-draft-extension'
+AvailabilityComposerExtension = require './availability-composer-extension'
 
 protocol = require('remote').require('protocol')
 
@@ -73,9 +74,9 @@ module.exports =
       role: 'Composer:ActionButton'
 
     # You can add your own extensions to the N1 Composer view and the original
-    # DraftStore by invoking `DraftStore.registerExtension` with a subclass of
-    # `DraftStoreExtension`.
-    DraftStore.registerExtension AvailabilityDraftExtension
+    # Composer by invoking `ExtensionRegistry.Composer.register` with a subclass of
+    # `ComposerExtension`.
+    ExtensionRegistry.Composer.register AvailabilityComposerExtension
 
     # Register a protocol that allows the calendar window to pass data back to the plugin
     # with web requests
@@ -106,7 +107,7 @@ module.exports =
   #
   deactivate: ->
     ComponentRegistry.unregister CalendarButton
-    DraftStore.unregisterExtension AvailabilityDraftExtension
+    ExtensionRegistry.Composer.unregister AvailabilityComposerExtension
     if NylasEnv.isMainWindow()
       protocol.unregisterProtocol('quick-schedule')