From 20c522ed39f7c0230cd242e21d795d3df3d838c4 Mon Sep 17 00:00:00 2001
From: Drew Regitsky <drew@nylas.com>
Date: Wed, 2 Dec 2015 21:28:13 -0800
Subject: [PATCH] feat(templates-plugin): Add prefs page with template editor,
 fix bugs.

[Composer Templates / Quick Reply plugin example]

Add a page to preferences with a basic editor for quick reply templates,
allowing add, delete, and edit (HTML and rendered text), with instructions
for how to add variable regions. Add methods to TemplatesStore to enable
these. Fix issues in plugin with quoted text handling, name conflicts,
`this` scoping.
---
 examples/N1-Composer-Templates/lib/main.es6   |   9 +-
 .../lib/preferences-templates.cjsx            | 238 ++++++++++++++++++
 .../lib/template-picker.jsx                   |   8 +-
 .../lib/template-store.es6                    |  93 +++++--
 .../stylesheets/message-templates.less        |  93 ++++++-
 5 files changed, 419 insertions(+), 22 deletions(-)
 create mode 100644 examples/N1-Composer-Templates/lib/preferences-templates.cjsx

diff --git a/examples/N1-Composer-Templates/lib/main.es6 b/examples/N1-Composer-Templates/lib/main.es6
index a90e1e531..43d762891 100644
--- a/examples/N1-Composer-Templates/lib/main.es6
+++ b/examples/N1-Composer-Templates/lib/main.es6
@@ -1,4 +1,4 @@
-import {ComponentRegistry, DraftStore} from 'nylas-exports';
+import {PreferencesUIStore, ComponentRegistry, DraftStore} from 'nylas-exports';
 import TemplatePicker from './template-picker';
 import TemplateStatusBar from './template-status-bar';
 import Extension from './template-draft-extension';
@@ -8,14 +8,21 @@ module.exports = {
 
   activate(state = {}) {
     this.state = state;
+    this.preferencesTab = new PreferencesUIStore.TabItem({
+      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);
   },
 
   deactivate() {
     ComponentRegistry.unregister(TemplatePicker);
     ComponentRegistry.unregister(TemplateStatusBar);
+    PreferencesUIStore.unregisterPreferencesTab(this.preferencesTab.sectionId);
     return DraftStore.unregisterExtension(Extension);
   },
 
diff --git a/examples/N1-Composer-Templates/lib/preferences-templates.cjsx b/examples/N1-Composer-Templates/lib/preferences-templates.cjsx
new file mode 100644
index 000000000..8cfffe576
--- /dev/null
+++ b/examples/N1-Composer-Templates/lib/preferences-templates.cjsx
@@ -0,0 +1,238 @@
+_ = require 'underscore'
+{Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
+{AccountStore, Utils, React} = require 'nylas-exports'
+TemplateStore = require './template-store';
+
+class PreferencesTemplates extends React.Component
+  @displayName: 'PreferencesTemplates'
+
+  constructor: (@props) ->
+    TemplateStore.init();
+    @_templateSaveQueue = {}
+
+    @state =
+      editAsHTML: false
+      editState: null
+      templates: []
+      selectedTemplate: null
+      selectedTemplateName: null
+      contents: null
+
+  componentDidMount: ->
+    @usub = TemplateStore.listen @_onChange
+
+  componentWillUnmount: ->
+    @usub()
+    if @state.selectedTemplate?
+      @_saveTemplateNow(@state.selectedTemplate.name, @state.contents)
+
+
+
+  #SAVING AND LOADING TEMPLATES
+  _loadTemplateContents: (template) =>
+    if template
+      TemplateStore.getTemplateContents(template.id, (contents) =>
+        @setState({contents: contents})
+      )
+
+  _saveTemplateNow: (name, contents, callback) =>
+    TemplateStore.saveTemplate(name, contents, false, callback)
+
+  _saveTemplateSoon: (name, contents) =>
+    @_templateSaveQueue[name] = contents
+    @_saveTemplatesFromCache()
+
+  __saveTemplatesFromCache: =>
+    for name, contents of @_templateSaveQueue
+      @_saveTemplateNow(name, contents)
+
+    @_templateSaveQueue = {}
+
+  _saveTemplatesFromCache: _.debounce(PreferencesTemplates::__saveTemplatesFromCache, 500)
+
+
+
+  # OVERALL STATE HANDLING
+  _onChange: =>
+    @setState @_getStateFromStores()
+
+  _getStateFromStores: ->
+    templates = TemplateStore.items()
+    selectedTemplate = @state.selectedTemplate
+    if selectedTemplate? and selectedTemplate.id not in _.pluck(templates, "id")
+      selectedTemplate = null
+    else if not selectedTemplate?
+      selectedTemplate = if templates.length > 0 then templates[0] else null
+    @_loadTemplateContents(selectedTemplate)
+    if selectedTemplate?
+      selectedTemplateName = @state.selectedTemplateName || selectedTemplate.name
+    return {templates, selectedTemplate, selectedTemplateName}
+
+
+
+  # TEMPLATE CONTENT EDITING
+  _onEditTemplate: (event) =>
+    html = event.target.value
+    @setState contents: html
+    if @state.selectedTemplate?
+      @_saveTemplateSoon(@state.selectedTemplate.name, html)
+
+  _onSelectTemplate: (event) =>
+    if @state.selectedTemplate?
+      @_saveTemplateNow(@state.selectedTemplate.name, @state.contents)
+    selectedTemplate = null
+    for template in @state.templates
+      if template.id == event.target.value
+        selectedTemplate = template
+    @setState
+      selectedTemplate: selectedTemplate
+      selectedTemplateName: selectedTemplate?.name
+      contents: null
+    @_loadTemplateContents(selectedTemplate)
+
+  _renderTemplatePicker: ->
+    options = @state.templates.map (template) ->
+      <option value={template.id} key={template.id}>{template.name}</option>
+
+    <select value={@state.selectedTemplate?.id} onChange={@_onSelectTemplate}>
+      {options}
+    </select>
+
+  _renderEditableTemplate: ->
+    <Contenteditable
+       ref="templateInput"
+       value={@state.contents}
+       onChange={@_onEditTemplate}
+       spellcheck={false} />
+
+  _renderHTMLTemplate: ->
+    <textarea ref="templateHTMLInput"
+              value={@state.contents}
+              onChange={@_onEditTemplate}/>
+
+  _renderModeToggle: ->
+    if @state.editAsHTML
+      return <a onClick={=> @setState(editAsHTML: false); return}>Edit live preview</a>
+    else
+      return <a onClick={=> @setState(editAsHTML: true); return}>Edit raw HTML</a>
+
+
+
+  # TEMPLATE NAME EDITING
+  _renderEditName: ->
+    <div className="section-title">
+      Template Name: <input type="text" className="template-name-input" value={@state.selectedTemplateName} onChange={@_onEditName}/>
+      <button className="btn template-name-btn" onClick={@_saveName}>Save Name</button>
+      <button className="btn template-name-btn" onClick={@_cancelEditName}>Cancel</button>
+    </div>
+
+  _renderName: ->
+    rawText = if @state.editAsHTML then "Raw HTML " else ""
+    <div className="section-title">
+      {rawText}Template: {@_renderTemplatePicker()}
+      <button className="btn template-name-btn" title="New template" onClick={@_startNewTemplate}>New</button>
+      <button className="btn template-name-btn" onClick={ => @setState(editState: "name") }>Rename</button>
+    </div>
+
+  _onEditName: =>
+    @setState({selectedTemplateName: event.target.value})
+
+  _cancelEditName: =>
+    @setState
+      selectedTemplateName: @state.selectedTemplate?.name
+      editState: null
+
+  _saveName: =>
+    if @state.selectedTemplate?.name != @state.selectedTemplateName
+      TemplateStore.renameTemplate(@state.selectedTemplate.name, @state.selectedTemplateName, (renamedTemplate) =>
+        @setState
+          selectedTemplate: renamedTemplate
+          editState: null
+      )
+    else
+      @setState
+        editState: null
+
+
+  # DELETE AND NEW
+  _deleteTemplate: =>
+    if @state.selectedTemplate?
+      TemplateStore.deleteTemplate(@state.selectedTemplate.name)
+
+  _startNewTemplate: =>
+    @setState
+      editState: "new"
+      selectedTemplate: null
+      selectedTemplateName: ""
+      contents: ""
+
+  _saveNewTemplate: =>
+    TemplateStore.saveTemplate(@state.selectedTemplateName, @state.contents, true, (template) =>
+      @setState
+        selectedTemplate: template
+        editState: null
+    )
+
+  _cancelNewTemplate: =>
+    template = if @state.templates.length>0 then @state.templates[0] else null
+    @setState
+      selectedTemplate: template
+      selectedTemplateName: template?.name
+      editState: null
+    @_loadTemplateContents(template)
+
+  _renderCreateNew: ->
+    <div className="section-title">
+      Template Name: <input type="text" className="template-name-input" value={@state.selectedTemplateName} onChange={@_onEditName}/>
+      <button className="btn btn-emphasis template-name-btn" onClick={@_saveNewTemplate}>Save</button>
+      <button className="btn template-name-btn" onClick={@_cancelNewTemplate}>Cancel</button>
+    </div>
+
+
+  # MAIN RENDER
+  render: =>
+    deleteBtn =
+      <button className="btn template-name-btn" title="Delete template" onClick={@_deleteTemplate}>
+        <RetinaImg name="icon-composer-trash.png" mode={RetinaImg.Mode.ContentIsMask} />
+      </button>
+
+    <div>
+    <section className="container-templates">
+      <h2>Quick Replies</h2>
+      {
+        switch @state.editState
+          when "name" then @_renderEditName()
+          when "new" then @_renderCreateNew()
+          else @_renderName()
+      }
+      <div className="template-wrap">
+        {if @state.editAsHTML then @_renderHTMLTemplate() else @_renderEditableTemplate()}
+      </div>
+      <span className="editor-note">
+        { if _.size(@_templateSaveQueue) > 0 then "Saving changes..." else "Changes saved." }
+      </span>
+      <span style={float:"right"}>{if @state.editState == null then deleteBtn else ""}</span>
+      <div className="toggle-mode" style={marginTop: "1em"}>
+        {@_renderModeToggle()}
+      </div>
+    </section>
+
+    <section className="templates-instructions">
+    <p>
+      The Quick Replies plugin lets you write preset templates to use as email responses. Replies can contain variables, which
+      you can quickly jump between and fill out when using the template.
+    </p>
+    <p>
+      Variables are defined as HTML &lt;code&gt; tags with class "var". You can include these by editing the raw HTML of the template and adding <code>&lt;code class="var"&gt;[content]&lt;/code&gt;</code>. Add
+      the "empty" class to make a region dark yellow and indicate that it should be filled in. When you send your message, &lt;code&gt;
+      tags are always stripped so the recipient never sees any highlighting.
+    </p>
+    <p>
+      Templates live in the <strong>~/.nylas/templates</strong> directory on your computer. Each template
+      is an HTML file - the name of the file is the name of the template, and its contents are the default message body.
+    </p>
+
+    </section>
+    </div>
+
+module.exports = PreferencesTemplates
diff --git a/examples/N1-Composer-Templates/lib/template-picker.jsx b/examples/N1-Composer-Templates/lib/template-picker.jsx
index 9c3962564..8a541b635 100644
--- a/examples/N1-Composer-Templates/lib/template-picker.jsx
+++ b/examples/N1-Composer-Templates/lib/template-picker.jsx
@@ -3,7 +3,7 @@ import {Popover, Menu, RetinaImg} from 'nylas-component-kit';
 import TemplateStore from './template-store';
 
 class TemplatePicker extends React.Component {
-  static displayName = 'TemplatePicker'
+  static displayName = 'TemplatePicker';
 
   static propTypes = {
     draftClientId: React.PropTypes.string,
@@ -52,16 +52,16 @@ class TemplatePicker extends React.Component {
     });
   }
 
-  _onChooseTemplate = (template)=> {
+  _onChooseTemplate = (template) => {
     Actions.insertTemplateId({templateId: template.id, draftClientId: this.props.draftClientId});
     return this.refs.popover.close();
   }
 
-  _onManageTemplates() {
+  _onManageTemplates = () => {
     return Actions.showTemplates();
   }
 
-  _onNewTemplate() {
+  _onNewTemplate = () => {
     return Actions.createTemplate({draftClientId: this.props.draftClientId});
   }
 
diff --git a/examples/N1-Composer-Templates/lib/template-store.es6 b/examples/N1-Composer-Templates/lib/template-store.es6
index 741076634..9fa71e6b8 100644
--- a/examples/N1-Composer-Templates/lib/template-store.es6
+++ b/examples/N1-Composer-Templates/lib/template-store.es6
@@ -1,4 +1,4 @@
-import {DraftStore, Actions} from 'nylas-exports';
+import {DraftStore, Actions, QuotedHTMLParser} from 'nylas-exports';
 import NylasStore from 'nylas-store';
 import shell from 'shell';
 import path from 'path';
@@ -82,7 +82,7 @@ class TemplateStore extends NylasStore {
       DraftStore.sessionForClientId(draftClientId).then((session) => {
         const draft = session.draft();
         const draftName = name ? name : draft.subject;
-        const draftContents = contents ? contents : draft.body;
+        const draftContents = contents ? contents : QuotedHTMLParser.removeQuotedHTML(draft.body);
         if (!draftName || draftName.length === 0) {
           this._displayError('Give your draft a subject to name your template.');
         }
@@ -113,34 +113,95 @@ class TemplateStore extends NylasStore {
   }
 
   _writeTemplate(name, contents) {
+    this.saveTemplate(name, contents, true, (template) => {
+      Actions.switchPreferencesTab('Quick Replies');
+      Actions.openPreferences()
+    });
+  }
+
+  saveTemplate(name, contents, isNew, callback) {
     const filename = `${name}.html`;
     const templatePath = path.join(this._templatesDir, filename);
+
+    var template = null;
+    this._items.forEach((item) => {
+      if (item.name === name) { template = item; }
+    });
+
+    if(isNew && template !== null) {
+      this._displayError("A template with that name already exists!");
+      return undefined;
+    }
+
     fs.writeFile(templatePath, contents, (err) => {
       if (err) { this._displayError(err); }
-      shell.showItemInFolder(templatePath);
-      this._items.push({
-        id: filename,
-        name: name,
-        path: templatePath,
-      });
+      if (template === null) {
+        template = {
+          id: filename,
+          name: name,
+          path: templatePath
+        };
+        this._items.push(template);
+      }
+      if(callback)
+        callback(template);
       this.trigger(this);
     });
   }
 
+  deleteTemplate(name, callback) {
+    var template = null;
+    this._items.forEach((item) => {
+      if (item.name === name) { template = item; }
+    });
+    if (!template) { return undefined }
+
+    fs.unlink(template.path, () => {
+      this._populate();
+      if(callback)
+        callback()
+    });
+  }
+
+  renameTemplate(oldName, newName, callback) {
+    var template = null;
+    this._items.forEach((item) => {
+      if (item.name === oldName) { template = item; }
+    });
+    if (!template) { return undefined }
+
+    const newFilename = `${newName}.html`;
+    const oldPath = path.join(this._templatesDir, `${oldName}.html`);
+    const newPath = path.join(this._templatesDir, newFilename);
+    fs.rename(oldPath, newPath, () => {
+      template.name = newName;
+      template.id = newFilename;
+      template.path = newPath;
+      this.trigger(this);
+      callback(template)
+    });
+  }
+
   _onInsertTemplateId({templateId, draftClientId} = {}) {
-    const iterable = this._items;
+    this.getTemplateContents(templateId, (body) => {
+      DraftStore.sessionForClientId(draftClientId).then((session)=> {
+        draftHtml = QuotedHTMLParser.appendQuotedHTML(body, session.draft().body);
+        session.changes.add({body: draftHtml});
+      });
+    });
+  }
+
+  getTemplateContents(templateId, callback) {
     let template = null;
-    for (let i = 0, item; i < iterable.length; i++) {
-      item = iterable[i];
+    this._items.forEach((item) => {
       if (item.id === templateId) { template = item; }
-    }
-    if (!template) { return undefined; }
+    });
+
+    if (!template) { return undefined }
 
     fs.readFile(template.path, (err, data)=> {
       const body = data.toString();
-      DraftStore.sessionForClientId(draftClientId).then((session)=> {
-        session.changes.add({body: body});
-      });
+      callback(body);
     });
   }
 }
diff --git a/examples/N1-Composer-Templates/stylesheets/message-templates.less b/examples/N1-Composer-Templates/stylesheets/message-templates.less
index 67d48bc0f..1671b25f8 100755
--- a/examples/N1-Composer-Templates/stylesheets/message-templates.less
+++ b/examples/N1-Composer-Templates/stylesheets/message-templates.less
@@ -24,7 +24,7 @@
   font-size: @font-size-small;
 }
 
-.compose-body .contenteditable {
+.compose-body,.container-templates .contenteditable {
   code.var {
     font: inherit;
     padding:0;
@@ -39,3 +39,94 @@
     }
   }
 }
+
+
+.container-templates {
+  max-width: 640px;
+
+
+  .template-wrap {
+    position: relative;
+    border: 1px solid @input-border-color;
+    padding: 10px;
+    margin-top: 20px;
+    min-height: 200px;
+    display: flex;
+
+    textarea {
+      border: 0;
+      padding: 0;
+      flex: 1;
+      font-family: monospace;
+      font-size: 0.9em;
+    }
+  }
+
+  .section-body {
+    padding: 10px 0 0 0;
+
+    .menu {
+      border: solid thin #CCC;
+      margin-right: 5px;
+      min-height: 200px;
+      .menu-items {
+        margin:0;
+        padding:0;
+        list-style: none;
+
+        li { padding: 6px; }
+      }
+    }
+    .menu-horizontal {
+      height: 100%;
+      .menu-items {
+        height:100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        li {
+          text-align:center;
+          width:40px;
+          display:inline-block;
+          padding:8px 16px 8px 16px;
+          border-right: solid thin #CCC;
+        }
+      }
+    }
+    .template-area {
+      border: solid thin #CCC;
+      min-height: 200px;
+    }
+    .menu-footer {
+      border: solid thin #CCC;
+      overflow: auto;
+    }
+    .template-footer {
+      border: solid thin #CCC;
+      overflow: auto;
+
+      .edit-html-button {
+        float: right;
+        margin: 6px;
+      }
+    }
+  }
+
+  .template-name-btn {
+    float: right;
+    margin: 6px;
+  }
+  .template-name-input {
+    display: inline-block;
+    width: 200px;
+  }
+  .editor-note {
+    color: #AAA;
+    font-size: small;
+  }
+}
+.templates-instructions {
+  color: #333;
+  font-size: small;
+  margin-top: 20px;
+}