From 9975e03fadacf00b515593e2cea6431d87c185e7 Mon Sep 17 00:00:00 2001
From: Jonathan Cox <jonathan.cox@bunn.com>
Date: Wed, 16 May 2018 10:46:30 -0500
Subject: [PATCH] Fix demo load timing; Fixes #227

---
 demo/index.html |  91 ++++++++++++--------------
 wysiwyg-e.js    | 169 +++++++++++++++++++++++++-----------------------
 2 files changed, 131 insertions(+), 129 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index b6cae32..afb8e73 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -5,27 +5,27 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>WYSIWYG-E Demo</title>
 		<script src="../../@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
-		<script src="../../web-animations-js/web-animations-next-lite.min.js" async></script>
-		<script type="module" src="../wysiwyg-e.js"async></script>
-		<script type="module" src="../tools/bold.js" async></script>
-		<script type="module" src="../tools/italic.js" async></script>
-		<script type="module" src="../tools/underline.js" async></script>
-		<script type="module" src="../tools/strike.js" async></script>
-		<script type="module" src="../tools/color.js" async></script>
-		<script type="module" src="../tools/clear.js" async></script>
-		<script type="module" src="../tools/code.js" async></script>
-		<script type="module" src="../tools/table.js" async></script>
-		<script type="module" src="../tools/link.js" async></script>
-		<script type="module" src="../tools/image.js" async></script>
-		<script type="module" src="../tools/audio.js" async></script>
-		<script type="module" src="../tools/video.js" async></script>
-		<script type="module" src="../tools/ordered.js" async></script>
-		<script type="module" src="../tools/unordered.js" async></script>
-		<script type="module" src="../tools/indent.js" async></script>
-		<script type="module" src="../tools/outdent.js" async></script>
-		<script type="module" src="../tools/justify.js" async></script>
-		<script type="module" src="../tools/heading.js" async></script>
-		<script type="module" src="../tools/blockquote.js" async></script>
+		<script src="../../web-animations-js/web-animations-next-lite.min.js"></script>
+		<script type="module" src="../wysiwyg-e.js"></script>
+		<script type="module" src="../tools/bold.js"></script>
+		<script type="module" src="../tools/italic.js"></script>
+		<script type="module" src="../tools/underline.js"></script>
+		<script type="module" src="../tools/strike.js"></script>
+		<script type="module" src="../tools/color.js"></script>
+		<script type="module" src="../tools/clear.js"></script>
+		<script type="module" src="../tools/code.js"></script>
+		<script type="module" src="../tools/table.js"></script>
+		<script type="module" src="../tools/link.js"></script>
+		<script type="module" src="../tools/image.js"></script>
+		<script type="module" src="../tools/audio.js"></script>
+		<script type="module" src="../tools/video.js"></script>
+		<script type="module" src="../tools/ordered.js"></script>
+		<script type="module" src="../tools/unordered.js"></script>
+		<script type="module" src="../tools/indent.js"></script>
+		<script type="module" src="../tools/outdent.js"></script>
+		<script type="module" src="../tools/justify.js"></script>
+		<script type="module" src="../tools/heading.js"></script>
+		<script type="module" src="../tools/blockquote.js"></script>
 	</head>
 	<body style="margin: 0;">
 		<wysiwyg-e style="width: 100vw; height: 100vh;" id="wysiwygE">
@@ -35,8 +35,8 @@
 			<wysiwyg-tool-strike></wysiwyg-tool-strike>
 			<wysiwyg-tool-color></wysiwyg-tool-color>
 			<wysiwyg-tool-clear></wysiwyg-tool-clear>
-            <wysiwyg-tool-code></wysiwyg-tool-code>
-            <wysiwyg-tool-table></wysiwyg-tool-table>
+      <wysiwyg-tool-code></wysiwyg-tool-code>
+    	<wysiwyg-tool-table></wysiwyg-tool-table>
 			<wysiwyg-tool-link></wysiwyg-tool-link>
 			<wysiwyg-tool-image></wysiwyg-tool-image>
 			<wysiwyg-tool-audio></wysiwyg-tool-audio>
@@ -48,31 +48,26 @@
 			<wysiwyg-tool-justify allow-right allow-center allow-full></wysiwyg-tool-justify>
 			<wysiwyg-tool-heading allow-h1 allow-h2 allow-h3 allow-h4 allow-h5 allow-h6></wysiwyg-tool-heading>
 			<wysiwyg-tool-blockquote></wysiwyg-tool-blockquote>
-        </wysiwyg-e>
-        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-        <script>
-            document.addEventListener(
-                'DOMContentLoaded',
-                function () {
-                    setTimeout(
-                        function () {
-                            var req = new XMLHttpRequest();
+    </wysiwyg-e>
+		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+		<script>
+			window.addEventListener(
+				'load',
+				function () {
+					var req = new XMLHttpRequest();
 
-                            req.onreadystatechange = function () {
-                                if (req.readyState === XMLHttpRequest.DONE && req.status === 200) {
-                                    var wysiwygE = document.querySelector('wysiwyg-e');
-                                    wysiwygE.debug = true;
-                                    wysiwygE.value = marked(req.responseText);
-                                }
-                            };
+					req.onreadystatechange = function () {
+						if (req.readyState === XMLHttpRequest.DONE && req.status === 200) {
+							var wysiwygE = document.querySelector('wysiwyg-e');
+							wysiwygE.debug = true;
+							wysiwygE.value = marked(req.responseText);
+						}
+					};
 
-                            req.open('GET', '../README.md', true);
-                            req.send();
-                        },
-                        1000
-                    );
-                }
-            );
-        </script>
+					req.open('GET', '../README.md', true);
+					req.send();
+				}
+			);
+		</script>
 	</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/wysiwyg-e.js b/wysiwyg-e.js
index 08d25ac..62d6fee 100644
--- a/wysiwyg-e.js
+++ b/wysiwyg-e.js
@@ -47,13 +47,14 @@ if (document) {
 
 export class WysiwygE extends PolymerElement {
 	static get _targetTemplate() {
-		return html`<div id="editable" contenteditable placeholder$="[[placeholder]]" show-placeholder$="[[showPlaceholder]]"></div>`;
+		return html`
+			<div id="editable" contenteditable placeholder$="[[placeholder]]" show-placeholder$="[[showPlaceholder]]"></div>
+		`;
 	}
 
   static get template() {
     return html`
-			<style include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning"></style>
-			<style>
+			<style include="iron-flex iron-flex-alignment iron-flex-factors iron-positioning">
 				:host {
 					display: block;
 					position: relative;
@@ -66,11 +67,11 @@ export class WysiwygE extends PolymerElement {
 					user-select: none;
 					color: var(--wysiwyg-toolbar-color, white);
 					@apply --wysiwyg-toolbar;
-                }
+        }
 
-                #toolbarLayout {
-                    overflow: hidden;
-                }
+        #toolbarLayout {
+          overflow: hidden;
+        }
 	
 				#editable {
 					padding: 20px;
@@ -933,15 +934,14 @@ export class WysiwygE extends PolymerElement {
 	// Restore selection state
 	//
 	restoreSelection() {
+		if (this.debug) console.log('Restoring selection!');
 		var charIndex = 0, range = this.target.ownerDocument.createRange(), target = this.target, savedSel = this.states[this.activeState].selection;
 		if (!savedSel) return;
 		var startNodeOffset, endNodeOffset;
 		startNodeOffset = this._getNodeAndOffsetAt(target, savedSel.start);
 		endNodeOffset = this._getNodeAndOffsetAt(target, savedSel.end);
-
 		range.setStart(startNodeOffset.node, startNodeOffset.offset);
 		range.setEnd(endNodeOffset.node, endNodeOffset.offset);
-
 		var sel = window.getSelection();
 		sel.removeAllRanges();
 		sel.addRange(range);
@@ -985,8 +985,8 @@ export class WysiwygE extends PolymerElement {
 			}
 		}
 
-        var tools = this.$.tools.assignedNodes ? this.$.tools.assignedNodes({flatten: true}) : [];
-	
+		var tools = this.$.tools.assignedNodes ? this.$.tools.assignedNodes({flatten: true}) : [];
+
 		tools = tools.filter(
 			function (tool) {
 				return tool.nodeType === Node.ELEMENT_NODE;
@@ -1052,7 +1052,16 @@ export class WysiwygE extends PolymerElement {
 					p = document.createElement('p');
 					this.target.insertBefore(p, node.nextSibling);
 					p.appendChild(node);
-					if (this.debug) console.log(node, 'wrap top level text nodes inside p node');
+					if (this.debug) console.log(node, 'wrap top level text nodes inside P node');
+					sanitized = false;
+				}
+
+				//If node is a BR node immediate child of target, wrap inside a P
+				if (node.parentNode === this.target && node.tagName === 'BR') {
+					p = document.createElement('p');
+					this.target.insertBefore(p, node.nextSibling);
+					p.appendChild(node);
+					if (this.debug) console.log(node, 'wrap top level BR nodes inside P node');
 					sanitized = false;
 				}
 
@@ -1153,6 +1162,16 @@ export class WysiwygE extends PolymerElement {
 		if (typeof super.updateSelection === 'function') super.updateSelection();
 		var selection = this.getSelection();
 
+		if (selection && selection.focusNode === this.target && selection.getRangeAt(0).endOffset === 0) {
+			var range = document.createRange();
+			var node = this.target.children[0];
+			range.setStart(node, 0);
+			range.setEnd(node, 0);
+			selection.removeAllRanges();
+			selection.addRange(range);
+			return;
+		}
+
 		if (selection && selection.anchorNode && this.target.contains(selection.anchorNode.nodeType === 1 ? selection.anchorNode : selection.anchorNode.parentNode)) {
 			this._setAnchorNode(selection.anchorNode);
 			this._setAnchorOffset(selection.anchorOffset);
@@ -1292,18 +1311,18 @@ export class WysiwygE extends PolymerElement {
 			singleBackspace();
 		}
 	}
-	// Calculate the total offsets of a node
+
 	_calculateNodeOffset(node) {
 		var offset = 0;
 
-		// If text, count length
-		if (node.nodeType === 3)
+		if (node.nodeType === 3) {
 			offset += node.nodeValue.length + 1;
-		else
+		} else {
 			offset += 1;
+		}
 
 		if (node.childNodes) {
-			for (var i=0;i<node.childNodes.length;i++) {
+			for (var i = 0; i < node.childNodes.length; i += 1) {
 				offset += this._calculateNodeOffset(node.childNodes[i]);
 			}
 		}
@@ -1341,11 +1360,9 @@ export class WysiwygE extends PolymerElement {
 				var nodes = div.querySelectorAll('*');
 
 				for (var i = 0; i < nodes.length; i += 1) {
-					if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-						if (!this.allowedTagNames.includes(nodes[i].tagName)) {
-							showPlaceholder = false;
-							break;
-						}
+					if (nodes[i].nodeType === Node.ELEMENT_NODE && !this.allowedTagNames.includes(nodes[i].tagName)) {
+						showPlaceholder = false;
+						break;
 					}
 				}
 			}
@@ -1365,12 +1382,6 @@ export class WysiwygE extends PolymerElement {
 		document.execCommand('forwardDelete');
 	}
 
-
-	/*
-	Gets the offset of a node within another node. Text nodes are
-	counted a n where n is the length. Entering (or passing) an
-	element is one offset. Exiting is 0.
-	*/
 	_getNodeOffset(start, dest) {
 		var offset = 0;
 
@@ -1382,39 +1393,29 @@ export class WysiwygE extends PolymerElement {
 				return offset;
 			}
 
-			// Go into children
 			if (node.firstChild) {
-				// Going into first one doesn't count
-				if (node !== start)
-					offset += 1;
+				if (node !== start) offset += 1;
 				stack.push(node);
 				node = node.firstChild;
-			}
-			// If can go to next sibling
-			else if (stack.length > 0 && node.nextSibling) {
-				// If text, count length (plus 1)
-				if (node.nodeType === 3)
+			} else if (stack.length > 0 && node.nextSibling) {
+				if (node.nodeType === 3) {
 					offset += node.nodeValue.length + 1;
-				else
+				} else {
 					offset += 1;
+				}
 
 				node = node.nextSibling;
-			}
-			else {
-				// If text, count length
-				if (node.nodeType === 3)
+			} else {
+				if (node.nodeType === 3) {
 					offset += node.nodeValue.length + 1;
-				else
+				} else {
 					offset += 1;
+				}
 
-				// No children or siblings, move up stack
 				while (true) {
-					if (stack.length <= 1)
-						return offset;
-
+					if (stack.length <= 1) return offset;
 					var next = stack.pop();
 
-					// Go to sibling
 					if (next.nextSibling) {
 						node = next.nextSibling;
 						break;
@@ -1423,56 +1424,62 @@ export class WysiwygE extends PolymerElement {
 			}
 		}
 	}
+
 	_getNodeAndOffsetAt(start, offset) {
 		var node = start;
 		var stack = [];
 
 		while (true) {
-			// If arrived
-			if (offset <= 0)
-				return { node: node, offset: 0 };
+			if (offset <= 0) {
+				return {
+					node: node,
+					offset: 0
+				};
+			}
 
-			// If will be within current text node
-			if (node.nodeType == 3 && (offset <= node.nodeValue.length))
-				return { node: node, offset: Math.min(offset, node.nodeValue.length) };
+			if (node.nodeType == 3 && (offset <= node.nodeValue.length)) {
+				return {
+					node: node,
+					offset: Math.min(offset, node.nodeValue.length)
+				};
+			}
 
-			// Go into children (first one doesn't count)
 			if (node.firstChild) {
-				if (node !== start)
-					offset -= 1;
+				if (node !== start) offset -= 1;
 				stack.push(node);
 				node = node.firstChild;
-			}
-			// If can go to next sibling
-			else if (stack.length > 0 && node.nextSibling) {
-				// If text, count length
-				if (node.nodeType === 3)
+			} else if (stack.length > 0 && node.nextSibling) {
+				if (node.nodeType === 3) {
 					offset -= node.nodeValue.length + 1;
-				else
+				} else {
 					offset -= 1;
+				}
 
 				node = node.nextSibling;
-			}
-			else {
-				// No children or siblings, move up stack
+			} else {
 				while (true) {
 					if (stack.length <= 1) {
-						// No more options, use current node
-						if (node.nodeType == 3)
-							return { node: node, offset: Math.min(offset, node.nodeValue.length) };
-						else
-							return { node: node, offset: 0 };
+						if (node.nodeType == 3) {
+							return {
+								node: node,
+								offset: Math.min(offset, node.nodeValue.length)
+							};
+						} else {
+							return {
+								node: node,
+								offset: 0
+							};
+						}
 					}
 
 					var next = stack.pop();
 
-					// Go to sibling
 					if (next.nextSibling) {
-						// If text, count length
-						if (node.nodeType === 3)
+						if (node.nodeType === 3) {
 							offset -= node.nodeValue.length + 1;
-						else
+						} else {
 							offset -= 1;
+						}
 
 						node = next.nextSibling;
 						break;
@@ -1573,17 +1580,17 @@ export class WysiwygE extends PolymerElement {
 		if (!this.value) this.value = '';
 		this.target.innerHTML = this.value;
 	}
-	// Determine total offset length from returned offset from ranges
+
 	_totalOffsets(parentNode, offset) {
-		if (parentNode.nodeType == 3)
-			return offset;
+		if (parentNode.nodeType == 3) return offset;
 
 		if (parentNode.nodeType == 1) {
 			var total = 0;
-			// Get child nodes
-			for (var i=0;i<offset;i++) {
+
+			for (var i = 0; i < offset; i += 1) {
 				total += this._calculateNodeOffset(parentNode.childNodes[i]);
 			}
+
 			return total;
 		}
 
@@ -1604,4 +1611,4 @@ export class WysiwygE extends PolymerElement {
 	}
 }
 
-customElements.define('wysiwyg-e', WysiwygE);
+customElements.define('wysiwyg-e', WysiwygE);
\ No newline at end of file
