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",
+      tabId: 'Quick Replies',
-      displayName: "Quick Replies",
+      displayName: 'Quick Replies',
-      component: require("./preferences-templates"),
+      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.shiftKey) {
+    if (event.key === 'Tab') {
-      return this.onTabSelectNextVar(editableNode, range, event, -1);
+      const range = DOMUtils.getRangeInScope(editableNode);
+      if (event.shiftKey) {
+        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) {
+  static onContentChanged(editableNode, selection) {
-    const selection = document.getSelection();
-
     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

@@ -10,7 +10,7 @@
 <body>
   <div id="container">
     <div id="background"></div>
-    
+
       <ul id="jump_to">
         <li>
           <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
@@ -18,67 +18,67 @@
           <div id="jump_wrapper">
           <div id="jump_page_wrapper">
             <div id="jump_page">
-              
+
-                
+
                 <a class="source" href="availability-draft-extension.html">
                   availability-draft-extension.coffee
                 </a>
-              
+
-                
+
                 <a class="source" href="calendar-button.html">
                   calendar-button.coffee
                 </a>
-              
+
-                
+
                 <a class="source" href="main.html">
                   main.coffee
                 </a>
-              
+
             </div>
           </div>
         </li>
       </ul>
-    
+
     <ul class="sections">
-        
+
           <li id="title">
               <div class="annotation">
                   <h1>availability-draft-extension.coffee</h1>
               </div>
           </li>
-        
+
-        
+
-        
+
         <li id="section-1">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-1">&#182;</a>
               </div>
-              
+
             </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>
-        
+
-        
+
         <li id="section-2">
             <div class="annotation">
-              
+
               <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>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-property">@finalizeSessionBeforeSending</span>: <span class="hljs-function"><span class="hljs-params">(session)</span> -&gt;</span>
     body = session.draft().body
     participants = session.draft().participants()
@@ -97,9 +97,9 @@ method. Here, we’re registering the events before we send the draft.</p>
 
 
 <span class="hljs-built_in">module</span>.exports = AvailabilityDraftExtension</pre></div></div>
-            
+
         </li>
-        
+
     </ul>
   </div>
 </body>

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

@@ -10,7 +10,7 @@
 <body>
   <div id="container">
     <div id="background"></div>
-    
+
       <ul id="jump_to">
         <li>
           <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
@@ -18,34 +18,34 @@
           <div id="jump_wrapper">
           <div id="jump_page_wrapper">
             <div id="jump_page">
-              
+
-                
+
                 <a class="source" href="availability-draft-extension.html">
                   availability-draft-extension.coffee
                 </a>
-              
+
-                
+
                 <a class="source" href="calendar-button.html">
                   calendar-button.coffee
                 </a>
-              
+
-                
+
                 <a class="source" href="main.html">
                   main.coffee
                 </a>
-              
+
             </div>
           </div>
         </li>
       </ul>
-    
+
     <ul class="sections">
-        
+
-        
+
-        
+
         <li id="section-1">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-1">&#182;</a>
               </div>
@@ -55,7 +55,7 @@ to email. Whoever receives your email with your availabilities can click on
 your availabilities to schedule an appointment with you.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>
 {ComponentRegistry,
  DatabaseStore,
@@ -70,20 +70,20 @@ AvailabilityDraftExtension = <span class="hljs-built_in">require</span> <span cl
 
 path = <span class="hljs-built_in">require</span>.resolve(<span class="hljs-string">"electron-safe-ipc/host"</span>)
 ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remote'</span>).<span class="hljs-built_in">require</span>(path)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-2">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-2">&#182;</a>
               </div>
               <p>A simple class for building HTML in code</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HtmlNode</span></span>
   <span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(name)</span> -&gt;</span>
     <span class="hljs-property">@name</span> = name
@@ -123,26 +123,26 @@ ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remo
 
 
 <span class="hljs-built_in">module</span>.exports =</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-3">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-3">&#182;</a>
               </div>
               <h2 id="package-methods">Package Methods</h2>
 
             </div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-4">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-4">&#182;</a>
               </div>
@@ -150,15 +150,15 @@ ipc = <span class="hljs-built_in">require</span>(<span class="hljs-string">'remo
 saved state using <code>serialize</code> it is provided.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">activate</span>: <span class="hljs-function"><span class="hljs-params">(<span class="hljs-property">@state</span>)</span> -&gt;</span></pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-5">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-5">&#182;</a>
               </div>
@@ -168,33 +168,33 @@ application, to sit along with the other React components already inside
 <code>&#39;Composer:ActionButton&#39;</code>.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    ComponentRegistry.register CalendarButton,
       <span class="hljs-attribute">role</span>: <span class="hljs-string">'Composer:ActionButton'</span></pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-6">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <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
+Composer by invoking <code>ExtensionRegistry.Composer.register</code> with a subclass of
-<code>DraftStoreExtension</code>.</p>
+<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>
-        
+
-        
+
         <li id="section-7">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-7">&#182;</a>
               </div>
@@ -202,15 +202,15 @@ DraftStore by invoking <code>DraftStore.registerExtension</code> with a subclass
 elsewhere in the package.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    ipc.<span class="hljs-literal">on</span> <span class="hljs-string">"fromRenderer"</span>, <span class="hljs-function"><span class="hljs-params">(args...)</span> =&gt;</span> <span class="hljs-property">@_onCalendarEvent</span>(args...)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-8">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-8">&#182;</a>
               </div>
@@ -219,15 +219,15 @@ You can return a state object that will be passed back to your package
 when it is re-activated.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">serialize</span>: <span class="hljs-function">-&gt;</span></pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-9">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-9">&#182;</a>
               </div>
@@ -237,24 +237,24 @@ watching any files, holding external resources, providing commands or
 subscribing to events, release them here.</p>
 
             </div>
-            
+
             <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>
-        
+
-        
+
         <li id="section-10">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-10">&#182;</a>
               </div>
               <h2 id="internal-methods">Internal Methods</h2>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>
   <span class="hljs-attribute">_onCalendarEvent</span>: <span class="hljs-function"><span class="hljs-params">(event,data)</span> -&gt;</span>
     <span class="hljs-keyword">switch</span> event
@@ -268,95 +268,95 @@ subscribing to events, release them here.</p>
       <span class="hljs-keyword">when</span> <span class="hljs-string">"available_times"</span>
         {draftClientId,eventData,events} = data
         <span class="hljs-property">@_addBlockToDraft</span>(events,draftClientId,eventData);</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-11">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-11">&#182;</a>
               </div>
               <p>Sends a message to the calendar window</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">_sendToCalendar</span>: <span class="hljs-function"><span class="hljs-params">(event,data)</span> -&gt;</span>
     ipc.send(<span class="hljs-string">"fromMain"</span>, event, JSON.stringify(data))</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-12">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-12">&#182;</a>
               </div>
               <p>Grabs the current draft text, appends the quick-schedule HTML block to it, and saves</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">_addBlockToDraft</span>: <span class="hljs-function"><span class="hljs-params">(events,draftClientId,eventData)</span> -&gt;</span></pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-13">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-13">&#182;</a>
               </div>
               <p>Obtain the session for the current draft.</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    DraftStore.sessionForClientId(draftClientId).<span class="hljs-keyword">then</span> (session) =&gt;
       draftHtml = session.draft().body
       text = QuotedHTMLParser.removeQuotedHTML(draftHtml)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-14">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-14">&#182;</a>
               </div>
               <p>add the block</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>      <span class="hljs-built_in">console</span>.log(<span class="hljs-property">@_createBlock</span>(events,eventData));
       text += <span class="hljs-string">"&lt;br/&gt;"</span>+<span class="hljs-property">@_createBlock</span>(events,eventData)+<span class="hljs-string">"&lt;br/&gt;"</span>;
 
       newDraftHtml = QuotedHTMLParser.appendQuotedHTML(text, draftHtml)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-15">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-15">&#182;</a>
               </div>
               <p>update the draft</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>      session.changes.add(<span class="hljs-attribute">body</span>: newDraftHtml)
       session.changes.commit()</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-16">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-16">&#182;</a>
               </div>
@@ -364,49 +364,49 @@ subscribing to events, release them here.</p>
 that can be inserted into an email message</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>  <span class="hljs-attribute">_createBlock</span>: <span class="hljs-function"><span class="hljs-params">(events,eventData)</span> -&gt;</span></pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-17">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-17">&#182;</a>
               </div>
               <p>Group the events by their <code>date</code>, to give one box per day</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    byDay = {}
     <span class="hljs-keyword">for</span> event <span class="hljs-keyword">in</span> events
       (byDay[event.date] ?= []).push(event)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-18">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-18">&#182;</a>
               </div>
               <p>Create an HtmlNode and write its attributes and child nodes</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    block = <span class="hljs-keyword">new</span> HtmlNode(<span class="hljs-string">"div"</span>)
       .attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"quick-schedule"</span>)
       .attr(<span class="hljs-string">"data-quick-schedule"</span>,JSON.stringify({</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-19">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-19">&#182;</a>
               </div>
@@ -414,7 +414,7 @@ that can be inserted into an email message</p>
 elsewhere (e.g. right before sending the draft, etc)</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>        <span class="hljs-attribute">event</span>: eventData
         <span class="hljs-attribute">times</span>: ({start,end,serverKey} = e <span class="hljs-keyword">for</span> e <span class="hljs-keyword">in</span> events)
       }), <span class="hljs-literal">true</span>)
@@ -448,20 +448,20 @@ elsewhere (e.g. right before sending the draft, etc)</p>
       .style(<span class="hljs-string">"display"</span>,<span class="hljs-string">"flex"</span>)
       .style(<span class="hljs-string">"flex-wrap"</span>,<span class="hljs-string">"wrap"</span>)
       .style(<span class="hljs-string">"padding"</span>,<span class="hljs-string">"10px 0"</span>)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-20">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-20">&#182;</a>
               </div>
               <p>Create one div per day, and write each time slot in as a line</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>    <span class="hljs-keyword">for</span> dayText,dayEvents <span class="hljs-keyword">of</span> byDay
       dayBlock = daysContainer.appendNode(<span class="hljs-string">"div"</span>)
         .attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"day-container"</span>)
@@ -482,35 +482,35 @@ elsewhere (e.g. right before sending the draft, etc)</p>
       times = dayBlock.appendNode(<span class="hljs-string">"div"</span>)
         .attr(<span class="hljs-string">"class"</span>,<span class="hljs-string">"day-times"</span>)
         .style(<span class="hljs-string">"padding"</span>,<span class="hljs-string">"5px"</span>)</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-21">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-21">&#182;</a>
               </div>
               <p>One line per time slot</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>      <span class="hljs-keyword">for</span> e <span class="hljs-keyword">in</span> dayEvents</pre></div></div>
-            
+
         </li>
-        
+
-        
+
         <li id="section-22">
             <div class="annotation">
-              
+
               <div class="pilwrap ">
                 <a class="pilcrow" href="#section-22">&#182;</a>
               </div>
               <p>The URL points to the event page with this time slot selected</p>
 
             </div>
-            
+
             <div class="content"><div class='highlight'><pre>        eventUrl = url.format({
           <span class="hljs-attribute">protocol</span>: <span class="hljs-string">"http"</span>
           <span class="hljs-attribute">host</span>: <span class="hljs-string">"localhost:8888"</span>
@@ -527,9 +527,9 @@ elsewhere (e.g. right before sending the draft, etc)</p>
             .appendText(e.time)
 
     <span class="hljs-keyword">return</span> block.toString()</pre></div></div>
-            
+
         </li>
-        
+
     </ul>
   </div>
 </body>

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

@@ -1,10 +1,9 @@
-
+{ComposerExtension} = require 'nylas-exports'
-{DraftStoreExtension} = 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
+    # Composer by invoking `ExtensionRegistry.Composer.register` with a subclass of
-    # `DraftStoreExtension`.
+    # `ComposerExtension`.
-    DraftStore.registerExtension AvailabilityDraftExtension
+    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')