improve pretty-printing for pre/etc

diff --git a/editor.coffee b/editor.coffee
index d9b8ac5..494108e 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -22,6 +22,8 @@ TYPE_TEXT = peach_parser.TYPE_TEXT
 TYPE_COMMENT = peach_parser.TYPE_COMMENT
 TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE
 
+timeout = (ms, cb) -> return setTimeout cb, ms
+
 debug_dot_at = (doc, x, y) ->
        return # disabled
        el = doc.createElement 'div'
@@ -56,6 +58,19 @@ is_display_block = (el) ->
        else
                return window.getComputedStyle(el, null).getPropertyValue('display') is 'block'
 
+# pass a node (not an element) for a tag
+# returns if this is the sort of tag that cares about leading/trailing whitespace
+# FIXME this probably doesn't work all the time
+is_whitespace_significant = (n) ->
+       if n.name is 'textarea'
+               return true
+       if n.name is 'pre'
+               return true
+       if n.el.currentStyle?
+               return n.el.currentStyle['white-space'].substr(0, 3) is 'pre'
+       else
+               return window.getComputedStyle(n.el, null).getPropertyValue('white-space').substr(0, 3) is 'pre'
+
 # Pass return value from dom event handlers to this.
 # If they return false, this will addinionally stop propagation and default.
 event_return = (e, bool) ->
@@ -139,6 +154,15 @@ void_elements = {
        track: true
        wbr: true
 }
+# TODO make these always pretty-print (on the inside) like blocks
+no_text_elements = { # these elements never contain text
+       select: true
+       table: true
+       tr: true
+       thead: true
+       tbody: true
+}
+# FIXME terminology: s/dom/tree/; s/el/n/
 dom_to_html = (dom, indent = '', parent_is_block = false) ->
        ret = ''
        for el, i in dom
@@ -147,10 +171,13 @@ dom_to_html = (dom, indent = '', parent_is_block = false) ->
                                is_block = is_display_block el.el
                                if is_block
                                        is_tiny_block = false
-                                       if el.children.length is 1
-                                               if el.children[0].type is TYPE_TEXT
-                                                       if el.children[0].text.length < 35
-                                                               is_tiny_block = true
+                                       if is_whitespace_significant el
+                                               is_tiny_block = true
+                                       else
+                                               if el.children.length is 1
+                                                       if el.children[0].type is TYPE_TEXT
+                                                               if el.children[0].text.length < 35
+                                                                       is_tiny_block = true
                                if is_block or (parent_is_block and i is 0)
                                        ret += indent
                                ret += '<' + el.name
@@ -475,7 +502,6 @@ tree_remove_empty_text_nodes = (tree) ->
                        if n.text.length is 0
                                empties.unshift n
                return false
-       console.log empties
        for n in empties
                # don't completely empty the tree
                if tree.length is 1
@@ -483,11 +509,9 @@ tree_remove_empty_text_nodes = (tree) ->
                                console.log "oop, leaving a blank node because it's the only thing"
                                return
                n.el.parentNode.removeChild n.el
-               console.log 'removing'
                for c, i in n.parent.children
                        if c is n
                                n.parent.children.splice i, 1
-                               console.log 'removed'
                                break
 
 # pass a array of nodes (from parser library, ie it should have .el and .text)
@@ -787,7 +811,6 @@ class PeachHTML5Editor
                tree_dedup_space @tree
                @changed()
        changed: ->
-               # FIXME don't export cursor placeholder (when cursor is between space characters)
                @in_el.onchange = null
                @in_el.value = dom_to_html @tree
                @in_el.onchange = =>
@@ -805,13 +828,12 @@ class PeachHTML5Editor
                        console.log "error: tried to move cursor to position that has no pixel location", cursor[0], cursor[1]
                        return
                @cursor = cursor
-               # replace cursor, to reset blink animation
+               # replace cursor element, to reset blink animation
                if @cursor_visible
                        @cursor_el.parentNode.removeChild @cursor_el
                @cursor_el = domify @outer_idoc, div: id: 'cursor'
                @overlay.appendChild @cursor_el
                @cursor_visible = true
-               # TODO figure out x,y coords for cursor
                @cursor_el.style.left = "#{loc.x + overlay_padding - 1}px"
                @cursor_el.style.top = "#{loc.y + overlay_padding}px"
 

diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html
index e3ead1a..0b844e8 100644 (file)
--- a/editor_tests_compiled.html
+++ b/editor_tests_compiled.html
@@ -8,6 +8,7 @@
                textarea {
                        box-sizing: border-box;
                        width: 100%;
+                       height: 200px
                }
                /* optional */
                .peach_html5_editor {
@@ -21,7 +22,7 @@
        <h1>Peach HTML5 Editor test page (compiled version)</h1>
        <p>This version of the editor test page requires that you've compiled all the source files. (Just run <code>make</code>).</p>
        <form action="#" method="get">
-       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea rows="9" cols="22" name="in" id="in">&lt;p&gt;  a b c d e f g h i j k l m n o p q r s t u v w x y z  a b c d e f g h i j k l m n o p q r s t u v w x y z                                                                a b c d e f g h i j k l m n o p q r s t u v w x y z  &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
+       <p>HTML view. Changes here propagate when you remove your cursor (press tab or click outside)<br><textarea name="in" id="in">&lt;p&gt;  a b c d e f g h i j k l m n o p q r s t u v w x y z  a b c d e f g h i j k l m n o p q r s t u v w x y z                                                                a b c d e f g h i j k l m n o p q r s t u v w x y z  &lt;strong&gt;Bold &lt;em&gt; Italic + Bold&lt;/strong&gt; Italic &lt;/em&gt; Normal&lt;/p&gt;
 &lt;p style="white-space: pre-wrap"&gt;this &amp;lt;p&amp;gt; has     white-space: pre-wrap&lt;/p&gt;
 
 &lt;div&gt;