X-Git-Url: https://jasonwoof.com/gitweb/?p=peach-html5-editor.git;a=blobdiff_plain;f=editor.coffee;h=238625c0793b3c745b68e8665ff825ce7bb34e64;hp=785615c8b294d22c140dfabd1f48fe25158b1a3d;hb=e3b396215f59cd45b7d7c510dcddea8354f756aa;hpb=163adca780b3f37fd3fb1e09cb7bef1dd38c1c84

diff --git a/editor.coffee b/editor.coffee
index 785615c..238625c 100644
--- a/editor.coffee
+++ b/editor.coffee
@@ -16,6 +16,7 @@
 
 # SETTINGS
 overlay_padding = 10
+breathing_room = 30 # minimum pixels above/below cursor (scrolling)
 
 timeout = (ms, cb) -> return setTimeout cb, ms
 next_frame = (cb) ->
@@ -58,15 +59,22 @@ ws_props =
 		space: true
 		newline: true
 		wrap: false
+		to_collapse: 'nowrap'
 	'pre-wrap':
 		space: true
 		newline: true
 		wrap: true
+		to_collapse: 'normal'
 
 # xml 1.0 spec, chromium and firefox accept these, plus lots of unicode chars
 valid_attr_regex = new RegExp '^[a-zA-Z_:][-a-zA-Z0-9_:.]*$'
 # html5 spec is much more lax, but chromium won't let me make at attribute with the name "4"
 js_attr_regex = new RegExp '^[oO][nN].'
+# html5 spec says that only these characters are collapsable
+multi_sp_regex = new RegExp '[\u0020\u0009\u000a\u000c\u000d][\u0020\u0009\u000a\u000c\u000d]'
+
+str_has_ws_run = (str) ->
+	return multi_sp_regex.test str
 
 debug_dot_at = (doc, x, y) ->
 	return # disabled
@@ -317,8 +325,8 @@ first_cursor_position = (tree) ->
 			cursor = new_cursor_position n: node, i: 0
 			if cursor?
 				found = cursor
-				return true
-		return false
+				return true # done traversing
+		return false # not done traversing
 	return found # maybe null
 
 # this will fail when text has non-locatable cursor positions
@@ -334,10 +342,10 @@ find_next_cursor_position = (tree, cursor) ->
 			new_cursor = new_cursor_position n: node, i: 0
 			if new_cursor?
 				found = new_cursor
-				return true
+				return true # done traversing
 		if node is cursor.n
 			state_before = false
-		return false
+		return false # not done traversing
 	if found?
 		return found
 	return null
@@ -349,7 +357,7 @@ last_cursor_position = (tree) ->
 			cursor = new_cursor_position n: node, i: node.text.length
 			if cursor?
 				found = cursor
-		return false
+		return false # not done traversing
 	return found # maybe null
 
 # this will fail when text has non-locatable cursor positions
@@ -363,12 +371,12 @@ find_prev_cursor_position = (tree, cursor) ->
 	traverse_tree tree, (node) ->
 		if node is cursor.n
 			found = found_prev # maybe null
-			return true
+			return true # done traversing
 		if node.type is 'text'
 			new_cursor = new_cursor_position n: node, i: node.text.length
 			if new_cursor?
 				found_prev = new_cursor
-		return false
+		return false # not done traversing
 	return found # maybe null
 
 find_up_cursor_position = (tree, cursor, ideal_x) ->
@@ -503,7 +511,7 @@ tree_remove_empty_text_nodes = (tree) ->
 		if n.type is 'text'
 			if n.text.length is 0
 				empties.unshift n
-		return false
+		return false # not done traversing
 	for n in empties
 		# don't completely empty the tree
 		if tree.length is 1
@@ -558,21 +566,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
@@ -580,7 +599,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
@@ -589,6 +609,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?
@@ -664,7 +689,8 @@ class PeachHTML5Editor
 	constructor: (in_el, options) ->
 		@options = options ? {}
 		@in_el = in_el
-		@tree = null
+		@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
@@ -922,32 +948,32 @@ 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?
-				return false unless @cursor.i < @cursor.n.text.length
-				@remove_character @cursor.n, @cursor.i
-				@adjust_whitespace_style @cursor.n
-				@changed()
-				new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i
+				new_cursor = find_next_cursor_position @tree, n: @cursor.n, i: @cursor.i
+				# try moving cursor right and then running backspace code
+				# TODO replace this hack with a real implementation
 				if new_cursor?
-					@move_cursor new_cursor
-				else
-					@kill_cursor()
+					# try to detect common case where cursor goes inside an block,
+					# but doesn't pass a character (and advance one more in that case)
+					if new_cursor.n isnt @cursor.n and new_cursor.i is 0
+						if new_cursor.n.type is 'text' and new_cursor.n.text.length > 0
+							if new_cursor.n.parent?
+								unless @is_display_block new_cursor.n.parent
+									# FIXME should test run sibling
+									new_cursor = new_cursor_position n: new_cursor.n, i: new_cursor.i + 1
+				if new_cursor?
+					if new_cursor.n isnt @cursor.n or new_cursor.i isnt @cursor.i
+						@move_cursor new_cursor
+						@on_key_backspace e
 				return false
 			when KEY_ENTER
+				@on_key_enter e
 				return false
 			when KEY_ESCAPE
+				@kill_cursor()
 				return false
 			when KEY_HOME
 				new_cursor = first_cursor_position @tree
@@ -957,8 +983,10 @@ class PeachHTML5Editor
 			when KEY_INSERT
 				return false
 			when KEY_PAGE_UP
+				@on_page_up_key e
 				return false
 			when KEY_PAGE_DOWN
+				@on_page_down_key e
 				return false
 			when KEY_TAB
 				return false
@@ -969,7 +997,7 @@ class PeachHTML5Editor
 		if char and @cursor?
 			char = String.fromCharCode char
 			@insert_character @cursor.n, @cursor.i, char
-			@adjust_whitespace_style @cursor.n
+			@text_cleanup @cursor.n
 			@changed()
 			new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i + 1
 			if new_cursor
@@ -978,6 +1006,335 @@ 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 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
+		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
+		@changed()
+		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
+	# 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
+			return null unless n?
+			return n if @is_display_block n
+			return n if n is @tree_parent
+		return null
+	# return a flat array of nodes (text, <br>, and later also inline-block)
+	# that are flowing/wrapping together. n can be the containing block, or any
+	# element inside it.
+	get_text_run: (n) ->
+		ret = []
+		if @is_display_block n
+			block = n
+		else
+			block = @find_block_parent n
+			return ret unless block?
+		traverse_tree block.children, (n) =>
+			if n.type is 'text'
+				ret.push n
+			else if n.type is 'tag'
+				if n.name is 'br'
+					ret.push n
+				else
+					disp = @computed_style n
+					if disp is 'inline-block'
+						ret.push n
+			return false # not done traversing
+		return ret
+	node_is_decendant: (young, old) ->
+		while young? and young != @tree_parent
+			return true if young is old
+			young = young.parent
+		return false
+	# helper for on_key_backspace
+	_merge_left: (state) ->
+		# the node prev to n was not prev to it a moment ago, merge with it if reasonable
+		pi = state.n.parent.children.indexOf(state.n)
+		if pi > 0
+			prev = state.n.parent.children[pi - 1]
+			if prev.type is 'text'
+				state.i = prev.text.length
+				prev.text = prev.el.textContent = prev.text + state.n.text
+				@remove_node state.n
+				state.n = prev
+				state.changed = true
+				state.moved_cursor = true
+		# else # TODO merge possible consecutive matching inline tags at @cursor
+		return state
+	# helper for on_key_backspace
+	# remove n from the dom, also remove its inline parents that are emptied by removing n
+	_backspace_node_helper: (n, run = @get_text_run(n), run_i = run.indexOf(n)) ->
+		block = @find_block_parent n
+		# delete text node
+		@remove_node n
+		# delete any inline parents
+		n = n.parent
+		while n? and n isnt block
+			# bail if the previous node in this run is also inside the same parent
+			if run_i > 0
+				break if @node_is_decendant run[run_i - 1], n
+			# bail if the next node in this run is also inside the same parent
+			if run_i + 1 < run.length
+				break if @node_is_decendant run[run_i + 1], n
+			# move any sibling nodes to parent. These nodes are not in the text run
+			while n.children.length > 0
+				@move_node n.children[0], n.parent, n
+			# remove (now completely empty) inline parent
+			@remove_node n
+			# proceed to outer parent
+			n = n.parent
+		return
+	on_key_backspace: (e) ->
+		return unless @cursor?
+		new_cursor = null
+		run = null
+		changed = true
+		if @cursor.i is 0 # cursor is at start of text node
+			run ?= @get_text_run @cursor.n
+			run_i = run.indexOf(@cursor.n)
+			if run_i is 0 # if at start of text run
+				block = @find_block_parent @cursor.n
+				prev_cursor = find_prev_cursor_position @tree, n: @cursor.n, i: 0
+				if prev_cursor is null # if in first text run of document
+					# do nothing (there's nothing text-like to the left of the cursor)
+					return
+				# else merge with prev/outer text run
+				pcb = @find_block_parent prev_cursor.n
+				while block.children.length > 0
+					@move_node block.children[0], pcb
+				@remove_node block
+				# merge possible consecutive text nodes at @cursor
+				merge_state = n: @cursor.n
+				@_merge_left merge_state
+				@text_cleanup merge_state.n
+				new_cursor = new_cursor_position n: merge_state.n, i: merge_state.i
+			else # at start of text node, but not start of text run
+				prev = run[run_i - 1]
+				if prev.type is 'text' # if previous in text run is text
+					if prev.text.length is 1 # if emptying prev (in text run)
+						@_backspace_node_helper prev, run, run_i
+						merge_state = n: @cursor.n, i: @cursor.i
+						@_merge_left merge_state
+						@text_cleanup merge_state.n
+						new_cursor = new_cursor_position n: merge_state.n, i: merge_state.i
+					else # prev in run is text with muliple chars
+						# delete last character in prev
+						prev.text = prev.text.substr(0, prev.text.length - 1)
+						prev.el.textContent = prev.text
+						@text_cleanup @cursor.n
+						new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i
+				else if prev.name is 'br' or prev.name is 'hr'
+					@_backspace_node_helper prev, run, run_i
+					merge_state = n: @cursor.n, i: @cursor.i
+					@_merge_left merge_state
+					@text_cleanup merge_state.n
+					new_cursor = new_cursor_position n: merge_state.n, i: merge_state.i
+				# FIXME implement this:
+				# else # if prev (in run) is inline-block
+					# if that inline-block has text in it
+						# delete last char in prev inlineblock
+						# if that empties it
+							# delete it
+							# merge left
+						# else
+							# move cursor inside
+					# else
+						# delete prev (inline) block
+						# merge left
+					# auto-delete this @cursor.parent(s) if this empties them
+		else # cursor is not at start of text node
+			run ?= @get_text_run @cursor.n
+			if @cursor.n.text.length is 1 # if emptying text node
+				if run.length is 1 # if emptying text run (of text/br/hr/inline-block)
+					# remove inline-parents of @cursor.n
+					block = @find_block_parent @cursor.n
+					changed = false
+					n = @cursor.n.parent
+					# note: this doesn't use _backspace_node_helper because:
+					# 1. we don't want to delete the target node (we're replacing it's contents)
+					# 2. we want to track whether anything was removed
+					# 3. we know already know there's no other text from this run anywhere
+					while n and n isnt block
+						changed = true
+						while n.children.length > 0
+							@move_node n.children[0], n.parent, n
+						@remove_node n
+						n = n.parent
+					# replace @cursor.n with a single (preserved) space
+					if @cursor.n.text != ' '
+						changed = true
+						@cursor.n.text = @cursor.n.el.textContent = ' '
+					if changed
+						@text_cleanup @cursor.n
+					# place the cursor to the left of that space
+					new_cursor = new_cursor_position n: @cursor.n, i: 0
+				else # emptying a text node (but not a whole text run)
+					# figure out where cursor should land
+					block = @find_block_parent @cursor.n
+					new_cursor = find_prev_cursor_position @tree, n: @cursor.n, i: 0
+					ncb = @find_block_parent new_cursor.n
+					if ncb isnt block
+						new_cursor = find_next_cursor_position @tree, n: @cursor.n, i: 1
+					# delete text node and cleanup emptied parents
+					run_i = run.indexOf @cursor.n
+					@_backspace_node_helper @cursor.n, run, run_i
+					# see if new adjacent siblings should merge
+					# TODO make smarter
+					if run_i > 0 and run_i + 1 < run.length
+						if run[run_i - 1].type is 'text' and run[run_i + 1].type is 'text'
+							merge_state = n: run[run_i + 1]
+							@_merge_left merge_state
+							if merge_state.moved_cursor
+								new_cursor = merge_state
+					# update whitespace preservation
+					@text_cleanup(block)
+					# update cursor x/y in case things moved around
+					if new_cursor?
+						if new_cursor.n.el.parentNode # still in dom after cleanup
+							new_cursor = new_cursor_position n: new_cursor.n, i: new_cursor.i
+						else
+							new_cursor = null
+			else # there's a char left of cursor that we can delete without emptying anything
+				# delete character
+				need_text_cleanup = true
+				if @cursor.i > 1 and @cursor.i < @cursor.n.text.length
+					pre = @cursor.n.text.substr(@cursor.i - 2, 3)
+					post = pre.charAt(0) + pre.charAt(2)
+					if str_has_ws_run(pre) is str_has_ws_run(post)
+						need_text_cleanup = false
+				@remove_character(@cursor.n, @cursor.i - 1)
+				# call text_cleanup if whe created/removed a whitespace run
+				if need_text_cleanup
+					@text_cleanup @cursor.n
+				new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i - 1
+		# mark document changed and move the cursor
+		if changed?
+			@changed()
+		if new_cursor?
+			@move_cursor new_cursor
+		else
+			@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
+		@wrap2.scrollTop = Math.max 0, @wrap2.scrollTop - scroll_amount
+		if @cursor?
+			@move_cursor_into_view screen_y + @wrap2.scrollTop
+	on_page_down_key: (e) ->
+		lowest_scrollpos = @wrap2.scrollHeight - @wrap2_height
+		if @wrap2.scrollTop is lowest_scrollpos
+			return unless @cursor?
+			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
+		return
+	move_cursor_into_view: (y_target) ->
+		return if y_target is @cursor.y
+		was = @cursor
+		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 = (cur, target_y) ->
+				return cur.y + cur.h <= target_y
+		else
+			finder = find_down_cursor_position
+			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_target
+			was = cur
+		if was is @cursor
+			was = null
+		if was?
+			if was.y + was.h > y_max
+				was = null
+			else if was.y < y_min
+				was = null
+		if cur?
+			if cur.y + cur.h > 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 + was.h > 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 ? 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
 			@idoc.body.removeChild @idoc.body.childNodes[0]
@@ -985,8 +1342,12 @@ class PeachHTML5Editor
 		return
 	load_html: (html) ->
 		@tree = peach_parser.parse html, @parser_opts
+		if !@tree[0]?.parent
+			@tree = peach_parser.parse '<p style="white-space: pre-wrap"> </p>', @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: ->
@@ -1007,6 +1368,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'
@@ -1024,56 +1386,42 @@ class PeachHTML5Editor
 						return true
 					if is_space_code n.text.charCodeAt n.text.length - 1
 						return true
-	# 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.
-	#
-	# 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'
-			n = n.parent
-			return unless n?.el?
-		# 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'
-		if ws_props[ws].space
-			preserve_rule = ws
-		else
-			preserve_rule = ws_props[ws].to_preserve
-		preserve_rule = "white-space: #{preserve_rule}"
-		if @has_collapsable_space n
-			# make sure preserve_rule exists
-			if n.el.style['white-space']
-				# FIXME check that it matches
-				return
-			if n.attrs[style]?
-				n.attrs.style += "; #{preserve_rule}"
-			else
-				n.attrs.style = preserve_rule
-			n.el.setAttribute 'style', n.attrs.style
-		else
-			# remove preserve_rule if it exists
-			return unless n.attrs.style?
-			# FIXME don't assume whitespace is just so
-			if n.attrs.style is "white-space: #{ws}"
-				delete n.attrs.style
-				n.el.removeAttribute 'style'
-			else
-				# FIXME find it in the middle and at the start
-				needle = "; white-space: #{ws}"
-				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
-	# after calling this, you MUST call changed() and adjust_whitespace_style()
+		return false
+	# 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
+		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) ->
+		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 text_cleanup()
 	insert_character: (n, i, char) ->
-		parent = @cursor.n.parent
-		return unless parent
-		return unless parent.el?
+		return if n.parent is @tree_parent # FIXME implement text nodes at top level
 		# insert the character
-		if i is 0
+		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
 		else
 			n.text =
@@ -1081,16 +1429,190 @@ 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 text_cleanup()
 	remove_character: (n, i) ->
 		n.text = n.text.substr(0, i) + n.text.substr(i + 1)
 		n.el.nodeValue = n.text
+	computed_style: (n, prop) ->
+		if n.type is 'text'
+			n = n.parent
+		style = @iframe.contentWindow.getComputedStyle n.el, null
+		return style.getPropertyValue prop
+	# returns the new white-space value that will preserve spaces for node n
+	preserve_space: (n, ideal_target) ->
+		if n.type is 'text'
+			target = n.parent
+		else
+			target = n
+		while target isnt ideal_target and not target.el.style.whiteSpace
+			unless target?
+				console.log "bug #967123"
+				return
+			target = target.parent
+		ws = ws_props[target.el.style.whiteSpace]?.to_preserve
+		ws ?= 'pre-wrap'
+		target.el.style.whiteSpace = ws
+		@update_style_from_el target
+		return ws
+	update_style_from_el: (n) ->
+		style = n.el.getAttribute 'style'
+		if style?
+			n.attrs.style = style
+		else
+			if n.attrs.style?
+				delete n.attrs.style
+	# 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) ->
+		if @is_display_block n
+			block = n
+		else
+			block = @find_block_parent n
+			return unless block?
+		run = @get_text_run block
+		return unless run?
+		# merge consecutive text nodes
+		if run.length > 1
+			i = 1
+			prev = run[0]
+			while i < run.length
+				n = run[i]
+				if prev.type is 'text' and n.type is 'text'
+					if prev.parent is n.parent
+						prev_i = n.parent.children.indexOf prev
+						n_i =    n.parent.children.indexOf n
+						if n_i is prev_i + 1
+							prev.text = prev.text + n.text
+							prev.el.textContent = prev.text
+							@remove_node n
+							run.splice i, 1
+							continue # don't increment i or change prev
+				i += 1
+				prev = n
+		# remove empty text nodes
+		i = 0
+		while i < run.length
+			n = run[i]
+			if n.type is 'text'
+				if n.text is ''
+					@remove_node n
+					# FIXME maybe remove parents recursively if this makes them empty
+					run.splice i, 1
+					continue # don't increment i
+			i += 1
+		# note: inline tags can have white-space:pre-line/etc
+		# note: inline-blocks have their whitespace collapsed independantly of outer run
+		# note: inline-blocks are treated like non-whitespace char even if empty
+		if block.el.style.whiteSpace?
+			ws = block.el.style.whiteSpace
+			if ws_props[ws]
+				if ws_props[ws].space
+					if ws_props[ws].to_collapse is 'normal'
+						block.el.style.whiteSpace = null
+					else
+						block.el.style.whiteSpace = ws_props[ws].to_collapse
+					@update_style_from_el block
+		# note: space after <br> colapses, but not space before
+		# check for spaces that would collapse without help
+		eats_start_sp = true # if the next node starts with space it collapses (unless pre)
+		prev = null
+		for n in run
+			if n.type is 'tag'
+				if n.name is 'br'
+					eats_start_sp = true
+				else
+					eats_start_sp = false
+			else # TEXT
+				need_preserve = false
+				if n.type isnt 'text'
+					console.log "bug #232308"
+					return
+				if eats_start_sp
+					if is_space_code n.text.charCodeAt 0
+						need_preserve = true
+				unless need_preserve
+					need_preserve = multi_sp_regex.test n.text
+				if need_preserve
+					# do we have it already?
+					ws = @computed_style n, 'white-space' # FIXME implement this
+					unless ws_props[ws]?.space
+						# 2nd arg is ideal target for css rule
+						ws = @preserve_space n, block
+					eats_start_sp = false
+				else
+					if is_space_code n.text.charCodeAt(n.text.length - 1)
+						ws = @computed_style n, 'white-space' # FIXME implement this
+						if ws_props[ws]?.space
+							eats_start_sp = false
+						else
+							eats_start_sp = true
+					else
+						eats_start_sp = false
+		# check if text ends with a collapsable space
+		if run.length > 0
+			last = run[run.length - 1]
+			if last.type is 'text'
+				if eats_start_sp
+					@preserve_space last, block
+		return
+	css_clear: (n, prop) ->
+		return unless n.attrs.style?
+		return if n.attrs.style is ''
+		css_delimiter_regex = new RegExp('\s*;\s*', 'g') # FIXME make this global
+		styles = n.attrs.style.trim().split css_delimiter
+		return unless styles.length > 0
+		if styles[styles.length - 1] is ''
+			styles.pop()
+			return unless styles.length > 0
+		i = 0
+		while i < styles.length
+			if styles[i].substr(0, 12) is 'white-space:'
+				styles.splice i, 1
+			else
+				i += 1
+		return
+	# 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"
+			insert_before = insert_before.el
+		@remove_node n
+		if 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
+			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
@@ -1107,22 +1629,22 @@ 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) ->
-		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
@@ -1142,7 +1664,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