X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=b7406ddc8efca65375bfe788acf59f840ed263ae;hb=f1496937db2dc9ce1681bcecf99ae352df4ed6f4;hp=2d06854910e8d5fe59969b337ae044992fa32cc6;hpb=68877825429e0eb91c764d1277d8b6cb8a178f33;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index 2d06854..b7406dd 100644 --- 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,52 +154,70 @@ void_elements = { track: true wbr: true } -dom_to_html = (dom, indent = '', parent_is_block = false) -> +# 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/ +tree_to_html = (tree, indent = '', parent_is_block = false) -> ret = '' - for el, i in dom - switch el.type + for n, i in tree + switch n.type when TYPE_TAG - is_block = is_display_block el.el + is_block = is_display_block n.el + if is_block + is_tiny_block = false + if is_whitespace_significant n + is_tiny_block = true + else + if n.children.length is 1 + if n.children[0].type is TYPE_TEXT + if n.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 + ret += '<' + n.name attr_keys = [] - for k of el.attrs + for k of n.attrs attr_keys.unshift k #attr_keys.sort() for k in attr_keys ret += " #{k}" - if el.attrs[k].length > 0 - ret += "=\"#{enc_attr el.attrs[k]}\"" + if n.attrs[k].length > 0 + ret += "=\"#{enc_attr n.attrs[k]}\"" ret += '>' - unless void_elements[el.name]? + unless void_elements[n.name]? if is_block next_indent = indent + ' ' else next_indent = indent - if el.children.length - if is_block + if n.children.length + if is_block and not is_tiny_block ret += "\n" - ret += dom_to_html el.children, next_indent, is_block - if is_block or (parent_is_block and i is dom.length - 1) + ret += tree_to_html n.children, next_indent, is_block and not is_tiny_block + if is_block and not is_tiny_block ret += indent - ret += "" - if is_block or (parent_is_block and i is dom.length - 1) + ret += "" + if is_block or (parent_is_block and i is tree.length - 1) ret += "\n" when TYPE_TEXT if parent_is_block and i is 0 ret += indent - ret += enc_text el.text - if parent_is_block and i is dom.length - 1 + ret += enc_text n.text + if parent_is_block and i is tree.length - 1 ret += "\n" when TYPE_COMMENT - ret += "" + ret += "" when TYPE_DOCTYPE - ret += " 0 - ret += " \"#{el.public_identifier}\"" - if el.system_identifier? and el.system_identifier.length > 0 - ret += " \"#{el.system_identifier}\"" + ret += " 0 + ret += " \"#{n.public_identifier}\"" + if n.system_identifier? and n.system_identifier.length > 0 + ret += " \"#{n.system_identifier}\"" ret += ">\n" return ret @@ -469,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 @@ -477,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) @@ -657,15 +687,15 @@ class PeachHTML5Editor init: -> # called by @iframe's onload (or timeout on firefox) @idoc = @iframe.contentDocument @overlay.onclick = (e) => - return event_return @onclick e + return event_return e, @onclick e @overlay.ondoubleclick = (e) => - return event_return @ondoubleclick e + return event_return e, @ondoubleclick e @outer_idoc.body.onkeyup = (e) => - return event_return @onkeyup e + return event_return e, @onkeyup e @outer_idoc.body.onkeydown = (e) => - return event_return @onkeydown e + return event_return e, @onkeydown e @outer_idoc.body.onkeypress = (e) => - return event_return @onkeypress e + return event_return e, @onkeypress e if @options.stylesheet # TODO test this @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet @@ -781,9 +811,8 @@ 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.value = tree_to_html @tree @in_el.onchange = => @load_html @in_el.value @iframe.style.height = "0" @@ -799,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"