From: Jason Woofenden Date: Sat, 5 Mar 2016 19:42:00 +0000 (-0500) Subject: mostly working: dedup spaces X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=commitdiff_plain;h=055c643860d0b9c766ce2f4c6c92f2a1037c130d mostly working: dedup spaces --- diff --git a/editor.coffee b/editor.coffee index 8014188..da40866 100644 --- a/editor.coffee +++ b/editor.coffee @@ -27,7 +27,6 @@ debug_dot_at = (doc, x, y) -> # text nodes don't have getBoundingClientRect(), so use selection api to find # it. -get_text_bounding_rect = (el) -> get_el_bounds = (el) -> if el.getBoundingClientRect? rect = el.getBoundingClientRect() @@ -47,45 +46,47 @@ get_el_bounds = (el) -> h: rect.height ? (rect.top - rect.bottom) } -# figure out the x/y coordinates of where the cursor should be if it's at -# position ``i`` within text node ``n`` -window.cursor_to_xyh = cursor_to_xyh = (n, i) -> +# 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) +# Note: sometimes returns null (eg for whitespace that is not visible) +text_range_bounds = (el, start, end) -> range = document.createRange() - plus_width = false - if n.text.length is 0 - range.setStart n.el, i - range.setEnd n.el, i - if i is n.text.length - range.setStart n.el, i - 1 - range.setEnd n.el, i - plus_width = true - else - range.setStart n.el, i - range.setEnd n.el, i + 1 - # chromium returns bogus results with getBoundingClientRect() when zero width and/or height - rect = range.getClientRects() - if rect.length > 0 - if plus_width - # chromium returns multiple rects for the space that is broken - # across lines by word-wrap (firefox doesn't) - rect = rect[rect.length - 1] - else - rect = rect[0] + range.setStart el, start + range.setEnd el, end + rects = range.getClientRects() + if rects.length > 0 + rect = rects[0] else - return x: 0, y: 0, w: 0, h: 0 # TODO return null, fix callers - doc = n.el.ownerDocument.documentElement - win = n.el.ownerDocument.defaultView + return null + doc = el.ownerDocument.documentElement + win = el.ownerDocument.defaultView y_fix = win.pageYOffset - doc.clientTop x_fix = win.pageXOffset - doc.clientLeft - ret = { + return { x: rect.left + x_fix y: rect.top + y_fix w: rect.width ? (rect.right - rect.left) h: rect.height ? (rect.top - rect.bottom) + rects: rects + bounding: range.getBoundingClientRect() } - if plus_width - ret.x += ret.w - debug_dot_at n.el.ownerDocument, ret.x, ret.y + +# figure out the x/y coordinates of where the cursor should be if it's at +# position ``i`` within text node ``n`` +# sometimes returns null (eg for whitespace that is not visible) +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 + ret = text_range_bounds n.el, i - 1, i + if ret? + ret.x += ret.w + else + ret = text_range_bounds n.el, i, i + 1 + if ret? + debug_dot_at n.el.ownerDocument, ret.x, ret.y return ret # encode text so it can be safely placed inside an html attribute @@ -221,10 +222,14 @@ traverse_tree = (tree, state, cb) -> find_next_cursor_position = (tree, n, i) -> if n? and n.type is TYPE_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" + return for next_i in [i+1 .. n.text.length] # inclusive is valid (after last char) next_xyh = cursor_to_xyh n, next_i - if next_xyh.x > orig_xyh.x or next_xyh.y > orig_xyh.y - return [n, next_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 @@ -239,10 +244,14 @@ find_next_cursor_position = (tree, n, i) -> find_prev_cursor_position = (tree, n, i) -> if n? and n.type is TYPE_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" + return for prev_i in [i-1 .. 0] prev_xyh = cursor_to_xyh n, prev_i - if prev_xyh.x < orig_xyh.x or prev_xyh.y < orig_xyh.y - return [n, prev_i] + if prev_xyh? + 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 @@ -275,8 +284,14 @@ find_loc_cursor_position = (tree, loc) -> return [c, 0] if c.text.length is 0 before_i = 0 before = cursor_to_xyh c, before_i + unless before? + console.log "error: failed to find cursor pixel location for start of", c + return after_i = c.text.length after = cursor_to_xyh c, after_i + unless after? + console.log "error: failed to find cursor pixel location for end of", c + return if loc.y < before.y + before.h and loc.x < before.x # console.log 'before first char on first line' continue @@ -292,6 +307,9 @@ find_loc_cursor_position = (tree, loc) -> while after_i - before_i > 1 cur_i = Math.round((before_i + after_i) / 2) cur = cursor_to_xyh c, cur_i + unless loc? + console.log "error: failed to find cursor pixel location for", c, cur_i + return if loc.y < cur.y or (loc.y <= cur.y + cur.h and loc.x < cur.x) after_i = cur_i after = cur @@ -305,6 +323,71 @@ find_loc_cursor_position = (tree, loc) -> return [c, after_i] return null +# browsers collapse these (html5 spec calls these "space characters") +is_space_code = (char_code) -> + switch char_code + when 9, 10, 12, 13, 32 + return true + return false +is_space = (chr) -> + return is_space_code chr.charCodeAt 0 + +# warning: contains browser-specific hackery +is_space_significant = (n, i) -> + range = document.createRange() + range.setStart n.el, i + range.setEnd n.el, i + 1 + rects = range.getClientRects() + bounding_rect = range.getBoundingClientRect() + if rects.length is 0 + return false + if rects.length > 1 + # chromium returns two rects in both these cases: + # 1. a space that is word-wrapped. one rect on each line. Note that + # chromium does _not_ do this for _all_ spaces that are word wrapped. + # 2. the last (insignificant) space in a sequence of collapsing spaces + # in this case the rects are identical. + if rects[1].top > rects[0].top + return true + width = rects[0].width ? (rects[0].right - rects[0].left) + if width > 0 + return true + # firefox reports the space that's word-wrapped as zero width + if n.text.length > i + 1 + range.setStart n.el, i + 1 + range.setEnd n.el, i + 2 + next_rects = range.getClientRects() + if next_rects.length > 0 + if next_rects[0].top > rects[0].top + # next character is lower on the screen, so this must be a word-wrap space + return true + else + # FIXME detect word-wrap in last character + # could be followed by an inline block with no starting space + # FIXME chromium gets here for a significant space at the begining of a + # text node that word-wraps + return false + +# pass a node (from parser library, ie it should have .el and .text) +remove_insignificant_whitespace = (n) -> + changed = false + if n.type is TYPE_TEXT + i = 0 + while i < n.text.length + if is_space_code n.text.charCodeAt i + if is_space_significant n, i + i += 1 + else + n.el.textContent = n.text = (n.text.substr 0, i) + (n.text.substr i + 1) + changed = true + else + i += 1 + if n.children.length > 0 + for c in n.children + if remove_insignificant_whitespace c + changed = true + return changed + class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @@ -434,6 +517,7 @@ class PeachHTML5Editor @cursor[0].text.substr(@cursor[1]) @cursor[0].el.nodeValue = @cursor[0].text @move_cursor [@cursor[0], @cursor[1] + 1] + @changed() return false if options.stylesheet # TODO test this istyle = @idoc.createElement 'style' @@ -453,13 +537,21 @@ class PeachHTML5Editor return load_html: (html) -> @tree = peach_parser.parse html, @parser_opts - #as_html = dom_to_html @tree - #@iframe.contentDocument.body.innerHTML = as_html @clear_dom() instantiate_tree @tree, @idoc.body + remove_insignificant_whitespace type: TYPE_TAG, children: @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 = => + @load_html @in_el.value move_cursor: (cursor) -> loc = cursor_to_xyh cursor[0], cursor[1] - return if loc is null + 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 if @cursor_visible diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html index df5f17a..59fbb83 100644 --- a/editor_tests_compiled.html +++ b/editor_tests_compiled.html @@ -2,20 +2,21 @@ - + html editor tester

Peach HTML5 Editor test page (compiled version)

This version of the editor test page requires that you've compiled all the source files. (Just run make).

-

In:

+

HTML view. Changes here propagate when you remove your cursor (press tab or click outside)