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

.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

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: '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,
+				if (window.CKEDITOR) {
-					language = rl.settings.get('Language'),
+					const config = CKEditorDefaultConfig,
-					allowSource = !!rl.settings.app('allowHtmlEditorSourceButton'),
+						language = rl.settings.get('Language'),
-					biti = !!rl.settings.app('allowHtmlEditorBitiButtons');
+						allowSource = !!rl.settings.app('allowHtmlEditorSourceButton'),
+						biti = !!rl.settings.app('allowHtmlEditorBitiButtons');
 
-				if ((allowSource || !biti) && !config.toolbarGroups.__cfgInited) {
+					if ((allowSource || !biti) && !config.toolbarGroups.__cfgInited) {
-					config.toolbarGroups.__cfgInited = true;
+						config.toolbarGroups.__cfgInited = true;
 
-					if (allowSource) {
+						if (allowSource) {
-						config.removeButtons = config.removeButtons.replace(',Source', '');
+							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 (!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', () => {
+									reader.onloadend = () => {
-					if (this.editor.removeMenuItem) {
+										if (reader.result) {
-						this.editor.removeMenuItem('cut');
+											this.replaceHtml(imageId, `<img src="${reader.result}" />`);
-						this.editor.removeMenuItem('copy');
+										}
-						this.editor.removeMenuItem('paste');
+									};
+
+									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;

dev/View/Popup/Compose.js

@@ -650,12 +650,8 @@ class ComposePopupView extends AbstractViewNext {
 				this.oEditor = new HtmlEditor(
 					this.composeEditorArea(),
 					null,
-					() => {
+					() => fOnInit(this.oEditor),
-						fOnInit(this.oEditor);
+					bHtml => this.isHtml(!!bHtml)
-					},
-					(bHtml) => {
-						this.isHtml(!!bHtml);
-					}
 				);
 				// }, 1000);
 			} else if (this.oEditor) {

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.populateBodyFromEditor();
+				() => this.editor.setHtmlOrPlain(sBody)
-				},
-				() => {
-					this.editor.setHtmlOrPlain(sBody);
-				}
 			);
 		} else {
 			this.editor.setHtmlOrPlain(sBody);

dev/boot.js

@@ -202,10 +202,8 @@ win.__initAppData = appData => {
 			})
 			.then(() => loadScript(appData.StaticEditorJsLink))
 			.then(() => {
-				if (win.CKEDITOR && win.__initEditor) {
+				win.__initEditor && win.__initEditor();
-					win.__initEditor();
+				win.__initEditor = null;
-					win.__initEditor = null;
-				}
 			});
 	} else {
 		runMainBoot(true);

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';

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),

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);