Improved Squire with the missing 'plain' mode.

README.md

@@ -88,23 +88,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 
 |js/*       	|1.14.0 	|native 	|
 |-----------	|--------:	|--------:	|
-|admin.js    	|2.130.942	|  986.303	|
-|app.js      	|4.184.455	|2.603.659	|
+|admin.js    	|2.130.942	|  990.560	|
+|app.js      	|4.184.455	|2.607.924	|
 |boot.js     	|  671.522	|    5.834	|
 |libs.js     	|  647.614	|  312.343	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|3.908.139	|
+|TOTAL      	|7.960.367	|3.916.661	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  134.678	| 73.657	| 39.834	| 34.181	|
-|app.min.js      	|  511.202	|  355.203	|140.462	| 94.064	| 75.648	|
+|admin.min.js    	|  252.147	|  135.441	| 73.657	| 40.158	| 34.434	|
+|app.min.js      	|  511.202	|  355.966	|140.462	| 94.405	| 75.847	|
 |boot.min.js     	|   66.007	|    3.166	| 22.567	|  1.571	|  1.345	|
 |libs.min.js     	|  572.545	|  295.754	|176.720	| 91.521	| 80.871	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|      0	|
-|TOTAL          	|1.434.353	|  788.801	|424.718	|226.990	|192.045	|
+|TOTAL          	|1.434.353	|  790.327	|424.718	|227.655	|192.497	|
 
-657.410 bytes (202.330 gzip) is not much, but it feels faster.
+644.026 bytes (197.063 gzip) is not much, but it feels faster.
 
 ### CSS changes
 
@@ -129,8 +129,8 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 
 |css/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |--------------	|-------:	|-------:	|------:	|------:	|------:	|
-|app.css    	| 340.334	| 252.797	| 46,959	| 36.394	| 30.615	|
-|app.min.css	| 274.791	| 206.474	| 39.618	| 32.238	| 27.339	|
+|app.css    	| 340.334	| 253.711	| 46,959	| 36.587	| 30.802	|
+|app.min.css	| 274.791	| 207.227	| 39.618	| 31.993	| 27.160	|
 |boot.css    	|       	|   2.538	|       	|    837	|    668	|
 |boot.min.css	|       	|   2.055	|       	|    732	|    560	|
 
@@ -142,7 +142,7 @@ Still TODO:
 
 * upload image inline
 * support for tables (really needed?!?)
-* toggle between HTML and plain
+* alternative for vendors/ckeditor-plugins/signature/plugin.js
 
 |       	| normal	| min    	| gzip  	| min gzip	|
 |--------	|-------:	|-------:	|------:	|--------:	|

dev/Common/HtmlEditor.js

@@ -267,7 +267,21 @@ class HtmlEditor {
 
 	init() {
 		if (this.element && !this.editor) {
-			const initFunc = () => {
+			const onReady = () => {
+				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();
+			},
+			initFunc = () => {
 				if (window.CKEDITOR) {
 					const config = CKEditorDefaultConfig,
 						language = rl.settings.get('Language'),
@@ -298,15 +312,6 @@ class HtmlEditor {
 
 					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()) {
@@ -330,32 +335,13 @@ class HtmlEditor {
 						});
 					}
 
-					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();
-					});
+					this.editor.on('instanceReady', 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
@@ -383,12 +369,16 @@ class HtmlEditor {
 						});
 					}
 */
-					this.__resizable = true;
-					this.__inited = true;
+					setTimeout(onReady,1);
+				}
 
-					this.resize();
-
-					this.onReady && setTimeout(() => this.onReady(), 1);
+				if (this.editor) {
+					this.editor.on('blur', () => this.blurTrigger());
+					this.editor.on('focus', () => this.focusTrigger());
+					this.editor.on('mode', () => {
+						this.blurTrigger();
+						this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
+					});
 				}
 			};
 

dev/Common/Utils.js

@@ -498,8 +498,10 @@ export function plainToHtml(plain) {
 		.replace(/\n/g, '<br />');
 }
 
-window['rainloop_Utils_htmlToPlain'] = htmlToPlain; // eslint-disable-line dot-notation
-window['rainloop_Utils_plainToHtml'] = plainToHtml; // eslint-disable-line dot-notation
+rl.Utils = {
+	htmlToPlain: htmlToPlain,
+	plainToHtml: plainToHtml
+};
 
 /**
  * @param {Array} aSystem

dev/External/SquireUI.js

@@ -1,10 +1,13 @@
 /* eslint max-len: 0 */
+'use strict';
 
 const doc = document,
 
 allowedElements = 'A,B,BLOCKQUOTE,BR,DIV,FONT,H1,H2,H3,H4,H5,H6,HR,IMG,LABEL,LI,OL,P,SPAN,STRONG,TABLE,TD,TH,TR,U,UL',
 allowedAttributes = 'abbr,align,background,bgcolor,border,cellpadding,cellspacing,class,color,colspan,dir,face,frame,height,href,hspace,id,lang,rowspan,rules,scope,size,src,style,target,type,usemap,valign,vspace,width'.split(','),
 
+i18n = (str, def) => window.rl && window.rl.i18n ? window.rl.i18n(str) : def,
+
 SquireDefaultConfig = {
 /*
 	blockTag: 'P',
@@ -33,11 +36,12 @@ SquireDefaultConfig = {
 	addLinks: true // allow_smart_html_links
 */
 	sanitizeToDOMFragment: (html, isPaste/*, squire*/) => {
-		const frag = doc.createDocumentFragment();
-		frag.innerHTML = html;
+		const frag = doc.createDocumentFragment(),
+			tpl = doc.createElement('div');
+		tpl.innerHTML = html;
 		if (isPaste) {
-			frag.querySelectorAll(':not('+allowedElements+')').forEach(el => el.remove());
-			frag.querySelectorAll(allowedElements).forEach(el => {
+			tpl.querySelectorAll(':not('+allowedElements+')').forEach(el => el.remove());
+			tpl.querySelectorAll(allowedElements).forEach(el => {
 				if (el.hasAttributes()) {
 					Array.from(el.attributes).forEach(attr => {
 						let name = attr.name.toLowerCase();
@@ -48,6 +52,7 @@ SquireDefaultConfig = {
 				}
 			});
 		}
+		frag.append(...tpl.childNodes);
 		return frag;
 	}
 };
@@ -58,10 +63,11 @@ class SquireUI
 		const
 		ctrlKey = /Mac OS X/.test( navigator.userAgent ) ? 'meta + ' : 'Ctrl + ',
 		actions = {
-			group1: {
-				source: {
+			mode: {
+				plain: {
 					html: '〈〉',
-					cmd: () => console.log('TODO: toggle HTML <> Text')
+					cmd: () => this.setMode('plain' == this.mode ? 'wysiwyg' : 'plain'),
+					hint: i18n('EDITOR/TEXT_SWITCHER_PLAINT_TEXT', 'Plain')
 				}
 			},
 			font: {
@@ -100,7 +106,7 @@ class SquireUI
 				backgroundColor: {
 					input: 'color',
 					cmd: s => squire.setHighlightColour(s.value),
-					hint: 'background'
+					hint: i18n('EDITOR/TEXT_BACKGROUND_COLOR', 'Background')
 				},
 			},
 /*
@@ -185,7 +191,7 @@ class SquireUI
 					html: '🖼️',
 					cmd: () => {
 						if ('IMG' === this.getParentNodeName()) {
-//							wysiwyg.removeLink();
+//							squire.removeLink();
 						} else {
 							let src = prompt("Image","https://");
 							src != null && src.length && squire.insertImage(src);
@@ -217,19 +223,29 @@ class SquireUI
 			}
 		},
 
-		content = doc.createElement('div'),
+		plain = doc.createElement('textarea'),
+		wysiwyg = doc.createElement('div'),
 		toolbar = doc.createElement('div'),
-		squire = new Squire(content, SquireDefaultConfig);
+		squire = new Squire(wysiwyg, SquireDefaultConfig);
 
-		content.className = 'squire-content cke_wysiwyg_div cke_editable';
+		plain.className = 'squire-plain cke_plain cke_editable';
+		wysiwyg.className = 'squire-wysiwyg cke_wysiwyg_div cke_editable';
+		this.mode = 'plain'; // 'wysiwyg'
+		this.__plain = {
+			getRawData: () => this.plain.value,
+			setRawData: plain => this.plain.value = plain
+		};
 
+		this.container = container;
 		this.squire = squire;
-		this.content = content;
+		this.plain = plain;
+		this.wysiwyg = wysiwyg;
 
 		toolbar.className = 'squire-toolbar cke_top';
 		for (let group in actions) {
 			let toolgroup = doc.createElement('div');
 			toolgroup.className = 'squire-toolgroup cke_toolgroup';
+			toolgroup.id = 'squire-toolgroup-'+group;
 			for (let action in actions[group]) {
 				if ('source' == action && !rl.settings.app('allowHtmlEditorSourceButton')) {
 					continue;
@@ -279,7 +295,9 @@ class SquireUI
 		}
 		toolbar.addEventListener('click', e => {
 			let t = e.target;
-			t.action_cmd && t.action_cmd(t);
+			if ('plain' != this.mode || 'plain' == t.dataset.action) {
+				t.action_cmd && t.action_cmd(t);
+			}
 		});
 
 		let changes = actions.changes
@@ -289,7 +307,7 @@ class SquireUI
 			changes.redo.input.disabled = !state.canRedo;
 		});
 
-		container.append(toolbar, content);
+		container.append(toolbar, wysiwyg, plain);
 
 /*
 squire-raw.js:2161: this.fireEvent( 'dragover', {
@@ -305,9 +323,8 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 */
 
 		// CKEditor gimmicks used by HtmlEditor
-		this.mode = 'wysiwyg'; // 'plain'
 		this.plugins = {
-			plain: false
+			plain: true
 		};
 		// .plugins.plain && this.editor.__plain
 		this.focusManager = {
@@ -338,13 +355,31 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 		return validation.test(this.squire.getPath()) | this.squire.hasFormat(format);
 	}
 
-	// CKeditor gimmicks used by HtmlEditor
 	setMode(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();
+		} else {
+			let plain = this.plain.value;
+			this.squire.setHTML(rl.Utils.plainToHtml(plain, true));
+			mode = 'wysiwyg';
+		}
 		this.mode = mode; // 'wysiwyg' or 'plain'
+		cl.add('squire-mode-'+mode);
+		this.onModeChange && this.onModeChange();
+		setTimeout(()=>this.focus(),1);
 	}
 
+	// CKeditor gimmicks used by HtmlEditor
 	on(type, fn) {
-		this.squire.addEventListener(type, fn);
+		if ('mode' == type) {
+			this.onModeChange = fn;
+		} else {
+			this.squire.addEventListener(type, fn);
+			this.plain.addEventListener(type, fn);
+		}
 	}
 
 	execCommand(cmd, cfg) {
@@ -374,15 +409,18 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 	}
 
 	focus() {
-		this.squire.focus();
+		('plain' == this.editor.mode ? this.plain : this.squire).focus();
 	}
 
 	resize(width, height) {
-		this.content.style.height = Math.max(200, (height - this.content.offsetTop)) + 'px';
+		height = Math.max(200, (height - this.wysiwyg.offsetTop)) + 'px';
+		this.wysiwyg.style.height = height;
+		this.plain.style.height = height;
 	}
 
 	setReadOnly(bool) {
-		this.content.contentEditable = !!bool;
+		this.plain.readOnly = !!bool;
+		this.wysiwyg.contentEditable = !!bool;
 	}
 }
 

dev/Styles/SquireUI.less

@@ -33,7 +33,24 @@
 	width: 4em;
 }
 
-.squire-content {
+.squire-wysiwyg, .squire-plain {
 	min-height: 200px;
 	padding: .5em;
 }
+
+.squire-plain {
+	width: 100%;
+}
+
+.squire-plain {
+	display: none;
+}
+.squire-mode-plain .squire-wysiwyg {
+	display: none;
+}
+.squire-mode-plain .squire-plain {
+	display: block;
+}
+.squire-mode-plain .squire-toolgroup:not(#squire-toolgroup-mode) {
+	opacity: 0.5;
+}

rainloop/v/0.0.0/app/localization/webmail/_source.en.yml

@@ -418,8 +418,6 @@ en:
     ERROR_UNKNOWN: "An unknown file upload error occurred"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEXT"
-    TEXT_SWITCHER_RICH_FORMATTING: "Rich formatting"
-    TEXT_SWITCHER_CONFIRM: "Text formatting and images will be lost. Are you sure you want to continue?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Personal"
     LABEL_GENERAL_NAME: "General"

rainloop/v/0.0.0/app/localization/webmail/de_DE.yml

@@ -417,8 +417,6 @@ de_DE:
     ERROR_UNKNOWN: "Ein unbekannter Fehler trat beim Hochladen auf"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEXT"
-    TEXT_SWITCHER_RICH_FORMATTING: "Formatierter Text (Rich Text)"
-    TEXT_SWITCHER_CONFIRM: "Alle Textformatierungen und Grafiken gehen verloren. Wollen Sie wirklich fortfahren?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Persönlich"
     LABEL_GENERAL_NAME: "Allgemein"

rainloop/v/0.0.0/app/localization/webmail/en_GB.yml

@@ -417,8 +417,6 @@ en_GB:
     ERROR_UNKNOWN: "An unknown file upload error occurred"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEXT"
-    TEXT_SWITCHER_RICH_FORMATTING: "Rich formatting"
-    TEXT_SWITCHER_CONFIRM: "Text formatting and images will be lost. Are you sure you want to continue?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Personal"
     LABEL_GENERAL_NAME: "General"

rainloop/v/0.0.0/app/localization/webmail/en_US.yml

@@ -417,8 +417,6 @@ en_US:
     ERROR_UNKNOWN: "An unknown file upload error occurred"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEXT"
-    TEXT_SWITCHER_RICH_FORMATTING: "Rich formatting"
-    TEXT_SWITCHER_CONFIRM: "Text formatting and images will be lost. Are you sure you want to continue?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Personal"
     LABEL_GENERAL_NAME: "General"

rainloop/v/0.0.0/app/localization/webmail/es_ES.yml

@@ -418,8 +418,6 @@ es_ES:
     ERROR_UNKNOWN: "Se ha producido un error de carga de archivo desconocido"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEXTO"
-    TEXT_SWITCHER_RICH_FORMATTING: "Texto enriquecido"
-    TEXT_SWITCHER_CONFIRM: "Se perderá el formato de texto e imágenes. ¿Está seguro que desea continuar?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Personal"
     LABEL_GENERAL_NAME: "General"

rainloop/v/0.0.0/app/localization/webmail/fr_FR.yml

@@ -418,8 +418,6 @@ fr_FR:
     ERROR_UNKNOWN: "Une erreur inconnue de téléversement de fichier s'est produite"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> Non-formaté"
-    TEXT_SWITCHER_RICH_FORMATTING: "Format riche"
-    TEXT_SWITCHER_CONFIRM: "Le formatage du texte et les images seront perdus. Êtes-vous sûr de vouloir continuer ?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Personnel"
     LABEL_GENERAL_NAME: "Général"

rainloop/v/0.0.0/app/localization/webmail/nl_NL.yml

@@ -416,8 +416,6 @@ nl_NL:
     ERROR_UNKNOWN: "Er is een onbekende fout opgetreden"
   EDITOR:
     TEXT_SWITCHER_PLAINT_TEXT: "HTML <-> TEKST"
-    TEXT_SWITCHER_RICH_FORMATTING: "Tekst met opmaak"
-    TEXT_SWITCHER_CONFIRM: "Tekst opmaak zal verloren gaan. Wenst u verder te gaan?"
   SETTINGS_LABELS:
     LABEL_PERSONAL_NAME: "Persoonlijk"
     LABEL_GENERAL_NAME: "Algemeen"

vendors/ckeditor-plugins/plain/plugin.js

@@ -27,46 +27,6 @@
 			if (el) {
 				el.scrollTop = 0;
 			}
-		},
-		simplePlainToHtml = function (sPlain) {
-			return sPlain
-				.replace(/&/g, '&')
-				.replace(/>/g, '&gt;').replace(/</g, '&lt;')
-				.replace(/[\-_~]{10,}/g, '<hr />')
-				.replace(/\n/g, '<br />')
-				.replace(/ /g, '&nbsp;')
-			;
-		},
-		simpleHtmlToPlain = function (sHtml) {
-
-			var sText = sHtml
-				.replace(/[\s]+/gm, ' ')
-				.replace(/<br[^>]*>/gmi, '\n')
-				.replace(/<\/h[\d]>/gi, '\n')
-				.replace(/<\/p>/gi, '\n\n')
-				.replace(/<\/li>/gi, '\n')
-				.replace(/<\/td>/gi, '\n')
-				.replace(/<\/tr>/gi, '\n')
-				.replace(/<\/div>/gi, '\n')
-				.replace(/<blockquote[^>]*>/gmi, '\n')
-				.replace(/<\/blockquote>/gi, '\n')
-				.replace(/<hr[^>]*>/gmi, '\n_______________________________\n\n')
-				.replace(/&nbsp;/gi, ' ')
-				.replace(/&quot;/gi, '"')
-				.replace(/<[^>]*>/gm, '')
-			;
-
-			sText = $('<div></div>').html(sText).text();
-
-			sText = sText
-				.replace(/\n[ \t]+/gm, '\n')
-				.replace(/[\n]{3,}/gm, '\n\n')
-				.replace(/&gt;/gi, '>')
-				.replace(/&lt;/gi, '<')
-				.replace(/&amp;/gi, '&')
-			;
-
-			return sText;
 		}
 	;
 
@@ -81,14 +41,8 @@
 			}
 
 			editor.__textUtils = {
-				plainToHtml: function(data) {
-					return window.rainloop_Utils_plainToHtml ?
-						window.rainloop_Utils_plainToHtml(data, true) : simplePlainToHtml(data);
-				},
-				htmlToPlain: function(data) {
-					return window.rainloop_Utils_htmlToPlain ?
-						window.rainloop_Utils_htmlToPlain(data, true) : simpleHtmlToPlain(data);
-				}
+				plainToHtml: data => rl.Utils.plainToHtml(data, true),
+				htmlToPlain: data => rl.Utils.htmlToPlain(data, true)
 			};
 
 			var plain = CKEDITOR.plugins.plain;