From: Jason Woofenden <jason@jasonwoof.com>
Date: Wed, 7 Jun 2017 05:06:16 +0000 (-0400)
Subject: preserve <script> tags and whitespace in plaintext elements
X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=commitdiff_plain

preserve <script> tags and whitespace in plaintext elements
---

diff --git a/demo.html b/demo.html
index 34d92e3..30dddf6 100644
--- a/demo.html
+++ b/demo.html
@@ -24,9 +24,11 @@
 	<p>This color scheme is just temporary, for testing the cursor and annotations on a variaty of background colors</p>
 	<form action="#" method="get">
 	<p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">
-	&lt;script&gt;console.log("this code should not run in the editor")&lt;/script&gt;
-	&lt;!-- comments are preserved --&gt;
-	&lt;style&gt;h1 { color: #fdf; }&lt;/style&gt;
+&lt;script&gt;console.log("this code should not run in the editor")&lt;/script&gt;
+&lt;!-- comments are preserved including      whitespace --&gt;
+&lt;style&gt;
+    h1 { color: #fdf; }
+&lt;/style&gt;
 	&lt;H1 style="padding: 0; margin: 0 0 7px 0"&gt;Headline!&lt;/h1&gt;
 
 	&lt;div&gt;SVG works: &lt;svg style="display: inline-block; vertical-align: bottom"xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 55 55"&gt;&lt;path d="M27.5 0l6.57 19.87 20.93.11-16.868 12.39 6.364 19.938L27.5 40.094 10.504 52.308l6.364-19.938L0 19.98l20.93-.11z" overflow="visible" fill-rule="evenodd"&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;
diff --git a/editor.js b/editor.js
index 9a3a2f5..f3c6204 100644
--- a/editor.js
+++ b/editor.js
@@ -121,11 +121,10 @@ get_el_bounds = window.bounds = function(el) {
 }
 
 function is_display_block (el) {
-	if (el.currentStyle != null) {
-		return el.currentStyle.display === 'block'
-	} else {
+	if (el.nodeType === 1) {
 		return window.getComputedStyle(el, null).getPropertyValue('display') === 'block'
 	}
+	return false
 }
 
 // Pass return value from dom event handlers to this.
@@ -428,8 +427,10 @@ function instantiate_tree (tree, parent) {
 			break
 			case 'tag':
 				if (c.name === 'script' || c.name === 'object' || c.name === 'iframe' || c.name === 'link') {
-					// TODO put placeholders instead
-					remove.unshift(i) // add to beginning so they are removed last first
+					// TODO make some placeholders visible
+					// problematic to have different type than c: c.el = parent.ownerDocument.createComment(c.name + ' tag here')
+					c.el = parent.ownerDocument.createElement(c.name)
+					// correct type, but empty and no attributes
 					continue
 				}
 				if (c.namespace === 'svg') {
@@ -455,11 +456,6 @@ function instantiate_tree (tree, parent) {
 				}
 		}
 	}
-	// these are in reverse order so we remove highest indexes first
-	for (i = 0; i < remove.length; i++) {
-		index = remove[i]
-		tree.splice(index, 1)
-	}
 }
 
 function traverse_tree (tree, cb) {
@@ -1866,7 +1862,7 @@ PeachHTML5Editor.prototype.collapse_whitespace = function(tree) {
 				if (block) {
 					cb(null)
 				}
-				if (n.children.length > 0) {
+				if (n.children.length > 0 && plaintext_elements[n.name] == null) {
 					iterate(n.children, cb)
 				}
 				if (block) {
@@ -2371,21 +2367,12 @@ PeachHTML5Editor.prototype.pretty_html = function(tree, indent, parent_flags) {
 					is_br = true
 				}
 				is_text = false
-				if (n.el.currentStyle != null) {
-					cs = n.el.currentStyle
-					whitespace = cs['white-space']
-					display = cs['display']
-					position = cs['position']
-					float = cs['float']
-					visibility = cs['visibility']
-				} else {
-					cs = this.iframe.contentWindow.getComputedStyle(n.el, null)
-					whitespace = cs.getPropertyValue('white-space')
-					display = cs.getPropertyValue('display')
-					position = cs.getPropertyValue('position')
-					float = cs.getPropertyValue('float')
-					visibility = cs.getPropertyValue('visibility')
-				}
+				cs = this.iframe.contentWindow.getComputedStyle(n.el, null)
+				whitespace = cs.getPropertyValue('white-space')
+				display = cs.getPropertyValue('display')
+				position = cs.getPropertyValue('position')
+				float = cs.getPropertyValue('float')
+				visibility = cs.getPropertyValue('visibility')
 				if (n.name === 'textarea') {
 					inner_flags.pre_ish = true
 				} else {