Added: browse/upload image button to SquireUI

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	|  941.623	|
+|admin.js    	|2.130.942	|  936.773	|
-|app.js      	|4.184.455	|2.559.130	|
+|app.js      	|4.184.455	|2.554.276	|
 |boot.js     	|  671.522	|    5.834	|
-|libs.js     	|  647.614	|  326.686	|
+|libs.js     	|  647.614	|  327.282	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|3.833.273	|
+|TOTAL      	|7.960.367	|3.824.165	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  128.739	| 73.657	| 37.549	| 32.265	|
+|admin.min.js    	|  252.147	|  128.449	| 73.657	| 37.486	| 32.167	|
-|app.min.js      	|  511.202	|  349.263	|140.462	| 91.754	| 73.588	|
+|app.min.js      	|  511.202	|  348.973	|140.462	| 91.692	| 73.600	|
 |boot.min.js     	|   66.007	|    3.166	| 22.567	|  1.571	|  1.345	|
-|libs.min.js     	|  572.545	|  303.770	|176.720	| 94.774	| 83.577	|
+|libs.min.js     	|  572.545	|  304.025	|176.720	| 94.879	| 83.565	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|      0	|
-|TOTAL          	|1.434.353	|  784.938	|424.718	|225.648	|190.775	|
+|TOTAL          	|1.434.353	|  784.938	|424.718	|225.628	|190.677	|
 
-649.415 bytes (199.070 gzip) is not much, but it feels faster.
+649.415 bytes (199.090 gzip) is not much, but it feels faster.
 
 ### CSS changes
 
@@ -140,15 +140,14 @@ The [squire](https://github.com/neilj/Squire) implementation is not 100% compati
 
 Still TODO:
 
-* upload image inline
 * support for tables (really needed?!?)
 
 |       	| normal	| min    	| gzip  	| min gzip	|
 |--------	|-------:	|-------:	|------:	|--------:	|
-|squire  	| 128.729	|  47.215	| 33.671	|   15.596	|
+|squire  	| 128.826	|  47.074	| 33.671	|   15.596	|
 |ckeditor	|       ?	| 520.035	|      ?	|  155.916	|
 
-CKEditor including the 8 asset requests is 633.46 KB / 183.54 KB (gzip).
+CKEditor including the 7 asset requests (css,language,plugins,icons) is 633.46 KB / 180.47 KB (gzip).
 
 Enable it in /data/\_data\_/\_default\_/configs/application.ini in the [labs] section add/edit: `use_squire_html_editor = On`
 

dev/Common/HtmlEditor.js

@@ -105,26 +105,22 @@ class HtmlEditor {
 
 		this.element = element;
 
-		this.resize = this.resizeEditor.throttle(100);
+		this.resize = (() => {
+			try {
+				this.editor && this.__resizable && this.editor.resize(element.clientWidth, element.clientHeight);
+			} catch (e) {} // eslint-disable-line no-empty
+		}).throttle(100);
 
 		this.init();
 	}
 
-	runOnBlur() {
-		this.onBlur && this.onBlur();
-	}
-
 	blurTrigger() {
 		if (this.onBlur) {
 			clearTimeout(this.blurTimer);
-			this.blurTimer = setTimeout(() => this.runOnBlur(), 200);
+			this.blurTimer = setTimeout(() => this.onBlur && this.onBlur(), 200);
 		}
 	}
 
-	focusTrigger() {
-		this.onBlur && clearTimeout(this.blurTimer);
-	}
-
 	/**
 	 * @returns {boolean}
 	 */
@@ -136,11 +132,9 @@ class HtmlEditor {
 	 * @returns {void}
 	 */
 	clearCachedSignature() {
-		if (this.editor) {
+		this.editor && this.editor.execCommand('insertSignature', {
-			this.editor.execCommand('insertSignature', {
+			clearCache: true
-				clearCache: true
+		});
-			});
-		}
 	}
 
 	/**
@@ -150,24 +144,11 @@ class HtmlEditor {
 	 * @returns {void}
 	 */
 	setSignature(signature, html, insertBefore = false) {
-		if (this.editor) {
+		this.editor && this.editor.execCommand('insertSignature', {
-			this.editor.execCommand('insertSignature', {
+			isHtml: html,
-				isHtml: html,
+			insertBefore: insertBefore,
-				insertBefore: insertBefore,
+			signature: signature
-				signature: signature
+		});
-			});
-		}
-	}
-
-	/**
-	 * @returns {boolean}
-	 */
-	checkDirty() {
-		return this.editor ? this.editor.checkDirty() : false;
-	}
-
-	resetDirty() {
-		this.editor && this.editor.resetDirty();
 	}
 
 	/**
@@ -338,42 +319,12 @@ class HtmlEditor {
 				}
 				else if (window.Squire) {
 					this.editor = new SquireUI(this.element, this.editor);
-/*
-					// TODO
-					this.editor.on('key', event => !(event && event.data && EventKeyCode.Tab === event.data.keyCode));
-					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();
-
-									reader.onloadend = () => {
-										if (reader.result) {
-											this.replaceHtml(imageId, `<img src="${reader.result}" />`);
-										}
-									};
-
-									reader.readAsDataURL(file);
-
-									event.data.dataTransfer.setData('text/html', imageId);
-								}
-							}
-						});
-					}
-*/
 					setTimeout(onReady,1);
 				}
 
 				if (this.editor) {
 					this.editor.on('blur', () => this.blurTrigger());
-					this.editor.on('focus', () => this.focusTrigger());
+					this.editor.on('focus', () => this.blurTimer && clearTimeout(this.blurTimer));
 					this.editor.on('mode', () => {
 						this.blurTrigger();
 						this.onModeChange && this.onModeChange('plain' !== this.editor.mode);
@@ -409,18 +360,6 @@ class HtmlEditor {
 		} catch (e) {} // eslint-disable-line no-empty
 	}
 
-	resizeEditor() {
-		try {
-			this.editor && this.__resizable && this.editor.resize(this.element.clientWidth, this.element.clientHeight);
-		} catch (e) {} // eslint-disable-line no-empty
-	}
-
-	setReadOnly(value) {
-		try {
-			this.editor && this.editor.setReadOnly(!!value);
-		} catch (e) {} // eslint-disable-line no-empty
-	}
-
 	clear(focus) {
 		this.setHtml('', focus);
 	}

dev/External/SquireUI.js

@@ -186,7 +186,16 @@ class SquireUI
 				},
 /*
 				bidi: {
-					allowHtmlEditorBitiButtons
+					bdoLtr: {
+						html: '‎𝐁',
+						cmd: () => this.doAction('bold','B'),
+						hint: 'Bold'
+					},
+					bdoRtl: {
+						html: '‏𝐁',
+						cmd: () => this.doAction('bold','B'),
+						hint: 'Bold'
+					}
 				},
 */
 				inline: {
@@ -274,7 +283,7 @@ class SquireUI
 						},
 						hint: 'Link'
 					},
-					image: {
+					imageUrl: {
 						html: '🖼️',
 						cmd: () => {
 							if ('IMG' === this.getParentNodeName()) {
@@ -284,13 +293,13 @@ class SquireUI
 								src != null && src.length && squire.insertImage(src);
 							}
 						},
-						hint: 'Image'
+						hint: 'Image URL'
 					},
-/*
 					imageUpload: {
-						// TODO
+						html: '📂️',
+						cmd: () => browseImage.click(),
+						hint: 'Image select',
 					}
-*/
 				},
 /*
 				table: {
@@ -316,8 +325,20 @@ class SquireUI
 			plain = doc.createElement('textarea'),
 			wysiwyg = doc.createElement('div'),
 			toolbar = doc.createElement('div'),
+			browseImage = doc.createElement('input'),
 			squire = new Squire(wysiwyg, SquireDefaultConfig);
 
+		browseImage.type = 'file';
+		browseImage.accept = 'image/*';
+		browseImage.style.display = 'none';
+		browseImage.onchange = () => {
+			if (browseImage.files.length) {
+				let reader = new FileReader();
+				reader.readAsDataURL(browseImage.files[0]);
+				reader.onloadend = () => reader.result && squire.insertImage(reader.result);
+			}
+		}
+
 		plain.className = 'squire-plain cke_plain cke_editable';
 		wysiwyg.className = 'squire-wysiwyg cke_wysiwyg_div cke_editable';
 		this.mode = ''; // 'plain' | 'wysiwyg'
@@ -333,6 +354,9 @@ class SquireUI
 
 		toolbar.className = 'squire-toolbar cke_top';
 		for (let group in actions) {
+			if ('bidi' == group && !rl.settings.app('allowHtmlEditorBitiButtons')) {
+				continue;
+			}
 			let toolgroup = doc.createElement('div');
 			toolgroup.className = 'squire-toolgroup cke_toolgroup';
 			toolgroup.id = 'squire-toolgroup-'+group;
@@ -498,12 +522,6 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 		}
 	}
 
-	checkDirty() {
-		return false;
-	}
-
-	resetDirty() {}
-
 	getData() {
 		return this.squire.getHTML();
 	}
@@ -521,11 +539,6 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 		this.wysiwyg.style.height = height;
 		this.plain.style.height = height;
 	}
-
-	setReadOnly(bool) {
-		this.plain.readOnly = !!bool;
-		this.wysiwyg.contentEditable = !!bool;
-	}
 }
 
 window.SquireUI = SquireUI;