mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
Added Squire HTML editor as lightweight fast alternative solution for the heavy CKEditor
Some features are still missing (as i need to create own UI) Enable in: [labs] use_squire_html_editor = On
This commit is contained in:
parent
90acc04750
commit
540c70ecbf
|
@ -23,6 +23,8 @@ module.exports = {
|
|||
// others
|
||||
'jQuery': "readonly",
|
||||
'openpgp': "readonly",
|
||||
'CKEDITOR': "readonly",
|
||||
'Squire': "readonly",
|
||||
// node_modules/knockout but dev/External/ko.js is used
|
||||
// 'ko': "readonly",
|
||||
// node_modules/simplestatemanager
|
||||
|
|
|
@ -3,7 +3,9 @@ import { EventKeyCode } from 'Common/Enums';
|
|||
/**
|
||||
* @type {Object}
|
||||
*/
|
||||
const htmlEditorDefaultConfig = {
|
||||
const doc = document,
|
||||
|
||||
CKEditorDefaultConfig = {
|
||||
'title': false,
|
||||
'stylesSet': false,
|
||||
'customConfig': '',
|
||||
|
@ -41,6 +43,35 @@ const htmlEditorDefaultConfig = {
|
|||
'fontSize_sizes': '10/10px;12/12px;13/13px;14/14px;16/16px;18/18px;20/20px;24/24px;28/28px;36/36px;48/48px'
|
||||
},
|
||||
|
||||
SquireDefaultConfig = {
|
||||
/*
|
||||
blockTag: 'DIV',
|
||||
blockAttributes: null,
|
||||
tagAttributes: {
|
||||
blockquote: null,
|
||||
ul: null,
|
||||
ol: null,
|
||||
li: null,
|
||||
a: null
|
||||
},
|
||||
classNames: {
|
||||
colour: 'colour',
|
||||
fontFamily: 'font',
|
||||
fontSize: 'size',
|
||||
highlight: 'highlight'
|
||||
},
|
||||
leafNodeNames: leafNodeNames,
|
||||
undo: {
|
||||
documentSizeThreshold: -1, // -1 means no threshold
|
||||
undoLimit: -1 // -1 means no limit
|
||||
},
|
||||
isInsertedHTMLSanitized: true,
|
||||
isSetHTMLSanitized: true,
|
||||
willCutCopy: null,
|
||||
addLinks: true // allow_smart_html_links
|
||||
*/
|
||||
},
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
*/
|
||||
|
@ -77,6 +108,232 @@ htmlEditorLangsMap = {
|
|||
'zh_tw': 'zh'
|
||||
};
|
||||
|
||||
class SquireUI
|
||||
{
|
||||
constructor(container) {
|
||||
const actions = {
|
||||
source: {
|
||||
html: '〈〉',
|
||||
cmd: () => this.doAction('bold','B')
|
||||
},
|
||||
/*
|
||||
bidi: {
|
||||
allowHtmlEditorBitiButtons
|
||||
},
|
||||
*/
|
||||
bold: {
|
||||
html: '𝐁',
|
||||
cmd: () => this.doAction('bold','B')
|
||||
},
|
||||
italic: {
|
||||
html: '𝐼',
|
||||
cmd: () => this.doAction('italic','I')
|
||||
},
|
||||
underline: {
|
||||
html: 'U',
|
||||
cmd: () => this.doAction('underline','U'),
|
||||
style: 'text-decoration:underline;'
|
||||
},
|
||||
strike: {
|
||||
html: 'S',
|
||||
cmd: () => this.doAction('strikethrough','S'),
|
||||
style: 'text-decoration:line-through;'
|
||||
},
|
||||
sub: {
|
||||
html: 'S<sub>x</sub>',
|
||||
cmd: () => this.doAction('subscript','SUB')
|
||||
},
|
||||
sup: {
|
||||
html: 'S<sup>x</sup>',
|
||||
cmd: () => this.doAction('superscript','SUP')
|
||||
},
|
||||
ol: {
|
||||
html: '#',
|
||||
cmd: () => this.doList('OL')
|
||||
},
|
||||
ul: {
|
||||
html: '⋮',
|
||||
cmd: () => this.doList('UL')
|
||||
},
|
||||
quote: {
|
||||
html: '"',
|
||||
cmd: () => {
|
||||
let parent = this.getParentNodeName('UL,OL');
|
||||
(parent && 'BLOCKQUOTE' == parent) ? this.squire.decreaseQuoteLevel() : this.squire.increaseQuoteLevel();
|
||||
}
|
||||
},
|
||||
indentDecrease: {
|
||||
html: '⇤',
|
||||
cmd: () => this.squire.changeIndentationLevel('decrease')
|
||||
},
|
||||
indentIncrease: {
|
||||
html: '⇥',
|
||||
cmd: () => this.squire.changeIndentationLevel('increase')
|
||||
},
|
||||
link: {
|
||||
html: '🔗',
|
||||
cmd: () => {
|
||||
if ('A' === this.getParentNodeName()) {
|
||||
this.squire.removeLink();
|
||||
} else {
|
||||
let url = prompt("Link","https://");
|
||||
url != null && url.length && this.squire.makeLink(url);
|
||||
}
|
||||
}
|
||||
},
|
||||
image: {
|
||||
html: '📷🖼️',
|
||||
cmd: () => {
|
||||
if ('IMG' === this.getParentNodeName()) {
|
||||
// wysiwyg.removeLink();
|
||||
} else {
|
||||
let src = prompt("Image","https://");
|
||||
src != null && src.length && this.squire.insertImage(src);
|
||||
}
|
||||
}
|
||||
},
|
||||
undo: {
|
||||
html: '↶',
|
||||
cmd: () => this.squire.undo()
|
||||
},
|
||||
redo: {
|
||||
html: '↷',
|
||||
cmd: () => this.squire.redo()
|
||||
},
|
||||
},
|
||||
|
||||
content = doc.createElement('div'),
|
||||
toolbar = doc.createElement('div'),
|
||||
squire = new Squire(content, SquireDefaultConfig);
|
||||
|
||||
content.id = 'squire-content';
|
||||
content.style.minHeight = '200px';
|
||||
|
||||
this.squire = squire;
|
||||
this.content = content;
|
||||
|
||||
toolbar.id = 'squire-toolbar';
|
||||
for (let action in actions) {
|
||||
if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) {
|
||||
continue;
|
||||
}
|
||||
let cfg = actions[action],
|
||||
btn = cfg.btn = doc.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.dataset.action = action;
|
||||
btn.action_cmd = cfg.cmd;
|
||||
btn.innerHTML = cfg.html;
|
||||
btn.style.padding = 0;
|
||||
cfg.style && btn.setAttribute('style', cfg.style);
|
||||
toolbar.append(btn);
|
||||
}
|
||||
toolbar.addEventListener('click', e => {
|
||||
e.target.action_cmd && e.target.action_cmd();
|
||||
});
|
||||
|
||||
actions.undo.btn.disabled = actions.redo.btn.disabled = true;
|
||||
squire.addEventListener('undoStateChange', state => {
|
||||
actions.undo.btn.disabled = !state.canUndo;
|
||||
actions.redo.btn.disabled = !state.canRedo;
|
||||
});
|
||||
|
||||
container.append(toolbar, content);
|
||||
|
||||
/*
|
||||
squire-raw.js:2161: this.fireEvent( 'dragover', {
|
||||
squire-raw.js:2168: this.fireEvent( 'drop', {
|
||||
squire-raw.js:2583: this.fireEvent( event.type, event );
|
||||
squire-raw.js:2864: this.fireEvent( 'pathChange', { path: newPath } );
|
||||
squire-raw.js:2867: this.fireEvent( range.collapsed ? 'cursor' : 'select', {
|
||||
squire-raw.js:3004: this.fireEvent( 'input' );
|
||||
squire-raw.js:3080: this.fireEvent( 'input' );
|
||||
squire-raw.js:3101: this.fireEvent( 'input' );
|
||||
squire-raw.js:4036: this.fireEvent( 'willPaste', event );
|
||||
squire-raw.js:4089: this.fireEvent( 'willPaste', event );
|
||||
*/
|
||||
|
||||
// CKEditor gimmicks
|
||||
this.mode = 'wysiwyg'; // 'plain'
|
||||
this.plugins = {
|
||||
plain: false
|
||||
};
|
||||
// .plugins.plain && this.editor.__plain
|
||||
this.focusManager = {
|
||||
hasFocus: () => squire._isFocused,
|
||||
blur: () => squire.blur()
|
||||
};
|
||||
}
|
||||
|
||||
doAction(name, tag) {
|
||||
if (this.testPresenceinSelection(tag, new RegExp('>'+tag+'\\b'))) {
|
||||
name = 'remove' + (name.toUpperCase()[0]) + name.substr(1);
|
||||
}
|
||||
this.squire[name]();
|
||||
}
|
||||
|
||||
getParentNodeName(selector) {
|
||||
let parent = this.squire.getSelectionClosest(selector);
|
||||
return parent ? parent.nodeName : null;
|
||||
}
|
||||
|
||||
doList(type) {
|
||||
let parent = this.getParentNodeName('UL,OL'),
|
||||
fn = {UL:'makeUnorderedList',OL:'makeOrderedList'};
|
||||
(parent && parent == type) ? this.squire.removeList() : this.squire[fn[type]]();
|
||||
}
|
||||
|
||||
testPresenceinSelection(format, validation) {
|
||||
return validation.test(this.squire.getPath()) | this.squire.hasFormat(format);
|
||||
}
|
||||
|
||||
// CKeditor gimmicks
|
||||
setMode(mode) {
|
||||
this.mode = mode; // 'wysiwyg' or 'plain'
|
||||
}
|
||||
|
||||
on(type, fn) {
|
||||
this.squire.addEventListener(type, fn);
|
||||
}
|
||||
|
||||
execCommand(cmd, cfg) {
|
||||
if ('insertSignature' == cmd) {
|
||||
if (cfg.clearCache) {
|
||||
// remove it;
|
||||
} else {
|
||||
cfg.isHtml; // bool
|
||||
cfg.insertBefore; // bool
|
||||
cfg.signature; // string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkDirty() {
|
||||
return false;
|
||||
}
|
||||
|
||||
resetDirty() {}
|
||||
|
||||
getData() {
|
||||
return this.squire.getHTML();
|
||||
}
|
||||
|
||||
setData(html) {
|
||||
this.squire.setHTML(html);
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.squire.focus();
|
||||
}
|
||||
|
||||
resize(width, height) {
|
||||
this.content.style.height = Math.max(200, (height - this.content.offsetTop)) + 'px';
|
||||
}
|
||||
|
||||
setReadOnly(bool) {
|
||||
this.content.contentEditable = !!bool;
|
||||
}
|
||||
}
|
||||
|
||||
class HtmlEditor {
|
||||
editor;
|
||||
blurTimer = 0;
|
||||
|
@ -267,84 +524,131 @@ class HtmlEditor {
|
|||
init() {
|
||||
if (this.element && !this.editor) {
|
||||
const initFunc = () => {
|
||||
const config = htmlEditorDefaultConfig,
|
||||
language = rl.settings.get('Language'),
|
||||
allowSource = !!rl.settings.app('allowHtmlEditorSourceButton'),
|
||||
biti = !!rl.settings.app('allowHtmlEditorBitiButtons');
|
||||
if (window.CKEDITOR) {
|
||||
const config = CKEditorDefaultConfig,
|
||||
language = rl.settings.get('Language'),
|
||||
allowSource = !!rl.settings.app('allowHtmlEditorSourceButton'),
|
||||
biti = !!rl.settings.app('allowHtmlEditorBitiButtons');
|
||||
|
||||
if ((allowSource || !biti) && !config.toolbarGroups.__cfgInited) {
|
||||
config.toolbarGroups.__cfgInited = true;
|
||||
if ((allowSource || !biti) && !config.toolbarGroups.__cfgInited) {
|
||||
config.toolbarGroups.__cfgInited = true;
|
||||
|
||||
if (allowSource) {
|
||||
config.removeButtons = config.removeButtons.replace(',Source', '');
|
||||
}
|
||||
|
||||
if (!biti) {
|
||||
config.removePlugins += (config.removePlugins ? ',' : '') + 'bidi';
|
||||
}
|
||||
}
|
||||
|
||||
config.enterMode = window.CKEDITOR.ENTER_BR;
|
||||
config.shiftEnterMode = window.CKEDITOR.ENTER_P;
|
||||
|
||||
config.language = htmlEditorLangsMap[(language || 'en').toLowerCase()] || 'en';
|
||||
if (window.CKEDITOR.env) {
|
||||
window.CKEDITOR.env.isCompatible = true;
|
||||
}
|
||||
|
||||
this.editor = window.CKEDITOR.appendTo(this.element, config);
|
||||
|
||||
this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
|
||||
|
||||
this.editor.on('blur', () => this.blurTrigger());
|
||||
|
||||
this.editor.on('mode', () => {
|
||||
this.blurTrigger();
|
||||
this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
|
||||
});
|
||||
|
||||
this.editor.on('focus', () => this.focusTrigger());
|
||||
|
||||
if (window.FileReader) {
|
||||
this.editor.on('drop', (event) => {
|
||||
if (0 < event.data.dataTransfer.getFilesCount()) {
|
||||
const file = event.data.dataTransfer.getFile(0);
|
||||
if (file && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) {
|
||||
const id = event.data.dataTransfer.id,
|
||||
imageId = `[img=${id}]`,
|
||||
reader = new FileReader();
|
||||
|
||||
reader.onloadend = () => {
|
||||
if (reader.result) {
|
||||
this.replaceHtml(imageId, `<img src="${reader.result}" />`);
|
||||
}
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
event.data.dataTransfer.setData('text/html', imageId);
|
||||
}
|
||||
if (allowSource) {
|
||||
config.removeButtons = config.removeButtons.replace(',Source', '');
|
||||
}
|
||||
|
||||
if (!biti) {
|
||||
config.removePlugins += (config.removePlugins ? ',' : '') + 'bidi';
|
||||
}
|
||||
}
|
||||
|
||||
config.enterMode = CKEDITOR.ENTER_BR;
|
||||
config.shiftEnterMode = CKEDITOR.ENTER_P;
|
||||
|
||||
config.language = htmlEditorLangsMap[(language || 'en').toLowerCase()] || 'en';
|
||||
if (CKEDITOR.env) {
|
||||
CKEDITOR.env.isCompatible = true;
|
||||
}
|
||||
|
||||
this.editor = CKEDITOR.appendTo(this.element, config);
|
||||
|
||||
this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
|
||||
|
||||
this.editor.on('blur', () => this.blurTrigger());
|
||||
|
||||
this.editor.on('mode', () => {
|
||||
this.blurTrigger();
|
||||
this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
|
||||
});
|
||||
|
||||
this.editor.on('focus', () => this.focusTrigger());
|
||||
|
||||
if (window.FileReader) {
|
||||
this.editor.on('drop', (event) => {
|
||||
if (0 < event.data.dataTransfer.getFilesCount()) {
|
||||
const file = event.data.dataTransfer.getFile(0);
|
||||
if (file && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) {
|
||||
const id = event.data.dataTransfer.id,
|
||||
imageId = `[img=${id}]`,
|
||||
reader = new FileReader();
|
||||
|
||||
reader.onloadend = () => {
|
||||
if (reader.result) {
|
||||
this.replaceHtml(imageId, `<img src="${reader.result}" />`);
|
||||
}
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
event.data.dataTransfer.setData('text/html', imageId);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.editor.on('instanceReady', () => {
|
||||
if (this.editor.removeMenuItem) {
|
||||
this.editor.removeMenuItem('cut');
|
||||
this.editor.removeMenuItem('copy');
|
||||
this.editor.removeMenuItem('paste');
|
||||
}
|
||||
|
||||
this.__resizable = true;
|
||||
this.__inited = true;
|
||||
|
||||
this.resize();
|
||||
|
||||
this.onReady && this.onReady();
|
||||
});
|
||||
}
|
||||
else if (window.Squire) {
|
||||
this.editor = new SquireUI(this.element, this.editor);
|
||||
this.editor.on('blur', () => this.blurTrigger());
|
||||
this.editor.on('focus', () => this.focusTrigger());
|
||||
/*
|
||||
// TODO
|
||||
this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
|
||||
this.editor.on('mode', () => {
|
||||
this.blurTrigger();
|
||||
this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
|
||||
});
|
||||
if (window.FileReader) {
|
||||
this.editor.on('dragover', (event) => {
|
||||
event.dataTransfer = clipboardData
|
||||
});
|
||||
this.editor.on('drop', (event) => {
|
||||
event.dataTransfer = clipboardData
|
||||
if (0 < event.data.dataTransfer.getFilesCount()) {
|
||||
const file = event.data.dataTransfer.getFile(0);
|
||||
if (file && event.data.dataTransfer.id && file.type && file.type.match(/^image/i)) {
|
||||
const id = event.data.dataTransfer.id,
|
||||
imageId = `[img=${id}]`,
|
||||
reader = new FileReader();
|
||||
|
||||
this.editor.on('instanceReady', () => {
|
||||
if (this.editor.removeMenuItem) {
|
||||
this.editor.removeMenuItem('cut');
|
||||
this.editor.removeMenuItem('copy');
|
||||
this.editor.removeMenuItem('paste');
|
||||
reader.onloadend = () => {
|
||||
if (reader.result) {
|
||||
this.replaceHtml(imageId, `<img src="${reader.result}" />`);
|
||||
}
|
||||
};
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
event.data.dataTransfer.setData('text/html', imageId);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
*/
|
||||
this.__resizable = true;
|
||||
this.__inited = true;
|
||||
|
||||
this.resize();
|
||||
|
||||
this.onReady && this.onReady();
|
||||
});
|
||||
this.onReady && setTimeout(() => this.onReady(), 1);
|
||||
}
|
||||
};
|
||||
|
||||
if (window.CKEDITOR) {
|
||||
if (window.CKEDITOR || window.Squire) {
|
||||
initFunc();
|
||||
} else {
|
||||
window.__initEditor = initFunc;
|
||||
|
|
|
@ -650,12 +650,8 @@ class ComposePopupView extends AbstractViewNext {
|
|||
this.oEditor = new HtmlEditor(
|
||||
this.composeEditorArea(),
|
||||
null,
|
||||
() => {
|
||||
fOnInit(this.oEditor);
|
||||
},
|
||||
(bHtml) => {
|
||||
this.isHtml(!!bHtml);
|
||||
}
|
||||
() => fOnInit(this.oEditor),
|
||||
bHtml => this.isHtml(!!bHtml)
|
||||
);
|
||||
// }, 1000);
|
||||
} else if (this.oEditor) {
|
||||
|
|
|
@ -107,12 +107,8 @@ class TemplatePopupView extends AbstractViewNext {
|
|||
if (!this.editor && this.signatureDom()) {
|
||||
this.editor = new HtmlEditor(
|
||||
this.signatureDom(),
|
||||
() => {
|
||||
this.populateBodyFromEditor();
|
||||
},
|
||||
() => {
|
||||
this.editor.setHtmlOrPlain(sBody);
|
||||
}
|
||||
() => this.populateBodyFromEditor(),
|
||||
() => this.editor.setHtmlOrPlain(sBody)
|
||||
);
|
||||
} else {
|
||||
this.editor.setHtmlOrPlain(sBody);
|
||||
|
|
|
@ -202,10 +202,8 @@ win.__initAppData = appData => {
|
|||
})
|
||||
.then(() => loadScript(appData.StaticEditorJsLink))
|
||||
.then(() => {
|
||||
if (win.CKEDITOR && win.__initEditor) {
|
||||
win.__initEditor();
|
||||
win.__initEditor = null;
|
||||
}
|
||||
win.__initEditor && win.__initEditor();
|
||||
win.__initEditor = null;
|
||||
});
|
||||
} else {
|
||||
runMainBoot(true);
|
||||
|
|
|
@ -1498,7 +1498,11 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
|
|||
$aResult['StaticAppJsLink'] = $this->StaticPath('js/'.($bAppJsDebug ? '' : 'min/').
|
||||
($bAdmin ? 'admin' : 'app').($bAppJsDebug ? '' : '.min').'.js');
|
||||
|
||||
$aResult['StaticEditorJsLink'] = $this->StaticPath('ckeditor/ckeditor.js');
|
||||
if ($this->Config()->Get('labs', 'use_squire_html_editor', false)) {
|
||||
$aResult['StaticEditorJsLink'] = $this->StaticPath('squire/squire'.($bAppJsDebug ? '-raw' : '').'.js');
|
||||
} else {
|
||||
$aResult['StaticEditorJsLink'] = $this->StaticPath('ckeditor/ckeditor.js');
|
||||
}
|
||||
|
||||
$aResult['EditorDefaultType'] = \in_array($aResult['EditorDefaultType'], array('Plain', 'Html', 'HtmlForced', 'PlainForced')) ?
|
||||
$aResult['EditorDefaultType'] : 'Plain';
|
||||
|
|
|
@ -350,6 +350,7 @@ Enables caching in the system'),
|
|||
'use_imap_thread' => array(true),
|
||||
'use_imap_move' => array(false),
|
||||
'use_imap_expunge_all_on_delete' => array(false),
|
||||
'use_squire_html_editor' => array(false),
|
||||
'imap_forwarded_flag' => array('$Forwarded'),
|
||||
'imap_read_receipt_flag' => array('$ReadReceipt'),
|
||||
'imap_body_text_limit' => array(555000),
|
||||
|
|
|
@ -33,6 +33,19 @@ const fontasticFontsCopy = () =>
|
|||
|
||||
const fontastic = gulp.series(fontasticFontsClear, fontasticFontsCopy);
|
||||
|
||||
// squire
|
||||
const squireClear = () => del('rainloop/v/' + config.devVersion + '/static/squire');
|
||||
|
||||
const squireCopy = () =>
|
||||
gulp
|
||||
.src([
|
||||
'vendors/squire/build/squire.js',
|
||||
'vendors/squire/build/squire-raw.js'
|
||||
])
|
||||
.pipe(gulp.dest('rainloop/v/' + config.devVersion + '/static/squire'));
|
||||
|
||||
const squire = gulp.series(squireClear, squireCopy);
|
||||
|
||||
// ckeditor
|
||||
const ckeditorClear = () => del('rainloop/v/' + config.devVersion + '/static/ckeditor');
|
||||
|
||||
|
@ -61,4 +74,4 @@ const ckeditorSetup = () =>
|
|||
|
||||
const ckeditor = gulp.series(ckeditorClear, ckeditorCopy, ckeditorCopyPlugins, ckeditorSetup);
|
||||
|
||||
exports.vendors = gulp.parallel(moment, ckeditor, fontastic, lightgallery);
|
||||
exports.vendors = gulp.parallel(moment, squire, ckeditor, fontastic, lightgallery);
|
||||
|
|
Loading…
Reference in a new issue