mirror of
https://github.com/Foundry376/Mailspring.git
synced 2024-11-14 05:41:05 +08:00
be800ac89a
Summary:
Adds several new features to the templates plugin, fixes some existing bugs, and
refactors existing code.
New Plugin Features/Fixes:
- Changes the templates editor in preferences to allow variables to be entered with
`{{brackets}}`. Handles many contenteditable complexities to implement.
- Better interaction for renaming and deleting of templates in the editor.
- Changes tabbing behavior when using templates. Tabbing between variables now wraps
around, and typing tab from outside a variable region highlights the closest region.
- Prevents "Enter" key in the composer when inside a variable region, and strips all
formatting/tags from within the region - this prevents major contenteditable issues
that can result in inline CSS in the style of our variable regions, which will not be
removed when sending.
- Shows a warning when choosing a template if it will replace existing text in a draft.
- Prevents invalid characters in template names (due to filenames, esp. on Windows),
and shows an error message. Strips these characters from draft titles when making a
template.
- Fixes a bug where TemplateStore's initialization code was being called multiple times.
New N1 code:
- Several new methods in `DOMUtils` useful for working with contenteditable.
- Implement some missing methods in `Editor`
Refactor:
- Major refactor/rewrite of template composer extension to use new DOMUtils methods
and simplify the logic (while adding new functionality).
Remaining issues:
- `preferences-tempaltes.cjsx` and `template-editor.coffee` should be rewritten in ES6
for consistency
- Need tests for new DOMUtils functions and for new Templates plugin code.
Test Plan: manual, need to update specs
Reviewers: evan, bengotow
Reviewed By: evan, bengotow
Subscribers: juan
Differential Revision: https://phab.nylas.com/D2382
62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import {DraftStore, React} from 'nylas-exports';
|
|
|
|
class TemplateStatusBar extends React.Component {
|
|
static displayName = 'TemplateStatusBar'
|
|
|
|
static propTypes = {
|
|
draftClientId: React.PropTypes.string,
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.state = { draft: null };
|
|
}
|
|
|
|
componentDidMount() {
|
|
DraftStore.sessionForClientId(this.props.draftClientId).then((_proxy)=> {
|
|
if (this._unmounted) {
|
|
return;
|
|
}
|
|
if (_proxy.draftClientId === this.props.draftClientId) {
|
|
this._proxy = _proxy;
|
|
this.unsubscribe = this._proxy.listen(this._onDraftChange.bind(this), this);
|
|
this._onDraftChange();
|
|
}
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this._unmounted = true;
|
|
if (this.unsubscribe) this.unsubscribe();
|
|
}
|
|
|
|
static containerStyles = {
|
|
textAlign: 'center',
|
|
width: 530,
|
|
margin: 'auto',
|
|
}
|
|
|
|
_onDraftChange() {
|
|
this.setState({draft: this._proxy.draft()});
|
|
}
|
|
|
|
_draftUsesTemplate() {
|
|
if (this.state.draft) {
|
|
return this.state.draft.body.search(/<code[^>]*class="var[^>]*>/i) > 0;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this._draftUsesTemplate()) {
|
|
return (
|
|
<div className="template-status-bar">
|
|
Press "tab" to quickly move between the blanks - highlighting will not be visible to recipients.
|
|
</div>
|
|
);
|
|
}
|
|
return <div></div>;
|
|
}
|
|
|
|
}
|
|
|
|
export default TemplateStatusBar;
|