feat(signatures): add raw signature support

internal_packages/composer-signature/lib/preferences-signatures.cjsx

@@ -17,17 +17,17 @@ class PreferencesSignatures extends React.Component
       initialSig = ""
 
     @state =
+      editAsHTML: false
       accounts: AccountStore.items()
       currentSignature: initialSig
       selectedAccountId: selectedAccountId
 
   componentDidMount: ->
+    console.log "Mounting preferences"
     @usub = AccountStore.listen @_onChange
 
-  shouldComponentUpdate: (nextProps, nextState) =>
-    nextState.selectedAccountId isnt @state.selectedAccountId
-
   componentWillUnmount: ->
+    console.log "Unmounting preferences"
     @usub()
     @_saveSignatureNow(@state.selectedAccountId, @state.currentSignature)
 
@@ -67,13 +67,18 @@ class PreferencesSignatures extends React.Component
       {options}
     </select>
 
-  _renderCurrentSignature: ->
+  _renderEditableSignature: ->
     <Contenteditable
        ref="signatureInput"
        value={@state.currentSignature}
        onChange={@_onEditSignature}
        spellcheck={false} />
 
+  _renderHTMLSignature: ->
+    <textarea ref="signatureHTMLInput"
+              value={@state.currentSignature}
+              onChange={@_onEditSignature}/>
+
   _onEditSignature: (event) =>
     html = event.target.value
     @setState currentSignature: html
@@ -91,14 +96,22 @@ class PreferencesSignatures extends React.Component
       currentSignature: initialSig
       selectedAccountId: selectedAccountId
 
+  _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>
+
   render: =>
+    rawText = if @state.editAsHTML then "Raw HTML " else ""
     <div className="container-signatures">
       <div className="section-title">
-        Signature for: {@_renderAccountPicker()}
+        {rawText}Signature for: {@_renderAccountPicker()}
       </div>
       <div className="signature-wrap">
-        {@_renderCurrentSignature()}
+        {if @state.editAsHTML then @_renderHTMLSignature() else @_renderEditableSignature()}
       </div>
+      <div className="toggle-mode" style={marginTop: "1em"}>{@_renderModeToggle()}</div>
     </div>
 
 module.exports = PreferencesSignatures

internal_packages/composer-signature/lib/signature-draft-extension.coffee

@@ -9,6 +9,6 @@ class SignatureDraftStoreExtension extends DraftStoreExtension
     insertionPoint = draft.body.indexOf('<blockquote')
     if insertionPoint is -1
       insertionPoint = draft.body.length
-    draft.body = draft.body.substr(0, insertionPoint-1) + signature + draft.body.substr(insertionPoint)
+    draft.body = draft.body.substr(0, insertionPoint-1) + "<br/>" + signature + draft.body.substr(insertionPoint)
 
 module.exports = SignatureDraftStoreExtension

internal_packages/composer-signature/spec/draft-extension-spec.coffee

@@ -10,7 +10,7 @@ describe "SignatureDraftStoreExtension", ->
         spyOn(NylasEnv.config, 'get').andCallFake =>
           @signature
 
-      it "should insert the signature at the end of the message or before the first blockquote", ->
+      it "should insert the signature at the end of the message or before the first blockquote and have a newline", ->
         a = new Message
           draft: true
           body: 'This is a test! <blockquote>Hello world</blockquote>'
@@ -19,9 +19,9 @@ describe "SignatureDraftStoreExtension", ->
           body: 'This is a another test.'
 
         SignatureDraftStoreExtension.prepareNewDraft(a)
-        expect(a.body).toEqual("This is a test!<div id='signature'>This is my signature.</div><blockquote>Hello world</blockquote>")
+        expect(a.body).toEqual("This is a test!<br/><div id='signature'>This is my signature.</div><blockquote>Hello world</blockquote>")
         SignatureDraftStoreExtension.prepareNewDraft(b)
-        expect(b.body).toEqual("This is a another test<div id='signature'>This is my signature.</div>")
+        expect(b.body).toEqual("This is a another test<br/><div id='signature'>This is my signature.</div>")
 
     describe "when a signature is not defined", ->
       beforeEach ->

internal_packages/composer-signature/styles/composer-signature.less

@@ -1,3 +1,5 @@
+@import "ui-variables";
+
 .container-signatures {
   max-width: 640px;
 
@@ -8,6 +10,12 @@
     margin-top: 20px;
     min-height: 200px;
     display: flex;
+
+    textarea {
+      border: 0;
+      padding: 0;
+      flex: 1;
+    }
   }
 
   .section-body {

internal_packages/composer/lib/composer-view.cjsx

@@ -120,7 +120,7 @@ class ComposerView extends React.Component
       else
         React.findDOMNode(@refs[@state.focusedField]).focus()
 
-      if @state.focusedField is Fields.Body
+      if @state.focusedField is Fields.Body and not @_proxy.draftPristineBody()
         @refs[Fields.Body].selectEnd()
 
   componentWillReceiveProps: (newProps) =>

static/components/contenteditable.less

@@ -1,3 +1,5 @@
+@import "ui-variables";
+
 .contenteditable-container {
   flex: 1;
   display: flex;