diff --git a/examples/N1-Composer-Templates/lib/main.es6 b/examples/N1-Composer-Templates/lib/main.es6 index 43d762891..f0fdf1626 100644 --- a/examples/N1-Composer-Templates/lib/main.es6 +++ b/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; }, diff --git a/examples/N1-Composer-Templates/lib/preferences-templates.cjsx b/examples/N1-Composer-Templates/lib/preferences-templates.cjsx index 8cfffe576..1435d16f1 100644 --- a/examples/N1-Composer-Templates/lib/preferences-templates.cjsx +++ b/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 = diff --git a/examples/N1-Composer-Templates/lib/template-draft-extension.es6 b/examples/N1-Composer-Templates/lib/template-composer-extension.es6 similarity index 85% rename from examples/N1-Composer-Templates/lib/template-draft-extension.es6 rename to examples/N1-Composer-Templates/lib/template-composer-extension.es6 index 2ace59802..e44d2a8d5 100644 --- a/examples/N1-Composer-Templates/lib/template-draft-extension.es6 +++ b/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) { - if (event.shiftKey) { - return this.onTabSelectNextVar(editableNode, range, event, -1); + static onTabDown(editableNode, selection, event) { + if (event.key === 'Tab') { + 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) { - 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; diff --git a/examples/N1-Quick-Schedule/docs/availability-draft-extension.html b/examples/N1-Quick-Schedule/docs/availability-composer-extension.html similarity index 86% rename from examples/N1-Quick-Schedule/docs/availability-draft-extension.html rename to examples/N1-Quick-Schedule/docs/availability-composer-extension.html index 0a0114538..c493c2c52 100644 --- a/examples/N1-Quick-Schedule/docs/availability-draft-extension.html +++ b/examples/N1-Quick-Schedule/docs/availability-composer-extension.html @@ -10,7 +10,7 @@
- + - +
+ - - + +
  • - +
    -

    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) ->
     body = session.draft().body
     participants = session.draft().participants()
@@ -97,9 +97,9 @@ method. Here, we’re registering the events before we send the draft.
    
 
 
 module.exports = AvailabilityDraftExtension
    - +
    • - + diff --git a/examples/N1-Quick-Schedule/docs/main.html b/examples/N1-Quick-Schedule/docs/main.html index a9bfad9c1..d9bec5d0b 100644 --- a/examples/N1-Quick-Schedule/docs/main.html +++ b/examples/N1-Quick-Schedule/docs/main.html @@ -10,7 +10,7 @@
    - + - +
    + - - + +
  • - +

    Internal Methods

    - + 
       _onCalendarEvent: (event,data) ->
     switch event
@@ -268,95 +268,95 @@ subscribing to events, release them here.
    
       when "available_times"
         {draftClientId,eventData,events} = data
         @_addBlockToDraft(events,draftClientId,eventData);
    - +
    • - - + +
  • - +

    Sends a message to the calendar window

    - + 
      _sendToCalendar: (event,data) ->
     ipc.send("fromMain", event, JSON.stringify(data))
    - +
    • - - + +
  • - +

    Grabs the current draft text, appends the quick-schedule HTML block to it, and saves

    - + 
      _addBlockToDraft: (events,draftClientId,eventData) ->
    - +
    • - - + +
  • - +

    Obtain the session for the current draft.

    - + 
        DraftStore.sessionForClientId(draftClientId).then (session) =>
       draftHtml = session.draft().body
       text = QuotedHTMLParser.removeQuotedHTML(draftHtml)
    - +
    • - - + +
  • - +

    add the block

    - + 
          console.log(@_createBlock(events,eventData));
       text += "<br/>"+@_createBlock(events,eventData)+"<br/>";
 
       newDraftHtml = QuotedHTMLParser.appendQuotedHTML(text, draftHtml)
    - +
    • - - + +
  • - +

    update the draft

    - + 
          session.changes.add(body: newDraftHtml)
       session.changes.commit()
    - +
    • - - + +
  • - +
    @@ -364,49 +364,49 @@ subscribing to events, release them here.

    that can be inserted into an email message

    - + 
      _createBlock: (events,eventData) ->
    - +
    • - - + +
  • - +

    Group the events by their date, to give one box per day

    - + 
        byDay = {}
     for event in events
       (byDay[event.date] ?= []).push(event)
    - +
    • - - + +
  • - +

    Create an HtmlNode and write its attributes and child nodes

    - + 
        block = new HtmlNode("div")
       .attr("class","quick-schedule")
       .attr("data-quick-schedule",JSON.stringify({
    - +
    • - - + +
  • - +
    @@ -414,7 +414,7 @@ that can be inserted into an email message

    elsewhere (e.g. right before sending the draft, etc)

    - + 
            event: eventData
         times: ({start,end,serverKey} = e for e in events)
       }), true)
@@ -448,20 +448,20 @@ elsewhere (e.g. right before sending the draft, etc)
    
       .style("display","flex")
       .style("flex-wrap","wrap")
       .style("padding","10px 0")
    - +
    • - - + +
  • - +

    Create one div per day, and write each time slot in as a line

    - + 
        for dayText,dayEvents of byDay
       dayBlock = daysContainer.appendNode("div")
         .attr("class","day-container")
@@ -482,35 +482,35 @@ elsewhere (e.g. right before sending the draft, etc)
    
       times = dayBlock.appendNode("div")
         .attr("class","day-times")
         .style("padding","5px")
    - +
    • - - + +
  • - +

    One line per time slot

    - + 
          for e in dayEvents
    - +
    • - - + +
  • - +

    The URL points to the event page with this time slot selected

    - + 
            eventUrl = url.format({
           protocol: "http"
           host: "localhost:8888"
@@ -527,9 +527,9 @@ elsewhere (e.g. right before sending the draft, etc)
    
             .appendText(e.time)
 
     return block.toString()
    - +
    • - + diff --git a/examples/N1-Quick-Schedule/lib/availability-draft-extension.cjsx b/examples/N1-Quick-Schedule/lib/availability-composer-extension.cjsx similarity index 78% rename from examples/N1-Quick-Schedule/lib/availability-draft-extension.cjsx rename to examples/N1-Quick-Schedule/lib/availability-composer-extension.cjsx index f86c4780d..079b0a9ca 100644 --- a/examples/N1-Quick-Schedule/lib/availability-draft-extension.cjsx +++ b/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 diff --git a/examples/N1-Quick-Schedule/lib/main.cjsx b/examples/N1-Quick-Schedule/lib/main.cjsx index 78fb7792f..01087d8eb 100644 --- a/examples/N1-Quick-Schedule/lib/main.cjsx +++ b/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')