X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=9b4ad4f5eae8490343cdbe21ad4b9fb6620aff31;hb=7933708e8875761cdaaa5c2fd746ad4b8aa7ce3a;hp=d93f1ede8390cd61b0fc6031a438228a09503606;hpb=e5b8848ccad6b4579696fa04f75ddb1d5d1fb923;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index d93f1ed..9b4ad4f 100644 --- a/editor.coffee +++ b/editor.coffee @@ -17,10 +17,30 @@ # SETTINGS overlay_padding = 10 -TYPE_TAG = peach_parser.TYPE_TAG -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 +next_frame = (cb) -> + if (window.requestAnimationFrame?) + window.requestAnimationFrame cb + else + timeout 16, cb + +this_url_sans_path = -> + ret = "#{window.location.href}" + clip = ret.lastIndexOf '#' + if clip > -1 + ret = ret.substr 0, clip + clip = ret.lastIndexOf '?' + if clip > -1 + ret = ret.substr 0, clip + clip = ret.lastIndexOf '/' + if clip > -1 + ret = ret.substr 0, clip + 1 + return ret + +# xml 1.0 spec, chromium and firefox accept these, plus lots of unicode chars +valid_attr_regex = new RegExp '^[a-zA-Z_:][-a-zA-Z0-9_:.]*$' +# html5 spec is much more lax, but chromium won't let me make at attribute with the name "4" +js_attr_regex = new RegExp '^[oO][nN].' debug_dot_at = (doc, x, y) -> return # disabled @@ -56,6 +76,15 @@ is_display_block = (el) -> else return window.getComputedStyle(el, null).getPropertyValue('display') is 'block' +# Pass return value from dom event handlers to this. +# If they return false, this will addinionally stop propagation and default. +event_return = (e, bool) -> + if bool is false + if e.stopPropagation? + e.stopPropagation() + if e.preventDefault? + e.preventDefault() + return bool # Warning: currently assumes you're asking about a single character # Note: chromium returns multiple bounding rects for a space at a line-break # Note: chromium's getBoundingClientRect() is broken (when zero-area client rects) @@ -89,7 +118,7 @@ window.cursor_to_xyh = cursor_to_xyh = (n, i) -> range = document.createRange() if n.text.length is 0 ret = text_range_bounds n.el, 0, 0 - if i is n.text.length + else if i is n.text.length ret = text_range_bounds n.el, i - 1, i if ret? ret.x += ret.w @@ -130,37 +159,16 @@ void_elements = { track: true wbr: true } -dom_to_html = (dom) -> - ret = '' - for el in dom - switch el.type - when TYPE_TAG - ret += '<' + el.name - attr_keys = [] - for k of el.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]}\"" - ret += '>' - unless void_elements[el.name] - if el.children.length - ret += dom_to_html el.children - ret += "" - when TYPE_TEXT - ret += enc_text el.text - when TYPE_COMMENT - 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 += ">\n" - return ret +# 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 + ul: true + ol: true +} domify = (doc, hash) -> for tag, attrs of hash @@ -189,6 +197,8 @@ outer_css = (args) -> ret += 'body {' ret += 'margin: 0;' ret += 'padding: 0;' + ret += 'color: black;' + ret += 'background: white;' ret += '}' ret += '#wrap1 {' ret += "border: #{occupy 1}px solid black;" @@ -215,6 +225,10 @@ outer_css = (args) -> ret += 'padding: 0;' ret += "width: #{w}px;" #ret += "height: #{h}px;" # height auto-set when content set/changed + ret += '-ms-user-select: none;' + ret += '-webkit-user-select: none;' + ret += '-moz-user-select: none;' + ret += 'user-select: none;' ret += '}' ret += '#overlay {' ret += 'position: absolute;' @@ -230,21 +244,48 @@ outer_css = (args) -> ret += '}' ret += '#cursor {' ret += 'position: absolute;' - ret += 'height: 1em;' # FIXME adjust for hight of text ret += 'width: 2px;' - ret += 'background: #444;' - ret += '-webkit-animation: blink 1s steps(2, start) infinite;' - ret += 'animation: blink 1s steps(2, start) infinite;' + ret += 'background: linear-gradient(0deg, rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1), rgba(255,255,255,1), rgba(0,0,0,1));' + ret += 'background-size: 200% 200%;' + ret += '-webkit-animation: blink 1s linear normal infinite;' + ret += 'animation: blink 1s linear normal infinite;' ret += '}' ret += '@-webkit-keyframes blink {' - ret += 'to { visibility: hidden; }' + ret += '0%{background-position:0% 0%}' + ret += '100%{background-position:0% -100%}' ret += '}' - ret += '@keyframes blink {' - ret += 'to { visibility: hidden; }' + ret += '@keyframes blink { ' + ret += '0%{background-position:0% 0%}' + ret += '100%{background-position:0% -100%}' + ret += '}' + ret += '.ann_box {' + ret += 'z-index: 5;' + ret += 'position: absolute;' + ret += 'border: 1px solid rgba(0,0,0,0.1);' + ret += 'outline: 1px solid rgba(255,255,255,0.1);' # in case there's a black background + ret += '}' + ret += '.ann_tag {' + ret += 'z-index: 10;' + ret += 'position: absolute;' + ret += 'font-size: 8px;' + ret += 'white-space: pre;' + ret += 'background: rgba(255,255,255,0.4);' + ret += '-ms-user-select: none;' + ret += '-webkit-user-select: none;' + ret += '-moz-user-select: none;' + ret += 'user-select: none;' ret += '}' return ret -# key codes: + +ignore_key_codes = + '18': true # alt + '20': true # capslock + '17': true # ctrl + '144': true # numlock + '16': true # shift + '91': true # windows "start" key +# key codes: (valid on keydown, not keypress) KEY_LEFT = 37 KEY_UP = 38 KEY_RIGHT = 39 @@ -259,14 +300,6 @@ KEY_INSERT = 45 KEY_PAGE_UP = 33 KEY_PAGE_DOWN = 34 KEY_TAB = 9 - -ignore_key_codes = - '18': true # alt - '20': true # capslock - '17': true # ctrl - '144': true # numlock - '16': true # shift - '91': true # windows "start" key control_key_codes = # we react to these, but they aren't typing '37': KEY_LEFT '38': KEY_UP @@ -287,36 +320,39 @@ instantiate_tree = (tree, parent) -> remove = [] for c, i in tree switch c.type - when TYPE_TEXT + when 'text' c.el = parent.ownerDocument.createTextNode c.text parent.appendChild c.el - when TYPE_TAG + when 'tag' if c.name in ['script', 'object', 'iframe', 'link'] # TODO put placeholders instead remove.unshift i + continue # TODO create in correct namespace c.el = parent.ownerDocument.createElement c.name for k, v of c.attrs # FIXME if attr_whitelist[k]? - c.el.setAttribute k, v + if valid_attr_regex.test k + unless js_attr_regex.test k + c.el.setAttribute k, v parent.appendChild c.el if c.children.length instantiate_tree c.children, c.el for i in remove tree.splice i, 1 -traverse_tree = (tree, state, cb) -> +traverse_tree = (tree, cb) -> + done = false for c in tree - cb c, state - break if state.done? + done = cb c + return done if done if c.children.length - traverse_tree c.children, state, cb - break if state.done? - return state -# find the next element in tree (and decendants) that is after n and can contain text -# TODO make it so cursor can go places that don't have text but could + done = traverse_tree c.children, cb + return done if done + return done + find_next_cursor_position = (tree, n, i) -> - if n? and n.type is TYPE_TEXT and n.text.length > i + if n.type is 'text' and n.text.length > i orig_xyh = cursor_to_xyh n, i unless orig_xyh? console.log "ERROR: couldn't find xy for current cursor location" @@ -326,19 +362,22 @@ find_next_cursor_position = (tree, n, i) -> if next_xyh? if next_xyh.x > orig_xyh.x or next_xyh.y > orig_xyh.y return [n, next_i] - found = traverse_tree tree, before: n?, (node, state) -> - if node.type is TYPE_TEXT and state.before is false - state.node = node - state.done = true + state_before = true + found = null + traverse_tree tree, (node, state) -> + if node.type is 'text' and state_before is false + if cursor_to_xyh(node, 0)? + found = node + return true if node is n - state.before = false - if found.node? - return [found.node, 0] + state_before = false + return false + if found? + return [found, 0] return null -# TODO make it so cursor can go places that don't have text but could find_prev_cursor_position = (tree, n, i) -> - if n? and n.type is TYPE_TEXT and i > 0 + if n? and n.type is 'text' and i > 0 orig_xyh = cursor_to_xyh n, i unless orig_xyh? console.log "ERROR: couldn't find xy for current cursor location" @@ -349,24 +388,27 @@ find_prev_cursor_position = (tree, n, i) -> if prev_xyh.x < orig_xyh.x or prev_xyh.y < orig_xyh.y return [n, prev_i] return [n, i - 1] - found = traverse_tree tree, before: n?, (node, state) -> - if node.type is TYPE_TEXT + found_prev = null + found = null + traverse_tree tree, (node) -> + if node.type is 'text' unless n? - state.node = node - state.done = true + found = node + return true if node is n - if state.prev? - state.node = state.prev - state.done = true - if node - state.prev = node - if found.node? - return [found.node, found.node.text.length] + found = found_prev # null if n is the first text node + return true + found_prev = node + return false + if found? + if cursor_to_xyh found, found.text.length # text visible? + return [found, found.text.length] + return find_prev_cursor_position tree, found, 0 return null find_loc_cursor_position = (tree, loc) -> for c in tree - if c.type is TYPE_TAG or c.type is TYPE_TEXT + if c.type is 'tag' or c.type is 'text' bounds = get_el_bounds c.el continue if loc.x < bounds.x continue if loc.x > bounds.x + bounds.w @@ -375,7 +417,7 @@ find_loc_cursor_position = (tree, loc) -> if c.children.length ret = find_loc_cursor_position c.children, loc return ret if ret? - if c.type is TYPE_TEXT + if c.type is 'text' # click is within bounding box that contains all text. return [c, 0] if c.text.length is 0 before_i = 0 @@ -428,6 +470,25 @@ is_space_code = (char_code) -> is_space = (chr) -> return is_space_code chr.charCodeAt 0 +tree_remove_empty_text_nodes = (tree) -> + empties = [] + traverse_tree tree, (n) -> + if n.type is 'text' + if n.text.length is 0 + empties.unshift n + return false + for n in empties + # don't completely empty the tree + if tree.length is 1 + if tree[0].type is 'text' + console.log "oop, leaving a blank node because it's the only thing" + return + n.el.parentNode.removeChild n.el + for c, i in n.parent.children + if c is n + n.parent.children.splice i, 1 + break + # pass a array of nodes (from parser library, ie it should have .el and .text) tree_dedup_space = (tree) -> prev = cur = next = null @@ -437,15 +498,17 @@ tree_dedup_space = (tree) -> first = true removed_char = null + tree_remove_empty_text_nodes(tree) + iterate = (tree, cb) -> for n in tree - if n.type is TYPE_TEXT + if n.type is 'text' i = 0 while i < n.text.length # don't foreach, cb might remove chars advance = cb n, i if advance i += 1 - if n.type is TYPE_TAG + if n.type is 'tag' block = is_display_block n.el if block cb null @@ -510,14 +573,6 @@ tree_dedup_space = (tree) -> return put_it_back() #else # console.log "removing space becase space after it is collapsed" - # if there's no prev or next (single space inside a block-level element?) check - # TODO scrapt this, or fix it so it works when there's no parent - # if prev is null and next is null - # new_parent_px = cur.parent.el.getBoundingClientRect() - # if new_parent_px.left isnt parent_px.left or new_parent_px.top isnt parent_px.top or new_parent_px.right isnt parent_px.right or new_parent_px.bottom isnt parent_px.bottom - # console.log "WEIRD: parent moved" - # return put_it_back() - # we didn't put it back return true # pass null at start/end of display:block queue = (n, i) -> @@ -546,21 +601,30 @@ tree_dedup_space = (tree) -> iterate tree, queue queue null + tree_remove_empty_text_nodes(tree) + class PeachHTML5Editor # Options: (all optional) # editor_id: "id" attribute for outer-most element created by/for editor + # css_file: filename of a css file to style editable content + # on_init: callback for when the editable content is in place constructor: (in_el, options) -> @options = options ? {} @in_el = in_el - @tree = [] - @initialized = false # when iframes have loaded + @tree = null + @matting = [] + @init_1_called = false # when iframes have loaded @outer_iframe # iframe to hold editor @outer_idoc # "document" object for @outer_iframe + @wrap2 = null # scrollbar is on this @iframe = null # iframe to hold editable content @idoc = null # "document" object for @iframe @cursor = null @cursor_el = null @cursor_visible = false + @poll_for_blur_timeout = null + @iframe_offset = null + @iframe_height = null opt_fragment = @options.fragment ? true @parser_opts = {} if opt_fragment @@ -576,13 +640,15 @@ class PeachHTML5Editor domify @outer_idoc, text: css ] @outer_idoc.head.appendChild icss - @iframe = domify @outer_idoc, iframe: {} + @iframe = domify @outer_idoc, iframe: sandbox: 'allow-same-origin allow-scripts' @iframe.onload = => - @init() - setTimeout (=> @init()), 200 # firefox never fires this onload + @init_1() + timeout 200, => # firefox never fires this onload + @init_1() unless @init_1_called @outer_idoc.body.appendChild( domify @outer_idoc, div: id: 'wrap1', children: [ - domify @outer_idoc, div: id: 'wrap2', children: [ + domify @outer_idoc, div: style: "position: absolute; top: 0; left: 1px; font-size: 10px", children: [ domify @outer_idoc, text: "Peach HTML5 Editor" ] + @wrap2 = domify @outer_idoc, div: id: 'wrap2', children: [ domify @outer_idoc, div: id: 'wrap3', children: [ @iframe @overlay = domify @outer_idoc, div: id: 'overlay' @@ -601,30 +667,58 @@ class PeachHTML5Editor @outer_iframe.setAttribute 'style', outer_iframe_style css = outer_css w: outer_bounds.w, h: outer_bounds.h outer_wrap.appendChild @outer_iframe - init: -> # called by @iframe's onload (or timeout on firefox) - return if @initialized # ignore timeout for non-broken browsers + init_1: -> # @iframe has loaded (but not it's css) @idoc = @iframe.contentDocument + @init_1_called = true + # chromium doesn't resolve relative urls as though they were at the same domain + # so add a tag + @idoc.head.appendChild domify @idoc, base: href: this_url_sans_path() + # don't let @iframe have scrollbars + @idoc.head.appendChild domify @idoc, style: children: [domify @idoc, text: "body { overflow: hidden; }"] + # load css file + if @options.css_file + istyle = domify @idoc, link: rel: 'stylesheet', href: @options.css_file + istyle.onload = => + @init_2() + @idoc.head.appendChild istyle + else + @init_2() + init_2: -> # @iframe and it's css file(s) are ready @overlay.onclick = (e) => - return @onclick e + @have_focus() + return event_return e, @onclick e + @overlay.ondoubleclick = (e) => + @have_focus() + return event_return e, @ondoubleclick e @outer_idoc.body.onkeyup = (e) => - return @onkeyup e + @have_focus() + return event_return e, @onkeyup e @outer_idoc.body.onkeydown = (e) => - return @onkeydown e + @have_focus() + return event_return e, @onkeydown e @outer_idoc.body.onkeypress = (e) => - return @onkeypress e - if @options.stylesheet - # TODO test this - @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet + @have_focus() + return event_return e, @onkeypress e @load_html @in_el.value - @initialized = true - if @options.initialized_cb? - @options.initialized_cb() + if @options.on_init? + @options.on_init() + overlay_event_to_inner_xy: (e) -> + unless @iframe_offset? + @iframe_offset = get_el_bounds @iframe + x = e.pageX # TODO ?cross-browserify + y = e.pageY + @wrap2.scrollTop # TODO ?cross-browserify + # TODO adjust for scrolling + return x: x - @iframe_offset.x, y: y - @iframe_offset.y onclick: (e) -> - x = (e.offsetX ? e.layerX) - overlay_padding - y = (e.offsetY ? e.layerY) - overlay_padding - new_cursor = find_loc_cursor_position @tree, x: x, y: y + xy = @overlay_event_to_inner_xy e + new_cursor = find_loc_cursor_position @tree, xy if new_cursor? @move_cursor new_cursor + else + @kill_cursor() + return false + ondoubleclick: (e) -> + return false onkeyup: (e) -> return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? @@ -647,6 +741,47 @@ class PeachHTML5Editor break return false when KEY_UP + if @cursor? + new_cursor = @cursor + old_loc = cursor_to_xyh new_cursor[0], new_cursor[1] + new_loc = x: old_loc.x, y: old_loc.y + while new_loc.y >= old_loc.y + new_cursor = find_prev_cursor_position @tree, new_cursor[0], new_cursor[1] + return false unless new_cursor? + new_loc = cursor_to_xyh new_cursor[0], new_cursor[1] + if new_cursor? + # now we're above + if new_loc.x <= old_loc.x + @move_cursor new_cursor + return false + target_y = new_loc.y + # search leftward, until we find the closest position + while new_loc.x > old_loc.x and new_loc.y is target_y + prev_loc = new_loc + prev_cursor = new_cursor + new_cursor = find_prev_cursor_position @tree, new_cursor[0], new_cursor[1] + break unless new_cursor? + new_loc = cursor_to_xyh new_cursor[0], new_cursor[1] + # move cursor to prev_cursor or new_cursor + if new_cursor? + if new_loc.y is target_y + # both valid, and on the same line, use closest + if (old_loc.x - new_loc.x) < (prev_loc.x - old_loc.x) + @move_cursor new_cursor + else + @move_cursor prev_cursor + else + # new_cursor on wrong line, use prev_cursor + @move_cursor prev_cursor + else + # can't go any further prev, use prev_cursor + @move_cursor prev_cursor + else + # move cursor to first position in document + new_cursor = find_prev_cursor_position @tree + if new_cursor? + @move_cursor new_cursor + break return false when KEY_RIGHT if @cursor? @@ -654,11 +789,11 @@ class PeachHTML5Editor if new_cursor? @move_cursor new_cursor else - for c in @tree - new_cursor = find_prev_cursor_position @tree, c, -1 - if new_cursor? - @move_cursor new_cursor - break + # move cursor to first position in document + new_cursor = find_prev_cursor_position @tree + if new_cursor? + @move_cursor new_cursor + break return false when KEY_DOWN return false @@ -670,6 +805,7 @@ class PeachHTML5Editor @cursor[0].text = @cursor[0].text.substr(0, @cursor[1] - 1) + @cursor[0].text.substr(@cursor[1]) @cursor[0].el.nodeValue = @cursor[0].text @move_cursor [@cursor[0], @cursor[1] - 1] + @changed() return false when KEY_DELETE return false unless @cursor? @@ -677,6 +813,7 @@ class PeachHTML5Editor @cursor[0].text = @cursor[0].text.substr(0, @cursor[1]) + @cursor[0].text.substr(@cursor[1] + 1) @cursor[0].el.nodeValue = @cursor[0].text @move_cursor [@cursor[0], @cursor[1]] + @changed() return false when KEY_ENTER return false @@ -695,7 +832,7 @@ class PeachHTML5Editor onkeypress: (e) -> return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? # handled in keydown + # return false if control_key_codes[e.keyCode]? # handled in keydown char = e.charCode ? e.keyCode if char and @cursor? char = String.fromCharCode char @@ -724,33 +861,201 @@ 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 = @pretty_html @tree @in_el.onchange = => @load_html @in_el.value - @iframe.style.height = "0" - @iframe.style.height = "#{@idoc.body.scrollHeight}px" + @adjust_iframe_height() + adjust_iframe_height: -> + h = parseInt(@idoc.body.scrollHeight, 10) + if @iframe_height isnt h + @iframe_height = h + s = @wrap2.scrollTop + @iframe.style.height = "0" + @iframe.style.height = "#{h}px" + @wrap2.scrollTop = s kill_cursor: -> # remove it, forget where it was if @cursor_visible @cursor_el.parentNode.removeChild @cursor_el @cursor_visible = false @cursor = null + @matt null move_cursor: (cursor) -> loc = cursor_to_xyh cursor[0], cursor[1] unless loc? 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" + if loc.h < 5 + height = 12 + else + height = loc.h + @cursor_el.style.top = "#{loc.y + overlay_padding + Math.round(height * .07)}px" + @cursor_el.style.height = "#{Math.round height * 0.82}px" + @matt cursor[0] + matt: (n) -> + while @matting.length > 0 + @overlay.removeChild @matting[0] + @matting.shift() + return unless n? + prev_bounds = x: 0, y: 0, w: 0, h: 0 + alpha = 0.1 + while n?.el? + if n.type is 'text' + n = n.parent + continue + bounds = get_el_bounds n.el + return unless bounds? + if bounds.x is prev_bounds.x and bounds.y is prev_bounds.y and bounds.w is prev_bounds.w and bounds.h is prev_bounds.h + n = n.parent + continue + matt = domify @outer_idoc, div: class: 'ann_box', style: "left: #{bounds.x - 1 + overlay_padding}px; top: #{bounds.y - 2 + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px" # outline: 1000px solid rgba(0,153,255,#{alpha}); + @overlay.appendChild matt + @matting.push matt + ann = domify @outer_idoc, div: class: 'ann_tag', style: "left: #{bounds.x + 1 + overlay_padding}px; top: #{bounds.y - 7 + overlay_padding}px", children: [domify @outer_idoc, text: " #{n.name} "] + @overlay.appendChild ann + @matting.push ann + n = n.parent + alpha *= 1.5 + pretty_html: (tree, indent = '', parent_flags = pre_ish: false, block: true, want_nl: false) -> + ret = '' + want_nl = parent_flags.want_nl + prev_in_flow_is_text = false + prev_in_flow_is_block = false + for n, i in tree + # figure out flags + inner_flags = want_nl: true + is_br = false + switch n.type + when 'tag' + if n.name is 'br' + is_br = true + is_text = false + if n.el.currentStyle? + cs = n.el.currentStyle + whitespace = cs['white-space'] + display = cs['display'] + position = cs['position'] + float = cs['float'] + visibility = cs['visibility'] + else + cs = @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 is 'textarea' + inner_flags.pre_ish = true + else + inner_flags.pre_ish = whitespace.substr(0, 3) is 'pre' + switch float + when 'left', 'right' + in_flow = false + else + switch position + when 'absolute', 'fixed' + in_flow = false + else + if 'display' is 'none' + in_flow = false + else + switch visibility + when 'hidden', 'collapse' + in_flow = false + else # visible + in_flow = true + switch display + when 'inline', 'none' + inner_flags.block = false + is_block = in_flow_block = false + when 'inline-black' + inner_flags.block = true + is_block = in_flow_block = false + else # block, table, etc + inner_flags.block = true + is_block = true + in_flow_block = in_flow + when 'text' + is_text = true + is_block = false + in_flow = true + in_flow_block = false + else # 'comment', 'doctype' + is_text = false + is_block = false + in_flow = false + in_flow_block = false + # print whitespace if we can + unless parent_flags.pre_ish + unless prev_in_flow_is_text and is_br + if (i is 0 and parent_flags.block) or in_flow_block or prev_in_flow_is_block + if want_nl + ret += "\n" + ret += indent + switch n.type + when 'tag' + ret += '<' + n.name + attr_keys = [] + for k of n.attrs + attr_keys.unshift k + #attr_keys.sort() + for k in attr_keys + ret += " #{k}" + if n.attrs[k].length > 0 + ret += "=\"#{enc_attr n.attrs[k]}\"" + ret += '>' + unless void_elements[n.name]? + if inner_flags.block + next_indent = indent + ' ' + else + next_indent = indent + if n.children.length + ret += @pretty_html n.children, next_indent, inner_flags + ret += "" + when 'text' + ret += enc_text n.text + when 'comment' + ret += "" # TODO encode? + when 'doctype' + ret += " 0 + ret += " \"#{n.public_identifier}\"" + if n.system_identifier? and n.system_identifier.length > 0 + ret += " \"#{n.system_identifier}\"" + ret += ">" + want_nl = true + if in_flow + prev_in_flow_is_text = is_text + prev_in_flow_is_block = is_block or (in_flow and is_br) + if tree.length + # output final newline if allowed + unless parent_flags.pre_ish + if prev_in_flow_is_block or parent_flags.block + ret += "\n#{indent.substr 4}" + return ret + onblur: -> + @kill_cursor() + have_focus: -> + @editor_is_focused = true + @poll_for_blur() + poll_for_blur: -> + return if @poll_for_blur_timeout? # already polling + @poll_for_blur_timeout = timeout 150, => + next_frame => # pause polling when browser knows we're not active/visible/etc. + @poll_for_blur_timeout = null + if document.activeElement is @outer_iframe + @poll_for_blur() + else + @editor_is_focused = false + @onblur() window.peach_html5_editor = (args...) -> return new PeachHTML5Editor args...