diff --git a/.eslintrc.js b/.eslintrc.js
index ee4b9c1cb..02708f2d5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -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
diff --git a/dev/Common/HtmlEditor.js b/dev/Common/HtmlEditor.js
index cad145881..f1539fe8e 100644
--- a/dev/Common/HtmlEditor.js
+++ b/dev/Common/HtmlEditor.js
@@ -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: 'Sx',
+ cmd: () => this.doAction('subscript','SUB')
+ },
+ sup: {
+ html: 'Sx',
+ 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, `
`);
- }
- };
-
- 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, ``);
+ }
+ };
+
+ 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, ``);
+ }
+ };
+
+ 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;
diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js
index f41bfa0a9..e0e87bba2 100644
--- a/dev/View/Popup/Compose.js
+++ b/dev/View/Popup/Compose.js
@@ -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) {
diff --git a/dev/View/Popup/Template.js b/dev/View/Popup/Template.js
index 47018a45c..ef45ab257 100644
--- a/dev/View/Popup/Template.js
+++ b/dev/View/Popup/Template.js
@@ -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);
diff --git a/dev/boot.js b/dev/boot.js
index 4747a3e3e..75373910d 100644
--- a/dev/boot.js
+++ b/dev/boot.js
@@ -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);
diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php b/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php
index f3aea0e0f..945d039bd 100644
--- a/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php
+++ b/rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php
@@ -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';
diff --git a/rainloop/v/0.0.0/app/libraries/RainLoop/Config/Application.php b/rainloop/v/0.0.0/app/libraries/RainLoop/Config/Application.php
index d6e7ef00d..42deb2185 100644
--- a/rainloop/v/0.0.0/app/libraries/RainLoop/Config/Application.php
+++ b/rainloop/v/0.0.0/app/libraries/RainLoop/Config/Application.php
@@ -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),
diff --git a/tasks/vendors.js b/tasks/vendors.js
index 41a26f172..10e3885fc 100644
--- a/tasks/vendors.js
+++ b/tasks/vendors.js
@@ -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);