# Copyright 2015 Jason Woofenden # This file implements an WYSIWYG editor in the browser (no contenteditable) # # This program is free software: you can redistribute it and/or modify it under # the terms of the GNU Affero General Public License as published by the Free # Software Foundation, either version 3 of the License, or (at your option) any # later version. # # This program is distributed in the hope that it will be useful, but WITHOUT # ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS # FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more # details. # # 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' # 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) -> return txt.replace enc_attr_regex, (match, amp, quote) -> 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 base: true br: true col: true embed: true hr: true img: true input: true keygen: true link: true meta: true param: true source: true track: true wbr: true } dom_to_html = (dom) -> ret = '' for el in dom switch el.type when TYPE_TAG ret += '<' + el.name attr_keys = [] for k of el.attrs attr_keys.unshift k #attr_keys.sort() for k in attr_keys ret += " #{k}" if el.attrs[k].length > 0 ret += "=\"#{enc_attr el.attrs[k]}\"" ret += '>' unless void_elements[el.name] if el.children.length ret += dom_to_html el.children ret += "" when TYPE_TEXT ret += enc_text el.text when TYPE_COMMENT ret += "" when TYPE_DOCTYPE ret += " 0 ret += " \"#{el.public_identifier}\"" if el.system_identifier? and el.system_identifier.length > 0 ret += " \"#{el.system_identifier}\"" ret += ">\n" return ret domify = (doc, hash) -> for tag, attrs of hash if tag is 'text' return document.createTextNode attrs el = document.createElement tag for k, v of attrs if k is 'children' for child in v el.appendChild child else 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... shrink = (px) -> w -= 2 * px h -= 2 * px return px ret = '' ret += 'body {' ret += 'margin: 0;' ret += 'padding: 0;' ret += '}' ret += '#wrap1 {' ret += "border: #{shrink 1}px solid black;" ret += "padding: #{shrink frame_width}px;" ret += '}' ret += '#wrap2 {' ret += "border: #{shrink 1}px solid black;" ret += "padding: #{shrink inner_padding}px;" ret += '}' ret += '#wrap3 {' ret += 'position: relative;' 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;" 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 KEY_UP = 38 KEY_RIGHT = 39 KEY_DOWN = 40 KEY_BACKSPACE = 8 # <-- KEY_DELETE = 46 # --> KEY_END = 35 KEY_ENTER = 13 KEY_ESCAPE = 27 KEY_HOME = 36 KEY_INSERT = 45 KEY_PAGE_UP = 33 KEY_PAGE_DOWN = 34 KEY_TAB = 9 ignore_key_codes = '18': true # alt '20': true # capslock '17': true # ctrl '144': true # numlock '16': true # shift '91': true # windows "start" key control_key_codes = # we react to these, but they aren't typing '37': KEY_LEFT '38': KEY_UP '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 constructor: (in_el, options) -> @options = options ? {} @in_el = in_el @tree = [] @initialized = 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() @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 @idoc = @iframe.contentDocument @overlay.onclick = (e) => return @onclick e @outer_idoc.body.onkeyup = (e) => return @onkeyup e @outer_idoc.body.onkeydown = (e) => return @onkeydown e @outer_idoc.body.onkeypress = (e) => return @onkeypress e if @options.stylesheet # TODO test this @idoc.head.appendChild domify @idoc, style: src: @options.stylesheet @load_html @in_el.value @initialized = true if @options.initialized_cb? @options.initialized_cb() 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 onkeyup: (e) -> return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? #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]? 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]? 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] @changed() return false 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 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_html5_editor(document.getElementsByTagName('textarea')[0])