From: Jason Woofenden Date: Mon, 1 Feb 2016 22:50:09 +0000 (-0500) Subject: editor cursor starting (barely) towork X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=commitdiff_plain;h=78a645242be2358e81bdf56a82c7fc3a4564e4d9 editor cursor starting (barely) towork --- diff --git a/editor.coffee b/editor.coffee index faa2e3f..e0cae20 100644 --- a/editor.coffee +++ b/editor.coffee @@ -14,6 +14,59 @@ # 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) -> @@ -43,7 +96,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 +111,11 @@ dom_to_html = (dom) -> if el.children.length ret += dom_to_html el.children ret += "" - when peach_parser.TYPE_TEXT + when TYPE_TEXT ret += el.text - when peach_parser.TYPE_COMMENT + when TYPE_COMMENT ret += "" - when peach_parser.TYPE_DOCTYPE + when TYPE_DOCTYPE ret += " 0 ret += " \"#{el.public_identifier}\"" @@ -85,8 +138,8 @@ domify = (h) -> return el css = '' -css += 'div#peach_editor_cursor {' -css += 'display: inline-block;' +css += 'div#peach_html5_editor_cursor {' +css += 'position: absolute;' css += 'height: 1em;' css += 'width: 2px;' css += 'margin-left: -1px;' @@ -120,74 +173,225 @@ 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) -> - return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? - idoc.body.onkeydown = (e) -> - return false if ignore_key_codes[e.keyCode]? - return false if control_key_codes[e.keyCode]? - 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 - if e.keyCode isnt KEY_BACKSPACE # so this is fine - return false if control_key_codes[e.keyCode]? - char = e.charCode ? e.keyCode - el.value += String.fromCharCode char - editor_instance.load_html 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 - editor_instance.load_html el.value - return editor_instance - -window.peach = { - wysiwyg: wysiwyg - dom_to_html: dom_to_html -} +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.wysiwyg(document.getElementsByTagName('textarea')[0]) +# test in browser: peach_html5_editor(document.getElementsByTagName('textarea')[0]) diff --git a/editor_tests.coffee b/editor_tests.coffee index 27a891d..d0c71fd 100644 --- a/editor_tests.coffee +++ b/editor_tests.coffee @@ -1,15 +1,4 @@ in_el = document.getElementById 'in' button = document.getElementById 'button' -editor = null -button.onclick = in_el.onchange = in_el.onkeyup = -> - #button.value="Reload" - if editor? - editor.load_html in_el.value - else - # first run - button.parentNode.removeChild button - editor = peach.wysiwyg in_el - return false -button.value="Load" -button.removeAttribute 'disabled' -button.click() +button.parentNode.removeChild button +editor = peach_html5_editor in_el