tiddlywiki 5.3.8 → 5.4.1

package/core/modules/widgets/action-createtiddler.js

@@ -79,14 +79,14 @@ CreateTiddlerWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	}
 	if(this.hasBase && this.actionOverwrite === "no") {
 		title = this.wiki.generateNewTitle(this.actionBaseTitle);
-	} else if (this.hasBase && this.actionOverwrite === "yes") {
-		title = this.actionBaseTitle
+	} else if(this.hasBase && this.actionOverwrite === "yes") {
+		title = this.actionBaseTitle;
 	}
 	// NO $basetitle BUT $template parameter is available
 	// the title MUST be unique, otherwise the template would be overwritten
-	if (!this.hasBase && this.useTemplate) {
+	if(!this.hasBase && this.useTemplate) {
 		title = this.wiki.generateNewTitle(this.actionTemplate);
-	} else if (!this.hasBase && !this.useTemplate) {
+	} else if(!this.hasBase && !this.useTemplate) {
 		// If no $basetitle and no $template then use initial title
 		title = this.wiki.generateNewTitle(title);
 	}

package/core/modules/widgets/action-listops.js

@@ -53,17 +53,15 @@ ActionListopsWidget.prototype.invokeAction = function(triggeringWidget,
 	event) {
 	//Apply the specified filters to the lists
 	var field = this.listField,
-		index,
-		list = this.listField;
+		index;
 	if(this.listIndex) {
 		field = undefined;
 		index = this.listIndex;
-		list = this.listIndex;
 	}
 	if(this.filter) {
 		this.wiki.setText(this.target, field, index, $tw.utils.stringifyList(
 			this.wiki
-			.filterTiddlers(this.filter, this)));
+				.filterTiddlers(this.filter, this)));
 	}
 	if(this.subfilter) {
 		var inputList = this.wiki.getTiddlerList(this.target,field,index),

package/core/modules/widgets/action-log.js

@@ -1,3 +1,4 @@
+ 
 /*\
 title: $:/core/modules/widgets/action-log.js
 type: application/javascript
@@ -32,7 +33,7 @@ LogWidget.prototype.execute = function(){
 	this.message = this.getAttribute("$$message","debug");
 	this.logAll = this.getAttribute("$$all","no") === "yes" ? true : false;
 	this.filter = this.getAttribute("$$filter");
-}
+};
 
 /*
 Refresh the widget by ensuring our attributes are up to date
@@ -51,23 +52,30 @@ LogWidget.prototype.invokeAction = function(triggeringWidget,event) {
 };
 
 LogWidget.prototype.log = function() {
-	var data = {},
+	var self = this,
+		data = {}, // Hashmap by attribute name with string or array of string values
 		dataCount,
-		allVars = {},
+		allVars = {}, // Hashmap by variable name with string or array of string values
 		filteredVars;
-
-	$tw.utils.each(this.attributes,function(attribute,name) {
+	// Collect the attributes to be logged
+	$tw.utils.each(this.parseTreeNode.attributes,function(attribute,name) {
 		if(name.substring(0,2) !== "$$") {
-			data[name] = attribute;
+			var resultList = self.computeAttribute(attribute,{asList: true});
+			if(resultList && resultList.length <= 1) {
+				data[name] = resultList[0] || "";
+			} else {
+				data[name] = resultList;
+			}
 		}
 	});
-
+	// Collect values of all variables, using the source text for functions
 	for(var v in this.variables) {
 		var variable = this.parentWidget && this.parentWidget.variables[v];
 		if(variable && variable.isFunctionDefinition) {
 			allVars[v] = variable.value;
 		} else {
-			allVars[v]  = this.getVariable(v,{defaultValue:""});
+			var variableInfo = this.getVariableInfo(v);
+			allVars[v] = variableInfo && variableInfo.resultList && variableInfo.resultList.length > 1 ? variableInfo.resultList : variableInfo.text;
 		}
 	}
 	if(this.filter) {
@@ -88,6 +96,6 @@ LogWidget.prototype.log = function() {
 		console.groupEnd();
 	}
 	console.groupEnd();
-}
+};
 
 exports["action-log"] = LogWidget;

package/core/modules/widgets/audio.js

@@ -0,0 +1,101 @@
+/*\
+title: $:/core/modules/widgets/audio.js
+type: application/javascript
+module-type: widget
+
+Basic Audio widget for displaying audio files.
+This is a simple implementation that can be overridden by plugins
+for more advanced functionality.
+
+\*/
+
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var AudioWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+AudioWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+AudioWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	this.execute();
+	
+	// Create audio element
+	var audioElement = this.document.createElement("audio");
+	audioElement.setAttribute("controls", this.getAttribute("controls", "controls"));
+	audioElement.setAttribute("style", this.getAttribute("style", "width: 100%; object-fit: contain"));
+	audioElement.className = "tw-audio-element";
+	
+	// Set source
+	if(this.audioSource) {
+		if(this.audioSource.indexOf("data:") === 0) {
+			audioElement.setAttribute("src", this.audioSource);
+		} else {
+			var sourceElement = this.document.createElement("source");
+			sourceElement.setAttribute("src", this.audioSource);
+			if(this.audioType) {
+				sourceElement.setAttribute("type", this.audioType);
+			}
+			audioElement.appendChild(sourceElement);
+		}
+	}
+	
+	// Insert the audio into the DOM
+	parent.insertBefore(audioElement, nextSibling);
+	this.domNodes.push(audioElement);
+};
+
+/*
+Compute the internal state of the widget
+*/
+AudioWidget.prototype.execute = function() {
+	// Get the audio source and type
+	this.audioSource = this.getAttribute("src");
+	this.audioType = this.getAttribute("type");
+	this.audioControls = this.getAttribute("controls", "controls");
+	
+	// Try to get from tiddler attribute
+	if(!this.audioSource && this.getAttribute("tiddler")) {
+		var tiddlerTitle = this.getAttribute("tiddler");
+		var tiddler = this.wiki.getTiddler(tiddlerTitle);
+		if(tiddler) {
+			if(tiddler.fields._canonical_uri) {
+				this.audioSource = tiddler.fields._canonical_uri;
+				this.audioType = tiddler.fields.type;
+			} else if(tiddler.fields.text) {
+				this.audioSource = "data:" + tiddler.fields.type + ";base64," + tiddler.fields.text;
+				this.audioType = tiddler.fields.type;
+			}
+		}
+	}
+	
+	// Make sure we have a tiddler for saving timestamps
+	this.tiddlerTitle = this.getAttribute("tiddler");
+};
+
+/*
+Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+*/
+AudioWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if(changedAttributes.src || changedAttributes.type || changedAttributes.controls || changedAttributes.tiddler) {
+		this.refreshSelf();
+		return true;
+	} else {
+		return false;
+	}
+};
+
+exports.audio = AudioWidget;
+
+

package/core/modules/widgets/browse.js

@@ -80,8 +80,8 @@ BrowseWidget.prototype.render = function(parent,nextSibling) {
 	});
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*

package/core/modules/widgets/button.js

@@ -9,6 +9,8 @@ Button widget
 
 "use strict";
 
+const ALLOWED_SELECTED_ARIA_ATTR = ["aria-checked", "aria-selected", "aria-pressed"];
+
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var Popup = require("$:/core/modules/utils/dom/popup.js");
@@ -44,9 +46,14 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	var classes = this["class"].split(" ") || [],
 		isPoppedUp = (this.popup || this.popupTitle) && this.isPoppedUp();
 	if(this.selectedClass) {
-		if((this.set || this.setTitle) && this.setTo && this.isSelected()) {
-			$tw.utils.pushTop(classes, this.selectedClass.split(" "));
-			domNode.setAttribute("aria-checked", "true");
+		if((this.set || this.setTitle) && this.setTo) {
+			const selectedAria = ALLOWED_SELECTED_ARIA_ATTR.includes(this.selectedAria) ? this.selectedAria : "aria-checked";
+			if(this.isSelected()) {
+				$tw.utils.pushTop(classes, this.selectedClass.split(" "));
+				domNode.setAttribute(selectedAria, "true");
+			} else {
+				domNode.setAttribute(selectedAria, "false");
+			}
 		}
 		if(isPoppedUp) {
 			$tw.utils.pushTop(classes,this.selectedClass.split(" "));
@@ -61,6 +68,10 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 		sourcePrefix: "data-",
 		destPrefix: "data-"
 	});
+	this.assignAttributes(domNode,{
+		sourcePrefix: "aria-",
+		destPrefix: "aria-"
+	});
 	// Assign other attributes
 	if(this.style) {
 		domNode.setAttribute("style",this.style);
@@ -68,10 +79,7 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	if(this.tooltip) {
 		domNode.setAttribute("title",this.tooltip);
 	}
-	if(this["aria-label"]) {
-		domNode.setAttribute("aria-label",this["aria-label"]);
-	}
-	if (this.role) {
+	if(this.role) {
 		domNode.setAttribute("role", this.role);
 	}
 	if(this.popup || this.popupTitle) {
@@ -127,8 +135,8 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	}
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*
@@ -143,7 +151,7 @@ ButtonWidget.prototype.getBoundingClientRect = function() {
 };
 
 ButtonWidget.prototype.isSelected = function() {
-    return this.setTitle ? (this.setField ? this.wiki.getTiddler(this.setTitle).getFieldString(this.setField) === this.setTo :
+	return this.setTitle ? (this.setField ? this.wiki.getTiddler(this.setTitle).getFieldString(this.setField) === this.setTo :
 		(this.setIndex ? this.wiki.extractTiddlerDataItem(this.setTitle,this.setIndex) === this.setTo :
 			this.wiki.getTiddlerText(this.setTitle))) || this.defaultSetValue || this.getVariable("currentTiddler") :
 		this.wiki.getTextReference(this.set,this.defaultSetValue,this.getVariable("currentTiddler")) === this.setTo;
@@ -195,7 +203,7 @@ ButtonWidget.prototype.triggerPopup = function(event) {
 ButtonWidget.prototype.setTiddler = function() {
 	if(this.setTitle) {
 		this.setField ? this.wiki.setText(this.setTitle,this.setField,undefined,this.setTo) :
-				(this.setIndex ? this.wiki.setText(this.setTitle,undefined,this.setIndex,this.setTo) :
+			(this.setIndex ? this.wiki.setText(this.setTitle,undefined,this.setIndex,this.setTo) :
 				this.wiki.setText(this.setTitle,"text",undefined,this.setTo));
 	} else {
 		this.wiki.setTextReference(this.set,this.setTo,this.getVariable("currentTiddler"));
@@ -215,12 +223,12 @@ ButtonWidget.prototype.execute = function() {
 	this.setTo = this.getAttribute("setTo");
 	this.popup = this.getAttribute("popup");
 	this.hover = this.getAttribute("hover");
-	this["aria-label"] = this.getAttribute("aria-label");
 	this.role = this.getAttribute("role");
 	this.tooltip = this.getAttribute("tooltip");
 	this.style = this.getAttribute("style");
 	this["class"] = this.getAttribute("class","");
 	this.selectedClass = this.getAttribute("selectedClass");
+	this.selectedAria = this.getAttribute("selectedAria");
 	this.defaultSetValue = this.getAttribute("default","");
 	this.buttonTag = this.getAttribute("tag");
 	this.dragTiddler = this.getAttribute("dragTiddler");
@@ -271,6 +279,10 @@ ButtonWidget.prototype.refresh = function(changedTiddlers) {
 			sourcePrefix: "data-",
 			destPrefix: "data-"
 		});
+		this.assignAttributes(this.domNodes[0],{
+			sourcePrefix: "aria-",
+			destPrefix: "aria-"
+		});
 	}
 	return this.refreshChildren(changedTiddlers);
 };

package/core/modules/widgets/checkbox.js

@@ -64,8 +64,8 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(this.labelDomNode,nextSibling);
-	this.renderChildren(this.spanDomNode,null);
 	this.domNodes.push(this.labelDomNode);
+	this.renderChildren(this.spanDomNode,null);
 };
 
 CheckboxWidget.prototype.getValue = function() {
@@ -248,12 +248,12 @@ CheckboxWidget.prototype.handleChangeEvent = function(event) {
 				listContents[oldPos] = value;
 				hasChanged = true;
 			} else {
-				listContents.splice(oldPos, 1)
+				listContents.splice(oldPos, 1);
 				hasChanged = true;
 			}
 		} else {
 			// both were present: just remove the old one, leave new alone
-			listContents.splice(oldPos, 1)
+			listContents.splice(oldPos, 1);
 			hasChanged = true;
 		}
 		if(this.checkboxListField) {

package/core/modules/widgets/data.js

@@ -158,7 +158,7 @@ DataWidget.prototype.extractCompoundTiddler = function(title) {
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 DataWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes();
+	this.computeAttributes();
 	var newPayload = this.computeDataTiddlerValues();
 	if(hasPayloadChanged(this.dataPayload,newPayload)) {
 		this.dataPayload = newPayload;

package/core/modules/widgets/diff-text.js

@@ -9,8 +9,8 @@ Widget to display a diff between two texts
 
 "use strict";
 
-var Widget = require("$:/core/modules/widgets/widget.js").widget,
-	dmp = require("$:/core/modules/utils/diff-match-patch/diff_match_patch.js");
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+const dmp = require("$:/core/modules/utils/diff-match-patch/diff_match_patch.js");
 
 var DiffTextWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
@@ -34,25 +34,33 @@ DiffTextWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
-	// Create the diff
-	var dmpObject = new dmp.diff_match_patch(),
-		diffs = dmpObject.diff_main(this.getAttribute("source",""),this.getAttribute("dest",""));
+	// Create the diff object
+	const editCost = $tw.utils.parseNumber(this.getAttribute("editcost","4"));
+	const mode = this.getAttribute("mode") || "chars";
+	let diffs;
+	if(mode === "lines" || mode === "words") {
+		diffs = diffLineWordMode(this.getAttribute("source",""),this.getAttribute("dest",""),mode,editCost);
+	} else {
+		diffs = dmp.diffMain(this.getAttribute("source",""),this.getAttribute("dest",""),{diffEditCost: editCost});
+	}
 	// Apply required cleanup
 	switch(this.getAttribute("cleanup","semantic")) {
 		case "none":
 			// No cleanup
 			break;
 		case "efficiency":
-			dmpObject.diff_cleanupEfficiency(diffs);
+			dmp.diffCleanupEfficiency(diffs, {diffEditCost: editCost});
 			break;
 		default: // case "semantic"
-			dmpObject.diff_cleanupSemantic(diffs);
+			dmp.diffCleanupSemantic(diffs);
 			break;
 	}
 	// Create the elements
 	var domContainer = this.document.createElement("div"), 
 		domDiff = this.createDiffDom(diffs);
 	parent.insertBefore(domContainer,nextSibling);
+	// Save our container
+	this.domNodes.push(domContainer);
 	// Set variables
 	this.setVariable("diff-count",diffs.reduce(function(acc,diff) {
 		if(diff[0] !== dmp.DIFF_EQUAL) {
@@ -64,8 +72,6 @@ DiffTextWidget.prototype.render = function(parent,nextSibling) {
 	this.renderChildren(domContainer,null);
 	// Render the diff
 	domContainer.appendChild(domDiff);
-	// Save our container
-	this.domNodes.push(domContainer);
 };
 
 /*
@@ -132,7 +138,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 DiffTextWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.source || changedAttributes.dest || changedAttributes.cleanup) {
+	if(changedAttributes.source || changedAttributes.dest || changedAttributes.cleanup || changedAttributes.mode || changedAttributes.editcost) {
 		this.refreshSelf();
 		return true;
 	} else {
@@ -140,4 +146,15 @@ DiffTextWidget.prototype.refresh = function(changedTiddlers) {
 	}
 };
 
+// This function is adapted from https://github.com/google/diff-match-patch/wiki/Line-or-Word-Diffs
+function diffLineWordMode(text1,text2,mode,editCost) {
+	var a = $tw.utils.diffPartsToChars(text1,text2,mode);
+	var lineText1 = a.chars1;
+	var lineText2 = a.chars2;
+	var lineArray = a.lineArray;
+	var diffs = dmp.diffMain(lineText1,lineText2,{diffEditCost: editCost});
+	dmp.diffCharsToLines(diffs,lineArray);
+	return diffs;
+}
+
 exports["diff-text"] = DiffTextWidget;

package/core/modules/widgets/draggable.js

@@ -56,6 +56,7 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 	});
 	// Insert the node into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
 	this.renderChildren(domNode,null);
 	// Add event handlers
 	if(this.dragEnable) {
@@ -70,7 +71,6 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 			selector: self.dragHandleSelector
 		});
 	}
-	this.domNodes.push(domNode);
 };
 
 /*
@@ -103,8 +103,8 @@ DraggableWidget.prototype.updateDomNodeClasses = function() {
 	});
 	//Add new classes from updated class attribute.
 	$tw.utils.pushTop(domNodeClasses,this.draggableClasses);
-	this.domNodes[0].setAttribute("class",domNodeClasses.join(" "))
-}
+	this.domNodes[0].setAttribute("class",domNodeClasses.join(" "));
+};
 
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering

package/core/modules/widgets/droppable.js

@@ -24,8 +24,7 @@ DroppableWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 DroppableWidget.prototype.render = function(parent,nextSibling) {
-	var self = this,
-		tag = this.parseTreeNode.isBlock ? "div" : "span",
+	var tag = this.parseTreeNode.isBlock ? "div" : "span",
 		domNode;
 	// Remember parent
 	this.parentDomNode = parent;
@@ -57,8 +56,8 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
 	}
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 	// Stack of outstanding enter/leave events
 	this.currentlyEntered = [];
 };
@@ -177,7 +176,7 @@ DroppableWidget.prototype.execute = function() {
 DroppableWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-droppable");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*

package/core/modules/widgets/dropzone.js

@@ -26,7 +26,6 @@ DropZoneWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 DropZoneWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	// Remember parent
 	this.parentDomNode = parent;
 	// Compute attributes and execute state
@@ -215,7 +214,7 @@ DropZoneWidget.prototype.handleDropEvent  = function(event) {
 						if(tiddlerFields && tiddlerFields.length) {
 							readFileCallback(tiddlerFields);
 						}
-					})
+					});
 				}
 			}
 		} else {
@@ -231,30 +230,30 @@ DropZoneWidget.prototype.handleDropEvent  = function(event) {
 DropZoneWidget.prototype.handlePasteEvent  = function(event) {
 	var self = this;
 	var	readFileCallback = function(tiddlerFieldsArray) {
-			self.readFileCallback(tiddlerFieldsArray);
-		};
+		self.readFileCallback(tiddlerFieldsArray);
+	};
 	var getItem = function(type) {
-			type = type || "text/plain";
-			return function(str) {
-				// Use the deserializer specified if any
-				if(self.dropzoneDeserializer) {
-					tiddlerFields = self.wiki.deserializeTiddlers(null,str,{title: self.wiki.generateNewTitle("Untitled " + type)},{deserializer:self.dropzoneDeserializer});
-					if(tiddlerFields && tiddlerFields.length) {
-						readFileCallback(tiddlerFields);
-					}
-				} else {
-					tiddlerFields = {
-						title: self.wiki.generateNewTitle("Untitled " + type),
-						text: str,
-						type: type
-					};
-					if($tw.log.IMPORT) {
-						console.log("Importing string '" + str + "', type: '" + type + "'");
-					}
-					readFileCallback([tiddlerFields]);
+		type = type || "text/plain";
+		return function(str) {
+			// Use the deserializer specified if any
+			if(self.dropzoneDeserializer) {
+				tiddlerFields = self.wiki.deserializeTiddlers(null,str,{title: self.wiki.generateNewTitle("Untitled " + type)},{deserializer:self.dropzoneDeserializer});
+				if(tiddlerFields && tiddlerFields.length) {
+					readFileCallback(tiddlerFields);
+				}
+			} else {
+				tiddlerFields = {
+					title: self.wiki.generateNewTitle("Untitled " + type),
+					text: str,
+					type: type
+				};
+				if($tw.log.IMPORT) {
+					console.log("Importing string '" + str + "', type: '" + type + "'");
 				}
+				readFileCallback([tiddlerFields]);
 			}
 		};
+	};
 	// Let the browser handle it if we're in a textarea or input box
 	if(["TEXTAREA","INPUT"].indexOf(event.target.tagName) == -1 && !event.target.isContentEditable && !event.twEditor) {
 		var self = this,

package/core/modules/widgets/edit-binary.js

@@ -27,7 +27,6 @@ EditBinaryWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 EditBinaryWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	// Save the parent dom node
 	this.parentDomNode = parent;
 	// Compute our attributes
@@ -66,7 +65,7 @@ EditBinaryWidget.prototype.execute = function() {
 			download: {type: "indirect", textReference: "!!draft.title"}
 		},
 		children: [{
-		type: "transclude",
+			type: "transclude",
 			attributes: {
 				tiddler: {type: "string", value: EXPORT_BUTTON_IMAGE}
 			}
@@ -87,7 +86,7 @@ EditBinaryWidget.prototype.execute = function() {
 			class: {type: "string", value: "tc-binary-warning"}
 		},
 		children: [warn, link]
-	}
+	};
 	// Construct the child widgets
 	this.makeChildWidgets([element]);
 };

package/core/modules/widgets/edit-bitmap.js

@@ -34,7 +34,6 @@ EditBitmapWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 EditBitmapWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	// Initialise the editor operations if they've not been done already
 	if(!this.editorOperations) {
 		EditBitmapWidget.prototype.editorOperations = {};

package/core/modules/widgets/element.js

@@ -74,9 +74,11 @@ ElementWidget.prototype.render = function(parent,nextSibling) {
 	// Create the DOM node and render children
 	var domNode = this.document.createElementNS(this.namespace,this.tag);
 	this.assignAttributes(domNode,{excludeEventAttributes: true});
+	// Allow hooks to manipulate the DOM node. Eg: Add debug info
+	$tw.hooks.invokeHook("th-dom-rendering-element", domNode, this);
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*