mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Improve switching of wysiwyg/plain composer
This commit is contained in:
djmaze
parent
cd2b3ace89
commit
90ee39b114
|
|
@ -66,7 +66,14 @@ class HtmlEditor {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
isHtml() {
|
||||
return this.editor ? 'plain' !== this.editor.mode : false;
|
||||
return this.editor ? !this.isPlain() : false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isPlain() {
|
||||
return this.editor ? 'plain' === this.editor.mode : false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -100,7 +107,7 @@ class HtmlEditor {
|
|||
let result = '';
|
||||
if (this.editor) {
|
||||
try {
|
||||
if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain) {
|
||||
if (this.isPlain() && this.editor.plugins.plain && this.editor.__plain) {
|
||||
result = this.editor.__plain.getRawData();
|
||||
} else {
|
||||
result = wrapIsHtml
|
||||
|
|
@ -123,59 +130,45 @@ class HtmlEditor {
|
|||
return (this.isHtml() ? ':HTML:' : '') + this.getData(wrapIsHtml);
|
||||
}
|
||||
|
||||
modeToggle(plain) {
|
||||
if (this.editor) {
|
||||
modeWysiwyg() {
|
||||
try {
|
||||
if (plain) {
|
||||
if ('plain' === this.editor.mode) {
|
||||
this.editor.setMode('wysiwyg');
|
||||
}
|
||||
} else if ('wysiwyg' === this.editor.mode) {
|
||||
this.editor.setMode('plain');
|
||||
}
|
||||
} catch (e) {} // eslint-disable-line no-empty
|
||||
this.editor && this.editor.setMode('wysiwyg');
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
modePlain() {
|
||||
try {
|
||||
this.editor && this.editor.setMode('plain');
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
setHtmlOrPlain(text, focus) {
|
||||
setHtmlOrPlain(text) {
|
||||
if (':HTML:' === text.substr(0, 6)) {
|
||||
this.setHtml(text.substr(6), focus);
|
||||
this.setHtml(text.substr(6));
|
||||
} else {
|
||||
this.setPlain(text, focus);
|
||||
this.setPlain(text);
|
||||
}
|
||||
}
|
||||
|
||||
setHtml(html, focus) {
|
||||
setData(mode, data) {
|
||||
if (this.editor && this.__inited) {
|
||||
this.clearCachedSignature();
|
||||
|
||||
this.modeToggle(true);
|
||||
|
||||
html = html.replace(/<p[^>]*><\/p>/gi, '');
|
||||
|
||||
try {
|
||||
this.editor.setData(html);
|
||||
} catch (e) {} // eslint-disable-line no-empty
|
||||
|
||||
focus && this.focus();
|
||||
}
|
||||
}
|
||||
|
||||
setPlain(plain, focus) {
|
||||
if (this.editor && this.__inited) {
|
||||
this.clearCachedSignature();
|
||||
|
||||
this.modeToggle(false);
|
||||
if ('plain' === this.editor.mode && this.editor.plugins.plain && this.editor.__plain) {
|
||||
this.editor.__plain.setRawData(plain);
|
||||
this.editor.setMode(mode);
|
||||
if (this.isPlain() && this.editor.plugins.plain && this.editor.__plain) {
|
||||
this.editor.__plain.setRawData(data);
|
||||
} else {
|
||||
try {
|
||||
this.editor.setData(plain);
|
||||
} catch (e) {} // eslint-disable-line no-empty
|
||||
this.editor.setData(data);
|
||||
}
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
}
|
||||
|
||||
focus && this.focus();
|
||||
setHtml(html) {
|
||||
this.setData('wysiwyg', html/*.replace(/<p[^>]*><\/p>/gi, '')*/);
|
||||
}
|
||||
|
||||
setPlain(txt) {
|
||||
this.setData('plain', txt);
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
@ -208,7 +201,7 @@ class HtmlEditor {
|
|||
this.editor.on('focus', () => this.blurTimer && clearTimeout(this.blurTimer));
|
||||
this.editor.on('mode', () => {
|
||||
this.blurTrigger();
|
||||
this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
|
||||
this.onModeChange && this.onModeChange(!this.isPlain());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -234,8 +227,8 @@ class HtmlEditor {
|
|||
} catch (e) {} // eslint-disable-line no-empty
|
||||
}
|
||||
|
||||
clear(focus) {
|
||||
this.setHtml('', focus);
|
||||
clear() {
|
||||
this.setHtml('');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
9
dev/External/SquireUI.js
vendored
9
dev/External/SquireUI.js
vendored
|
|
@ -491,14 +491,13 @@ class SquireUI
|
|||
}
|
||||
|
||||
setMode(mode) {
|
||||
if (this.mode != mode) {
|
||||
let cl = this.container.classList;
|
||||
cl.remove('squire-mode-'+this.mode);
|
||||
if ('plain' == mode) {
|
||||
let html = this.squire.getHTML();
|
||||
this.plain.value = rl.Utils.htmlToPlain(html, true).trim();
|
||||
this.plain.value = rl.Utils.htmlToPlain(this.squire.getHTML(), true).trim();
|
||||
} else {
|
||||
let plain = this.plain.value;
|
||||
this.setData(rl.Utils.plainToHtml(plain, true));
|
||||
this.setData(rl.Utils.plainToHtml(this.plain.value, true));
|
||||
mode = 'wysiwyg';
|
||||
}
|
||||
this.mode = mode; // 'wysiwyg' or 'plain'
|
||||
|
|
@ -506,6 +505,7 @@ class SquireUI
|
|||
this.onModeChange && this.onModeChange();
|
||||
setTimeout(()=>this.focus(),1);
|
||||
}
|
||||
}
|
||||
|
||||
// CKeditor gimmicks used by HtmlEditor
|
||||
on(type, fn) {
|
||||
|
|
@ -551,6 +551,7 @@ class SquireUI
|
|||
}
|
||||
|
||||
setData(html) {
|
||||
// this.plain.value = html;
|
||||
this.squire.setHTML(trimLines(html));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -528,11 +528,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
openOpenPgpPopup() {
|
||||
if (PgpStore.capaOpenPGP() && this.oEditor && !this.oEditor.isHtml()) {
|
||||
showScreenPopup(ComposeOpenPgpPopupView, [
|
||||
(result) => {
|
||||
this.editor((editor) => {
|
||||
editor.setPlain(result);
|
||||
});
|
||||
},
|
||||
result => this.editor(editor => editor.setPlain(result)),
|
||||
this.oEditor.getData(false),
|
||||
this.currentIdentity(),
|
||||
this.to(),
|
||||
|
|
@ -568,9 +564,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
}
|
||||
};
|
||||
|
||||
identities.forEach((item, index) => {
|
||||
identitiesCache[item.email()] = [item, index];
|
||||
});
|
||||
identities.forEach((item, index) => identitiesCache[item.email()] = [item, index]);
|
||||
|
||||
if (message) {
|
||||
switch (composeType) {
|
||||
|
|
@ -700,9 +694,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
}
|
||||
}
|
||||
|
||||
converSignature(signature) {
|
||||
signature = signature.replace(/[\r]/g, '');
|
||||
|
||||
convertSignature(signature) {
|
||||
let fromLine = this.oLastMessage ? this.emailArrayToStringLineHelper(this.oLastMessage.from, true) : '';
|
||||
if (fromLine) {
|
||||
signature = signature.replace(/{{FROM-FULL}}/g, fromLine);
|
||||
|
|
@ -714,39 +706,24 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
signature = signature.replace(/{{FROM}}/g, fromLine);
|
||||
}
|
||||
|
||||
signature = signature.replace(/[\s]{1,2}{{FROM}}/g, '{{FROM}}');
|
||||
signature = signature.replace(/[\s]{1,2}{{FROM-FULL}}/g, '{{FROM-FULL}}');
|
||||
|
||||
signature = signature.replace(/{{FROM}}/g, '');
|
||||
signature = signature.replace(/{{FROM-FULL}}/g, '');
|
||||
|
||||
if (signature.includes('{{DATE}}')) {
|
||||
signature = signature.replace(/{{DATE}}/g, new Date().format('LLLL'));
|
||||
}
|
||||
|
||||
if (signature.includes('{{TIME}}')) {
|
||||
signature = signature.replace(/{{TIME}}/g, new Date().format('LT'));
|
||||
}
|
||||
|
||||
signature = signature.replace(/{{MOMENT:[^}]+}}/g, '');
|
||||
|
||||
return signature;
|
||||
return signature
|
||||
.replace(/[\r]/g, '')
|
||||
.replace(/[\s]{1,2}?{{FROM}}/g, '')
|
||||
.replace(/[\s]{1,2}?{{FROM-FULL}}/g, '')
|
||||
.replace(/{{DATE}}/g, new Date().format('LLLL'))
|
||||
.replace(/{{TIME}}/g, new Date().format('LT'))
|
||||
.replace(/{{MOMENT:[^}]+}}/g, '');
|
||||
}
|
||||
|
||||
setSignatureFromIdentity(identity) {
|
||||
if (identity) {
|
||||
this.editor((editor) => {
|
||||
let isHtml = false,
|
||||
signature = identity.signature();
|
||||
this.editor(editor => {
|
||||
let signature = identity.signature(),
|
||||
isHtml = signature && ':HTML:' === signature.substr(0, 6);
|
||||
|
||||
if (signature) {
|
||||
if (':HTML:' === signature.substr(0, 6)) {
|
||||
isHtml = true;
|
||||
signature = signature.substr(6);
|
||||
}
|
||||
}
|
||||
|
||||
editor.setSignature(this.converSignature(signature), isHtml, !!identity.signatureInsertBefore());
|
||||
editor.setSignature(
|
||||
this.convertSignature(isHtml ? signature.substr(6) : signature),
|
||||
isHtml, !!identity.signatureInsertBefore());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -798,7 +775,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
|
||||
onWarmUp() {
|
||||
if (this.modalVisibility && !this.modalVisibility()) {
|
||||
this.editor(editor => editor.modeToggle(false));
|
||||
this.editor(editor => editor.modeWysiwyg());
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -827,6 +804,11 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
return aList.map(item => item.toLine(bFriendly)).join(', ');
|
||||
}
|
||||
|
||||
isPlainEditor() {
|
||||
let type = this.editorDefaultType();
|
||||
return EditorDefaultType.Html !== type && EditorDefaultType.HtmlForced !== type;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string=} sType = ComposeType.Empty
|
||||
* @param {?MessageModel|Array=} oMessageOrArray = null
|
||||
|
|
@ -980,8 +962,8 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
'EMAIL': sFrom
|
||||
});
|
||||
|
||||
sText = sText.replace(/<img[^>]+>/g, '').replace(/<a\s[^>]+><\/a>/g, '');
|
||||
sText = '<br /><br />' + sReplyTitle + ':' + '<br /><br />' + '<blockquote>' + sText.trim() + '</blockquote>';
|
||||
sText = sText.replace(/<img[^>]+>/g, '').replace(/<a\s[^>]+><\/a>/g, '').trim();
|
||||
sText = '<br/><br/>' + sReplyTitle + ':<br/><br/><blockquote>' + sText + '</blockquote>';
|
||||
|
||||
break;
|
||||
|
||||
|
|
@ -1020,14 +1002,14 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
// no default
|
||||
}
|
||||
|
||||
this.editor((editor) => {
|
||||
editor.setHtml(sText, false);
|
||||
this.editor(editor => {
|
||||
editor.setHtml(sText);
|
||||
|
||||
if (
|
||||
EditorDefaultType.PlainForced === this.editorDefaultType() ||
|
||||
(!message.isHtml() && EditorDefaultType.HtmlForced !== this.editorDefaultType())
|
||||
) {
|
||||
editor.modeToggle(false);
|
||||
editor.modePlain();
|
||||
}
|
||||
|
||||
if (identity && ComposeType.Draft !== lineComposeType && ComposeType.EditAsNew !== lineComposeType) {
|
||||
|
|
@ -1041,14 +1023,11 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
|
||||
sText = null != sCustomPlainText ? '' + sCustomPlainText : '';
|
||||
|
||||
this.editor((editor) => {
|
||||
editor.setHtml(sText, false);
|
||||
this.editor(editor => {
|
||||
editor.setHtml(sText);
|
||||
|
||||
if (
|
||||
EditorDefaultType.Html !== this.editorDefaultType() &&
|
||||
EditorDefaultType.HtmlForced !== this.editorDefaultType()
|
||||
) {
|
||||
editor.modeToggle(false);
|
||||
if (this.isPlainEditor()) {
|
||||
editor.modePlain();
|
||||
}
|
||||
|
||||
if (identity) {
|
||||
|
|
@ -1058,18 +1037,13 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
this.setFocusInPopup();
|
||||
});
|
||||
} else if (isNonEmptyArray(oMessageOrArray)) {
|
||||
oMessageOrArray.forEach(item => {
|
||||
this.addMessageAsAttachment(item);
|
||||
});
|
||||
oMessageOrArray.forEach(item => this.addMessageAsAttachment(item));
|
||||
|
||||
this.editor((editor) => {
|
||||
editor.setHtml('', false);
|
||||
|
||||
if (
|
||||
EditorDefaultType.Html !== this.editorDefaultType() &&
|
||||
EditorDefaultType.HtmlForced !== this.editorDefaultType()
|
||||
) {
|
||||
editor.modeToggle(false);
|
||||
this.editor(editor => {
|
||||
if (this.isPlainEditor()) {
|
||||
editor.setPlain('')
|
||||
} else {
|
||||
editor.setHtml('');
|
||||
}
|
||||
|
||||
if (identity && ComposeType.Draft !== lineComposeType && ComposeType.EditAsNew !== lineComposeType) {
|
||||
|
|
@ -1508,7 +1482,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
this.saving(false);
|
||||
|
||||
if (this.oEditor) {
|
||||
this.oEditor.clear(false);
|
||||
this.oEditor.clear();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ class TemplatePopupView extends AbstractViewPopup {
|
|||
this.submitError('');
|
||||
|
||||
if (this.editor) {
|
||||
this.editor.setPlain('', false);
|
||||
this.editor.setPlain('');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue