From: Jason Woofenden Date: Thu, 31 Mar 2016 15:22:37 +0000 (-0400) Subject: Merge remote-tracking branch 'tably/master' X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=commitdiff_plain;h=20457393c1e6ce689310e24693f7adbe28f6f1e1;hp=55ef2769feb77f0f4c45cc47d3af0e36be341cff Merge remote-tracking branch 'tably/master' --- diff --git a/editor.coffee b/editor.coffee index a9d0a3c..dd39c62 100644 --- a/editor.coffee +++ b/editor.coffee @@ -16,6 +16,7 @@ # SETTINGS overlay_padding = 10 +breathing_room = 30 # minimum pixels above/below cursor timeout = (ms, cb) -> return setTimeout cb, ms next_frame = (cb) -> @@ -37,6 +38,32 @@ this_url_sans_path = -> ret = ret.substr 0, clip + 1 return ret +# table too look up the properties of various values for css's white-space +ws_props = + normal: + space: false # spaces are not preserved/rendered + newline: false # newlines are not preserved/rendered + wrap: true # text is word-wrapped + to_preserve: 'pre-wrap' # to preservespaces, change white-space to this + nowrap: + space: false + newline: false + wrap: false + to_preserve: 'pre' + 'pre-line': + space: false + newline: true + wrap: true + to_preserve: 'pre-wrap' + pre: + space: true + newline: true + wrap: false + 'pre-wrap': + space: true + newline: true + wrap: true + # 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" @@ -51,7 +78,7 @@ debug_dot_at = (doc, x, y) -> # text nodes don't have getBoundingClientRect(), so use selection api to find # it. -get_el_bounds = (el) -> +get_el_bounds = window.bounds = (el) -> if el.getBoundingClientRect? rect = el.getBoundingClientRect() else @@ -95,7 +122,13 @@ text_range_bounds = (el, start, end) -> range.setEnd el, end rects = range.getClientRects() if rects.length > 0 - rect = rects[0] + if rects.length > 1 + if rects[1].width > rects[0].width + rect = rects[1] + else + rect = rects[0] + else + rect = rects[0] else return null doc = el.ownerDocument.documentElement @@ -111,22 +144,42 @@ text_range_bounds = (el, start, end) -> 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`` -# 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 - else if i is n.text.length - ret = text_range_bounds n.el, i - 1, i +class CursorPosition + constructor: (args) -> + @n = args.n ? null + @i = args.i ? null + if args.x? + @x = args.x + @y = args.y + @h = args.h + else + @set_xyh() + return + set_xyh: -> + range = document.createRange() + if @n.text.length is 0 + ret = text_range_bounds @n.el, 0, 0 + else 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? - 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 + @x = ret.x + @y = ret.y + @h = ret.h + else + @x = null + @y = null + @h = null + return ret + +new_cursor_position = (args) -> + ret = new CursorPosition args + if ret.x? + return ret + return null # encode text so it can be safely placed inside an html attribute enc_attr_regex = new RegExp '(&)|(")|(\u00A0)', 'g' @@ -183,99 +236,6 @@ domify = (doc, hash) -> el.setAttribute k, v return el -outer_css = (args) -> - w = args.w ? 300 - h = args.h ? 300 - inner_padding = args.inner_padding ? overlay_padding - frame_width = args.frame_width ? inner_padding - # TODO editor controls height... - occupy = (left, top = left, right = left, bottom = top) -> - w -= left + right - h -= top + bottom - return Math.max(left, top, right, bottom) - ret = '' - ret += 'body {' - ret += 'margin: 0;' - ret += 'padding: 0;' - ret += 'color: black;' - ret += 'background: white;' - ret += '}' - ret += '#wrap1 {' - ret += "border: #{occupy 1}px solid black;" - ret += "padding: #{occupy frame_width}px;" - ret += '}' - ret += '#wrap2 {' - ret += "border: #{occupy 1}px solid black;" - ret += "padding: #{occupy inner_padding}px;" - ret += "padding-right: #{inner_padding + occupy 0, 0, 15, 0}px;" # for scroll bar - ret += "width: #{w}px;" - ret += "height: #{h}px;" - ret += 'overflow-x: hidden;' - ret += 'overflow-y: scroll;' - ret += '}' - ret += '#wrap3 {' - ret += 'position: relative;' - ret += "width: #{w}px;" - ret += "min-height: #{h}px;" - ret += '}' - ret += 'iframe {' - ret += 'box-sizing: border-box;' - ret += 'margin: 0;' - ret += 'border: none;' - 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;' - ret += "left: -#{inner_padding}px;" - ret += "top: -#{inner_padding}px;" - ret += "right: -#{inner_padding}px;" - ret += "bottom: -#{inner_padding}px;" - ret += 'overflow: hidden;' - ret += '}' - ret += '.lightbox {' - ret += 'position: absolute;' - ret += 'background: rgba(100,100,100,0.2);' - ret += '}' - ret += '#cursor {' - ret += 'position: absolute;' - ret += 'width: 2px;' - 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 += '0%{background-position:0% 0%}' - ret += '100%{background-position:0% -100%}' - ret += '}' - 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 ignore_key_codes = @@ -351,112 +311,182 @@ traverse_tree = (tree, cb) -> return done if done return done -find_next_cursor_position = (tree, n, 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" - 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] +first_cursor_position = (tree) -> + found = null + traverse_tree tree, (node, state) -> + if node.type is 'text' + cursor = new_cursor_position n: node, i: 0 + if cursor? + found = cursor + return true + return false + return found # maybe null + +# this will fail when text has non-locatable cursor positions +find_next_cursor_position = (tree, cursor) -> + if cursor.n.type is 'text' and cursor.n.text.length > cursor.i + new_cursor = new_cursor_position n: cursor.n, i: cursor.i + 1 + if new_cursor? + return new_cursor 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 + new_cursor = new_cursor_position n: node, i: 0 + if new_cursor? + found = new_cursor return true - if node is n + if node is cursor.n state_before = false return false if found? - return [found, 0] + return found return null -find_prev_cursor_position = (tree, n, i) -> - 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" - 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_prev = n? +last_cursor_position = (tree) -> found = null traverse_tree tree, (node) -> if node.type is 'text' - if node is n - if found_prev? - found = found_prev - return true - found_prev = node + cursor = new_cursor_position n: node, i: node.text.length + if cursor? + found = cursor 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 + return found # maybe null -find_loc_cursor_position = (tree, loc) -> - for c in tree - 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 - continue if loc.y < bounds.y - continue if loc.y > bounds.y + bounds.h - if c.children.length - ret = find_loc_cursor_position c.children, loc +# this will fail when text has non-locatable cursor positions +find_prev_cursor_position = (tree, cursor) -> + if cursor.n.type is 'text' and cursor.i > 0 + new_cursor = new_cursor_position n: cursor.n, i: cursor.i - 1 + if new_cursor? + return new_cursor + found_prev = null + found = null + traverse_tree tree, (node) -> + if node is cursor.n + found = found_prev # maybe null + return true + if node.type is 'text' + new_cursor = new_cursor_position n: node, i: node.text.length + if new_cursor? + found_prev = new_cursor + return false + return found # maybe null + +find_up_cursor_position = (tree, cursor, ideal_x) -> + new_cursor = cursor + # go prev until we're higher on y axis + while new_cursor.y >= cursor.y + new_cursor = find_prev_cursor_position tree, new_cursor + return null unless new_cursor? + # done early if we're already left of old cursor position + if new_cursor.x <= ideal_x + return new_cursor + target_y = new_cursor.y + # search leftward, until we find the closest position + # new_cursor is the prev-most position we've checked + # prev_cursor is the older value, so it's not as prev as new_cursor + while new_cursor.x > ideal_x and new_cursor.y is target_y + prev_cursor = new_cursor + new_cursor = find_prev_cursor_position tree, new_cursor + break unless new_cursor? + # move cursor to prev_cursor or new_cursor + if new_cursor? + if new_cursor.y is target_y + # both valid, and on the same line, use closest + if (ideal_x - new_cursor.x) < (prev_cursor.x - ideal_x) + return new_cursor + else + return prev_cursor + else + # new_cursor on wrong line, use prev_cursor + return prev_cursor + else + # can't go any further prev, use prev_cursor + return prev_cursor + +find_down_cursor_position = (tree, cursor, ideal_x) -> + new_cursor = cursor + # go next until we move on the y axis + while new_cursor.y <= cursor.y + new_cursor = find_next_cursor_position tree, new_cursor + return null unless new_cursor? + # done early if we're already right of old cursor position + if new_cursor.x >= ideal_x + # this would be strange, but could happen due to runaround + return new_cursor + target_y = new_cursor.y + # search rightward, until we find the closest position + # new_cursor is the next-most position we've checked + # prev_cursor is the older value, so it's not as next as new_cursor + while new_cursor.x < ideal_x and new_cursor.y is target_y + prev_cursor = new_cursor + new_cursor = find_next_cursor_position tree, new_cursor + break unless new_cursor? + # move cursor to prev_cursor or new_cursor + if new_cursor? + if new_cursor.y is target_y + # both valid, and on the same line, use closest + if (new_cursor.x - ideal_x) < (ideal_x - prev_cursor.x) + return new_cursor + else + return prev_cursor + else + # new_cursor on wrong line, use prev_cursor + return prev_cursor + else + # can't go any further prev, use prev_cursor + return prev_cursor + +xy_to_cursor = (tree, xy) -> + for n in tree + if n.type is 'tag' or n.type is 'text' + bounds = get_el_bounds n.el + continue if xy.x < bounds.x + continue if xy.x > bounds.x + bounds.w + continue if xy.y < bounds.y + continue if xy.y > bounds.y + bounds.h + if n.children.length + ret = xy_to_cursor n.children, xy return ret if ret? - if c.type is 'text' + if n.type is '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 + if n.text.length is 0 + ret = new_cursor_position n: n, i: 0 + return ret if ret? + continue + before = new_cursor_position n: n, i: 0 + continue unless before? + after = new_cursor_position n: n, i: n.text.length + continue unless after? + if xy.y < before.y + before.h and xy.x < before.x # console.log 'before first char on first line' continue - if loc.y > after.y and loc.x > after.x + if xy.y > after.y and xy.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" + if xy.y < before.y + console.log "Warning: click in text 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 + if xy.y > after.y + after.h + console.log "Warning: click in text bounding box but below last line", xy.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 + while after.i - before.i > 1 + guess_i = Math.round((before.i + after.i) / 2) + cur = new_cursor_position n: n, i: guess_i + unless cur? + console.log "error: failed to find cursor pixel location for", n, guess_i + before = null + break + if xy.y < cur.y or (xy.y <= cur.y + cur.h and xy.x < cur.x) after = cur else - before_i = cur_i before = cur + continue unless before? # signals failure to find a cursor position # which one is closest? - if Math.abs(before.x - loc.x) < Math.abs(after.x - loc.x) - return [c, before_i] + if Math.abs(before.x - xy.x) < Math.abs(after.x - xy.x) + return before else - return [c, after_i] + return after return null # browsers collapse these (html5 spec calls these "space characters") @@ -515,25 +545,46 @@ tree_dedup_space = (tree) -> 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 + remove = (undo) -> + if undo + 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 -1 + else + 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 1 + replace_with_space = (undo) -> + if undo + cur.text = (cur.text.substr 0, cur_i) + removed_char + (cur.text.substr cur_i + 1) + cur.el.textContent = cur.text + else + removed_char = cur.text.charAt(cur_i) + if removed_char isnt ' ' + cur.text = (cur.text.substr 0, cur_i) + ' ' + (cur.text.substr cur_i + 1) + cur.el.textContent = cur.text + return 0 # 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 + fixers = [remove, replace_with_space] + # check for common case: single whitespace surrounded by non-whitespace chars + if prev? and next? + unless (is_space_code prev.text.charCodeAt prev_i) or (is_space_code next.text.charCodeAt next_i) + dbg = cur.text.charCodeAt cur_i + if cur.text.charAt(cur_i) is ' ' # perens required + # single space can't collapse, doesn't need fixin' + return false + else + # tab, newline, etc, can't collapse, but maybe should be replaced + fixers = [replace_with_space] bounds = text_range_bounds cur.el, cur_i, cur_i + 1 # consistent cases: # 1. zero rects returned by getClientRects() means collapsed space @@ -541,7 +592,8 @@ tree_dedup_space = (tree) -> return remove() # 2. width greater than zero means visible space if bounds.w > 0 - return false + # has bounds, don't try removing + fixers = [replace_with_space] # now the weird edge cases... # # firefox and chromium both report zero width for characters at the end @@ -550,28 +602,49 @@ tree_dedup_space = (tree) -> # collapsed spaces via the range/bounds api, so... # # remove it from the dom, and if prev or next moves, put it back. + # + # this block (try changing it, put it back if something moves) is also + # used on collapsable whitespace characters besides space. In this case + # the character is replaced with a normal space character instead of + # removed if prev? and not prev_px? - prev_px = cursor_to_xyh prev, prev_i + prev_px = new_cursor_position n: prev, i: prev_i if next? and not next_px? - next_px = cursor_to_xyh next, next_i + next_px = new_cursor_position n: next, i: 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" - return true + undo_arg = true # just for readabality + removed = 0 + for fixer in fixers + break if removed > 0 + removed += fixer() + need_undo = false + if prev? + if prev_px? + new_prev_px = new_cursor_position n: prev, i: prev_i + if new_prev_px? + if new_prev_px.x isnt prev_px.x or new_prev_px.y isnt prev_px.y + need_undo = true + else + need_undo = true + else + console.log "this shouldn't happen, we remove spaces that don't locate" + if next? and not need_undo + if next_px? + new_next_px = new_cursor_position n: next, i: next_i + if new_next_px? + if new_next_px.x isnt next_px.x or new_next_px.y isnt next_px.y + need_undo = true + else + need_undo = true + #else + # console.log "removing space becase space after it is collapsed" + if need_undo + removed += fixer undo_arg + if removed > 0 + return true + else + return false # pass null at start/end of display:block queue = (n, i) -> next = n @@ -609,20 +682,22 @@ class PeachHTML5Editor constructor: (in_el, options) -> @options = options ? {} @in_el = in_el - @tree = null + @tree = null # array of Nodes, all editable content + @tree_parent = null # @tree is this.children. .el might === @idoc.body @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 + @wrap2_offset = null + @wrap2_height = null # including padding @iframe = null # iframe to hold editable content @idoc = null # "document" object for @iframe @cursor = null @cursor_el = null @cursor_visible = false + @cursor_ideal_x = null @poll_for_blur_timeout = null - @iframe_offset = null - @iframe_height = null opt_fragment = @options.fragment ? true @parser_opts = {} if opt_fragment @@ -663,7 +738,7 @@ class PeachHTML5Editor outer_bounds.h = 300 outer_iframe_style += "width: #{outer_bounds.w}px; height: #{outer_bounds.h}px;" @outer_iframe.setAttribute 'style', outer_iframe_style - css = outer_css w: outer_bounds.w, h: outer_bounds.h + css = @generate_outer_css w: outer_bounds.w, h: outer_bounds.h outer_wrap.appendChild @outer_iframe init_1: -> # @iframe has loaded (but not it's css) @idoc = @iframe.contentDocument @@ -700,16 +775,108 @@ class PeachHTML5Editor @load_html @in_el.value if @options.on_init? @options.on_init() + generate_outer_css: (args) -> + w = args.w ? 300 + h = args.h ? 300 + inner_padding = args.inner_padding ? overlay_padding + frame_width = args.frame_width ? inner_padding + occupy = (left, top = left, right = left, bottom = top) -> + w -= left + right + h -= top + bottom + return Math.max(left, top, right, bottom) + ret = '' + ret += 'body {' + ret += 'margin: 0;' + ret += 'padding: 0;' + ret += 'color: black;' + ret += 'background: white;' + ret += '}' + ret += '#wrap1 {' + ret += "border: #{occupy 1}px solid black;" + ret += "padding: #{occupy frame_width}px;" + ret += '}' + ret += '#wrap2 {' + ret += "border: #{occupy 1}px solid black;" + @wrap2_height = h # including padding because padding scrolls + ret += "padding: #{occupy inner_padding}px;" + ret += "padding-right: #{inner_padding + occupy 0, 0, 15, 0}px;" # for scroll bar + ret += "width: #{w}px;" + ret += "height: #{h}px;" + ret += 'overflow-x: hidden;' + ret += 'overflow-y: scroll;' + ret += '}' + ret += '#wrap3 {' + ret += 'position: relative;' + ret += "width: #{w}px;" + ret += "min-height: #{h}px;" + ret += '}' + ret += 'iframe {' + ret += 'box-sizing: border-box;' + ret += 'margin: 0;' + ret += 'border: none;' + 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;' + ret += "left: -#{inner_padding}px;" + ret += "top: -#{inner_padding}px;" + ret += "right: -#{inner_padding}px;" + ret += "bottom: -#{inner_padding}px;" + ret += 'overflow: hidden;' + ret += '}' + ret += '.lightbox {' + ret += 'position: absolute;' + ret += 'background: rgba(100,100,100,0.2);' + ret += '}' + ret += '#cursor {' + ret += 'position: absolute;' + ret += 'width: 2px;' + 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 += '0%{background-position:0% 0%}' + ret += '100%{background-position:0% -100%}' + ret += '}' + 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 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 + unless @wrap2_offset? + @wrap2_offset = get_el_bounds @wrap2 + x = e.pageX - overlay_padding + y = e.pageY - overlay_padding + @wrap2.scrollTop + return x: x - @wrap2_offset.x, y: y - @wrap2_offset.y onclick: (e) -> xy = @overlay_event_to_inner_xy e - new_cursor = find_loc_cursor_position @tree, xy + new_cursor = xy_to_cursor @tree, xy if new_cursor? @move_cursor new_cursor else @@ -728,84 +895,287 @@ class PeachHTML5Editor switch e.keyCode when KEY_LEFT if @cursor? - new_cursor = find_prev_cursor_position @tree, @cursor... - if new_cursor? - @move_cursor new_cursor + new_cursor = find_prev_cursor_position @tree, @cursor else - for c in @tree - new_cursor = find_next_cursor_position @tree, c, -1 - if new_cursor? - @move_cursor new_cursor - break - return false - when KEY_UP + new_cursor = first_cursor_position @tree + if new_cursor? + @move_cursor new_cursor return false when KEY_RIGHT if @cursor? - new_cursor = find_next_cursor_position @tree, @cursor... + new_cursor = find_next_cursor_position @tree, @cursor + else + new_cursor = last_cursor_position @tree + if new_cursor? + @move_cursor new_cursor + return false + when KEY_UP + if @cursor? + new_cursor = find_up_cursor_position @tree, @cursor, @cursor_ideal_x if new_cursor? + saved_ideal_x = @cursor_ideal_x @move_cursor new_cursor + @cursor_ideal_x = saved_ideal_x 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 = first_cursor_position @tree + if new_cursor? + @move_cursor new_cursor return false when KEY_DOWN + if @cursor? + new_cursor = find_down_cursor_position @tree, @cursor, @cursor_ideal_x + if new_cursor? + saved_ideal_x = @cursor_ideal_x + @move_cursor new_cursor + @cursor_ideal_x = saved_ideal_x + else + # move cursor to first position in document + new_cursor = last_cursor_position @tree + if new_cursor? + @move_cursor new_cursor return false when KEY_END + new_cursor = last_cursor_position @tree + if new_cursor? + @move_cursor new_cursor 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] - @changed() + @on_key_backspace e 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 unless @cursor.i < @cursor.n.text.length + @remove_character @cursor.n, @cursor.i + @adjust_whitespace_style @cursor.n @changed() + new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor() return false when KEY_ENTER + @on_key_enter e return false when KEY_ESCAPE + @kill_cursor() return false when KEY_HOME + new_cursor = first_cursor_position @tree + if new_cursor? + @move_cursor new_cursor return false when KEY_INSERT return false when KEY_PAGE_UP + @on_page_up_key e return false when KEY_PAGE_DOWN + @on_page_down_key e return false when KEY_TAB return false 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 char = e.charCode ? e.keyCode if char and @cursor? char = String.fromCharCode char - if @cursor[1] is 0 - @cursor[0].text = char + @cursor[0].text - else if @cursor[1] is @cursor[0].text.length - 1 - @cursor[0].text += char - else - @cursor[0].text = - @cursor[0].text.substr(0, @cursor[1]) + - char + - @cursor[0].text.substr(@cursor[1]) - @cursor[0].el.nodeValue = @cursor[0].text - @move_cursor [@cursor[0], @cursor[1] + 1] + @insert_character @cursor.n, @cursor.i, char + @adjust_whitespace_style @cursor.n @changed() + new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i + 1 + if new_cursor + @move_cursor new_cursor + else + console.log "ERROR: couldn't find cursor position after insert" + @kill_cursor() return false + on_key_enter: (e) -> # enter key pressed + return unless @cursor_visible + cur_block = @cursor.n + loop + if cur_block.type is 'tag' + if is_display_block cur_block.el + break + return unless cur_block.parent? + cur_block = cur_block.parent + # find array to insert new element into + if cur_block.parent is @tree_parent # top-level + parent_el = @idoc.body + pc = @tree + else + parent_el = cur_block.parent.el + pc = cur_block.parent.children + # find index of current block in its parent + for n, i in pc + break if n is cur_block + i += 1 # we want to be after it + if i < pc.length + before = pc[i].el + else + before = null + # TODO if content after cursor + # TODO new block is empty + new_text = new peach_parser.Node 'text', text: ' ' + new_node = new peach_parser.Node 'tag', name: 'p', parent: cur_block.parent, attrs: {style: 'white-space: pre-wrap'}, children: [new_text] + new_text.parent = new_node + new_text.el = domify @idoc, text: ' ' + new_node.el = domify @idoc, p: style: 'white-space: pre-wrap', children: [new_text.el] + pc.splice i, 0, new_node + parent_el.insertBefore new_node.el, before + @changed() + new_cursor = new_cursor_position n: new_text, i: 0 + throw 'bork bork' unless new_cursor? + @move_cursor new_cursor + # TODO move content past cursor into this new block + on_key_backspace: (e) -> + return false unless @cursor? + if @is_lone_space @cursor.n # false if it's not in a tag + if @cursor.i is 1 + # don't delete the space, because then it would collapse + # instead leave a space after the cursor + new_cursor = new_cursor_position n: @cursor.n, i: 0 + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor() + else + parent = @cursor.n.parent + new_cursor = find_prev_cursor_position @tree, @cursor + if new_cursor? + if new_cursor.n is @cursor.n or new_cursor.n is parent + new_cursor = null + tag = @cursor.n.parent + if tag is @tree_parent + console.log "top-level text not supported" # FIXME + return false + for n, i in tag.parent.children + if n is tag + tag.parent.el.removeChild tag.el + tag.parent.children.splice i, 1 + break + @changed() + if new_cursor? + # re-check, in case it moved or is invalid now + new_cursor = new_cursor_position n: new_cursor.n, i: new_cursor.i + if new_cursor? + @move_cursor new_cursor + return + new_cursor = first_cursor_position @tree + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor + return + else if @cursor.i is 0 + console.log 'unimplemented: backspace at start of non-empty tag' + # TODO if block, merge parent into prev + # TODO if inline, delete char from prev text node + return false + else + # TODO handle case of removing last char + # CONTINUE + if @is_only_char_in_tag @cursor.n + if is_display_block @cursor.n.parent.el + @cursor.n.el.textContent = @cursor.n.text = ' ' + else + console.log "unimplemented: delete last char in inline" # FIXME + return + else + @remove_character @cursor.n, @cursor.i - 1 + @adjust_whitespace_style @cursor.n + @changed() + new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i - 1 + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor() + return + on_page_up_key: (e) -> + if @wrap2.scrollTop is 0 + return unless @cursor? + new_cursor = first_cursor_position @tree + if new_cursor? + if new_cursor.n isnt @cursor.n or new_cursor.i isnt @cursor.i + @move_cursor new_cursor + return + if @cursor? + screen_y = @cursor.y - @wrap2.scrollTop + scroll_amount = @wrap2_height - breathing_room + @wrap2.scrollTop = Math.max 0, @wrap2.scrollTop - scroll_amount + if @cursor? + @move_cursor_into_view screen_y + @wrap2.scrollTop + on_page_down_key: (e) -> + lowest_scrollpos = @wrap2.scrollHeight - @wrap2_height + if @wrap2.scrollTop is lowest_scrollpos + return unless @cursor? + new_cursor = last_cursor_position @tree + if new_cursor? + if new_cursor.n isnt @cursor.n or new_cursor.i isnt @cursor.i + @move_cursor new_cursor + return + if @cursor? + screen_y = @cursor.y - @wrap2.scrollTop + scroll_amount = @wrap2_height - breathing_room + @wrap2.scrollTop = Math.min lowest_scrollpos, @wrap2.scrollTop + scroll_amount + if @cursor? + @move_cursor_into_view screen_y + @wrap2.scrollTop + return + move_cursor_into_view: (y_target) -> + return if y_target is @cursor.y + was = @cursor + y_min = @wrap2.scrollTop + unless @wrap2.scrollTop is 0 + y_min += breathing_room + y_max = @wrap2.scrollTop + @wrap2_height + unless @wrap2.scrollTop is @wrap2.scrollHeight - @wrap2_height # downmost + y_max -= breathing_room + y_target = Math.min y_target, y_max + y_target = Math.max y_target, y_min + if y_target < @cursor.y + finder = find_up_cursor_position + far_enough = (cur, target_y) -> + return cur.y + cur.h <= target_y + else + finder = find_down_cursor_position + far_enough = (cur, y_target) -> + return cur.y >= y_target + loop + cur = finder @tree, was, @cursor_ideal_x + break unless cur? + break if far_enough cur, y_target + was = cur + if was is @cursor + was = null + if was? + if was.y + was.h > y_max + was = null + else if was.y < y_min + was = null + if cur? + if cur.y + cur.h > y_max + cur = null + else if cur.y < y_min + cur = null + if cur? and was? + # both valid, pick best + if cur.y < y_min + new_cursor = was + else if was.y + was.h > y_max + new_cursor = cur + else if cur.y - y_target < y_target - was.y + new_cursor = cur + else + new_cursor = was + else + new_cursor = was ? cur + if new_cursor? + saved_ideal_x = @cursor_ideal_x + @move_cursor new_cursor + @cursor_ideal_x = saved_ideal_x + return clear_dom: -> # remove all the editable content (and cursor, overlays, etc) while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] @@ -813,8 +1183,12 @@ class PeachHTML5Editor return load_html: (html) -> @tree = peach_parser.parse html, @parser_opts + if !@tree[0]?.parent + @tree = peach_parser.parse '

', @parser_opts + @tree_parent = @tree[0]?.parent + @tree_parent.el = @idoc.body @clear_dom() - instantiate_tree @tree, @idoc.body + instantiate_tree @tree, @tree_parent.el tree_dedup_space @tree @changed() changed: -> @@ -824,47 +1198,179 @@ class PeachHTML5Editor @load_html @in_el.value @adjust_iframe_height() adjust_iframe_height: -> + s = @wrap2.scrollTop + # when the content gets shorter, the idoc's body tag will continue to + # report the old (too big) height in Chrome. The workaround is to + # shrink the iframe before the content height: + @iframe.style.height = "10px" 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 + @iframe.style.height = "#{h}px" + @wrap2.scrollTop = s + # does this node have whitespace that would be collapsed by white-space: normal? + # note: this checks direct text children, and does _not_ recurse into child tags + # tag is a node with type:"tag" + has_collapsable_space: (tag) -> + for n in tag.children + if n.type is 'text' + for i in [0...n.text.length] + code = n.text.charCodeAt i + if code isnt 32 and is_space_code code + # tab, return + return true + # check for double spaces that don't surround insert location + continue if i is 0 + if n.text.substr(i - 1, 2) is ' ' + return true + if n.text.length > 0 + if is_space_code n.text.charCodeAt 0 + return true + if is_space_code n.text.charCodeAt n.text.length - 1 + return true + # add/remove "white-space: pre[-wrap]" to/from style="" on tags with direct + # child text nodes with multiple spaces in a row, or spaces at the + # start/end. + # + # text inside child tags are not consulted. Child tags are expected to have + # this function applied to them when their content changes. + adjust_whitespace_style: (n) -> + if n.type is 'text' + n = n.parent + return unless n?.el? + # which css rule should be used to preserve spaces (should we need to) + style = @iframe.contentWindow.getComputedStyle n.el, null + ws = style.getPropertyValue 'white-space' + if ws_props[ws].space + preserve_rule = ws + else + preserve_rule = ws_props[ws].to_preserve + preserve_rule = "white-space: #{preserve_rule}" + if @has_collapsable_space n + # make sure preserve_rule exists + if n.el.style['white-space'] + # FIXME check that it matches + return + if n.attrs[style]? + n.attrs.style += "; #{preserve_rule}" + else + n.attrs.style = preserve_rule + n.el.setAttribute 'style', n.attrs.style + else + # remove preserve_rule if it exists + return unless n.attrs.style? + # FIXME don't assume whitespace is just so + if n.attrs.style is "white-space: #{ws}" + delete n.attrs.style + n.el.removeAttribute 'style' + else + # FIXME find it in the middle and at the start + needle = "; white-space: #{ws}" + if needle is n.attrs.style.substr n.attrs.style.length - needle + n.attrs.style = n.attrs.style.substr 0, n.attrs.style.length - needle + n.el.setAttribute n.attrs.style + # true if n is text node with only one caracter, and the only child of a tag + is_only_char_in_tag: (n, i) -> + return false unless n.type is 'text' + return false unless n.text.length is 1 + return false if n.parent is @tree_parent + return false unless n.parent.children.length is 1 + return true + # true if n is text node with just a space in it, and the only child of a tag + is_lone_space: (n, i) -> + return false unless n.type is 'text' + return false unless n.text is ' ' + return false if n.parent is @tree_parent + return false unless n.parent.children.length is 1 + return true + # detect special case: typing before a space that's the only thing in a block/doc + # reason: enter key creates blocks with just a space in them + insert_should_replace: (n, i) -> + return false unless i is 0 + return false unless n.text is ' ' + return true if n.parent is @tree_parent + if n.parent.children.length is 1 + if n.parent.children[0] is n + # n is only child + return true + return false + # after calling this, you MUST call changed() and adjust_whitespace_style() + insert_character: (n, i, char) -> + return if @cursor.n.parent is @tree_parent # FIXME implement text nodes at top level + parent = @cursor.n.parent + # insert the character + if @insert_should_replace n, i + n.text = char + else if i is 0 + n.text = char + n.text + else if i is n.text.length + # replace the space + n.text += char + else + n.text = + n.text.substr(0, i) + + char + + n.text.substr(i) + n.el.nodeValue = n.text + # after calling this, you MUST call changed() and adjust_whitespace_style() + remove_character: (n, i) -> + n.text = n.text.substr(0, i) + n.text.substr(i + 1) + n.el.nodeValue = n.text kill_cursor: -> # remove it, forget where it was if @cursor_visible @cursor_el.parentNode.removeChild @cursor_el @cursor_visible = false @cursor = null - @matt null + @annotate 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_ideal_x = cursor.x @cursor = cursor - # 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 - @cursor_el.style.left = "#{loc.x + overlay_padding - 1}px" - if loc.h < 5 + unless @cursor_visible + @cursor_el = domify @outer_idoc, div: id: 'cursor' + @overlay.appendChild @cursor_el + @cursor_visible = true + @cursor_el.style.left = "#{cursor.x + overlay_padding - 1}px" + if cursor.h < 5 height = 12 else - height = loc.h - @cursor_el.style.top = "#{loc.y + overlay_padding + Math.round(height * .07)}px" + height = cursor.h + @cursor_el.style.top = "#{cursor.y + overlay_padding + Math.round(height * .07)}px" @cursor_el.style.height = "#{Math.round height * 0.82}px" - @matt cursor[0] - matt: (n) -> + @annotate cursor.n + @scroll_into_view cursor.y, height + scroll_into_view: (y, h = 0) -> + y += overlay_padding # convert units from @idoc to @wrap2 + # very top of document + if y <= breathing_room + @wrap2.scrollTop = 0 + return + # very bottom of document + if y + h >= @wrap2.scrollHeight - breathing_room + @wrap2.scrollTop = @wrap2.scrollHeight - @wrap2_height + return + # The most scrolled up (lowest value for scrollTop) that would be OK + upmost = y + h + breathing_room - @wrap2_height + upmost = Math.max(upmost, 0) + # the most scrolled down (highest value for scrollTop) that would be OK + downmost = y - breathing_room + downmost = Math.min(downmost, @wrap2.scrollHeight - @wrap2_height) + if upmost > downmost # means h is too big to fit + # scroll so top is visible + @wrap2.scrollTop = downmost + return + if @wrap2.scrollTop < upmost + @wrap2.scrollTop = upmost + return + if @wrap2.scrollTop > downmost + @wrap2.scrollTop = downmost + return + return + annotate: (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? + while n?.el? and n isnt @tree_parent if n.type is 'text' n = n.parent continue @@ -873,12 +1379,12 @@ class PeachHTML5Editor 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 + ann_box = 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 ann_box + @matting.push ann_box + ann_tag = 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_tag + @matting.push ann_tag n = n.parent alpha *= 1.5 pretty_html: (tree, indent = '', parent_flags = pre_ish: false, block: true, want_nl: false) -> diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html index 5a07fe9..f4d85b4 100644 --- a/editor_tests_compiled.html +++ b/editor_tests_compiled.html @@ -21,10 +21,16 @@

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).

+

This color scheme is just temporary, for testing the cursor and annotations on a variaty of background colors

-

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

-

Source - AGPLv3+

+

Source - AGPLv3+

diff --git a/page_dark.styl b/page_dark.styl index 21ac9db..36ca1c5 100644 --- a/page_dark.styl +++ b/page_dark.styl @@ -1,6 +1,8 @@ body color: white background: black + color: #000 + background: linear-gradient(0deg, #000, #fff) a, a:link, a:hover, a:visited color: #88f diff --git a/parser.coffee b/parser.coffee index cdc3d1f..a1d41cd 100644 --- a/parser.coffee +++ b/parser.coffee @@ -4733,6 +4733,7 @@ parse_html = (args_html, args = {}) -> return doc.children exports.parse = parse_html +exports.Node = Node exports.debug_log_reset = debug_log_reset exports.debug_log_each = debug_log_each exports.TYPE_TAG = TYPE_TAG