# 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 . TYPE_TAG = peach_parser.TYPE_TAG TYPE_TEXT = peach_parser.TYPE_TEXT TYPE_COMMENT = peach_parser.TYPE_COMMENT TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE get_el_offset = (el) -> rect = el.getBoundingClientRect() doc = el.ownerDocument.documentElement win = el.ownerDocument.defaultView return { top: rect.top + win.pageYOffset - doc.clientTop left: rect.left + win.pageXOffset - doc.clientLeft } # figure out the top/left 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" parent = n.el.parentNode if i is 0 # cursor at start of text parent.insertBefore span, n.el ret = get_el_offset span span.parentNode.removeChild span return ret else if i is n.text.length # cursor at end of text parent.insertBefore span, n.el.nextSibling ret = get_el_offset span span.parentNode.removeChild span return ret # cursor in middle of text # split the text node t0 = n.el.ownerDocument.createTextNode n.text.substr 0, i t1 = n.el.ownerDocument.createTextNode n.text.substr i parent.insertBefore t0, n.el parent.insertBefore span, n.el parent.insertBefore t1, n.el parent.removeChild n.el ret = get_el_offset span parent.insertBefore n.el, t0 parent.removeChild t0 parent.removeChild span parent.removeChild t1 return ret # TODO #loc_to_cursor = (n, i) -> # return top: , left: # 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 ' ' 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 += 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 = (h) -> for tag, attrs of h 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 css = '' css += 'div#peach_html5_editor_cursor {' css += 'position: absolute;' 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 += '}' # 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 instantiate_tree = (tree, parent) -> for c in tree switch c.type when TYPE_TEXT c.el = parent.ownerDocument.createTextNode c.text parent.appendChild c.el when TYPE_TAG # 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 find_next_cursor_position = (n, i) -> if n.type is TYPE_TEXT if n.text.length > i return [n, i + 1] return null if n.type is TYPE_TAG if n.children.length for c in n.children ret = find_next_cursor_position c, -1 return ret if ret? return null else # FIXME create an empty text node if needed depending on tag name return null class PeachHTML5Editor constructor: (in_el, options = {}) -> @in_el = in_el @tree = [] @iframe = document.createElement('iframe') @cursor = null @cursor_el = null @cursor_visible = false opt_fragment = options.fragment ? true @parser_opts = {} if opt_fragment @parser_opts.fragment = 'body' @in_el.parentNode.appendChild @iframe @idoc = @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) => 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 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 return false when KEY_UP return false when KEY_RIGHT window.ce = @cursor_el if @cursor? new_cursor = find_next_cursor_position @cursor... if new_cursor? @move_cursor new_cursor else after = false for c in @cursor[0].parent.children if after new_cursor = find_next_cursor_position c, -1 if new_cursor? @move_cursor new_cursor break if c is @cursor[0] after = true else for c in @tree new_cursor = find_next_cursor_position 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 when KEY_DELETE 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 @idoc.body.onkeypress = (e) => return if e.ctrlKey return false if ignore_key_codes[e.keyCode]? # in firefox, keyCode is only set for non-typing keys switch e.keyCode when KEY_LEFT return false when KEY_UP return false when KEY_RIGHT console.log "hi" console.log @cursor if @cursor? new_cursor = find_next_cursor_position @cursor... if new_cursor? @move_cursor new_cursor else after = false for c in @cursor[0].parent.children if after new_cursor = find_next_cursor_position c, -1 if new_cursor? @move_cursor new_cursor break if c is @cursor[0] after = true else for c in @tree new_cursor = find_next_cursor_position 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 when KEY_DELETE 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 char = e.charCode ? e.keyCode @in_el.value += String.fromCharCode char @load_html @in_el.value 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 @load_html @in_el.value clear_dom: -> # FIXME add parent node, so we don't empty body and delete cursor_el while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] @cursor_visible = false 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 move_cursor: (cursor) -> @cursor = cursor unless @cursor_el? @cursor_el = domify div: id: 'peach_html5_editor_cursor' unless @cursor_visible @idoc.body.appendChild @cursor_el @cursor_visible = true # TODO figure out top/left coords for cursor loc = cursor_to_loc cursor[0], cursor[1] @cursor_el.style.top = "#{loc.top}px" @cursor_el.style.left = "#{loc.left}px" window.peach_html5_editor = (args...) -> return new PeachHTML5Editor args... # test in browser: peach_html5_editor(document.getElementsByTagName('textarea')[0])