X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=ec9f9f9331a7ecdb4384b32f9caec289ba82a5f3;hb=6a596f32f02d952a0d4f3f2a6a67d76c579790a6;hp=a0bd0a41d48864e6120bf7c2bfa90d4b56de99b8;hpb=5de51db974972ef00b21121b7472075c0222b551;p=peach-html5-editor.git

diff --git a/editor.coffee b/editor.coffee
index a0bd0a4..ec9f9f9 100644
--- a/editor.coffee
+++ b/editor.coffee
@@ -59,15 +59,19 @@ 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]'
 
 debug_dot_at = (doc, x, y) ->
 	return # disabled
@@ -318,8 +322,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
@@ -335,10 +339,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
@@ -350,7 +354,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
@@ -364,12 +368,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) ->
@@ -504,7 +508,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
@@ -559,21 +563,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 +596,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 +606,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?
@@ -930,7 +951,7 @@ class PeachHTML5Editor
 				return false unless @cursor?
 				return false unless @cursor.i < @cursor.n.text.length
 				@remove_character @cursor.n, @cursor.i
-				@adjust_whitespace_style @cursor.n
+				@text_cleanup @cursor.n
 				@changed()
 				new_cursor = new_cursor_position n: @cursor.n, i: @cursor.i
 				if new_cursor?
@@ -966,7 +987,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
@@ -1013,6 +1034,40 @@ 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
+			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) ->
+		if @is_display_block n
+			block = n
+		else
+			block = @find_block_parent n
+			return unless block?
+		ret = []
+		traverse_tree n.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
 	on_key_backspace: (e) ->
 		return false unless @cursor?
 		if @is_lone_space @cursor.n # false if it's not in a tag
@@ -1025,6 +1080,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?
@@ -1052,23 +1108,89 @@ 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 text chunk
+			# FIXME clean this up: use new code for text runs
+			# FIXME handle backspacing a <br> 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 <br> (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]
+					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 parent_i is 0
+				# no previous sibling to merge into, so instead move contents into parent
+				dest = parent
+				before = block
+			else
+				# 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
+					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
+				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
 			# 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
 					return
 			else
 				@remove_character @cursor.n, @cursor.i - 1
-			@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?
@@ -1192,6 +1314,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'
@@ -1209,47 +1332,7 @@ 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
+		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'
@@ -1275,10 +1358,9 @@ class PeachHTML5Editor
 				# n is only child
 				return true
 		return false
-	# after calling this, you MUST call changed() and adjust_whitespace_style()
+	# after calling this, you MUST call changed() and text_cleanup()
 	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
@@ -1293,16 +1375,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
@@ -1319,6 +1575,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