mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-09-21 15:56:10 +08:00
fix(signatures): Adds default signature, convert to ES6
This commit is contained in:
parent
4f1617550d
commit
8e9d7ff73e
|
@ -4,7 +4,8 @@
|
|||
"NylasEnv": false,
|
||||
"$n": false,
|
||||
"waitsForPromise": false,
|
||||
"advanceClock": false
|
||||
"advanceClock": false,
|
||||
"TEST_ACCOUNT_ID": false
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
|
|
|
@ -13,15 +13,13 @@ export function activate() {
|
|||
|
||||
ExtensionRegistry.Composer.register(SignatureComposerExtension);
|
||||
PreferencesUIStore.registerPreferencesTab(this.preferencesTab);
|
||||
|
||||
this.signatureStore = new SignatureStore();
|
||||
this.signatureStore.activate();
|
||||
SignatureStore.activate();
|
||||
}
|
||||
|
||||
export function deactivate() {
|
||||
ExtensionRegistry.Composer.unregister(SignatureComposerExtension);
|
||||
PreferencesUIStore.unregisterPreferencesTab(this.preferencesTab.sectionId);
|
||||
this.signatureStore.deactivate();
|
||||
SignatureStore.deactivate();
|
||||
}
|
||||
|
||||
export function serialize() {
|
||||
|
|
|
@ -1,118 +0,0 @@
|
|||
React = require 'react'
|
||||
_ = require 'underscore'
|
||||
{Contenteditable, RetinaImg, Flexbox} = require 'nylas-component-kit'
|
||||
{AccountStore, Utils} = require 'nylas-exports'
|
||||
|
||||
class PreferencesSignatures extends React.Component
|
||||
@displayName: 'PreferencesSignatures'
|
||||
|
||||
constructor: (@props) ->
|
||||
@_signatureSaveQueue = {}
|
||||
|
||||
# TODO check initally selected account
|
||||
selectedAccountId = AccountStore.accounts()[0].id
|
||||
if selectedAccountId
|
||||
key = @_configKey(selectedAccountId)
|
||||
initialSig = @props.config.get(key)
|
||||
else
|
||||
initialSig = ""
|
||||
|
||||
@state =
|
||||
editAsHTML: false
|
||||
accounts: AccountStore.accounts()
|
||||
currentSignature: initialSig
|
||||
selectedAccountId: selectedAccountId
|
||||
|
||||
componentDidMount: ->
|
||||
@usub = AccountStore.listen @_onChange
|
||||
|
||||
componentWillUnmount: ->
|
||||
@usub()
|
||||
@_saveSignatureNow(@state.selectedAccountId, @state.currentSignature)
|
||||
|
||||
_saveSignatureNow: (accountId, value) =>
|
||||
key = @_configKey(accountId)
|
||||
@props.config.set(key, value)
|
||||
|
||||
_saveSignatureSoon: (accountId, value) =>
|
||||
@_signatureSaveQueue[accountId] = value
|
||||
@_saveSignaturesFromCache()
|
||||
|
||||
__saveSignaturesFromCache: =>
|
||||
for accountId, value of @_signatureSaveQueue
|
||||
@_saveSignatureNow(accountId, value)
|
||||
|
||||
@_signatureSaveQueue = {}
|
||||
|
||||
_saveSignaturesFromCache: _.debounce(PreferencesSignatures::__saveSignaturesFromCache, 500)
|
||||
|
||||
_onChange: =>
|
||||
@setState @_getStateFromStores()
|
||||
|
||||
_getStateFromStores: ->
|
||||
accounts = AccountStore.accounts()
|
||||
selectedAccountId = @state.selectedAccountId
|
||||
currentSignature = @state.currentSignature
|
||||
if not @state.selectedAccountId in _.pluck(accounts, "id")
|
||||
selectedAccountId = null
|
||||
currentSignature = ""
|
||||
return {accounts, selectedAccountId, currentSignature}
|
||||
|
||||
_renderAccountPicker: ->
|
||||
options = @state.accounts.map (account) ->
|
||||
<option value={account.id} key={account.id}>{account.emailAddress}</option>
|
||||
|
||||
<select value={@state.selectedAccountId} onChange={@_onSelectAccount}>
|
||||
{options}
|
||||
</select>
|
||||
|
||||
_renderEditableSignature: ->
|
||||
<Contenteditable
|
||||
tabIndex={-1}
|
||||
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
|
||||
@_saveSignatureSoon(@state.selectedAccountId, html)
|
||||
|
||||
_configKey: (accountId) ->
|
||||
"nylas.account-#{accountId}.signature"
|
||||
|
||||
_onSelectAccount: (event) =>
|
||||
@_saveSignatureNow(@state.selectedAccountId, @state.currentSignature)
|
||||
selectedAccountId = event.target.value
|
||||
key = @_configKey(selectedAccountId)
|
||||
initialSig = @props.config.get(key) ? ""
|
||||
@setState
|
||||
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 ""
|
||||
<section className="container-signatures">
|
||||
<h2>Signatures</h2>
|
||||
<div className="section-title">
|
||||
{rawText}Signature for: {@_renderAccountPicker()}
|
||||
</div>
|
||||
<div className="signature-wrap">
|
||||
{if @state.editAsHTML then @_renderHTMLSignature() else @_renderEditableSignature()}
|
||||
</div>
|
||||
<div className="toggle-mode" style={marginTop: "1em"}>{@_renderModeToggle()}</div>
|
||||
</section>
|
||||
|
||||
module.exports = PreferencesSignatures
|
|
@ -0,0 +1,122 @@
|
|||
import React from 'react';
|
||||
import {Contenteditable} from 'nylas-component-kit';
|
||||
import {AccountStore} from 'nylas-exports';
|
||||
import SignatureStore from './signature-store';
|
||||
import SignatureActions from './signature-actions';
|
||||
|
||||
export default class PreferencesSignatures extends React.Component {
|
||||
static displayName = 'PreferencesSignatures';
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this._getStateFromStores();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.usub = AccountStore.listen(this._onChange);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.usub();
|
||||
}
|
||||
|
||||
_onChange = () => {
|
||||
this.setState(this._getStateFromStores());
|
||||
}
|
||||
|
||||
_getStateFromStores() {
|
||||
const accounts = AccountStore.accounts();
|
||||
const state = this.state || {};
|
||||
|
||||
let {currentAccountId} = state;
|
||||
if (!accounts.find(acct => acct.id === currentAccountId)) {
|
||||
currentAccountId = accounts[0].id;
|
||||
}
|
||||
return {
|
||||
accounts,
|
||||
currentAccountId,
|
||||
currentSignature: SignatureStore.signatureForAccountId(currentAccountId),
|
||||
editAsHTML: state.editAsHTML,
|
||||
};
|
||||
}
|
||||
|
||||
_renderAccountPicker() {
|
||||
const options = this.state.accounts.map(account =>
|
||||
<option value={account.id} key={account.id}>{account.emailAddress}</option>
|
||||
);
|
||||
|
||||
return (
|
||||
<select value={this.state.currentAccountId} onChange={this._onSelectAccount}>
|
||||
{options}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
|
||||
_renderEditableSignature() {
|
||||
return (
|
||||
<Contenteditable
|
||||
tabIndex={-1}
|
||||
ref="signatureInput"
|
||||
value={this.state.currentSignature}
|
||||
onChange={this._onEditSignature}
|
||||
spellcheck={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_renderHTMLSignature() {
|
||||
return (
|
||||
<textarea
|
||||
ref="signatureHTMLInput"
|
||||
value={this.state.currentSignature}
|
||||
onChange={this._onEditSignature}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
_onEditSignature = (event) => {
|
||||
const html = event.target.value;
|
||||
this.setState({currentSignature: html});
|
||||
|
||||
SignatureActions.setSignatureForAccountId({
|
||||
accountId: this.state.currentAccountId,
|
||||
signature: html,
|
||||
});
|
||||
}
|
||||
|
||||
_onSelectAccount = (event) => {
|
||||
const accountId = event.target.value;
|
||||
this.setState({
|
||||
currentSignature: SignatureStore.signatureForAccountId(accountId),
|
||||
currentAccountId: accountId,
|
||||
});
|
||||
}
|
||||
|
||||
_renderModeToggle() {
|
||||
const label = this.state.editAsHTML ? "Edit live preview" : "Edit raw HTML";
|
||||
const action = () => {
|
||||
this.setState({editAsHTML: !this.state.editAsHTML});
|
||||
return;
|
||||
};
|
||||
|
||||
return (
|
||||
<a onClick={action}>{label}</a>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const rawText = this.state.editAsHTML ? "Raw HTML " : "";
|
||||
return (
|
||||
<section className="container-signatures">
|
||||
<h2>Signatures</h2>
|
||||
<div className="section-title">
|
||||
{rawText}Signature for: {this._renderAccountPicker()}
|
||||
</div>
|
||||
<div className="signature-wrap">
|
||||
{this.state.editAsHTML ? this._renderHTMLSignature() : this._renderEditableSignature()}
|
||||
</div>
|
||||
<div className="toggle-mode" style={{marginTop: "1em"}}>{this._renderModeToggle()}</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import Reflux from 'reflux';
|
||||
|
||||
const ActionNames = [
|
||||
'setSignatureForAccountId',
|
||||
];
|
||||
|
||||
const Actions = Reflux.createActions(ActionNames);
|
||||
ActionNames.forEach((name) => {
|
||||
Actions[name].sync = true;
|
||||
});
|
||||
|
||||
export default Actions;
|
|
@ -1,10 +1,11 @@
|
|||
import {ComposerExtension} from 'nylas-exports';
|
||||
import SignatureUtils from './signature-utils';
|
||||
import SignatureStore from './signature-store';
|
||||
|
||||
export default class SignatureComposerExtension extends ComposerExtension {
|
||||
static prepareNewDraft = ({draft})=> {
|
||||
static prepareNewDraft = ({draft}) => {
|
||||
const accountId = draft.accountId;
|
||||
const signature = NylasEnv.config.get(`nylas.account-${accountId}.signature`);
|
||||
const signature = SignatureStore.signatureForAccountId(accountId);
|
||||
if (!signature) {
|
||||
return;
|
||||
}
|
||||
|
|
|
@ -1,29 +1,57 @@
|
|||
import {DraftStore, AccountStore, Actions} from 'nylas-exports';
|
||||
import SignatureUtils from './signature-utils';
|
||||
import SignatureActions from './signature-actions';
|
||||
|
||||
export default class SignatureStore {
|
||||
|
||||
class SignatureStore {
|
||||
|
||||
DefaultSignature = "Sent from <a href=\"https://nylas.com/n1?ref=n1\">Nylas N1</a>, the extensible, open source mail client.";
|
||||
|
||||
constructor() {
|
||||
this.unsubscribe = ()=> {};
|
||||
this.unsubscribes = [];
|
||||
}
|
||||
|
||||
activate() {
|
||||
this.unsubscribe = Actions.draftParticipantsChanged.listen(this.onParticipantsChanged);
|
||||
this.unsubscribes.push(
|
||||
SignatureActions.setSignatureForAccountId.listen(this._onSetSignatureForAccountId)
|
||||
);
|
||||
this.unsubscribes.push(
|
||||
Actions.draftParticipantsChanged.listen(this._onParticipantsChanged)
|
||||
);
|
||||
}
|
||||
|
||||
onParticipantsChanged(draftClientId, changes) {
|
||||
deactivate() {
|
||||
this.unsubscribes.forEach(unsub => unsub());
|
||||
}
|
||||
|
||||
signatureForAccountId(accountId) {
|
||||
if (!accountId) {
|
||||
return this.DefaultSignature;
|
||||
}
|
||||
const saved = NylasEnv.config.get(`nylas.account-${accountId}.signature`);
|
||||
if (saved === undefined) {
|
||||
return this.DefaultSignature;
|
||||
}
|
||||
return saved;
|
||||
}
|
||||
|
||||
_onParticipantsChanged = (draftClientId, changes) => {
|
||||
if (!changes.from) { return; }
|
||||
DraftStore.sessionForClientId(draftClientId).then((session)=> {
|
||||
|
||||
DraftStore.sessionForClientId(draftClientId).then((session) => {
|
||||
const draft = session.draft();
|
||||
const {accountId} = AccountStore.accountForEmail(changes.from[0].email);
|
||||
const signature = NylasEnv.config.get(`nylas.account-${accountId}.signature`) || "";
|
||||
const signature = this.signatureForAccountId(accountId);
|
||||
|
||||
const body = SignatureUtils.applySignature(draft.body, signature);
|
||||
session.changes.add({body});
|
||||
});
|
||||
}
|
||||
|
||||
deactivate() {
|
||||
this.unsubscribe();
|
||||
_onSetSignatureForAccountId = ({signature, accountId}) => {
|
||||
// NylasEnv.config.set is internally debounced 100ms
|
||||
NylasEnv.config.set(`nylas.account-${accountId}.signature`, signature)
|
||||
}
|
||||
}
|
||||
|
||||
export default new SignatureStore();
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {Message} from 'nylas-exports';
|
||||
import SignatureComposerExtension from '../lib/signature-composer-extension';
|
||||
import SignatureStore from '../lib/signature-store';
|
||||
|
||||
describe("SignatureComposerExtension", ()=> {
|
||||
describe("prepareNewDraft", ()=> {
|
||||
|
@ -12,10 +13,12 @@ describe("SignatureComposerExtension", ()=> {
|
|||
it("should insert the signature at the end of the message or before the first blockquote and have a newline", ()=> {
|
||||
const a = new Message({
|
||||
draft: true,
|
||||
accountId: TEST_ACCOUNT_ID,
|
||||
body: 'This is a test! <blockquote>Hello world</blockquote>',
|
||||
});
|
||||
const b = new Message({
|
||||
draft: true,
|
||||
accountId: TEST_ACCOUNT_ID,
|
||||
body: 'This is a another test.',
|
||||
});
|
||||
|
||||
|
@ -50,25 +53,47 @@ describe("SignatureComposerExtension", ()=> {
|
|||
]
|
||||
|
||||
scenarios.forEach((scenario)=> {
|
||||
const message = new Message({draft: true, body: scenario.body})
|
||||
const message = new Message({
|
||||
draft: true,
|
||||
body: scenario.body,
|
||||
accountId: TEST_ACCOUNT_ID,
|
||||
})
|
||||
SignatureComposerExtension.prepareNewDraft({draft: message});
|
||||
expect(message.body).toEqual(scenario.expected)
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
describe("when a signature is not defined", ()=> {
|
||||
describe("when no signature is present in the config file", ()=> {
|
||||
beforeEach(()=> {
|
||||
spyOn(NylasEnv.config, 'get').andCallFake(()=> null);
|
||||
spyOn(NylasEnv.config, 'get').andCallFake(()=> undefined);
|
||||
});
|
||||
|
||||
it("should not do anything", ()=> {
|
||||
it("should insert the default signature", ()=> {
|
||||
const a = new Message({
|
||||
draft: true,
|
||||
accountId: TEST_ACCOUNT_ID,
|
||||
body: 'This is a test! <blockquote>Hello world</blockquote>',
|
||||
});
|
||||
SignatureComposerExtension.prepareNewDraft({draft: a});
|
||||
expect(a.body).toEqual('This is a test! <blockquote>Hello world</blockquote>');
|
||||
expect(a.body).toEqual(`This is a test! <div class="nylas-n1-signature">${SignatureStore.DefaultSignature}</div><blockquote>Hello world</blockquote>`);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe("when a blank signature is present in the config file", ()=> {
|
||||
beforeEach(()=> {
|
||||
spyOn(NylasEnv.config, 'get').andCallFake(()=> "");
|
||||
});
|
||||
|
||||
it("should insert nothing", ()=> {
|
||||
const a = new Message({
|
||||
draft: true,
|
||||
accountId: TEST_ACCOUNT_ID,
|
||||
body: 'This is a test! <blockquote>Hello world</blockquote>',
|
||||
});
|
||||
SignatureComposerExtension.prepareNewDraft({draft: a});
|
||||
expect(a.body).toEqual(`This is a test! <blockquote>Hello world</blockquote>`);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue