X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=ceffb9a3b88b804c79e87aab0bcb58983edf8bd7;hb=aa6e7840ed72af2ded70181409c8fdd0e5b75e48;hp=faa2e3f25462bb44211107f980e8a9b88de31dd9;hpb=0f0011fe19f527abc6d67c7245720d5d451085f5;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index faa2e3f..ceffb9a 100644 --- a/editor.coffee +++ b/editor.coffee @@ -14,6 +14,100 @@ # You should have received a copy of the GNU Affero General Public License # along with this program. If not, see . +# 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 + +debug_dot_at = (doc, x, y) -> + return # disabled + 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? + rect = el.getBoundingClientRect() + else + # 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' + +# 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) +# 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 + 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) + 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`` +# 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 enc_attr_regex = new RegExp '(&)|(")|(\u00A0)', 'g' enc_attr = (txt) -> @@ -21,6 +115,12 @@ enc_attr = (txt) -> return '&' if (amp) return '"' if (quote) return ' ' +enc_text_regex = new RegExp '(&)|(<)|(\u00A0)', 'g' +enc_text = (txt) -> + return txt.replace enc_text_regex, (match, amp, lt) -> + return '&' if (amp) + return '<' if (lt) + return ' ' void_elements = { area: true @@ -43,7 +143,7 @@ dom_to_html = (dom) -> ret = '' for el in dom switch el.type - when peach_parser.TYPE_TAG + when TYPE_TAG ret += '<' + el.name attr_keys = [] for k of el.attrs @@ -58,11 +158,11 @@ dom_to_html = (dom) -> if el.children.length ret += dom_to_html el.children ret += "" - when peach_parser.TYPE_TEXT - ret += el.text - when peach_parser.TYPE_COMMENT + when TYPE_TEXT + ret += enc_text el.text + when TYPE_COMMENT ret += "" - when peach_parser.TYPE_DOCTYPE + when TYPE_DOCTYPE ret += " 0 ret += " \"#{el.public_identifier}\"" @@ -71,8 +171,8 @@ dom_to_html = (dom) -> ret += ">\n" return ret -domify = (h) -> - for tag, attrs of h +domify = (doc, hash) -> + for tag, attrs of hash if tag is 'text' return document.createTextNode attrs el = document.createElement tag @@ -84,25 +184,78 @@ domify = (h) -> el.setAttribute k, v return el -css = '' -css += 'div#peach_editor_cursor {' -css += 'display: inline-block;' -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 += '}' -css += '@-webkit-keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' -css += '}' -css += '@keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' -css += '}' +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 += '}' + 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 += '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 += '}' + ret += '@-webkit-keyframes blink {' + ret += 'to { visibility: hidden; }' + ret += '}' + ret += '@keyframes blink {' + ret += 'to { visibility: hidden; }' + ret += '}' + return ret # key codes: KEY_LEFT = 37 @@ -120,74 +273,504 @@ KEY_PAGE_UP = 33 KEY_PAGE_DOWN = 34 KEY_TAB = 9 -wysiwyg = (el, options = {}) -> - opt_fragment = options.fragment ? true - parser_opts = {} - if opt_fragment - parser_opts.fragment = 'body' - editor_instance = { - dom: [] - iframe: document.createElement('iframe') - load_html: (html) -> - @dom = peach_parser.parse html, parser_opts - as_html = peach.dom_to_html @dom - as_html = as_html.substr(0, 5) + '' + as_html.substr(5) - @iframe.contentDocument.body.innerHTML = as_html - } - el.parentNode.appendChild editor_instance.iframe - idoc = editor_instance.iframe.contentDocument - 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 - '39': KEY_RIGHT - '40': KEY_DOWN - '35': KEY_END - '8': KEY_BACKSPACE - '46': KEY_DELETE - '13': KEY_ENTER - '27': KEY_ESCAPE - '36': KEY_HOME - '45': KEY_INSERT - '33': KEY_PAGE_UP - '34': KEY_PAGE_DOWN - '9': KEY_TAB - - idoc.body.onkeyup = (e) -> +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 + '39': KEY_RIGHT + '40': KEY_DOWN + '35': KEY_END + '8': KEY_BACKSPACE + '46': KEY_DELETE + '13': KEY_ENTER + '27': KEY_ESCAPE + '36': KEY_HOME + '45': KEY_INSERT + '33': KEY_PAGE_UP + '34': KEY_PAGE_DOWN + '9': KEY_TAB + +instantiate_tree = (tree, parent) -> + remove = [] + for c, i in tree + switch c.type + when TYPE_TEXT + c.el = parent.ownerDocument.createTextNode c.text + parent.appendChild c.el + when TYPE_TAG + if c.name in ['script', 'object', 'iframe', 'link'] + # TODO put placeholders instead + remove.unshift i + # 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 + 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) -> + for c in tree + cb c, state + break if state.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 +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? + 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 + if node is n + state.before = false + if found.node? + return [found.node, 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 + 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 + unless n? + state.node = node + state.done = 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] + return null + +find_loc_cursor_position = (tree, loc) -> + for c in tree + if c.type is TYPE_TAG or c.type is TYPE_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 + 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 + advance = cb n, i + if advance + 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 + advance = true + if cur? + removed = operate() + # don't advance (to the next character next time) if we removed a + # character from the same text node as ``next``, because doing so + # renumbers the indexes in that string + if removed and cur is next + advance = false + 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 advance + queue null + iterate tree, queue + queue null + +class PeachHTML5Editor + # Options: (all optional) + # editor_id: "id" attribute for outer-most element created by/for editor + # on_init: callback for when the editable content is in place + constructor: (in_el, options) -> + @options = options ? {} + @in_el = in_el + @tree = [] + @inited = false # when iframes have loaded + @outer_iframe # iframe to hold editor + @outer_idoc # "document" object for @outer_iframe + @iframe = null # iframe to hold editable content + @idoc = null # "document" object for @iframe + @cursor = null + @cursor_el = null + @cursor_visible = false + opt_fragment = @options.fragment ? true + @parser_opts = {} + if opt_fragment + @parser_opts.fragment = 'body' + + @outer_iframe = domify document, iframe: {} + outer_iframe_style = 'border: none !important; margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important;' + if @options.editor_id? + @outer_iframe.setAttribute 'id', @options.editor_id + @outer_iframe.onload = => + @outer_idoc = @outer_iframe.contentDocument + icss = domify @outer_idoc, style: children: [ + domify @outer_idoc, text: css + ] + @outer_idoc.head.appendChild icss + @iframe = domify @outer_idoc, iframe: {} + @iframe.onload = => + @init() + setTimeout (=> @init() unless @inited), 200 # firefox never fires this onload + @outer_idoc.body.appendChild( + domify @outer_idoc, div: id: 'wrap1', children: [ + domify @outer_idoc, div: id: 'wrap2', children: [ + domify @outer_idoc, div: id: 'wrap3', children: [ + @iframe + @overlay = domify @outer_idoc, div: id: 'overlay' + ] + ] + ] + ) + outer_wrap = domify document, div: class: 'peach_html5_editor' + @in_el.parentNode.appendChild outer_wrap + outer_bounds = get_el_bounds outer_wrap + if outer_bounds.w < 300 + outer_bounds.w = 300 + if outer_bounds.h < 300 + 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 + outer_wrap.appendChild @outer_iframe + init: -> # called by @iframe's onload (or timeout on firefox) + @idoc = @iframe.contentDocument + @overlay.onclick = (e) => + return event_return @onclick e + @overlay.ondoubleclick = (e) => + return event_return @ondoubleclick e + @outer_idoc.body.onkeyup = (e) => + return event_return @onkeyup e + @outer_idoc.body.onkeydown = (e) => + return event_return @onkeydown e + @outer_idoc.body.onkeypress = (e) => + return event_return @onkeypress e + if @options.stylesheet + # TODO test this + @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet + @load_html @in_el.value + @inited = true + if @options.on_init? + @options.on_init() + 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 + if new_cursor? + @move_cursor new_cursor + return false + ondoubleclick: (e) -> + return false + onkeyup: (e) -> + return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? - idoc.body.onkeydown = (e) -> + #return false if control_key_codes[e.keyCode]? + onkeydown: (e) -> + return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? - idoc.body.onkeypress = (e) -> + #return false if control_key_codes[e.keyCode]? + switch e.keyCode + when KEY_LEFT + if @cursor? + new_cursor = find_prev_cursor_position @tree, @cursor... + if new_cursor? + @move_cursor new_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 + return false + when KEY_RIGHT + if @cursor? + new_cursor = find_next_cursor_position @tree, @cursor... + 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 + return false + when KEY_DOWN + return false + 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 + when KEY_ESCAPE + return false + when KEY_HOME + return false + when KEY_INSERT + return false + when KEY_PAGE_UP + return false + when KEY_PAGE_DOWN + return false + when KEY_TAB + return false + onkeypress: (e) -> return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? - # in firefox, keyCode is only set for non-typing keys - if e.keyCode isnt KEY_BACKSPACE # so this is fine - return false if control_key_codes[e.keyCode]? + return false if control_key_codes[e.keyCode]? # handled in keydown char = e.charCode ? e.keyCode - el.value += String.fromCharCode char - editor_instance.load_html el.value + 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] + @changed() return false - if options.stylesheet # TODO test this - istyle = idoc.createElement 'style' - istyle.setAttribute 'src', options.stylesheet - idoc.head.appendChild istyle - icss = idoc.createElement 'style' - icss.appendChild idoc.createTextNode css - idoc.head.appendChild icss - editor_instance.load_html el.value - return editor_instance - -window.peach = { - wysiwyg: wysiwyg - dom_to_html: dom_to_html -} + clear_dom: -> # remove all the editable content (and cursor, overlays, etc) + while @idoc.body.childNodes.length + @idoc.body.removeChild @idoc.body.childNodes[0] + @kill_cursor() + return + load_html: (html) -> + @tree = peach_parser.parse html, @parser_opts + @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 + @iframe.style.height = "0" + @iframe.style.height = "#{@idoc.body.scrollHeight}px" + kill_cursor: -> # remove it, forget where it was + if @cursor_visible + @cursor_el.parentNode.removeChild @cursor_el + @cursor_visible = false + @cursor = 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 + 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" + +window.peach_html5_editor = (args...) -> + return new PeachHTML5Editor args... -# test in browser: peach.wysiwyg(document.getElementsByTagName('textarea')[0]) +# test in browser: peach_html5_editor(document.getElementsByTagName('textarea')[0])