From 518c86f884b8ac8bf2f8f47640bb064852afe958 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 13:52:36 -0400 Subject: [PATCH 01/16] start implementing enter key --- editor.coffee | 38 ++++++++++++++++++++++++++++++++++++++ parser.coffee | 1 + 2 files changed, 39 insertions(+) diff --git a/editor.coffee b/editor.coffee index 3ccd200..4211c11 100644 --- a/editor.coffee +++ b/editor.coffee @@ -946,6 +946,7 @@ class PeachHTML5Editor @kill_cursor() return false when KEY_ENTER + @on_key_enter e return false when KEY_ESCAPE @kill_cursor() @@ -979,6 +980,43 @@ class PeachHTML5Editor 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?.el? + parent_el = cur_block.parent.el + pc = cur_block.parent.children + else + parent_el = @idoc.body + pc = @tree + # 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 + 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 clear_dom: -> # remove all the editable content (and cursor, overlays, etc) while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] 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 -- 1.7.10.4 From 3b0ea1cf0431211db79091277e2dec49f2c1bbd3 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 14:24:12 -0400 Subject: [PATCH 02/16] auto-drop spaces created by enter key --- editor.coffee | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/editor.coffee b/editor.coffee index 4211c11..9e21544 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1111,8 +1111,22 @@ class PeachHTML5Editor return unless parent.el? # insert the character if i is 0 - n.text = char + n.text + # 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 + special_case = false + if n.text is ' ' + if n.parent?.el? + if n.parent.children.length is 1 + if n.parent.children[0] is n + special_case = true + else + special_case = true + if special_case + n.text = char + else + n.text = char + n.text else if i is n.text.length + # replace the space n.text += char else n.text = -- 1.7.10.4 From 8e5bb6306b58c3ec1a85987e0c6326169168f774 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 16:26:25 -0400 Subject: [PATCH 03/16] code cleanup: better checking for tree-top --- editor.coffee | 44 +++++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/editor.coffee b/editor.coffee index 9e21544..f025506 100644 --- a/editor.coffee +++ b/editor.coffee @@ -665,6 +665,7 @@ class PeachHTML5Editor @options = options ? {} @in_el = in_el @tree = null + @tree_parent = null # top-level nodes in @tree should have this .parent @matting = [] @init_1_called = false # when iframes have loaded @outer_iframe # iframe to hold editor @@ -990,12 +991,12 @@ class PeachHTML5Editor return unless cur_block.parent? cur_block = cur_block.parent # find array to insert new element into - if cur_block.parent?.el? - parent_el = cur_block.parent.el - pc = cur_block.parent.children - else + 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 @@ -1013,6 +1014,7 @@ class PeachHTML5Editor 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 @@ -1024,6 +1026,7 @@ class PeachHTML5Editor return load_html: (html) -> @tree = peach_parser.parse html, @parser_opts + @tree_parent = @tree[0]?.parent @clear_dom() instantiate_tree @tree, @idoc.body tree_dedup_space @tree @@ -1104,27 +1107,26 @@ class PeachHTML5Editor 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 + # 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 # top-level text not supported atm parent = @cursor.n.parent - return unless parent - return unless parent.el? # insert the character - if i is 0 - # 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 - special_case = false - if n.text is ' ' - if n.parent?.el? - if n.parent.children.length is 1 - if n.parent.children[0] is n - special_case = true - else - special_case = true - if special_case - n.text = char - else - n.text = char + n.text + 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 -- 1.7.10.4 From 8ef2ac71a968742051ccec0b4f20dad33e609602 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 17:31:53 -0400 Subject: [PATCH 04/16] can delete empty blocks with backspace (rough) --- editor.coffee | 88 +++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 73 insertions(+), 15 deletions(-) diff --git a/editor.coffee b/editor.coffee index f025506..636bf19 100644 --- a/editor.coffee +++ b/editor.coffee @@ -664,8 +664,8 @@ class PeachHTML5Editor constructor: (in_el, options) -> @options = options ? {} @in_el = in_el - @tree = null - @tree_parent = null # top-level nodes in @tree should have this .parent + @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 @@ -923,16 +923,7 @@ class PeachHTML5Editor @move_cursor new_cursor return false when KEY_BACKSPACE - return false unless @cursor? - return false unless @cursor.i > 0 - @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() + @on_key_backspace e return false when KEY_DELETE return false unless @cursor? @@ -1019,6 +1010,60 @@ class PeachHTML5Editor 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 'not implemented yet' + # 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 + @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() clear_dom: -> # remove all the editable content (and cursor, overlays, etc) while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] @@ -1026,9 +1071,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: -> @@ -1107,6 +1155,16 @@ class PeachHTML5Editor 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 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 + if n.parent.children.length is 1 + if n.parent.children[0] is n + # n is only child + return true + return false # 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) -> @@ -1120,7 +1178,7 @@ class PeachHTML5Editor 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 # top-level text not supported atm + 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 @@ -1197,7 +1255,7 @@ class PeachHTML5Editor 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 -- 1.7.10.4 From 8e715e94e59e5bd05fea8e073de2750df2be1f8f Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 17:45:43 -0400 Subject: [PATCH 05/16] fix backspace of last character in a block --- editor.coffee | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/editor.coffee b/editor.coffee index 636bf19..8367d09 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1050,13 +1050,21 @@ class PeachHTML5Editor @kill_cursor return else if @cursor.i is 0 - console.log 'not implemented yet' + 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 - @remove_character @cursor.n, @cursor.i - 1 + # 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 @@ -1064,6 +1072,7 @@ class PeachHTML5Editor @move_cursor new_cursor else @kill_cursor() + return clear_dom: -> # remove all the editable content (and cursor, overlays, etc) while @idoc.body.childNodes.length @idoc.body.removeChild @idoc.body.childNodes[0] @@ -1155,16 +1164,20 @@ class PeachHTML5Editor 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 - if n.parent.children.length is 1 - if n.parent.children[0] is n - # n is only child - return true - return false + 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) -> -- 1.7.10.4 From 0cbe6362c90d9a6a8f501d0203c74856ad7d3263 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 26 Mar 2016 17:51:42 -0400 Subject: [PATCH 06/16] remove empty pragraph from example input --- editor_tests_compiled.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor_tests_compiled.html b/editor_tests_compiled.html index a78a0dc..f4d85b4 100644 --- a/editor_tests_compiled.html +++ b/editor_tests_compiled.html @@ -28,7 +28,7 @@ spill onto a second line.</p> <p >Text with lots of extra whitespace - in the original html and no closing p tag <p> <p>normal paragraph<p> + in the original html and no closing p tag <p>normal paragraph<p> <p>testing &lt;br&gt; e f<br>g <br> h i j <a href="http://example.com">Click me! o p q r</p> <div style="color: white"> <p> y z <strong>Bold <em> Italic + Bold</strong> Italic </em> Normal</p> -- 1.7.10.4 From 6b36467240e6f8dd43d7a82c0ab8c0a54cd28c96 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Mon, 28 Mar 2016 23:43:05 -0400 Subject: [PATCH 07/16] implement page-up key --- editor.coffee | 54 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 49 insertions(+), 5 deletions(-) diff --git a/editor.coffee b/editor.coffee index 8367d09..a02e278 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) -> @@ -951,6 +952,7 @@ class PeachHTML5Editor when KEY_INSERT return false when KEY_PAGE_UP + @on_page_up_key e return false when KEY_PAGE_DOWN return false @@ -1073,6 +1075,49 @@ class PeachHTML5Editor else @kill_cursor() return + on_page_up_key: (e) -> + scroll_amount = @wrap2_height - breathing_room + # scroll up a page + @wrap2.scrollTop = Math.max 0, @wrap2.scrollTop - scroll_amount + # note: if cursor innacuracy causes it no not be within new scroll, + # @move_cursor will adjust the scroll a bit. + if @cursor? + # move cursor up approximately scroll_amount + was = @cursor + y_target = @cursor.y - scroll_amount + y_min = Math.min y_target, @wrap2.scrollTop + y_max = Math.min y_target, @wrap2.scrollTop - scroll_amount + y_target = Math.min y_target, y_max + y_target = Math.max y_target, y_min + loop + cur = find_up_cursor_position @tree, was, @cursor_ideal_x + break unless cur? + break if cur.y <= y_target + was = cur + if was is @cursor + if cur? + new_cursor = cur + else + # should this move the cursor to the beginning of the line? + new_cursor = null + else + if cur? + # both valid, pick best + if cur.y < y_min + new_cursor = was + else if was.y > 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 + 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] @@ -1234,21 +1279,20 @@ class PeachHTML5Editor @annotate cursor.n @scroll_into_view cursor.y, height scroll_into_view: (y, h = 0) -> - closest = 30 # setting: smallest pixels from top/bottom of screet that's OK y += overlay_padding # convert units from @idoc to @wrap2 # very top of document - if y <= closest + if y <= breathing_room @wrap2.scrollTop = 0 return # very bottom of document - if y + h >= @wrap2.scrollHeight - closest + 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 + closest - @wrap2_height + 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 - closest + 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 -- 1.7.10.4 From 1a3115b9b75ed1f9a380b59c80d51fabdc811a2a Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Tue, 29 Mar 2016 00:11:55 -0400 Subject: [PATCH 08/16] implement page-down key --- editor.coffee | 97 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 60 insertions(+), 37 deletions(-) diff --git a/editor.coffee b/editor.coffee index a02e278..c78151a 100644 --- a/editor.coffee +++ b/editor.coffee @@ -955,6 +955,7 @@ class PeachHTML5Editor @on_page_up_key e return false when KEY_PAGE_DOWN + @on_page_down_key e return false when KEY_TAB return false @@ -1076,47 +1077,69 @@ class PeachHTML5Editor @kill_cursor() return on_page_up_key: (e) -> + if @cursor? + screen_y = @cursor.y - @wrap2.scrollTop scroll_amount = @wrap2_height - breathing_room - # scroll up a page @wrap2.scrollTop = Math.max 0, @wrap2.scrollTop - scroll_amount - # note: if cursor innacuracy causes it no not be within new scroll, - # @move_cursor will adjust the scroll a bit. if @cursor? - # move cursor up approximately scroll_amount - was = @cursor - y_target = @cursor.y - scroll_amount - y_min = Math.min y_target, @wrap2.scrollTop - y_max = Math.min y_target, @wrap2.scrollTop - scroll_amount - y_target = Math.min y_target, y_max - y_target = Math.max y_target, y_min - loop - cur = find_up_cursor_position @tree, was, @cursor_ideal_x - break unless cur? - break if cur.y <= y_target - was = cur - if was is @cursor - if cur? - new_cursor = cur - else - # should this move the cursor to the beginning of the line? - new_cursor = null + @move_cursor_into_view screen_y + @wrap2.scrollTop + on_page_down_key: (e) -> + if @cursor? + screen_y = @cursor.y - @wrap2.scrollTop + scroll_amount = @wrap2_height - breathing_room + lowest_scrollpos = @wrap2.scrollHeight - @wrap2_height + @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 + breathing_room + y_max = @wrap2.scrollTop + @wrap2_height - 2 * 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 = (a, b) -> + return a <= b + else + finder = find_down_cursor_position + far_enough = (a, b) -> + return a >= b + loop + cur = finder @tree, was, @cursor_ideal_x + break unless cur? + break if far_enough cur.y, y_target + was = cur + if was is @cursor + was = null + if was? + if was.y > y_max + was = null + else if was.y < y_min + was = null + if cur? + if cur.y > 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 > y_max + new_cursor = cur + else if cur.y - y_target < y_target - was.y + new_cursor = cur else - if cur? - # both valid, pick best - if cur.y < y_min - new_cursor = was - else if was.y > 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 - if new_cursor? - saved_ideal_x = @cursor_ideal_x - @move_cursor new_cursor - @cursor_ideal_x = saved_ideal_x + 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 -- 1.7.10.4 From d6b9400fe66b74ce333003c8ab1940ef163aa684 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 30 Mar 2016 09:45:42 -0400 Subject: [PATCH 09/16] cursor into view: allow to go top/bottom of doc --- editor.coffee | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/editor.coffee b/editor.coffee index c78151a..ef5d3a2 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1095,32 +1095,36 @@ class PeachHTML5Editor move_cursor_into_view: (y_target) -> return if y_target is @cursor.y was = @cursor - y_min = @wrap2.scrollTop + breathing_room - y_max = @wrap2.scrollTop + @wrap2_height - 2 * breathing_room + 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 = (a, b) -> - return a <= b + far_enough = (cur, target_y) -> + return cur.y + cur.h <= target_y else finder = find_down_cursor_position - far_enough = (a, b) -> - return a >= b + 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, y_target + break if far_enough cur, y_target was = cur if was is @cursor was = null if was? - if was.y > y_max + if was.y + was.h > y_max was = null else if was.y < y_min was = null if cur? - if cur.y > y_max + if cur.y + cur.h > y_max cur = null else if cur.y < y_min cur = null @@ -1128,7 +1132,7 @@ class PeachHTML5Editor # both valid, pick best if cur.y < y_min new_cursor = was - else if was.y > y_max + else if was.y + was.h > y_max new_cursor = cur else if cur.y - y_target < y_target - was.y new_cursor = cur -- 1.7.10.4 From 90fd4346459ebd1d895047622880a5d78ae419d2 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 30 Mar 2016 09:49:12 -0400 Subject: [PATCH 10/16] page down key: cursor to end if scrolled bot already --- editor.coffee | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/editor.coffee b/editor.coffee index ef5d3a2..a7c3c66 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1088,6 +1088,14 @@ class PeachHTML5Editor screen_y = @cursor.y - @wrap2.scrollTop scroll_amount = @wrap2_height - breathing_room lowest_scrollpos = @wrap2.scrollHeight - @wrap2_height + if @wrap2.scrollTop is lowest_scrollpos # already at bottom + return unless @cursor? + # move cursor to bottom + 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 @wrap2.scrollTop = Math.min lowest_scrollpos, @wrap2.scrollTop + scroll_amount if @cursor? @move_cursor_into_view screen_y + @wrap2.scrollTop -- 1.7.10.4 From 5de51db974972ef00b21121b7472075c0222b551 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 30 Mar 2016 10:00:05 -0400 Subject: [PATCH 11/16] page up: cursor to start if scrolled top already --- editor.coffee | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/editor.coffee b/editor.coffee index a7c3c66..a0bd0a4 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1077,6 +1077,13 @@ class PeachHTML5Editor @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 @@ -1084,18 +1091,17 @@ class PeachHTML5Editor if @cursor? @move_cursor_into_view screen_y + @wrap2.scrollTop on_page_down_key: (e) -> - if @cursor? - screen_y = @cursor.y - @wrap2.scrollTop - scroll_amount = @wrap2_height - breathing_room lowest_scrollpos = @wrap2.scrollHeight - @wrap2_height - if @wrap2.scrollTop is lowest_scrollpos # already at bottom + if @wrap2.scrollTop is lowest_scrollpos return unless @cursor? - # move cursor to bottom 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 -- 1.7.10.4 From 30aee05f9c37a3954f5f849823b2e84a304423ff Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 30 Mar 2016 10:54:37 -0400 Subject: [PATCH 12/16] optimize whitespace dedup --- editor.coffee | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/editor.coffee b/editor.coffee index a0bd0a4..dd39c62 100644 --- a/editor.coffee +++ b/editor.coffee @@ -559,21 +559,32 @@ tree_dedup_space = (tree) -> throw "how is this possible?" next_i -= 1 return 1 - whitespace_to_space = (undo) -> + 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) - cur.text = (cur.text.substr 0, cur_i) + ' ' + (cur.text.substr cur_i + 1) - cur.el.textContent = cur.text + 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, whitespace_to_space] + 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 @@ -581,7 +592,8 @@ tree_dedup_space = (tree) -> return remove() # 2. width greater than zero means visible space if bounds.w > 0 - fixers.shift() # don't try removing + # 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 @@ -590,6 +602,11 @@ 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 = new_cursor_position n: prev, i: prev_i if next? and not next_px? -- 1.7.10.4 From 9b0a8adcd553683463cc338e6ad4d95523e7939f Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 2 Apr 2016 14:07:44 -0400 Subject: [PATCH 13/16] incomplete: deleting barrier between blocks --- editor.coffee | 41 ++++++++++++++++++++++++++++++++++++----- 1 file changed, 36 insertions(+), 5 deletions(-) diff --git a/editor.coffee b/editor.coffee index dd39c62..2ad0acc 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1042,6 +1042,7 @@ class PeachHTML5Editor else @kill_cursor() else + # cursor at the begining of an element that contains only a space parent = @cursor.n.parent new_cursor = find_prev_cursor_position @tree, @cursor if new_cursor? @@ -1069,11 +1070,41 @@ class PeachHTML5Editor 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 if @cursor.i is 0 # start of non-empty tag + # TODO factor out function for moving children around + # find containing block + containing_block = @cursor.n + loop + containing_block = containing_block.parent + return unless containing_block? + return if containing_block is @tree_parent + break if is_display_block containing_block + # FIXME only continue if first child, else inline merge here + # find contaning_block's previous sibling + prev = null + for n, contaning_block_i in contaning_block.parent.children + break if n is containing_block + prev = n + containing_block.el.parent.removeChild containing_block.el + containing_block.parent.children.splice contaning_block_i, 1 + if prev is null + console.log "inimplemented: backspace at start of nested blocks" # FIXME + return + if is_display_block prev + # insert contents of containing_block into prev + ws_cleanup = false + if prev.children.length > 0 + prev_last = prev.children[prev.children.length - 1] + if prev_last.type is 'text' and containing_block.children[0].type is 'text' + prev_last.text = prev_last.el.textContent = prev_last.text + containing_block.children[0].text + ws_cleanup = true + containing_block.children.shift() + for n in containing_block.children + # TODO insert into prev + # TODO adjust whitespace property of prev_last if ws_cleanup + else + # TODO insert contents of containing_block into prev.parent after prev + return else # TODO handle case of removing last char # CONTINUE -- 1.7.10.4 From 0742a687c380cc5b39aeb6eb8707342c14ca69e7 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Thu, 7 Apr 2016 23:33:29 -0400 Subject: [PATCH 14/16] improve backspacing accross tag boundaries --- editor.coffee | 151 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 118 insertions(+), 33 deletions(-) diff --git a/editor.coffee b/editor.coffee index 2ad0acc..29cf7e3 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1030,6 +1030,13 @@ class PeachHTML5Editor throw 'bork bork' unless new_cursor? @move_cursor new_cursor # TODO move content past cursor into this new block + find_block_parent: (n) -> + loop + n = n.parent + return null unless n? + return n if is_display_block n.el + return n if n is @tree_parent + return null on_key_backspace: (e) -> return false unless @cursor? if @is_lone_space @cursor.n # false if it's not in a tag @@ -1070,40 +1077,77 @@ class PeachHTML5Editor else @kill_cursor return - else if @cursor.i is 0 # start of non-empty tag - # TODO factor out function for moving children around - # find containing block - containing_block = @cursor.n - loop - containing_block = containing_block.parent - return unless containing_block? - return if containing_block is @tree_parent - break if is_display_block containing_block - # FIXME only continue if first child, else inline merge here - # find contaning_block's previous sibling - prev = null - for n, contaning_block_i in contaning_block.parent.children - break if n is containing_block - prev = n - containing_block.el.parent.removeChild containing_block.el - containing_block.parent.children.splice contaning_block_i, 1 - if prev is null - console.log "inimplemented: backspace at start of nested blocks" # FIXME + else if @cursor.i is 0 # start of text chunk + # FIXME clean this up: use new code for text runs + # FIXME handle backspacing a
even if it's near a inline tag boundary + # determine if cursor is at start of text run (text formatted inline) + block = @find_block_parent @cursor.n + return unless block + at_block_start = true + prev_pos = find_prev_cursor_position @tree, @cursor + unless prev_pos? + # if the cursor can't go back, then there's probably nowhere we can merge into + # TODO consider case of nested blocks. should backspace remove one? + return + prev_pos_block = @find_block_parent prev_pos.n + if prev_pos_block is block + # context: there is text before the cursor within the same block. + # FIXME clean up this hack for looking for
+ cursor_text_pi = @cursor.n.parent.children.indexOf @cursor.n + if cursor_text_pi > 0 + prev_node = @cursor.n.parent.children[cursor_text_pi - 1] + if prev_node.type is 'tag' and prev_node.name is 'br' + @remove_node prev_node + @text_cleanup @cursor.n.parent + @changed() + new_cursor = new_cursor_position n: prev_pos.n, i: prev_pos.i + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor + return + # note: find_prev_cursor_position just crossed a boundary, not a character + # prev_pos is within the same block, try deleting there + @move_cursor prev_pos + # FIXME cleanup: don't call @move_cursor twice if the next line succeeds + return @on_key_backspace() + # context: backspace pressed at start of a display:block + return if block is @tree_parent # top level text + parent = block.parent + parent_i = parent.children.indexOf block + if parent_i is -1 + throw "BUG #98270918347" return - if is_display_block prev - # insert contents of containing_block into prev - ws_cleanup = false - if prev.children.length > 0 - prev_last = prev.children[prev.children.length - 1] - if prev_last.type is 'text' and containing_block.children[0].type is 'text' - prev_last.text = prev_last.el.textContent = prev_last.text + containing_block.children[0].text - ws_cleanup = true - containing_block.children.shift() - for n in containing_block.children - # TODO insert into prev - # TODO adjust whitespace property of prev_last if ws_cleanup + if parent_i is 0 + # no previous sibling to merge into, so instead move contents into parent + dest = parent + before = block else - # TODO insert contents of containing_block into prev.parent after prev + # FIXME prev_sib should be the previous in-flow element + # ie it should skip comments, hidden things, floating things, etc. + prev_sib = parent.children[parent_i - 1] + if is_display_block prev_sib.el + dest = prev_sib + before = null # null means append + else + dest = parent + before = block + if dest is @tree_parent + # don't remove outer-most blocks + return + while block.children.length > 0 + n = block.children[block.children.length - 1] + @move_node n, dest, before + block.children.pop() + before = n + @remove_node block + @text_cleanup dest + @changed() + new_cursor = new_cursor_position n: prev_pos.n, i: prev_pos.i + if new_cursor? + @move_cursor new_cursor + else + @kill_cursor return else # TODO handle case of removing last char @@ -1341,16 +1385,56 @@ class PeachHTML5Editor char + n.text.substr(i) n.el.nodeValue = n.text - # after calling this, you MUST call changed() and adjust_whitespace_style() + # WARNING: 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 + # call this after you insert or remove inline nodes. It will: + # merge consecutive text nodes + # remove empty text nodes + # adjust white-space property + text_cleanup: (n) -> + return + # FIXME implement this + # WARNING: after calling this one or more times, you MUST: + # if it's inline: call @text_cleanup + # call @changed() + remove_node: (n) -> + i = n.parent.children.indexOf n + if i is -1 + throw "BUG #9187112313" + n.el.parentNode.removeChild n.el + n.parent.children.splice i, 1 + return + # remove a node from the tree/dom, insert into new_parent before insert_before?end + # WARNING: after calling this one or more times, you MUST: + # if it's inline: call @text_cleanup + # call @changed() + move_node: (n, new_parent, insert_before = null) -> + i = n.parent.children.indexOf n + if i is -1 + throw "Error: tried to remove node, but it's not in it's parents list of children" + return + if insert_before? + before_i = new_parent.children.indexOf insert_before + if i is -1 + throw "Error: tried to move a node to be before a non-existent node" + @remove_node n + if insert_before? + new_parent.insertBefore n.el, insert_before + new_parent.children.splice before_i, 0, n + else + new_parent.el.appendChild n.el, insert_before + new_parent.children.push n + n.parent = new_parent + return kill_cursor: -> # remove it, forget where it was if @cursor_visible @cursor_el.parentNode.removeChild @cursor_el @cursor_visible = false @cursor = null @annotate null + return move_cursor: (cursor) -> @cursor_ideal_x = cursor.x @cursor = cursor @@ -1367,6 +1451,7 @@ class PeachHTML5Editor @cursor_el.style.height = "#{Math.round height * 0.82}px" @annotate cursor.n @scroll_into_view cursor.y, height + return scroll_into_view: (y, h = 0) -> y += overlay_padding # convert units from @idoc to @wrap2 # very top of document -- 1.7.10.4 From e63123d22c65f954f27b830f149c1a1500ba0c97 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Thu, 7 Apr 2016 23:46:53 -0400 Subject: [PATCH 15/16] backspace bugfixes (more to come) --- editor.coffee | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/editor.coffee b/editor.coffee index 29cf7e3..9f6d8eb 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1030,6 +1030,11 @@ class PeachHTML5Editor throw 'bork bork' unless new_cursor? @move_cursor new_cursor # TODO move content past cursor into this new block + # unlike the global function, this takes a Node, not an element + is_display_block: (n) -> + # TODO stop calling global function, merge it into here, use iframe's window object + return false unless n.type is 'tag' + return is_display_block n.el find_block_parent: (n) -> loop n = n.parent @@ -1092,7 +1097,7 @@ class PeachHTML5Editor prev_pos_block = @find_block_parent prev_pos.n if prev_pos_block is block # context: there is text before the cursor within the same block. - # FIXME clean up this hack for looking for
+ # FIXME clean up this hack for looking for
(see above) cursor_text_pi = @cursor.n.parent.children.indexOf @cursor.n if cursor_text_pi > 0 prev_node = @cursor.n.parent.children[cursor_text_pi - 1] @@ -1126,7 +1131,7 @@ class PeachHTML5Editor # FIXME prev_sib should be the previous in-flow element # ie it should skip comments, hidden things, floating things, etc. prev_sib = parent.children[parent_i - 1] - if is_display_block prev_sib.el + if @is_display_block prev_sib dest = prev_sib before = null # null means append else @@ -1153,7 +1158,7 @@ class PeachHTML5Editor # TODO handle case of removing last char # CONTINUE if @is_only_char_in_tag @cursor.n - if is_display_block @cursor.n.parent.el + if @is_display_block @cursor.n.parent @cursor.n.el.textContent = @cursor.n.text = ' ' else console.log "unimplemented: delete last char in inline" # FIXME @@ -1284,6 +1289,7 @@ class PeachHTML5Editor # 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" + # FIXME use new textrun api has_collapsable_space: (tag) -> for n in tag.children if n.type is 'text' @@ -1301,6 +1307,7 @@ class PeachHTML5Editor return true if is_space_code n.text.charCodeAt n.text.length - 1 return true + return false # 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. @@ -1308,9 +1315,11 @@ class PeachHTML5Editor # 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' + loop + break if @is_display_block n n = n.parent - return unless n?.el? + return unless n? + return if n is @tree_parent # 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' @@ -1419,9 +1428,10 @@ class PeachHTML5Editor before_i = new_parent.children.indexOf insert_before if i is -1 throw "Error: tried to move a node to be before a non-existent node" + insert_before = insert_before.el @remove_node n if insert_before? - new_parent.insertBefore n.el, insert_before + new_parent.el.insertBefore n.el, insert_before new_parent.children.splice before_i, 0, n else new_parent.el.appendChild n.el, insert_before -- 1.7.10.4 From 887afa2c256c214ae5c3b9583a980c842121e912 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Fri, 8 Apr 2016 12:11:10 -0400 Subject: [PATCH 16/16] fix @insert_character: don't assume at cursor --- editor.coffee | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/editor.coffee b/editor.coffee index 9f6d8eb..60ea832 100644 --- a/editor.coffee +++ b/editor.coffee @@ -1378,8 +1378,7 @@ class PeachHTML5Editor 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 + return if n.parent is @tree_parent # FIXME implement text nodes at top level # insert the character if @insert_should_replace n, i n.text = char -- 1.7.10.4