From 04e91245cbb831fc45cec0d2186cdb9137073fa6 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Sat, 9 Jun 2012 18:36:32 +0100
Subject: [PATCH] Refactored macro mechanism

Now there is now longer a dummy DOM element corresponding to the macro
itself. Instead, macros must create a single element child. This allows
us to more easily fit Bootstrap's requirements for HTML layout (eg,
that problem with links in navbars not being recognised). The
refactoring isn't complete, there are still a few bugs to chase down
---
 core/modules/macros/button.js                 |  5 +-
 core/modules/macros/chooser.js                |  2 +-
 core/modules/macros/comment.js                |  2 +-
 core/modules/macros/download.js               |  5 +-
 core/modules/macros/echo.js                   |  2 +-
 core/modules/macros/edit/edit.js              | 27 +++----
 .../macros/edit/editors/bitmapeditor.js       | 32 ++++-----
 .../modules/macros/edit/editors/texteditor.js | 18 ++---
 core/modules/macros/image.js                  | 13 ++--
 core/modules/macros/include.js                |  6 +-
 core/modules/macros/link.js                   | 15 ++--
 core/modules/macros/list.js                   | 10 ++-
 core/modules/macros/slider.js                 | 27 +++----
 core/modules/macros/story/story.js            | 11 +--
 core/modules/macros/tiddler.js                | 19 ++---
 core/modules/macros/version.js                |  2 +-
 core/modules/macros/video.js                  | 14 ++--
 core/modules/macros/view.js                   | 16 ++---
 core/modules/macros/zoomer.js                 |  2 +-
 core/modules/treenodes/element.js             | 11 ---
 core/modules/treenodes/macro.js               | 71 +++++--------------
 core/modules/treenodes/node.js                |  7 --
 22 files changed, 134 insertions(+), 183 deletions(-)

diff --git a/core/modules/macros/button.js b/core/modules/macros/button.js
index 6f12abcc2..e31036f1b 100644
--- a/core/modules/macros/button.js
+++ b/core/modules/macros/button.js
@@ -40,7 +40,10 @@ exports.executeMacro = function() {
 	if(this.hasParameter("class")) {
 		attributes["class"] = this.params["class"].split(" ");
 	}
-	return [$tw.Tree.Element("button",attributes,[$tw.Tree.Text(this.params.label)])];
+	if(this.classes) {
+		$tw.utils.pushTop(attributes["class"],this.classes);
+	}
+	return $tw.Tree.Element("button",attributes,[$tw.Tree.Text(this.params.label)]);
 };
 
 })();
diff --git a/core/modules/macros/chooser.js b/core/modules/macros/chooser.js
index 8a217d788..ef1ee78c4 100644
--- a/core/modules/macros/chooser.js
+++ b/core/modules/macros/chooser.js
@@ -149,7 +149,7 @@ exports.handleEvent = function(event) {
 
 exports.executeMacro = function() {
 	this.chooserDisplayed = false;
-	return [];
+	return $tw.Tree.Element("div",{},[]);
 };
 
 })();
diff --git a/core/modules/macros/comment.js b/core/modules/macros/comment.js
index ed3c77fa5..bf4194db4 100644
--- a/core/modules/macros/comment.js
+++ b/core/modules/macros/comment.js
@@ -18,7 +18,7 @@ exports.info = {
 };
 
 exports.executeMacro = function() {
-	return [];
+	return null;
 };
 
 
diff --git a/core/modules/macros/download.js b/core/modules/macros/download.js
index 0f9416974..8d0586fe0 100644
--- a/core/modules/macros/download.js
+++ b/core/modules/macros/download.js
@@ -47,7 +47,10 @@ exports.executeMacro = function() {
 	} else {
 		content.push($tw.Tree.Text("Download \"" + this.downloadFilename + "\""));
 	}
-	return [$tw.Tree.Element("button",attributes,content)];
+	if(this.classes) {
+		attributes["class"] = this.classes.slice(0);
+	}
+	return $tw.Tree.Element("button",attributes,content);
 };
 
 })();
diff --git a/core/modules/macros/echo.js b/core/modules/macros/echo.js
index 0eafd79f2..713d4ed32 100644
--- a/core/modules/macros/echo.js
+++ b/core/modules/macros/echo.js
@@ -20,7 +20,7 @@ exports.info = {
 };
 
 exports.executeMacro = function() {
-	return [$tw.Tree.Text(this.params.text)];
+	return $tw.Tree.Text(this.params.text);
 };
 
 
diff --git a/core/modules/macros/edit/edit.js b/core/modules/macros/edit/edit.js
index 3c3debd90..a71e80d76 100644
--- a/core/modules/macros/edit/edit.js
+++ b/core/modules/macros/edit/edit.js
@@ -35,11 +35,9 @@ exports.executeMacro = function() {
 	}
 	this.editor = new Editor(this);
 	// Call the editor to generate the child nodes
-	var children = this.editor.getChildren();
-	for(var t=0; t<children.length; t++) {
-		children[t].execute(this.parents,this.tiddlerTitle);
-	}
-	return children;
+	var child = this.editor.getChild();
+	child.execute(this.parents,this.tiddlerTitle);
+	return child;
 };
 
 exports.addEventHandlers = function() {
@@ -60,22 +58,19 @@ exports.refreshInDom = function(changes) {
 	if(this.dependencies.hasChanged(changes,this.tiddlerTitle)) {
 		// Only refresh if the editor lets us
 		if(this.editor.isRefreshable()) {
-			// Remove the previous children
-			while(this.domNode.hasChildNodes()) {
-				this.domNode.removeChild(this.domNode.firstChild);
-			}
-			// Execute the new children
+			// Remove the previous child
+			var parent = this.child.domNode.parentNode,
+				nextSibling = this.child.domNode.nextSibling;
+			parent.removeChild(this.child.domNode);
+			// Execute the macro
 			this.execute(this.parents,this.tiddlerTitle);
 			// Render to the DOM
-			for(t=0; t<this.children.length; t++) {
-				this.children[t].renderInDom(this.domNode);
-			}
+			this.child.renderInDom(parent,nextSibling);
+			this.addEventHandlers();
 		}
 	} else {
 		// Refresh any children
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].refreshInDom(changes);
-		}
+		this.child.refreshInDom(changes);
 	}
 };
 
diff --git a/core/modules/macros/edit/editors/bitmapeditor.js b/core/modules/macros/edit/editors/bitmapeditor.js
index 21f9565df..50d8c17e8 100644
--- a/core/modules/macros/edit/editors/bitmapeditor.js
+++ b/core/modules/macros/edit/editors/bitmapeditor.js
@@ -16,18 +16,18 @@ function BitmapEditor(macroNode) {
 	this.macroNode = macroNode;
 }
 
-BitmapEditor.prototype.getChildren = function() {
-	return [$tw.Tree.Element("canvas",{
+BitmapEditor.prototype.getChild = function() {
+	return $tw.Tree.Element("canvas",{
 		"class": ["tw-edit-field"]
-	},[])];
+	},[]);
 };
 
 BitmapEditor.prototype.postRenderInDom = function() {
 	var tiddler = this.macroNode.wiki.getTiddler(this.macroNode.tiddlerTitle),
-		canvas = this.macroNode.children[0].domNode,
+		canvas = this.macroNode.child.domNode,
 		currImage = new Image();
-	// Set the macro node itself to be position: relative
-	this.macroNode.domNode.style.position = "relative";
+/////////////////////	// Set the macro node itself to be position: relative
+/////////////////////	this.macroNode.domNode.style.position = "relative";
 	// Get the current bitmap into an image object
 	currImage.src = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
 	// Copy it to the on-screen canvas
@@ -45,14 +45,14 @@ BitmapEditor.prototype.postRenderInDom = function() {
 
 BitmapEditor.prototype.addEventHandlers = function() {
 	var self = this;
-	this.macroNode.domNode.addEventListener("touchstart",function(event) {
+	this.macroNode.child.domNode.addEventListener("touchstart",function(event) {
 			self.brushDown = true;
 			self.strokeStart(event.touches[0].clientX,event.touches[0].clientY);
 			event.preventDefault();
 			event.stopPropagation();
 			return false;
 		},false);
-	this.macroNode.domNode.addEventListener("touchmove",function(event) {
+	this.macroNode.child.domNode.addEventListener("touchmove",function(event) {
 			if(self.brushDown) {
 				self.strokeMove(event.touches[0].clientX,event.touches[0].clientY);
 			}
@@ -60,7 +60,7 @@ BitmapEditor.prototype.addEventHandlers = function() {
 			event.stopPropagation();
 			return false;
 		},false);
-	this.macroNode.domNode.addEventListener("touchend",function(event) {
+	this.macroNode.child.domNode.addEventListener("touchend",function(event) {
 			if(self.brushDown) {
 				self.brushDown = false;
 				self.strokeEnd();
@@ -69,14 +69,14 @@ BitmapEditor.prototype.addEventHandlers = function() {
 			event.stopPropagation();
 			return false;
 		},false);
-	this.macroNode.domNode.addEventListener("mousedown",function(event) {
+	this.macroNode.child.domNode.addEventListener("mousedown",function(event) {
 			self.strokeStart(event.clientX,event.clientY);
 			self.brushDown = true;
 			event.preventDefault();
 			event.stopPropagation();
 			return false;
 		},false);
-	this.macroNode.domNode.addEventListener("mousemove",function(event) {
+	this.macroNode.child.domNode.addEventListener("mousemove",function(event) {
 			if(self.brushDown) {
 				self.strokeMove(event.clientX,event.clientY);
 				event.preventDefault();
@@ -84,7 +84,7 @@ BitmapEditor.prototype.addEventHandlers = function() {
 				return false;
 			}
 		},false);
-	this.macroNode.domNode.addEventListener("mouseup",function(event) {
+	this.macroNode.child.domNode.addEventListener("mouseup",function(event) {
 			if(self.brushDown) {
 				self.brushDown = false;
 				self.strokeEnd();
@@ -97,7 +97,7 @@ BitmapEditor.prototype.addEventHandlers = function() {
 };
 
 BitmapEditor.prototype.adjustCoordinates = function(x,y) {
-	var canvas = this.macroNode.children[0].domNode,
+	var canvas = this.macroNode.child.domNode,
 		canvasRect = canvas.getBoundingClientRect(),
 		scale = canvas.width/canvasRect.width;
 	return {x: (x - canvasRect.left) * scale, y: (y - canvasRect.top) * scale};
@@ -109,7 +109,7 @@ BitmapEditor.prototype.strokeStart = function(x,y) {
 };
 
 BitmapEditor.prototype.strokeMove = function(x,y) {
-	var canvas = this.macroNode.children[0].domNode,
+	var canvas = this.macroNode.child.domNode,
 		ctx = canvas.getContext("2d"),
 		t;
 	// Add the new position to the end of the stroke
@@ -134,7 +134,7 @@ BitmapEditor.prototype.strokeMove = function(x,y) {
 
 BitmapEditor.prototype.strokeEnd = function() {
 	// Copy the bitmap to the off-screen canvas
-	var canvas = this.macroNode.children[0].domNode,
+	var canvas = this.macroNode.child.domNode,
 		ctx = this.currCanvas.getContext("2d");
 	ctx.drawImage(canvas,0,0);
 	// Save the image into the tiddler
@@ -145,7 +145,7 @@ BitmapEditor.prototype.saveChanges = function() {
 	var tiddler = this.macroNode.wiki.getTiddler(this.macroNode.tiddlerTitle);
 	if(tiddler) {
 		// data URIs look like "data:<type>;base64,<text>"
-		var dataURL = this.macroNode.children[0].domNode.toDataURL(tiddler.fields.type,1.0),
+		var dataURL = this.macroNode.child.domNode.toDataURL(tiddler.fields.type,1.0),
 			posColon = dataURL.indexOf(":"),
 			posSemiColon = dataURL.indexOf(";"),
 			posComma = dataURL.indexOf(","),
diff --git a/core/modules/macros/edit/editors/texteditor.js b/core/modules/macros/edit/editors/texteditor.js
index 2c10c56a5..bdfd160a9 100644
--- a/core/modules/macros/edit/editors/texteditor.js
+++ b/core/modules/macros/edit/editors/texteditor.js
@@ -16,7 +16,7 @@ function TextEditor(macroNode) {
 	this.macroNode = macroNode;
 }
 
-TextEditor.prototype.getChildren = function() {
+TextEditor.prototype.getChild = function() {
 	var tiddler = this.macroNode.wiki.getTiddler(this.macroNode.tiddlerTitle),
 		field = this.macroNode.hasParameter("field") ? this.macroNode.params.field : "title",
 		value;
@@ -48,12 +48,12 @@ TextEditor.prototype.getChildren = function() {
 		attributes.type = "text";
 		attributes.value = value;
 	}
-	return [$tw.Tree.Element(tagName,attributes,content)];
+	return $tw.Tree.Element("div",{},[$tw.Tree.Element(tagName,attributes,content)]);
 };
 
 TextEditor.prototype.addEventHandlers = function() {
-	this.macroNode.domNode.addEventListener("focus",this,false);
-	this.macroNode.domNode.addEventListener("keyup",this,false);
+	this.macroNode.child.domNode.addEventListener("focus",this,false);
+	this.macroNode.child.domNode.addEventListener("keyup",this,false);
 };
 
 TextEditor.prototype.handleEvent = function(event) {
@@ -70,7 +70,7 @@ TextEditor.prototype.handleEvent = function(event) {
 };
 
 TextEditor.prototype.saveChanges = function() {
-	var text = this.macroNode.children[0].domNode.value,
+	var text = this.macroNode.child.children[0].domNode.value,
 		tiddler = this.macroNode.wiki.getTiddler(this.macroNode.tiddlerTitle);
 	if(tiddler && text !== tiddler.fields[this.macroNode.params.field]) {
 		var update = {};
@@ -80,9 +80,9 @@ TextEditor.prototype.saveChanges = function() {
 };
 
 TextEditor.prototype.fixHeight = function() {
-	if(this.macroNode.children[0] && this.macroNode.children[0].domNode) {
-		var wrapper = this.macroNode.domNode,
-			textarea = this.macroNode.children[0].domNode;
+	if(this.macroNode.child && this.macroNode.child.domNode) {
+		var wrapper = this.macroNode.child.domNode,
+			textarea = this.macroNode.child.children[0].domNode;
 		// Set the text area height to 1px temporarily, which allows us to read the true scrollHeight
 		var prevWrapperHeight = wrapper.style.height;
 		wrapper.style.height = textarea.style.height + "px";
@@ -99,7 +99,7 @@ TextEditor.prototype.postRenderInDom = function() {
 
 TextEditor.prototype.isRefreshable = function() {
 	// Don't refresh the editor if it contains the caret or selection
-	return document.activeElement !== this.macroNode.children[0].domNode;
+	return document.activeElement !== this.macroNode.child.children[0].domNode;
 };
 
 exports["text/x-tiddlywiki"] = TextEditor;
diff --git a/core/modules/macros/image.js b/core/modules/macros/image.js
index 1c7e00d38..056741f5d 100644
--- a/core/modules/macros/image.js
+++ b/core/modules/macros/image.js
@@ -24,24 +24,21 @@ exports.info = {
 exports.executeMacro = function() {
 	if(this.wiki.tiddlerExists(this.params.src)) {
 		var imageTree = this.wiki.parseTiddler(this.params.src).tree,
-			cloneImage = [];
-		for(var t=0; t<imageTree.length; t++) {
-			cloneImage.push(imageTree[t].clone());
-		}
+			cloneImage = imageTree[0].clone();
 		if(this.params.text) {
-			return [$tw.Tree.Element("div",{
+			return $tw.Tree.Element("div",{
 					alt: this.params.text,
 					title: this.params.text
-				},cloneImage)];
+				},[cloneImage]);
 		} else {
 			return cloneImage;	
 		}
 	} else {
-		return [$tw.Tree.Element("img",{
+		return $tw.Tree.Element("img",{
 			src: this.params.src,
 			alt: this.params.text,
 			title: this.params.text
-		})];
+		});
 	}
 };
 
diff --git a/core/modules/macros/include.js b/core/modules/macros/include.js
index e79bff0ce..1f7bd61e4 100644
--- a/core/modules/macros/include.js
+++ b/core/modules/macros/include.js
@@ -42,11 +42,11 @@ exports.executeMacro = function() {
 				result.push(this.wiki.serializeTiddler(titles[t],as));
 			}
 		}
-		return [$tw.Tree.Element("pre",{},[
+		return $tw.Tree.Element("pre",{},[
 				$tw.Tree.Text(result.join("\n"))
-			])];
+			]);
 	}
-	return [];
+	return null;
 };
 
 
diff --git a/core/modules/macros/link.js b/core/modules/macros/link.js
index 97def2258..0ae02132e 100644
--- a/core/modules/macros/link.js
+++ b/core/modules/macros/link.js
@@ -72,17 +72,18 @@ exports.executeMacro = function() {
 			linkInfo.attributes["class"].push("tw-tiddlylink-resolves");
 		}
 	}
+	if(this.classes) {
+		$tw.utils.pushTop(linkInfo.attributes["class"],this.classes);
+	}
 	// Create the link
-	var children;
+	var child;
 	if(linkInfo.suppressLink) {
-		children = this.content;
+		child = $tw.Tree.Element("span",{},this.content);
 	} else { 
-		children = [$tw.Tree.Element("a",linkInfo.attributes,this.content)];
+		child = $tw.Tree.Element("a",linkInfo.attributes,this.content);
 	}
-	for(var t=0; t<children.length; t++) {
-		children[t].execute(this.parents,this.tiddlerTitle);
-	}
-	return children;
+	child.execute(this.parents,this.tiddlerTitle);
+	return child;
 };
 
 })();
diff --git a/core/modules/macros/list.js b/core/modules/macros/list.js
index 62705d47c..8ca9e5f80 100644
--- a/core/modules/macros/list.js
+++ b/core/modules/macros/list.js
@@ -52,7 +52,8 @@ exports.executeMacro = function() {
 		template = this.params.template ? this.wiki.getTiddler(this.params.template) : null,
 		children = [],
 		t,
-		parents = this.parents;
+		parents = this.parents,
+		attributes = {};
 	if(template) {
 		parents = parents.slice(0);
 		parents.push(template.title);
@@ -62,8 +63,11 @@ exports.executeMacro = function() {
 	var handler = handlers[this.params.type];
 	handler = handler || handlers.all;
 	var tiddlers = handler(this.wiki);
+	if(this.classes) {
+		$tw.utils.pushTop(attributes["class"],this.classes);
+	}
 	if(tiddlers.length === 0) {
-		return [$tw.Tree.Text(this.params.emptyMessage || "")];
+		return $tw.Tree.Text(this.params.emptyMessage || "");
 	} else {
 		var templateTree = this.wiki.parseText(templateType,templateText).tree;
 		for(t=0; t<tiddlers.length; t++) {
@@ -75,7 +79,7 @@ exports.executeMacro = function() {
 			listNode.execute(parents,tiddlers[t]);
 			children.push(listNode);
 		}
-		return [$tw.Tree.Element("ul",null,children)];
+		return $tw.Tree.Element("ul",attributes,children);
 	}
 };
 
diff --git a/core/modules/macros/slider.js b/core/modules/macros/slider.js
index d704174d4..e34f1c96e 100644
--- a/core/modules/macros/slider.js
+++ b/core/modules/macros/slider.js
@@ -89,7 +89,7 @@ exports.getSliderChildren = function() {
 
 exports.handleEvent = function(event) {
 	if(event.type === "click") {
-		if(event.target === this.domNode.firstChild.firstChild) {
+		if(event.target === this.child.domNode.firstChild) {
 			this.isOpen = !this.isOpen;
 			if(!this.saveOpenState()) {
 				this.refreshInDom({});
@@ -115,6 +115,9 @@ exports.executeMacro = function() {
 	if(this.hasParameter("class")) {
 		attributes["class"].push(this.params["class"]);
 	}
+	if(this.classes) {
+		$tw.utils.pushTop(attributes["class"],this.classes);
+	}
 	if(this.hasParameter("state")) {
 		attributes["data-tw-slider-type"] = this.params.state;
 	}
@@ -122,7 +125,7 @@ exports.executeMacro = function() {
 		attributes.alt = this.params.tooltip;
 		attributes.title = this.params.tooltip;
 	}
-	var children = $tw.Tree.Element("span",
+	var child = $tw.Tree.Element("span",
 		attributes,
 		[
 			$tw.Tree.Element("a",
@@ -141,8 +144,8 @@ exports.executeMacro = function() {
 			)
 		]
 	);
-	children.execute(this.parents,this.tiddlerTitle);
-	return [children];
+	child.execute(this.parents,this.tiddlerTitle);
+	return child;
 };
 
 exports.refreshInDom = function(changes) {
@@ -152,22 +155,20 @@ exports.refreshInDom = function(changes) {
 		this.isOpen = this.getOpenState();
 	}
 	// Render the children if the slider is open and we don't have any children yet
-	if(this.isOpen && this.children[0].children[1].children.length === 0) {
+	if(this.isOpen && this.child.children[1].children.length === 0) {
 		// Remove the existing dom node for the body
-		this.children[0].domNode.removeChild(this.children[0].children[1].domNode);
+		this.child.domNode.removeChild(this.child.children[1].domNode);
 		// Get the slider children and execute it
-		this.children[0].children[1].children = this.getSliderChildren();
-		this.children[0].children[1].execute(this.parents,this.tiddlerTitle);
-		this.children[0].children[1].renderInDom(this.children[0].domNode,null);
+		this.child.children[1].children = this.getSliderChildren();
+		this.child.children[1].execute(this.parents,this.tiddlerTitle);
+		this.child.children[1].renderInDom(this.child.domNode,null);
 		needChildrenRefresh = false; // Don't refresh the children if we've just created them
 	}
 	// Set the visibility of the slider children
-	this.children[0].children[1].domNode.style.display = this.isOpen ? "block" : "none";
+	this.child.children[1].domNode.style.display = this.isOpen ? "block" : "none";
 	// Refresh any children
 	if(needChildrenRefresh) {
-		for(var t=0; t<this.children.length; t++) {
-			this.children[t].refreshInDom(changes);
-		}
+		this.child.refreshInDom(changes);
 	}
 };
 
diff --git a/core/modules/macros/story/story.js b/core/modules/macros/story/story.js
index 55857ed0c..b8430fdf1 100644
--- a/core/modules/macros/story/story.js
+++ b/core/modules/macros/story/story.js
@@ -158,7 +158,11 @@ exports.executeMacro = function() {
 		m.execute(this.parents,this.tiddlerTitle);
 		this.storyNode.children.push($tw.Tree.Element("div",{"class": "tw-story-element"},[m]));
 	}
-	return [this.contentNode,this.storyNode];
+	var attributes = {"class": []};
+	if(this.classes) {
+		$tw.utils.pushTop(attributes["class"],this.classes);
+	}
+	return $tw.Tree.Element("div",attributes,[this.contentNode,this.storyNode]);
 };
 
 exports.postRenderInDom = function() {
@@ -238,9 +242,8 @@ exports.refreshInDom = function(changes) {
 			this.storyNode.children.splice(story.tiddlers.length,this.storyNode.children.length-story.tiddlers.length);
 		}
 	} else {
-		// If our dependencies didn't change, just refresh the children
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].refreshInDom(changes);
+		if(this.child) {
+			this.child.refreshInDom(changes);
 		}
 	}
 	// Clear the details of the last navigation
diff --git a/core/modules/macros/tiddler.js b/core/modules/macros/tiddler.js
index d33b8dbf7..74395270d 100644
--- a/core/modules/macros/tiddler.js
+++ b/core/modules/macros/tiddler.js
@@ -124,7 +124,7 @@ exports.executeMacro = function() {
 		attributes["class"].push("tw-tiddler-missing");
 	}
 	// Return the children
-	return [$tw.Tree.Element("div",attributes,childrenClone)];
+	return $tw.Tree.Element("div",attributes,childrenClone);
 };
 
 exports.refreshInDom = function(changes) {
@@ -135,23 +135,18 @@ exports.refreshInDom = function(changes) {
 		renderTitle = this.params.template;
 	}
 	if(renderTitle) {
-		$tw.utils.toggleClass(this.children[0].domNode,"tw-tiddler-missing",!this.wiki.tiddlerExists(renderTitle));
+		$tw.utils.toggleClass(this.child.domNode,"tw-tiddler-missing",!this.wiki.tiddlerExists(renderTitle));
 	}
 	// Rerender the tiddler if it is impacted by the changes
 	if(this.dependencies.hasChanged(changes,this.tiddlerTitle)) {
 		// Manually reexecute and rerender this macro
-		while(this.domNode.hasChildNodes()) {
-			this.domNode.removeChild(this.domNode.firstChild);
-		}
+		var parent = this.child.domNode.parentNode,
+			nextSibling = this.child.domNode.nextSibling;
+		parent.removeChild(this.child.domNode);
 		this.execute(this.parents,this.tiddlerTitle);
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].renderInDom(this.domNode);
-		}
+		this.child.renderInDom(parent,nextSibling);
 	} else {
-		// Refresh any children
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].refreshInDom(changes);
-		}
+		this.child.refreshInDom(changes);
 	}
 };
 
diff --git a/core/modules/macros/version.js b/core/modules/macros/version.js
index 1a96564fc..22fb98370 100644
--- a/core/modules/macros/version.js
+++ b/core/modules/macros/version.js
@@ -19,7 +19,7 @@ exports.info = {
 };
 
 exports.executeMacro = function() {
-	return [$tw.Tree.Text($tw.utils.getVersionString())];
+	return $tw.Tree.Text($tw.utils.getVersionString());
 };
 
 })();
diff --git a/core/modules/macros/video.js b/core/modules/macros/video.js
index 1112cbf65..88276ccbc 100644
--- a/core/modules/macros/video.js
+++ b/core/modules/macros/video.js
@@ -29,29 +29,29 @@ exports.executeMacro = function() {
 		videoHeight = this.params.height || 360;
 	switch(videoType) {
 		case "vimeo":
-			return [$tw.Tree.Element("iframe",{
+			return $tw.Tree.Element("iframe",{
 				src: "http://player.vimeo.com/video/" + src + "?autoplay=0",
 				width: videoWidth,
 				height: videoHeight,
 				frameborder: 0
-			})];
+			});
 		case "youtube":
-			return [$tw.Tree.Element("iframe",{
+			return $tw.Tree.Element("iframe",{
 				type: "text/html",
 				src: "http://www.youtube.com/embed/" + src,
 				width: videoWidth,
 				height: videoHeight,
 				frameborder: 0
-			})];
+			});
 		case "archiveorg":
-			return [$tw.Tree.Element("iframe",{
+			return $tw.Tree.Element("iframe",{
 				src: "http://www.archive.org/embed/" + src,
 				width: videoWidth,
 				height: videoHeight,
 				frameborder: 0
-			})];
+			});
 		default:
-			return [];
+			return null;
 	}
 };
 
diff --git a/core/modules/macros/view.js b/core/modules/macros/view.js
index 9b77d70de..938b6cc9d 100644
--- a/core/modules/macros/view.js
+++ b/core/modules/macros/view.js
@@ -52,7 +52,7 @@ exports.executeMacro = function() {
 	switch(this.params.format) {
 		case "link":
 			if(value === undefined) {
-				return [];
+				return $tw.Tree.Element("span",{},[]);
 			} else {
 				var link = $tw.Tree.Macro("link",{
 											srcParams: {to: value},
@@ -60,7 +60,7 @@ exports.executeMacro = function() {
 											wiki: this.wiki
 										});
 				link.execute(parents,this.tiddlerTitle);
-				return [link];
+				return $tw.Tree.Element("span",{},[link]);
 			}
 			break;
 		case "wikified":
@@ -81,13 +81,13 @@ exports.executeMacro = function() {
 			for(t=0; t<childrenClone.length; t++) {
 				childrenClone[t].execute(parents,this.tiddlerTitle);
 			}
-			return childrenClone;
+			return $tw.Tree.Element(this.isBlock ? "div" : "span",{},childrenClone);
 		case "date":
 			var template = this.params.template || "DD MMM YYYY";
 			if(value === undefined) {
-				return [];
+				return $tw.Tree.Element("span",{},[]);
 			} else {
-				return [$tw.Tree.Text($tw.utils.formatDateString(value,template))];
+				return $tw.Tree.Text($tw.utils.formatDateString(value,template));
 			}
 			break;
 		default: // "text"
@@ -96,12 +96,12 @@ exports.executeMacro = function() {
 				value = tiddler.getFieldString(field);
 			}
 			if(value === undefined || value === null) {
-				return [];
+				return $tw.Tree.Element("span",{},[]);
 			} else {
-				return [$tw.Tree.Text(value)];
+				return $tw.Tree.Text(value);
 			}
 	}
-	return [];
+	return $tw.Tree.Element("span",{},[]);
 };
 
 })();
diff --git a/core/modules/macros/zoomer.js b/core/modules/macros/zoomer.js
index b94d7739b..cd9432399 100644
--- a/core/modules/macros/zoomer.js
+++ b/core/modules/macros/zoomer.js
@@ -100,7 +100,7 @@ exports.handleEvent = function(event) {
 
 exports.executeMacro = function() {
 	this.inZoomer = false;
-	return [];
+	return $tw.Tree.Element("div",{},[]);
 };
 
 })();
diff --git a/core/modules/treenodes/element.js b/core/modules/treenodes/element.js
index 095936243..819d53240 100644
--- a/core/modules/treenodes/element.js
+++ b/core/modules/treenodes/element.js
@@ -133,17 +133,6 @@ Element.prototype.refreshInDom = function(changes) {
 	}
 };
 
-Element.prototype.broadcastEvent = function(event) {
-	if(this.children) {
-		for(var t=0; t<this.children.length; t++) {
-			if(!this.children[t].broadcastEvent(event)) {
-				return false;
-			}
-		}
-	}
-	return true;
-};
-
 Element.prototype.addClass = function(className) {
 	if(typeof this.attributes["class"] === "string") {
 		this.attributes["class"] = this.attributes["class"].split(" ");
diff --git a/core/modules/treenodes/macro.js b/core/modules/treenodes/macro.js
index d16cef368..a55438942 100644
--- a/core/modules/treenodes/macro.js
+++ b/core/modules/treenodes/macro.js
@@ -166,62 +166,31 @@ Macro.prototype.execute = function(parents,tiddlerTitle) {
 	// Save the context info for use when we're refreshing it
 	this.tiddlerTitle = tiddlerTitle;
 	this.parents = parents;
-	// Execute the macro to generate its children, and recursively execute them
-	this.children = this.executeMacro.call(this);
+	// Execute the macro to generate its node and children, and recursively execute them
+	this.child = this.executeMacro.call(this);
 };
 
 Macro.prototype.render = function(type) {
-	var output = [];
-	for(var t=0; t<this.children.length; t++) {
-		output.push(this.children[t].render(type));
-	}
-	return output.join("");
+	return this.child ? this.child.render(type) : "";
 };
 
 Macro.prototype.renderInDom = function(parentDomNode,insertBefore) {
-	// Create the wrapper node for the macro
-	var domNode = document.createElement(this.isBlock ? "div" : "span");
-	this.domNode = domNode;
-	if(insertBefore) {
-		parentDomNode.insertBefore(domNode,insertBefore);	
-	} else {
-		parentDomNode.appendChild(domNode);
+	if(this.child) {
+		this.child.renderInDom(parentDomNode,insertBefore);
+		this.addEventHandlers();
+		this.postRenderInDom();
 	}
-	// Add classes and some debugging information to it
-	if(this.classes) {
-		domNode.setAttribute("class",this.classes.join(" "));
-	}
-	domNode.setAttribute("data-tw-macro",this.macroName);
-	// Ask the macro to add event handlers to the node
-	this.addEventHandlers();
-	// Render the content of the macro
-	for(var t=0; t<this.children.length; t++) {
-		this.children[t].renderInDom(domNode);
-	}
-	this.postRenderInDom();
 };
 
 Macro.prototype.addEventHandlers = function() {
-	if(this.info.events) {
+	if(this.info.events && this.child) {
 		for(var t=0; t<this.info.events.length; t++) {
 			// Register this macro node to handle the event via the handleEvent() method
-			this.domNode.addEventListener(this.info.events[t],this,false);
+			this.child.domNode.addEventListener(this.info.events[t],this,false);
 		}
 	}
 };
 
-Macro.prototype.broadcastEvent = function(event) {
-	if(!this.handleEvent(event)) {
-		return false;
-	}
-	for(var t=0; t<this.children.length; t++) {
-		if(!this.children[t].broadcastEvent(event)) {
-			return false;
-		}
-	}
-	return true;
-};
-
 Macro.prototype.postRenderInDom = function() {
 	// Do nothing, individual macros can override
 };
@@ -234,9 +203,9 @@ Macro.prototype.refresh = function(changes) {
 		// Re-execute the macro if so
 		this.execute(this.parents,this.tiddlerTitle);
 	} else {
-		// Refresh any children
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].refresh(changes);
+		// Refresh the child node
+		if(this.child) {
+			this.child.refresh(changes);
 		}
 	}
 };
@@ -247,17 +216,15 @@ Macro.prototype.refreshInDom = function(changes) {
 	// Check if any of the dependencies of this macro node have changed
 	if(this.dependencies.hasChanged(changes,this.tiddlerTitle)) {
 		// Manually reexecute and rerender this macro
-		while(this.domNode.hasChildNodes()) {
-			this.domNode.removeChild(this.domNode.firstChild);
-		}
+		var parent = this.child.domNode.parentNode,
+			nextSibling = this.child.domNode.nextSibling;
+		parent.removeChild(this.child.domNode);
 		this.execute(this.parents,this.tiddlerTitle);
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].renderInDom(this.domNode);
-		}
+		this.child.renderInDom(parent,nextSibling);
+		this.addEventHandlers();
 	} else {
-		// Refresh any children
-		for(t=0; t<this.children.length; t++) {
-			this.children[t].refreshInDom(changes);
+		if(this.child) {
+			this.child.refreshInDom(changes);
 		}
 	}
 };
diff --git a/core/modules/treenodes/node.js b/core/modules/treenodes/node.js
index c98ccff21..512d88539 100644
--- a/core/modules/treenodes/node.js
+++ b/core/modules/treenodes/node.js
@@ -30,13 +30,6 @@ Node.prototype.clone = function() {
 	return this;
 };
 
-/*
-Fire an event at a node which is also broadcast to any child nodes
-*/
-Node.prototype.broadcastEvent = function(event) {
-	return true; // true means that the event wasn't handled by this node
-};
-
 /*
 Execute a node and derive its child nodes
 	parents: array of titles of each transcluded parent tiddler (used for detecting recursion)