Fixes to pasting html content

baseline/Editor.js

@@ -92,7 +92,6 @@ Editor.prototype.onblockchange = function (i, new_block)
 		this.update_document({
 			blocks: blocks.slice(0, i).concat(blocks.slice(i+1))
 		})
-		this.render()
 	}
 }
 
@@ -105,6 +104,7 @@ Editor.prototype.set_document = function (doc)
 {
 	this.document = doc
 	this.changes.push(this.document)
+  this.render()
 
 	if (this.ondocumentchange)
 	{

baseline/Parser.js

@@ -22,7 +22,7 @@ Parser.prototype.parse_html = function (document, html)
 {
 	var div = document.createElement('div')
 	div.innerHTML = html
-	return this.parse_dom(div.childNodes[0])
+	return this.parse_dom(div)
 }
 
 Parser.prototype.parse_dom = function (dom_node)

baseline/Renderer.js

@@ -16,8 +16,7 @@ BlockThunk.prototype.render = function (previous)
 	{
 		return this.vnode
 	}
-	else if (previous && previous.vnode && 
-		previous.block == this.block)
+	else if (previous && previous.vnode && previous.block == this.block)
 	{
 		this.vnode = previous.vnode
 		return previous.vnode

baseline/blocks/Block.js

@@ -180,7 +180,7 @@ module.exports = Model(
 			new_blocks,
 			new_point
 
-		if (blocks)
+		if (blocks && blocks.length > 0)
 		{
 			new_blocks = blocks[0].append_to(start_block)
 

baseline/commands/insert_block.js

@@ -3,21 +3,25 @@
 var delete_range = require('./delete_range'),
 	Point = require('../selection/Point')
 
-module.exports = function (editor)
+module.exports = function (editor, new_blocks)
 {
 	if (!editor.range.is_collapsed())
 	{
 		delete_range(editor)
 	}
 
+	new_blocks = new_blocks || []
+
 	var range = editor.range,
 		blocks = editor.document.blocks
 
-	var result = blocks[range.start.block].insert(range.start)
+	var result = blocks[range.start.block].insert(range.start, new_blocks)
 	editor.update_document(
 	{
 		blocks: blocks.slice(0, range.start.block)
-					.concat(result.blocks)
+					.concat([result.blocks[0]])
+					.concat(new_blocks.slice(1))
+					.concat([result.blocks[1]])
 					.concat(
 						blocks.slice(range.start.block+1)
 					)

baseline/commands/paste.js

@@ -1,8 +1,9 @@
 "use strict"
 
-var paste = require('../paste'),
-	Point = require('../selection/Point'),
-	vdom = require('../vdom')
+var paste = require('../paste')
+var Point = require('../selection/Point')
+var vdom = require('../vdom')
+var insert_block = require('./insert_block')
 
 module.exports = function (editor, event)
 {
@@ -19,7 +20,7 @@ function get_vtree(editor, event)
 	{
 		var handler = paste[k],
 			content = handler.detect(event)
-			
+
 		if (content)
 		{
 			return handler.transform(editor.dom_document, content)
@@ -29,28 +30,12 @@ function get_vtree(editor, event)
 
 function insert_blocks_from_vtree(editor, vtree)
 {
+	var blocks = editor.document.blocks
+	var range = editor.range
 	var new_blocks = editor.parser.parse_vtree(vtree)
 
 	if (new_blocks && new_blocks.length > 0)
 	{
-		var blocks = editor.document.blocks,
-			boundary_block = blocks[editor.range.start.block],
-			split = boundary_block.insert(editor.range.start, new_blocks)
-
-		editor.update_document(
-		{
-			blocks: blocks
-						.slice(0, editor.range.start.block)
-						.concat(split.blocks)
-						.concat(
-							blocks.slice(editor.range.start.block + 1)
-						)
-		})
-
-		editor.range = editor.range.update(
-		{
-			start: split.point,
-			end: split.point
-		})
+		insert_block(editor, new_blocks)
 	}
 }

baseline/defaults.js

@@ -20,8 +20,8 @@ var annotation_types_by_name = {
 		}),
 		italic: new AnnotationType({
 			rank: 20,
-			tag: 'EM',
-			tag_aliases: new Set(['I'])
+			tag: 'I',
+			tag_aliases: new Set(['EM'])
 		}),
 		underline: new AnnotationType({
 			rank: 30,

baseline/paste/google_doc.js

@@ -1,13 +1,17 @@
 "use strict"
 
-var vdom = require('../vdom'),
-	h = vdom.h
+var vdom = require('../vdom')
 
 module.exports = 
 {
 	detect: function (event)
 	{
-		if (-1 < event.clipboardData.types.indexOf('application/x-vnd.google-docs'))
+		var is_google = event.clipboardData.types.some(function (x)
+		{
+			return (-1 < x.indexOf('application/x-vnd.google-docs'))
+		})
+
+		if (is_google)
 		{
 			return event.clipboardData.getData('text/html')
 		}
@@ -25,116 +29,6 @@ module.exports =
 	{
 		var root = document.createElement('div')
 		root.innerHTML = content
-
-		var context = 
-		{
-			roots: [],
-			children: [],
-			wrapper: null
-		}
-
-		parse_children(context, root.querySelector(':scope > b'))
-		push_paragraph(context)
-
-		return h('div', context.roots)
-	}
-}
-
-function parse(context, node)
-{
-	if (node.nodeType == 3) // text
-	{
-		context.children.push(node.nodeValue)
+		return vdom.parse(root.querySelector(':scope > b'))
 	}
-	else if (node.nodeType == 1) // Element
-	{
-		if (node.tagName == 'P')
-		{
-			parse_children(context, node)
-		}
-		else if (node.tagName == 'IMG')
-		{
-			push_paragraph(context)
-			context.roots.push(
-				h('figure',
-					h(
-						'img', 
-						{
-							src: node.src, 
-							width: node.width, 
-							height: node.height, 
-							alt: node.alt 
-						}
-					)
-				)
-			)
-		}
-		else if (node.tagName == 'SPAN')
-		{
-			var styles = [],
-				children = Array.prototype.slice.apply(node.childNodes).map(parse)
-
-			if (node.style.fontWeight == 'bold')
-			{
-				styles.push('strong')
-			}
-			if (node.style.fontStyle == 'italic')
-			{
-				styles.push('em')
-			}
-			if (node.style.textDecoration == 'underline')
-			{
-				styles.push('underline')
-			}
-
-			if (styles.length > 0)
-			{
-				var root = h(styles.pop()),
-					cur = root
-				for (var i=1; i<styles.length; i++)
-				{
-					cur.children.push(h(styles.pop()))
-					cur = cur.children[0]
-				}
-				var old_children = context.children
-				context.children = []
-				parse_children(context, children)
-				cur.children = context.children
-				old_children.push(root)
-				context.children = old_children
-			}
-			else
-			{
-				parse_children(context, node)
-			}
-		}
-	}
-}
-
-function push_paragraph(context)
-{
-	if (context.children.length > 0)
-	{
-		var children
-
-		if (context.wrapper)
-		{
-			context.wrapper.children = context.children
-			children = [ context.wrapper ]
-			context.wrapper = null
-			context.children = []
-		}
-		else
-		{
-			children = context.children
-			context.children = []
-		}
-
-		context.roots.push(h('p', children))
-	}
-}
-
-function parse_children(context, node)
-{
-	Array.prototype.slice.apply(node.childNodes).forEach(parse.bind(null, context))
 }

baseline/vdom/model.js

@@ -12,7 +12,12 @@ var VirtualNode = Model(
 
 var VirtualText = Model.extend(VirtualNode,
 {
-	text: ''
+	text: '',
+
+    to_html: function ()
+    {
+        return this.text
+    }
 })
 
 var prop_attr_map = {
@@ -80,7 +85,57 @@ var VirtualElement = Model.extend(VirtualNode,
 				return this.properties.attributes[name]
 			}
 		}
-	}
+	},
+
+    to_html: function ()
+    {
+        var html = '<' + this.tag.toLowerCase()
+
+        if (this.properties.attributes)
+        {
+            var attrs = this.properties.attributes,
+                keys = Object.keys(attrs)
+
+            if (keys.length > 0)
+            {
+                html += ' ' + keys.map(function (k)
+                {
+                    return k+'="'+attrs[k]+'"'
+                }).join(' ')
+            }
+        }
+
+        if (this.properties.style)
+        {
+            var styles = this.properties.styles,
+                keys = Object.keys(attrs)
+
+            if (keys.length > 0)
+            {
+                html += ' style="'
+                html += keys.map(function (k)
+                {
+                    return 'k:'+styles[k]
+                }).join(';')
+            }
+        }
+
+        html += '>'
+
+        html += this.children.map(function (c)
+        {
+            if (c.vnode)
+            {
+                return c.vnode.to_html()
+            }
+            else
+            {
+                return c.to_html()
+            }
+        }).join('')
+
+        return html + '</'+ this.tag.toLowerCase() +'>'
+    }
 })
 
 module.exports = 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseline-edit",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "baseline",
   "description": "More saner rich text editing for the web",
   "scripts": {