Move SquireUI into libs.js

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
 		'openpgp': "readonly",
 		'CKEDITOR': "readonly",
 		'Squire': "readonly",
+		'SquireUI': "readonly",
 		// node_modules/knockout but dev/External/ko.js is used
 //		'ko': "readonly",
 		// node_modules/simplestatemanager

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	|1.000.931	|
+|admin.js    	|2.130.942	|  941.623	|
-|app.js      	|4.184.455	|2.618.339	|
+|app.js      	|4.184.455	|2.559.130	|
 |boot.js     	|  671.522	|    5.834	|
-|libs.js     	|  647.614	|  312.343	|
+|libs.js     	|  647.614	|  326.686	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|3.937.447	|
+|TOTAL      	|7.960.367	|3.833.273	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  136.658	| 73.657	| 40.569	| 34.783	|
+|admin.min.js    	|  252.147	|  128.739	| 73.657	| 37.549	| 32.265	|
-|app.min.js      	|  511.202	|  357.183	|140.462	| 94.834	| 76.231	|
+|app.min.js      	|  511.202	|  349.263	|140.462	| 91.754	| 73.588	|
 |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	|
+|libs.min.js     	|  572.545	|  303.770	|176.720	| 94.774	| 83.577	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|      0	|
-|TOTAL          	|1.434.353	|  792.761	|424.718	|228.495	|193.230	|
+|TOTAL          	|1.434.353	|  784.938	|424.718	|225.648	|190.775	|
 
-641.592 bytes (196.223 gzip) is not much, but it feels faster.
+649.415 bytes (199.070 gzip) is not much, but it feels faster.
 
 ### CSS changes
 

dev/Common/HtmlEditor.js

@@ -1,5 +1,4 @@
 import { EventKeyCode } from 'Common/Enums';
-import { SquireUI } from 'External/SquireUI';
 
 /**
  * @type {Object}

dev/External/SquireUI.js

@@ -1,14 +1,26 @@
 /* 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',
+	removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE',
-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(','),
+	allowedElements = 'A,B,BLOCKQUOTE,BR,DIV,FONT,H1,H2,H3,H4,H5,H6,HR,IMG,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) => rl.i18n(str) || def,
+	i18n = (str, def) => rl.i18n(str) || def,
 
-SquireDefaultConfig = {
+	ctrlKey = /Mac OS X/.test( navigator.userAgent ) ? 'meta + ' : 'Ctrl + ',
+
+	getFragmentOfChildren = parent => {
+		let frag = doc.createDocumentFragment();
+		frag.append(...parent.childNodes);
+		return frag;
+	},
+
+	SquireDefaultConfig = {
 /*
 		blockTag: 'P',
 		blockAttributes: null,
@@ -36,12 +48,15 @@ SquireDefaultConfig = {
 		addLinks: true // allow_smart_html_links
 */
 		sanitizeToDOMFragment: (html, isPaste/*, squire*/) => {
-		const frag = doc.createDocumentFragment(),
+			let tpl = doc.createElement('div');
-			tpl = doc.createElement('div');
+			tpl.innerHTML = html
-		tpl.innerHTML = html;
+				.replace(/<\/?(BODY|HTML)[^>]*>/gi,'')
+				.replace(/<!--[^>]+-->/g,'')
+				.trim();
 			if (isPaste) {
-			tpl.querySelectorAll(':not('+allowedElements+',signature)').forEach(el => el.remove());
+				tpl.querySelectorAll(removeElements).forEach(el => el.remove());
-			tpl.querySelectorAll(allowedElements).forEach(el => {
+				tpl.querySelectorAll(':not('+allowedElements+',signature)').forEach(el => el.replaceWith(getFragmentOfChildren(el)));
+				tpl.querySelectorAll('*').forEach(el => {
 					if (el.hasAttributes()) {
 						Array.from(el.attributes).forEach(attr => {
 							let name = attr.name.toLowerCase();
@@ -52,12 +67,11 @@ SquireDefaultConfig = {
 					}
 				});
 			}
-		frag.append(...tpl.childNodes);
+			return getFragmentOfChildren(tpl);
-		return frag;
 		}
-},
+	},
 
-rl_signature_replacer = (editor, text, signature, isHtml, insertBefore) => {
+	rl_signature_replacer = (editor, text, signature, isHtml, insertBefore) => {
 		let
 			prevSignature = editor.__previous_signature,
 			skipInsert = false,
@@ -117,13 +131,12 @@ rl_signature_replacer = (editor, text, signature, isHtml, insertBefore) => {
 		editor.__previous_signature = prevSignature;
 
 		return text;
-};
+	};
 
 class SquireUI
 {
 	constructor(container) {
 		const
-		ctrlKey = /Mac OS X/.test( navigator.userAgent ) ? 'meta + ' : 'Ctrl + ',
 			actions = {
 				mode: {
 					plain: {
@@ -331,7 +344,7 @@ class SquireUI
 				if (cfg.input) {
 					input = doc.createElement('input');
 					input.type = cfg.input;
-					input.addEventListener('input', () => cfg.cmd(input));
+					input.addEventListener('change', () => cfg.cmd(input));
 				} else if (cfg.select) {
 					input = doc.createElement('select');
 					if (Array.isArray(cfg.select)) {
@@ -372,12 +385,10 @@ class SquireUI
 		}
 		toolbar.addEventListener('click', e => {
 			let t = e.target;
-			if ('plain' != this.mode || 'plain' == t.dataset.action) {
 			t.action_cmd && t.action_cmd(t);
-			}
 		});
 
-		let changes = actions.changes
+		let changes = actions.changes;
 		changes.undo.input.disabled = changes.redo.input.disabled = true;
 		squire.addEventListener('undoStateChange', state => {
 			changes.undo.input.disabled = !state.canUndo;
@@ -502,7 +513,7 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 	}
 
 	focus() {
-		('plain' == this.editor.mode ? this.plain : this.squire).focus();
+		('plain' == this.mode ? this.plain : this.squire).focus();
 	}
 
 	resize(width, height) {
@@ -517,4 +528,6 @@ squire-raw.js:4089: this.fireEvent( 'willPaste', event );
 	}
 }
 
-export { SquireUI, SquireUI as default };
+window.SquireUI = SquireUI;
+
+})();

tasks/config.js

@@ -95,7 +95,8 @@ config.paths.js = {
 			'vendors/lightgallery/dist/js/lg-thumbnail.min.js',
 			'vendors/lightgallery/dist/js/lg-zoom.min.js',
 			'vendors/lightgallery/dist/js/lg-autoplay.min.js',
-			'dev/External/ifvisible.js'
+			'dev/External/ifvisible.js',
+			'dev/External/SquireUI.js'
 		]
 	},
 	app: {

vendors/squire/build/squire-raw.js

@@ -1,6 +1,13 @@
 /* Copyright © 2011-2015 by Neil Jenkins. MIT Licensed. */
 /* eslint max-len: 0 */
 
+/**
+	TODO: modifyBlocks function doesn't work very good.
+	For example you have: UL > LI > [cursor here in text]
+	Then create blockquote at cursor, the result is: BLOCKQUOTE > UL > LI
+	not UL > LI > BLOCKQUOTE
+*/
+
 ( doc => {
 
 "use strict";
@@ -58,8 +65,7 @@ const
 		11: 1024
 	},
 
-//	blockElementNames = /^(?:ADDRESS|ARTICLE|ASIDE|BLOCKQUOTE|CANVAS|DETAILS|DIALOG|DIV|D[DLT]|FIELDSET|FIG(CAPTION|URE)|FOOTER|FORM|H[1-6]|HEADER|HGROUP|HR|LI|MAIN|NAV|OL|P|PRE|SECTION|TABLE|UL|VIDEO)$/,
+	inlineNodeNames = /^(?:#text|A|ABBR|ACRONYM|B|BR|BD[IO]|CITE|CODE|DATA|DEL|DFN|EM|FONT|HR|IMG|INPUT|INS|KBD|Q|RP|RT|RUBY|SAMP|SMALL|SPAN|STR(IKE|ONG)|SU[BP]|TIME|U|VAR|WBR)$/,
-	inlineNodeNames = /^(?:#text|A|ABBR|ACRONYM|B|BR|BDI|BDO|CITE|CODE|DATA|DEL|DFN|EM|FONT|HR|IMG|INPUT|INS|KBD|Q|RP|RT|RUBY|SAMP|SMALL|SPAN|STRIKE|STRONG|SUB|SUP|TIME|U|VAR|WBR)$/,
 
 	leafNodeNames = {
 		BR: 1,
@@ -110,10 +116,12 @@ const
 		return walker;
 	},
 	getPreviousBlock = ( node, root ) => {
+//		node = getClosest( node, root, blockElementNames );
 		node = getBlockWalker( node, root ).previousNode();
 		return node !== root ? node : null;
 	},
 	getNextBlock = ( node, root ) => {
+//		node = getClosest( node, root, blockElementNames );
 		node = getBlockWalker( node, root ).nextNode();
 		return node !== root ? node : null;
 	},
@@ -261,7 +269,7 @@ const
 			child = node.firstChild;
 			while ( isWebKit && child &&
 					child.nodeType === TEXT_NODE && !child.data ) {
-				node.removeChild( child );
+				child.remove(  );
 				child = node.firstChild;
 			}
 			if ( !child ) {
@@ -467,7 +475,7 @@ const
 		// Remove extra <BR> fixer if present.
 		last = block.lastChild;
 		if ( last && last.nodeName === 'BR' ) {
-			block.removeChild( last );
+			last.remove(  );
 			--offset;
 		}
 
@@ -817,7 +825,7 @@ const
 		moveRangeBoundariesDownTree( range );
 	},
 
-	isNodeContainedInRange = ( range, node, partial ) => {
+	isNodeContainedInRange = ( range, node, partial = true ) => {
 		let nodeRange = doc.createRange();
 
 		nodeRange.selectNode( node );
@@ -970,7 +978,7 @@ const
 			block = getNextBlock( block, root );
 		}
 		// Check the block actually intersects the range
-		return block && isNodeContainedInRange( range, block, true ) ? block : null;
+		return block && isNodeContainedInRange( range, block ) ? block : null;
 	},
 
 	// Returns the last block at least partially contained by the range,
@@ -995,7 +1003,7 @@ const
 			block = getPreviousBlock( block, root );
 		}
 		// Check the block actually intersects the range
-		return block && isNodeContainedInRange( range, block, true ) ? block : null;
+		return block && isNodeContainedInRange( range, block ) ? block : null;
 	},
 
 	newContentWalker = root => doc.createTreeWalker( root,
@@ -1065,10 +1073,12 @@ const
 			parent;
 
 		if ( start && end ) {
-			parent = start.parentNode;
+			range.setStart( start, 0 );
-			range.setStart( parent, indexOf( parent.childNodes, start ) );
+			range.setEnd( end, end.childNodes.length );
-			parent = end.parentNode;
+//			parent = start.parentNode;
-			range.setEnd( parent, indexOf( parent.childNodes, end ) + 1 );
+//			range.setStart( parent, indexOf( parent.childNodes, start ) );
+//			parent = end.parentNode;
+//			range.setEnd( parent, indexOf( parent.childNodes, end ) + 1 );
 		}
 	};
 
@@ -1185,7 +1195,7 @@ let afterDelete = ( self, range ) => {
 				indexOf( parent.childNodes, node ) );
 			range.collapse( true );
 			// Remove empty inline(s)
-			parent.removeChild( node );
+			node.remove(  );
 			// Fix cursor in block
 			if ( !isBlock( parent ) ) {
 				parent = getPreviousBlock( parent, self._root );
@@ -1785,6 +1795,10 @@ let stylesRewriters = {
 		newTreeBottom.append( empty( node ) );
 		return newTreeBottom;
 	},
+//	KBD:
+//	VAR:
+//	CODE:
+//	SAMP:
 	TT: ( node, parent, config ) => {
 		let el = createElement( doc, 'SPAN', {
 			'class': config.classNames.fontFamily,
@@ -1822,13 +1836,13 @@ let cleanTree = ( node, config, preserveWS ) => {
 		child = children[i];
 		nodeName = child.nodeName;
 		nodeType = child.nodeType;
-		rewriter = stylesRewriters[ nodeName ];
 		if ( nodeType === ELEMENT_NODE ) {
+			rewriter = stylesRewriters[ nodeName ];
 			childLength = child.childNodes.length;
 			if ( rewriter ) {
 				child = rewriter( child, node, config );
 			} else if ( blacklist.test( nodeName ) ) {
-				node.removeChild( child );
+				child.remove(  );
 				--i;
 				--l;
 				continue;
@@ -1888,7 +1902,7 @@ let cleanTree = ( node, config, preserveWS ) => {
 					continue;
 				}
 			}
-			node.removeChild( child );
+			child.remove(  );
 			--i;
 			--l;
 		}
@@ -1907,10 +1921,10 @@ let removeEmptyInlines = node => {
 		if ( child.nodeType === ELEMENT_NODE && !isLeaf( child ) ) {
 			removeEmptyInlines( child );
 			if ( isInline( child ) && !child.firstChild ) {
-				node.removeChild( child );
+				child.remove(  );
 			}
 		} else if ( child.nodeType === TEXT_NODE && !child.data ) {
-			node.removeChild( child );
+			child.remove(  );
 		}
 	}
 };
@@ -1996,7 +2010,7 @@ let setClipboardData =
 		body.append( node );
 		text = node.innerText || node.textContent;
 		text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space
-		body.removeChild( node );
+		node.remove(  );
 	}
 	// Firefox (and others?) returns unix line endings (\n) even on Windows.
 	// If on Windows, normalise to \r\n, since Notepad and some other crappy
@@ -2668,7 +2682,7 @@ proto.getCursorPosition = function ( range ) {
 		insertNodeInRange( range, node );
 		rect = node.getBoundingClientRect();
 		parent = node.parentNode;
-		parent.removeChild( node );
+		node.remove(  );
 		mergeInlines( parent, range );
 	}
 	return rect;
@@ -2749,7 +2763,7 @@ proto.selectionContains = function (selector) {
 		node = range && range.commonAncestorContainer;
 	if (node && !range.collapsed) {
 		node = node.querySelector ? node : node.parentElement;
-		// TODO: startContainer / endContainer for real selection match?
+		// TODO: isNodeContainedInRange( range, node ) for real selection match?
 		return !!(node && node.querySelector(selector));
 	}
 	return false;
@@ -2763,7 +2777,7 @@ proto.getSelectedText = function () {
 	let walker = doc.createTreeWalker(
 		range.commonAncestorContainer,
 		SHOW_TEXT|SHOW_ELEMENT,
-		node => isNodeContainedInRange( range, node, true )
+		node => isNodeContainedInRange( range, node )
 	);
 	let startContainer = range.startContainer;
 	let endContainer = range.endContainer;
@@ -2821,7 +2835,7 @@ let removeZWS = ( root, keepNode ) => {
 			if ( node.length === 1 ) {
 				do {
 					parent = node.parentNode;
-					parent.removeChild( node );
+					node.remove(  );
 					node = parent;
 					walker.currentNode = parent;
 				} while ( isInline( node ) && !getLength( node ) );
@@ -3146,7 +3160,7 @@ proto.hasFormat = function ( tag, attributes, range ) {
 
 	// Otherwise, check each text node at least partially contained within
 	// the selection and make sure all of them have the format we want.
-	walker = doc.createTreeWalker( common, SHOW_TEXT, node => isNodeContainedInRange( range, node, true ) );
+	walker = doc.createTreeWalker( common, SHOW_TEXT, node => isNodeContainedInRange( range, node ) );
 
 	let seenNode = false;
 	while ( node = walker.nextNode() ) {
@@ -3248,7 +3262,7 @@ proto._addFormat = function ( tag, attributes, range ) {
 			node => ( node.nodeType === TEXT_NODE ||
 						node.nodeName === 'BR' ||
 						node.nodeName === 'IMG'
-					) && isNodeContainedInRange( range, node, true )
+					) && isNodeContainedInRange( range, node )
 		);
 
 		// Start at the beginning node of the range and iterate through
@@ -3356,7 +3370,7 @@ proto._removeFormat = function ( tag, attributes, range, partial ) {
 
 			// If not at least partially contained, wrap entire contents
 			// in a clone of the tag we're removing and we're done.
-			if ( !isNodeContainedInRange( range, node, true ) ) {
+			if ( !isNodeContainedInRange( range, node ) ) {
 				// Ignore bookmarks and empty text nodes
 				if ( node.nodeName !== 'INPUT' &&
 						( !isText || node.data ) ) {
@@ -3387,7 +3401,7 @@ proto._removeFormat = function ( tag, attributes, range, partial ) {
 		},
 		formatTags = Array.prototype.filter.call(
 			root.getElementsByTagName( tag ), function ( el ) {
-				return isNodeContainedInRange( range, el, true ) &&
+				return isNodeContainedInRange( range, el ) &&
 					hasTagAttributes( el, tag, attributes );
 			}
 		);
@@ -3758,7 +3772,7 @@ proto.decreaseListLevel = function ( range ) {
 		makeNotList = !/^[OU]L$/.test( newParent.nodeName );
 		do {
 			next = startLi === endLi ? null : startLi.nextSibling;
-			list.removeChild( startLi );
+			startLi.remove(  );
 			if ( makeNotList && startLi.nodeName === 'LI' ) {
 				startLi = this.createDefaultBlock([ empty( startLi ) ]);
 			}
@@ -3859,7 +3873,7 @@ proto.setHTML = function ( html ) {
 
 	// Remove existing root children
 	while ( child = root.lastChild ) {
-		root.removeChild( child );
+		child.remove(  );
 	}
 
 	// And insert new content