import _ from 'underscore';
import {Contenteditable, RetinaImg} from 'nylas-component-kit';
import {React} from 'nylas-exports';
import TemplateStore from './template-store';
import TemplateEditor from './template-editor';
class PreferencesTemplates extends React.Component {
static displayName = 'PreferencesTemplates';
constructor() {
super();
this._templateSaveQueue = {};
const {templates, selectedTemplate, selectedTemplateName} = this._getStateFromStores();
this.state = {
editAsHTML: false,
editState: templates.length === 0 ? "new" : null,
templates: templates,
selectedTemplate: selectedTemplate,
selectedTemplateName: selectedTemplateName,
contents: null,
};
}
componentDidMount() {
this.unsub = TemplateStore.listen(this._onChange);
}
componentWillUnmount() {
this.unsub();
if (this.state.selectedTemplate) {
this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents);
}
}
// SAVING AND LOADING TEMPLATES
_loadTemplateContents = (template) => {
if (template) {
TemplateStore.getTemplateContents(template.id, (contents) => {
this.setState({contents: contents});
});
}
}
_saveTemplateNow(name, contents, callback) {
TemplateStore.saveTemplate(name, contents, callback);
}
_saveTemplateSoon(name, contents) {
this._templateSaveQueue[name] = contents;
this._saveTemplatesFromCache();
}
__saveTemplatesFromCache() {
for (const name of Object.keys(this._templateSaveQueue)) {
this._saveTemplateNow(name, this._templateSaveQueue[name]);
}
this._templateSaveQueue = {};
}
_saveTemplatesFromCache = _.debounce(PreferencesTemplates.prototype.__saveTemplatesFromCache, 500);
// OVERALL STATE HANDLING
_onChange = () => {
this.setState(this._getStateFromStores());
}
_getStateFromStores() {
const templates = TemplateStore.items();
let selectedTemplate = this.state ? this.state.selectedTemplate : null;
if (selectedTemplate && _.pluck(templates, "id").indexOf(selectedTemplate.id) === -1) {
selectedTemplate = null;
} else if (!selectedTemplate) {
selectedTemplate = templates.length > 0 ? templates[0] : null;
}
this._loadTemplateContents(selectedTemplate);
let selectedTemplateName = null;
if (selectedTemplate) {
selectedTemplateName = this.state ? this.state.selectedTemplateName : selectedTemplate.name;
}
return {templates, selectedTemplate, selectedTemplateName};
}
// TEMPLATE CONTENT EDITING
_onEditTemplate = (event) => {
const html = event.target.value;
this.setState({contents: html});
if (this.state.selectedTemplate) {
this._saveTemplateSoon(this.state.selectedTemplate.name, html);
}
}
_onSelectTemplate = (event) => {
if (this.state.selectedTemplate) {
this._saveTemplateNow(this.state.selectedTemplate.name, this.state.contents);
}
let selectedTemplate = null;
for (const template of Object.keys(this.state.templates)) {
if (template.id === event.target.value) {
selectedTemplate = template;
}
}
this.setState({
selectedTemplate: selectedTemplate,
selectedTemplateName: selectedTemplate ? selectedTemplate.name : null,
contents: null,
});
this._loadTemplateContents(selectedTemplate);
}
_renderTemplatePicker() {
const options = this.state.templates.map((template) => {
return
});
return (
);
}
_renderEditableTemplate() {
return (
The Quick Replies plugin allows you to create templated email replies, with variables that you can quickly replace before sending your email message. {`To create a variable, type a set of double curly brackets wrapping the variable's name, like this`}: {"{{"}variable_name{"}}"}
Reply templates are saved in the ~/.nylas/templates 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.
In raw HTML, variables are defined as HTML <code> tags with class "var empty". Typing curly brackets creates a tag automatically. The code tags are colored yellow to show the variable regions but will be removed before the message is sent.