X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=da7b3935fe350340dbf42ea522b1ed70b50687c4;hb=2cd394146a6b75a69a00fdf91530fa2fe6e3a3c3;hp=34a8b396f7de2c8f47d64cb2bb689c9c76d96cb6;hpb=d259ff6d41dfc07b53dd22e657de359476b70e5a;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index 34a8b39..da7b393 100644 --- a/editor.coffee +++ b/editor.coffee @@ -19,20 +19,52 @@ TYPE_TEXT = peach_parser.TYPE_TEXT TYPE_COMMENT = peach_parser.TYPE_COMMENT TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE -# text nodes don't have getBoundingClientRect(), so wrap it in a span, measure -# and then put it back -get_text_bounding_rect = (el) -> - span = el.ownerDocument.createElement 'span' - el.parentNode.replaceChild span, el - span.appendChild el - ret = span.getBoundingClientRect() - span.parentNode.replaceChild el, span - return ret +debug_dot_at = (doc, x, y) -> + el = doc.createElement 'div' + el.setAttribute 'style', "position: absolute; left: #{x}px; top: #{y}px; width: 1px; height: 3px; background-color: red" + doc.body.appendChild el + #console.log(new Error().stack) + +# text nodes don't have getBoundingClientRect(), so use selection api to find +# it. get_el_bounds = (el) -> - if el.getBoundingClientRect + if el.getBoundingClientRect? rect = el.getBoundingClientRect() else - rect = get_text_bounding_rect el + # text nodes don't have getBoundingClientRect(), so use range api + range = el.ownerDocument.createRange() + range.selectNodeContents el + rect = range.getBoundingClientRect() + doc = el.ownerDocument.documentElement + win = el.ownerDocument.defaultView + y_fix = win.pageYOffset - doc.clientTop + x_fix = win.pageXOffset - doc.clientLeft + 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) + } + +is_display_block = (el) -> + if el.currentStyle? + return el.currentStyle.display is 'block' + else + return window.getComputedStyle(el, null).getPropertyValue('display') is 'block' + +# 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() + range.setStart el, start + range.setEnd el, end + rects = range.getClientRects() + if rects.length > 0 + rect = rects[0] + else + return null doc = el.ownerDocument.documentElement win = el.ownerDocument.defaultView y_fix = win.pageYOffset - doc.clientTop @@ -42,60 +74,25 @@ get_el_bounds = (el) -> y: rect.top + y_fix w: rect.width ? (rect.right - rect.left) h: rect.height ? (rect.top - rect.bottom) + rects: rects + bounding: range.getBoundingClientRect() } # figure out the x/y coordinates of where the cursor should be if it's at # position ``i`` within text node ``n`` -# -# implementation: insert a span tag where we want the cursor, and ask the -# browser where it put that span -cursor_to_loc = (n, i) -> - span = domify span: style: "height: 1em; border-left: 1px solid black; margin-left: -1px" - parent = n.el.parentNode - els = [] - txts = [] - plus_width = false - if n.text.length < 2 - bounds = get_el_offset n.el - if i is 1 - plus_width = true +# 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 - if i is 0 # cursor at start of text - check_i = 0 - txts.push n.text.substr 0, 1 - txts.push n.text.substr 1 - else if i is n.text.length # cursor at end of text - check_i = 1 - plus_width = true - txts.push n.text.substr 0, n.text.length - 1 - txts.push n.text.substr n.text.length - 1 - else - check_i = 1 - txts.push n.text.substr 0, i - txts.push n.text.substr i, 1 - txts.push n.text.substr i + 1 - for txt, txt_i in txts - el = n.el.ownerDocument.createTextNode txt - if txt_i is check_i - span = n.el.ownerDocument.createElement 'span' - span.appendChild el - el = span - els.push el - parent.insertBefore el, n.el - parent.removeChild n.el - bounds = get_el_bounds els[check_i] - parent.insertBefore n.el, els[0] - for el in els - parent.removeChild el - ret = x: bounds.x, y: bounds.y - if plus_width - ret.x += bounds.w - # fudge case where bounds are BS because we're on non-significant whitespace - if i > 0 - first = cursor_to_loc n, 0 - if ret.x <= first.x - # no need for a loop here, because recursion - ret = cursor_to_loc n, i - 1 + 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 @@ -175,17 +172,15 @@ css += 'height: 1em;' css += 'width: 2px;' css += 'margin-left: -1px;' css += 'margin-right: -1px;' -css += 'background: #000;' -css += '-webkit-animation: 1s blink step-end infinite;' -css += 'animation: 1s blink step-end infinite;' +css += 'background: #444;' +css += '-webkit-animation: blink 1s steps(2, start) infinite;' +css += 'animation: blink 1s steps(2, start) infinite;' css += '}' -css += '@-webkit-keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' +css += '@-webkit-keyframes blink {' +css += 'to { visibility: hidden; }' css += '}' -css += '@keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' +css += '@keyframes blink {' +css += 'to { visibility: hidden; }' css += '}' # key codes: @@ -232,7 +227,15 @@ traverse_tree = (tree, state, cb) -> # TODO make it so cursor can go places that don't have text but could find_next_cursor_position = (tree, n, i) -> if n? and n.type is TYPE_TEXT and n.text.length > i - return [n, i + 1] + 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? + 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 @@ -246,6 +249,15 @@ find_next_cursor_position = (tree, n, i) -> # 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 + 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? + 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 @@ -263,38 +275,181 @@ find_prev_cursor_position = (tree, n, i) -> return null find_loc_cursor_position = (tree, loc) -> - console.log tree, loc for c in tree if c.type is TYPE_TAG or c.type is TYPE_TEXT bounds = get_el_bounds c.el - console.log bounds continue if loc.x < bounds.x continue if loc.x > bounds.x + bounds.w continue if loc.y < bounds.y continue if loc.y > bounds.y + bounds.h - if c.type is TYPE_TEXT - # click is within bounding box that contains all text. - return [c, 0] if c.text.length is 0 - #if c.text.length is 1 - # definitely no linebreak in it - #if loc - # - # for inline elements, this can include text in other tags on - # the first or last lines. - # - # they clicked on text. now determine where in the text - tries = {} - cur = Math.floor(c.text.length / 2) - #loop - # xy = tries[cur] = cursor_to_loc c, cur - return [c, cur] if c.children.length - console.log "in" ret = find_loc_cursor_position c.children, loc - console.log 'found', ret if ret? return ret if ret? + if c.type is TYPE_TEXT + # click is within bounding box that contains all text. + 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 + if loc.y > after.y and loc.x > after.x + # console.log 'after last char on last line' + continue + if loc.y < before.y + console.log "Warning: click in bounding box but above first line" + continue # above first line (runaround?) + if loc.y > after.y + after.h + console.log "Warning: click in bounding box but below last line", loc.y, after.y, after.h + continue # below last line (shouldn't happen?) + 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 + else + before_i = cur_i + before = cur + # which one is closest? + if Math.abs(before.x - loc.x) < Math.abs(after.x - loc.x) + return [c, before_i] + else + 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 + +# pass a array of nodes (from parser library, ie it should have .el and .text) +tree_dedup_space = (tree) -> + prev = cur = next = null + prev_i = cur_i = next_i = 0 + prev_pos = pos = next_pos = null + prev_px = cur_px = next_px = null + first = true + removed_char = null + + iterate = (tree, cb) -> + for n in tree + if n.type is TYPE_TEXT + i = 0 + while i < n.text.length # don't foreach, cb might remove chars + removed = cb n, i + unless removed + i += 1 + if n.type is TYPE_TAG + block = is_display_block n.el + if block + cb null + if n.children.length > 0 + iterate n.children, cb + if block + cb null + # remove cur char + remove = -> + removed_char = cur.text.charAt(cur_i) + cur.el.textContent = cur.text = (cur.text.substr 0, cur_i) + (cur.text.substr cur_i + 1) + if next is cur # in same text node + if next_i is 0 + throw "how is this possible?" + next_i -= 1 + return true + # undo remove() + put_it_back = -> + cur.el.textContent = cur.text = (cur.text.substr 0, cur_i) + removed_char + (cur.text.substr cur_i) + if next is cur # in same text node + next_i += 1 + return false + # return true if cur was removed from the dom (ie re-use same prev) + operate = -> + # cur definitately set + # prev and/or next might be null, indicating the start/end of a display:block + return false unless is_space_code cur.text.charCodeAt cur_i + bounds = text_range_bounds cur.el, cur_i, cur_i + 1 + # consistent cases: + # 1. zero rects returned by getClientRects() means collapsed space + if bounds is null + return remove() + # 2. width greater than zero means visible space + if bounds.w > 0 + return false + # now the weird edge cases... + # + # firefox and chromium both report zero width for characters at the end + # of a line where the text wraps (automatically, due to word-wrap) to + # the next line. These do not appear to be distinguishable from + # collapsed spaces via the range/bounds api, so... + # + # remove it from the dom, and if prev or next moves, put it back. + if prev? and not prev_px? + prev_px = cursor_to_xyh prev, prev_i + if next? and not next_px? + next_px = cursor_to_xyh next, next_i + #if prev is null and next is null + # parent_px = cur.parent.el.getBoundingClientRect() + remove() + if prev? + if prev_px? + new_prev_px = cursor_to_xyh prev, prev_i + if new_prev_px.x isnt prev_px.x or new_prev_px.y isnt prev_px.y + return put_it_back() + else + console.log "this shouldn't happen, we remove spaces that don't locate" + if next? + if next_px? + new_next_px = cursor_to_xyh next, next_i + if new_next_px.x isnt next_px.x or new_next_px.y isnt next_px.y + 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) -> + next = n + next_i = i + next_px = null + if cur? + removed = operate() + else + removed = false + unless removed + prev = cur + prev_i = cur_i + prev_px = cur_px + cur = next + cur_i = next_i + cur_px = next_px + return removed + queue null + iterate tree, queue + queue null + class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @@ -379,8 +534,18 @@ class PeachHTML5Editor when KEY_END return false when KEY_BACKSPACE + return false unless @cursor? + return false unless @cursor[1] > 0 + @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] return false when KEY_DELETE + return false unless @cursor? + return false unless @cursor[1] < @cursor[0].text.length + @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]] return false when KEY_ENTER return false @@ -414,6 +579,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' @@ -433,12 +599,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 + 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 = => + @load_html @in_el.value move_cursor: (cursor) -> - return if @cursor? and cursor? and @cursor[0] is cursor[0] and @cursor[1] is cursor[1] + 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 if @cursor_visible @@ -447,7 +622,6 @@ class PeachHTML5Editor @idoc.body.appendChild @cursor_el @cursor_visible = true # TODO figure out x,y coords for cursor - loc = cursor_to_loc cursor[0], cursor[1] @cursor_el.style.left = "#{loc.x}px" @cursor_el.style.top = "#{loc.y}px"