Fixed issues with inserting figure blocks

baseline/Editor.js

@@ -23,51 +23,88 @@ var Editor = function Editor(options)
 	this.onselectionchange = options.onselectionchange
 	this.dom_window = options.dom_window || window
 	this.dom_document = this.dom_window.document
-
-	this.container = options.container
-	this.container.contentEditable = true
-	this.container.addEventListener('keydown', this.keydown_handler.bind(this))
-	this.container.addEventListener('keypress', this.keypress_handler.bind(this))
-	this.container.addEventListener('keyup', this.keyup_handler.bind(this))
-	this.dom_document.addEventListener('copy', this.copy_handler.bind(this))
-	this.container.addEventListener('paste', this.paste_handler.bind(this))
-	this.container.addEventListener('click', this.click_handler.bind(this))
-	this.dom_document.addEventListener('selectionchange', this.selectionchange_handler.bind(this))
 	this.selection_changed = false
+	this.ignore_selection_change = false
+
+	this.bound_event_listeners = {
+		keydown: this.keydown_handler.bind(this),
+		keypress: this.keypress_handler.bind(this),
+		keyup: this.keyup_handler.bind(this),
+		copy: this.copy_handler.bind(this),
+		paste: this.paste_handler.bind(this),
+		click: this.click_handler.bind(this),
+		selectionchange: this.selectionchange_handler.bind(this)
+	}
+	this.container_events = ['keydown', 'keypress', 'keyup', 'paste', 'click']
+	this.document_events = ['copy', 'selectionchange']
 
 	this.parser = new Parser({
 		block_recognizers: defaults.block_recognizers,
 		annotation_types: defaults.annotation_types
 	})
 
+	this.commands = {}
+	Object.keys(defaults.commands).forEach(function (k)
+	{
+		this.commands[k] = defaults.commands[k]
+	}.bind(this))
+
+	this.set_container(options.container)
+}
+
+Editor.prototype.set_container = function (container)
+{
+	if (this.container)
+	{
+		this.remove_event_listeners()
+	}
+
+	this.container = container
+	this.container.contentEditable = true
+
+	this.add_event_listeners()
+
 	this.renderer = new Renderer({
 		container: this.container,
 		onblockchange: this.onblockchange.bind(this),
 		document: this.dom_document,
 		parser: this.parser
 	})
 
-	if (options.document)
-	{
-		this.document = options.document
-	}
-	else
-	{
-		this.document = new Document({
-			blocks: this.parser.parse_dom(this.container)
-		})
-	}
+	this.document = new Document({
+		blocks: this.parser.parse_dom(this.container)
+	})
 
 	this.changes = new ChangeTracker(this.document)
 
-	this.commands = {}
-	Object.keys(defaults.commands).forEach(function (k)
+	this.update_range_from_window()
+	this.render()
+}
+
+Editor.prototype.add_event_listeners = function ()
+{
+	this.container_events.forEach(function (k)
 	{
-		this.commands[k] = defaults.commands[k]
+		this.container.addEventListener(k, this.bound_event_listeners[k])
 	}.bind(this))
 
-	this.update_range_from_window()
-	this.render()
+	this.document_events.forEach(function (k)
+	{
+		this.dom_document.addEventListener(k, this.bound_event_listeners[k])
+	}.bind(this))
+}
+
+Editor.prototype.remove_event_listeners = function ()
+{
+	this.container_events.forEach(function (k)
+	{
+		this.container.removeEventListener(k, this.bound_event_listeners[k])
+	}.bind(this))
+
+	this.document_events.forEach(function (k)
+	{
+		this.dom_document.removeEventListener(k, this.bound_event_listeners[k])
+	}.bind(this))
 }
 
 Editor.prototype.render = function ()
@@ -224,6 +261,11 @@ Editor.prototype.keyup_handler = function (evt)
 
 Editor.prototype.selectionchange_handler = function (evt)
 {
+	if (this.ignore_selection_change)
+	{
+		return
+	}
+
 	this.selection_changed = true
 	this.update_range_from_window()
 

baseline/Model.js

@@ -36,13 +36,20 @@ Model.extend = function (parent, props)
 		new_props[k] = props[k]
 	})
 
-	return Model(new_props)
+	var model =  Model(new_props)
+	model._parent = parent
+	return model
 }
 
 Model.is_instance = function (inst, model)
 {
 	var child = inst.constructor
 
+	if (child === model)
+	{
+		return true
+	}
+
 	while (child._parent)
 	{
 		if (child._parent === model)

baseline/annotations/AnnotationTree.js

@@ -52,7 +52,7 @@ module.exports = Model(
 		return this.set(results)
 	},
 
-	filter: function ()
+	filter: function (fn)
 	{
 		var results = []
 		this.root.walk(function (ann)
@@ -65,12 +65,19 @@ module.exports = Model(
 		return this.set(results)
 	},
 
-	in_range: function (offset, length)
+	in_range: function (start, end)
 	{
-		return this.filter(function (ann)
+		var offset = start
+		var length = end - start
+		var matches = []
+		this.root.walk(function (ann)
 		{
-			return ann.overlaps(offset, length)
+			if (ann.overlaps(offset, length))
+			{
+				matches.push(ann)
+			}
 		})
+		return matches
 	},
 
 	remove: function (start, end)

baseline/blocks/FigureBlock.js

@@ -29,6 +29,7 @@ var FigureBlock = Model.extend(Block,
 					alt: this.alt,
 					width: this.width,
 					height: this.height,
+					contentEditable: true,
 					ondragstart: function (e)
 					{
 						e.preventDefault()
@@ -44,7 +45,7 @@ var FigureBlock = Model.extend(Block,
 		if (this.caption || this.attribution_name || this.attribution_url)
 		{
 			return h('figcaption', [
-				this.caption ? h('p', { className: 'caption' }, this.caption) : null,
+				this.caption ? h('p', { className: 'caption', contentEditable: true }, this.caption) : null,
 				this.render_attribution()
 			])
 		}
@@ -75,6 +76,11 @@ var FigureBlock = Model.extend(Block,
 				offset: 0
 			})
 		}
+	},
+
+	append_to: function (block)
+	{
+		return [block, this]
 	}
 })
 

baseline/commands/insert_block.js

@@ -16,6 +16,7 @@ module.exports = function (editor, new_blocks)
 		blocks = editor.document.blocks
 
 	var result = blocks[range.start.block].insert(range.start, new_blocks)
+
 	editor.update_document(
 	{
 		blocks: blocks.slice(0, range.start.block)

baseline/index.js

@@ -9,5 +9,7 @@ module.exports =
 	AnnotationType: require('./annotations/AnnotationType'),
 	Annotation: require('./annotations/Annotation'),
 	SimpleBlock: require('./blocks/SimpleBlock'),
-	ListBlock: require('./blocks/ListBlock')
+	ListBlock: require('./blocks/ListBlock'),
+	FigureBlock: require('./blocks/FigureBlock'),
+	Model: require('./Model')
 }

package.json

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